当青训营遇上码上掘金，于是乎我写了一个红配绿冒傻气的名片......
什么是名片？
什么是名片啊？想必大家对于名片都有自己的一个模糊的认识，虽然我身为学生还没有进入职场上，没有拥有自己的名片，但是在长大成人的过程中大家必定都有接触过名片。
小时候我喜欢拿着妈妈的包玩儿，偶然一次从包中掏出了一张卡片，上面有妈妈的姓名电话工作地址等基本信息，还有妈妈的职业。当时的我并不是很清楚它的作用是什么。
再大一点，我从电视剧上又看到了这个卡片，一般在两个陌生人的第一次见面中出现，双方交换卡片保证日后还能再联系到彼此小小的一张卡片确有如此重要的功能，这不仅是他人联系你的纽带，更是他人初步了解你的一个台阶。
以上便是我对名片的理解，下面我们上百度搜索一下他的定义。
名片，又称卡片（粤语写作卡（kā）片），中国古代称名刺，是标示姓名及其所属组织、公司单位和联系方法的纸片。名片是新朋友互相认识、自我介绍的最快有效的方法。交换名片是商业交往的第一个标准官式动作。
[baike.baidu.com/item/%E5%90…]
创作路程
初看名片这个主题，我心想这不简单吗，直接码上自己的基本信息不就是一个简单的名片咩，于是我打开软件开始书写自己的名片，不一会儿就完成了我的纯文本名片（第一代）。不过后来我一想，名片上只有文字太简单了，我要加大难度，设计一个有自己风格的名片。
第一代名片如下：
一开始我在某书上搜名片，想要从中获取灵感，不过上面的要么很花哨，要么过于普通，不适合借鉴。就在这时，我忽然想到曾在掘金里阅读的一篇介绍前端工具的帖子，里面有一个网站就可以设计名片呀！说干就干，我立马进入这个网站设计出属于我的名片，想法落实的很快，十几分钟我就把我的第二代名片做出来了。相比上一代来说，第二代的美观不少，内容上也更加合理了，不过使用代码实现更难了，因为多了很多矢量图形。
第二代名片如下：
既然涉及到了这些图标，那就搜搜如何把它们引入到我的HTML里吧，搜了很多教程，但是一个都没成功，有的没有显示，有的只显示一个方框，一次次失败让我开始怀疑自己，好笨。熬了一个晚上什么都没做出来，也许我根本就不应该跨这么大领域来学前端吧。第二天睡了一觉之后，想了想自己不能就这么放弃，什么成果都没有吧。于是我又开始了尝试，这次我找到了引入svg的教程，虽然只是一些圆形三角形矩形这类的简单形状，比不上之前设计的名片上的图形美观，但是对于一个刚经历过挫折的我来说已经够了。说干就干，不一会儿，第三代名片就写好了，整体看似简单实则也很简单。
第三代名片
展示一下吧
- 首先写一个一级标题“My Card”让别人知道这是一个名片（其实这个可有可无）
- 然后引入六个svg圆形，通过调整每个圆的坐标位置使各个圆形分散开来。只有六个纯色的圆未免有些单调，于是我通过改变圆的外框颜色和粗细使这张名片更有设计感（自我认为）。圆的颜色选择的红色和绿色，有种西瓜的清甜感。
- 下面轮到了信息部分，用text把内容写出来，注意每行文字的间距，也是通过调整坐标来实现的。
写完之后总感觉少张照片，于是在右边随便加了张照片，其实不加更好（嘶，不知道为什么掘金上显示不出来）。 这样我的名片就完成了，虽然没达到第二代那种效果，但是外观看起来也还不错，个人还是比较满意的。
整个创作过程对于我来说是非常坎坷的，但是越坎坷越是能从中得到教训，还有对自己本阶段的一个认识，希望自己再接再厉，踏实一点。
