「青训营 X 码上掘金」主题创作活动 | 我的名片

当青训营遇上码上掘金

创作目的

在很多优秀的个人博客博主的主页，都会附上一张制作精美的名片，前端的制作也伴随着展示的过程，一张好的名片能带来相当不错的第一印象。可见对程序员而言，名片是非常重要的。

由于时间仓促以及本人为初学者，这次只制作了一个非常简单的个人名片，在这里与大家进行一次简单的分享，同时我也看了不少大佬的帖子，希望之后能够加以改进并不断完善名片。

创作思路

首先决定将主界面划分为Home、Repositories、Projects、Introduction四个模块。其中Home为主界面，用于展示自己的名片以及联系方式；Repositories为代码仓库，可以跳转至名片作者的代码仓库主页；Projects为项目，可以进一步了解名片作者的项目经历与开发历程；Introduction则是一个简略版的简历，简单地介绍了自己的个人能力以及详细信息。

代码实现

伪元素实现颜色渐变

这里使用了CSS中渐变的语法，具体语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

最后可以生成这样的渐变颜色。 为作进一步优化，还可以改变方向，从不同的方向实现名片的颜色渐变，这里我们再切换为黑白，并使其斜向渐变进行演示。

background: linear-gradient(to bottom right, #000 , #fff);

文字部分

文字部分我完成的较为简单，选用h1标题来写名字、h3来写下个人简介，文字间距用letter-spacing定义0.1em距离，可取消h1标签父类元素的字体大小以及粗细来重新定义。用行内元素来填写电话信息。

    
    <div class="myname">
                <h1>XX</h1>
                <h3>一名萌新</h3>
            </div>
            <hr>
            <div class="phone">
                <i>Phone Number</i>
                <span>: XXXXXXXXXXX</span>
            </div>

最后附上完整的代码和展示效果。

个人总结

本次名片完成的较为简陋，但也让我学到了一些前端基础知识，在完成青训营的前端课程之后，我希望能够用所学知识对自己的个人名片进行升级。