当青训营遇上码上掘金

引言

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

原因

之所以选择这个主题，名片，是因为名片是向人介绍自己，推销自己的一种方式。用另一个角度看，那就是希望他人能够了解自己，希望自己受到关注。

简而言之，我是一个关种。

关种，是一个网络流行语， 指非常希望得到别人关注的人。

关于名片，我知道，大部分人都不知道我，所以我大可以坦白一些东西。

学习前端很多年了，但其实一直没有全心放进去。一方面是学习所致，一方面是心力所致。临近过年，或者说，笔者现在就是在除夕夜。回想过去一年，无所进步，遥记去年此时，无有不同。所以，决心沉下心去做一些事情。初入青训营，再从头学一遍前端。跟着伙伴一起完成大项目。每天阅读打卡。笔记打卡。都是不错的收获。至少，我可以说，近段时间可以说，有收获了。此时的我是去年的我所不能比的。

本次《我的名片》使用了码上掘金平台书写代码。总体来讲，码上掘金平台，使用起来也是非常顺手的。也没有什么遇到BUG的地方。

我的名片选了一张波奇酱的图片。

波奇

后藤一里是《孤独摇滚》热播动画的二次元女主。她天生性格孤僻，有严重的沟通障碍。但她努力克服自己的沟通障碍，让自己也能闪耀于舞台之上。我也非常想凭一己之长，闪耀于舞台之上。我也从小有较为严重的沟通障碍。见面从来不打招呼是我。每天低头走路是我。收到夸奖不知怎么回复是我。大门不出二门不迈也是我。上了公交车，连下车也要作一番非常复杂的心理斗争。生怕旁边的人都知道我要在这下车。然后，“哦，他这是要去XXX”

技术

本次页面采用tailwindcss编写。0JS。tailwindcss可以说是非常方便的工具。只需要写一些class名就能获得快速高效的开发体验。调试起来也很方便。更重要的是，可扩展性非常强。对CSS样式的组织性非常强，移植到另一个平台完全是0成本的。

除此之外，我们使用码上掘金的VUE3模板。当然，使用默认模板也是没问题的。

实现过程

我们这里，首先铺满一张背景图片。然后让主要内容垂直水平都居中。

  <div class="body">
    <div class="flex items-center justify-center h-full ">
    </div>
  </div>

这里，我们一定需要将body高度设置成100vh。这样它才能铺满屏幕。

  .body {
    height: 100vh;
    background-image: url(https://cdn.jsdelivr.net/gh/MarleneJiang/ImgHosting/img/202109041905856.png);
    background-attachment: fixed;
    background-size: cover;
  }

接着，我们需要一个flex布局，使得左边是信息，右边是图片。父元素设置flex。子元素各自设置w-1/2，即宽度对分一半。

<div class="flex lg:max-w-4xl max-w-3xl lg:flex-grow ">
    <div class="lg:bg-white lg:w-1/2 lg:p-8 lg:py-16 lg:px-12 space-y-7 marlene-rounded-l-lg shadow-sm w-max p-8 marlene-bg-glass-ex">
    </div>
    <div class="lg:w-1/2 marlene-bg-glass rounded-r-lg invisible lg:visible w-0">
    </div>
</div>

我们给右边的区域设置一个玻璃拟态。

<div class="lg:w-1/2 marlene-bg-glass rounded-r-lg invisible lg:visible w-0">
</div>

.marlene-bg-glass {
background: linear-gradient(117.76deg,
    rgba(255, 255, 255, 0.7) -7.21%,
    rgba(255, 255, 255, 0.5) 118.08%);
backdrop-filter: blur(8px);
}

左边按钮背景设置一个渐变。

.marlene-btn {
font-family: 'iconfont';
background-image: linear-gradient(135deg, #ffa7c1 0%, #f56692 100%);
}

我们利用iconfont提供的字体cdn设置全局字体。

  @font-face {
    font-family: "iconfont";
    font-weight: 400;
    src: url("//at.alicdn.com/wf/webfont/E7kkHRQUiGGN/j4lWr2ZPRZ3_EfQA3_mtt.woff2") format("woff2"),
      url("//at.alicdn.com/wf/webfont/E7kkHRQUiGGN/OU2eyjLQ2wh9YnIrDzn4k.woff") format("woff");
    font-display: swap;
  }

然后就是填充内容，这里不再赘述。
一个重要的内容，就是margin设置负值，使得透明图片能够透出玻璃拟态的边框，达到一种透出屏幕的立体感、层次感、高级感。

<div class="-mt-10 w-10/12 ml-8">
    <img src="https://pan.marlene.top/d/share/104592280_p0.png" alt="" >
</div>

接下来是一些自适应的设置，让网页能够适应不同的尺寸。

  @media (min-width: 1024px) {
    .marlene-rounded-l-lg {
      border-radius: 0.5rem 0rem 0rem 0.5rem;
    }

    .marlene-rounded-r-lg {
      border-radius: 0rem 0.5rem 0.5rem 0rem;
    }
  }

  @media (max-width: 1024px) {
    .marlene-bg-glass-ex {
      background: linear-gradient(117.76deg,
          rgba(255, 255, 255, 0.7) -7.21%,
          rgba(255, 255, 255, 0.5) 118.08%);
      backdrop-filter: blur(8px);
    }
  }

剩余未讲内容，请看源码！

jcode

最后

最后希望新的一年能够更加进步。

作者： Marlene