当青训营遇上码上掘金——我的名片
当青训营遇上码上掘金~我在青训营的活动中使用码上掘金平台开发了我的“个人名片”，本文我将粗略地讲解我的动机和我的思路。
动机
我一直想要搭建一个自己的网站，可总是因为各种原因抽不出时间，迟迟没有动工。 最近我报名了字节跳动青训营，并成功进入了前端进阶班。班级发布了活动“青训营X码上掘金”,活动的主题一就是使用代码做自我介绍。这激发了我的创作欲望——制作个人名片不正是个人主页的开始吗？我便开始了我的创作。
思路
名片的功能是展示自己的信息，并给对方留下深刻印象。
首先是展示信息，我使用了3个div分别介绍自己的个人信息，兴趣爱好和GitHub主页；
为了给浏览者留下深刻的印象，那么整体布局一定要舒适美观，文字也要温和喜庆。
我个人很喜欢各种卡片，所以我将个人信息、兴趣爱好和GitHub主页做成了三张卡片，每张卡片内部由一侧的图片和另一侧的文字组成；
关于文字，我选择喜迎新年——每张卡片都有关于2023年的美好期望，希望一切顺利！
<div class="blog-slider__item swiper-slide">
<!-- 图片卡片 -->
<div class="blog-slider__img">
<img src="https://great.wzznft.com/i/2023/01/15/3n0adc.png" alt="头像">
</div>
<!-- 文字卡片 -->
<div class="blog-slider__content">
<span class="blog-slider__code">2023 码兔无量</span>
<div class="blog-slider__title">请叫我Hlintony</div>
<div class="blog-slider__text">来自华南理工大学软件学院<br>目前在前端方向努力扎根</div>
<a href="#" class="blog-slider__button" onclick="swiper.slideNext()">NEXT</a>
</div>
</div>
另外为了使我的名片更加酷炫，我引入了swiper.js结合swiper.css用来实现卡片之间的平滑切换效果。
引入后的效果图是这样的：
我还实现了卡片布局随着浏览器尺寸变化而变化的功能，当浏览器尺寸和比例不断改变，图片卡片和文字卡片就会寻找更加和谐的布局以获得更好的视觉效果：
同时卡片之间还可以丝滑地切换，演示地址（码上掘金）如下：（请滑动滚动条以完整体验）
不得不说，大神写的swiper就是牛，无论是布局还是动画，都让人眼前一亮，更值得我深入学习。
以上就是我的个人名片的创作动机和基本思路，希望能对大家有所启发！
