当青训营遇上码上掘金
本次主题创作活动我选择的主题是利用前端技术写个页面来展示 我的名片
选择这个主题完全出于我近期正在独立开发一个博客网站,刚好写完了关于我的介绍的前端代码hhhh~ 众多不足之处希望大佬多多指教
先上个效果图
技术选型
- Semantic UI
名片亮点
- 将鼠标点击微信或者 QQ icon 上后会浮现二维码
亮点实现代码
<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
});
$('.wechat').popup({
popup: $('.wechat-qr'),
on: 'click',
position: 'bottom center'
});
$('.qq').popup({
popup: $('.qq-qr'),
on: 'click',
position: 'bottom center'
});
</script>
名片灵感
- 界面设计 我是把页面分成 三部分(上中下)
上面方便以后集成博客网站的各个功能模块
中间就是相当于正文了
最下面就是可以提供个人的一些信息,也可以提供自己的文章链接 - 整体感觉还是比较倾向简书那种风格的
头像灵感
动画《南方公园》里面的角色都有着自己独特的鲜明风格,而我掘金和博客的头像都不是同一个角色则想表达人就是要有多面的性格,这样才能迸发无限的灵感
《南方公园》经常通过歪曲式的摹仿来讽刺和嘲弄美国文化和社会时事的各个方面,其挑战了许多根深蒂固的观念和禁忌,并因其中的粗口、黑色幽默和超现实幽默而著名。形成一股南方公园文化,并走在娱乐讽刺和政治批评的潮流尖端,通过耸人听闻的“无责任语言暴力”和异想天开的故事情节针砭时弊、奚落权力阶层,四个小男孩也都成了同一个“南方公园镇”里的调皮居民。