当青训营遇上码上掘金。
寒假期间参加了青训营，从一开始的HTML到JS再到最近的Next.js,
学到了挺多东西。但是总不能光说不练，正好趁着这次「青训营 X 码上掘金」活动练练手，
下午无意间翻到了自己Github主页的介绍，刚刚好和第一个主题：“制作个人名片”有相似的地方。
主题介绍：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
制作卡片的思路：
银行卡的左上角会标注XXXX银行，所以，为了突出这是一张ID卡，在左上角标注了IDCARD的字眼。
身份证中人物头像是采用方形照片格式，这里使用了在青训营未开始前学到的圆型图片设置方法，虽然似乎人人都会？这样做是为了突出人物(我)的呆，所以这里使用的身份信息也是我的掘金头像信息。
既然是一张ID卡，那么就需要有ID信息，同时也像大部分卡片那样标注了创建日期。
在右侧部分，是人物的一些基本信息，这应该是名片中必须要有的部分，包括姓名，昵称，技能和活动时间。
关于技能和活动时间： 既然是作为一个程序员的身份卡片，那么一定要有技能这一项来告诉他人自己会什么。同时告诉他人自己的活动时间，帮助他人更好的了解自己，同时也更容易找到志同道合的朋友。
最后底部是一个能力条，是自我评估的的表现形式。主要目的是让他人“一眼看穿”我的能力。由于这是一个没有标准的估量。能够大大提升他人对你的好奇心，更容易与你交朋友。
演示
关于身份信息： 除了姓名,昵称,ID,创建时间，其他都是“真实”的信息。
代码实现：
HTML部分
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="IdCrad">
<div class="card">
<h3>IDCARD</h3>
<div class="IdCard-IdInfo">
<div>
<img src=""/>
<p>...</p>
...
</div>
<div class="IdCard-Info">
<p>....</p>
....
</div>
</div>
<div>
<div class="g-progress">当前能力值</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS部分
/* ... */
.IdCard-IdInfo{
display: grid;
grid-template-columns: repeat(2,100%);
flex: 1;
margin-left: 13px;
width: 50%;
}
img {
margin-top: 20px;
width: 120px;
height: 120px;
border-radius: 100%;
}
.g-progress {
width: 100%;
height: 25px;
border-radius: 25px;
background: linear-gradient(90deg, #EBC7E6, #645CBB 30%, transparent 0);
text-align: center;
color:tomato;
border: 1px solid #eee;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
/* ... */
代码详情请点开上面的代码片段。
