当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

第五届字节跳动青训营开营第二日，使用码上掘金平台开发实现个人名片

程序员的自我介绍通常包含：姓名、简介、个性标签、项目经历、联系方式、社交链接等方面，下面我们就根据这几个部分来实现一个程序员专属的“个人名片”

导航栏

当用户滚动到网页对应位置时，网页应该能“记住”当前位置并保存，因此为其添加锚点

<nav>
	<li><a href="#banner" class="active">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#portfolio">Portfolio</a></li>
	<li><a href="#contact">Contact</a></li>
</nav>

使用 <a></a> 标签实现效果

个性标签

通常，个人名片&介绍的网页中包含一些自定义标签或名人名言，使用 <h1></h1> 标签加入内容即可

<h2 id="sub-title">Graduate, Developer, Sports</h2>

社交链接

该部分最重要的就是图标的定位，一般我们会使用 Font Awesome Icons 图标库，但是国内一些平台的 logo 可能在没有收录，这里推荐阿里巴巴矢量图标库，搜索需要的图标，加入项目，生成在线样式预览调试或下载本地（推荐自主配置 CDN 服务，官方服务仅用于调试）进行调用

引用方式详见官方教程，这里给出示例

<a href="https://juejin.cn/user/1477397158310088"><i class="iconfont icon-juejin" aria-hidden="true"></i></a>

个人简介

这部分比较基础，直接<div></div>和<p></p>实现就可以，例如：

<div class="content">
    <p>I love writing and sharing mistakes and solutions to computer learning. Cheerful personality, willing to communicate with you to learn.</p>
</div>

项目合集

按照每个项目一个固定尺寸图片的思路展开，首先设置 css 样式

.port-wrap {
	text-align: center;
	box-sizing: border-box;
	display: block;
}
.port-item {
	width: 300px;
	height: 270px;
	padding: 4px;
	background: #468499;
	font-weight: bold;
	text-align: center;
	margin: 0 10px 14px 10px;
	display: inline-block;
	border-radius: 2px;
	border: 1px solid;
	transition: border-color 1s, -moz-box-shadow 1s, -webkit-box-shadow 1s, box-shadow 1s;
	position: relative;
}

.port-item:hover {
	border-color: white;
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0px 0px 10px #fff;
}

加入鼠标放置图片逐渐出现的效果（伪类），然后引用并添加每一个项目

<div class="port-wrap">
    <div class="port-item">
        <a href="intro.coder-jason.cn">
            <img src="intro.coder-jason.cn/favicon.png" alt="null" class="opacity">
        </a>
</div>

发送邮件

此处没有调用后端服务，仅使用了前端。通过访问用户的本地客户端实现邮件发送功能，是最简单的一种实现方式

<a class="button" href="mailto:jason.peng.code@gmail.com" title="E-Mail → mailto:jason.peng.code@gmail.com" target="_blank" style="text-decoration: none;color: white;">
    Send
</a>

整体效果