github建立简历在github上写我的简历——先弄个主页

时间 2019-12-06

标签 github 建立简历我的主页栏目 Git 繁體版

原文原文链接

在github上写我的简历——先弄个主页

原由

不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感，不吐槽了反正就一句话，按照它提供的格式我无法儿写简历，并且面试的时候总会被问道有没有本身做品，哥们儿每天上班，下班也不勤奋，真没什么我的做品，总不能把公司里作的东西拿出来看吧。。。css

因而乎我想写一份符合本身要求的简历，本身又在作前段开发工做，为何不写一个在线简历呢，这样写什么是我说了算，并且能写一些小效果，用来展现一下本身所学，也算半个我的做品吧。设想师美好的，可是html

没有我的网站

想写个web版简历没问题，可是得放在网上让人看到才行，总不能每次都掏出U盘要求人家插上，右手食指双击index.html文件来看吧。。。html5

我的主页师须要的，可是想搭建一个我的主页须要买个域名，买个VPS（或者空间）来存放代码，但资金压力这对我这种资深屌丝而言实在是不小，并且我也不须要多大存储空间，支持SQLServer、PHP神码的，我就是想放几个html页面。css3

平时工做都是使用微软的一套解决方案，ASP.NET、SQLServer，没有接触太多流行的非微软平台技术，在网上一艘，发现实在是太落后了，当前如日中天的代码托管平台github能够完美解决的个人需求，并且是免费的。简单介绍一下，但愿对和我同样处于刀耕火种的兄弟们能够大步跨入新时代git

一步步在github上搭建我的主页

首先固然是访问github主页注册一个帐号，这个很少说了，建立完帐号登陆成功后，找到 “New respository” 按钮，添加一个repositorygithub

而后填写一些我的主页信息web

Repository name的格式为你的用户名＋github,com(不要学我用test，确定不行)，这样之后你就能够经过你的用户名.github.io（和填写的不彻底同样）来访问主页了。还能够就写主页的介绍，这个在自动生成的网页中会体现出来，下面的东西好理解，完过后点击“Create Repository” 按钮面试

这样一个Repository就建立好了，点击设置按钮，把它转化为我的主页浏览器

点击“Automatic Page Generator” 按钮，能够看到咱们以前填写的一些内容框架

没问题后点击“Continue to Layouts”按钮为主页选个主题

选好以后点击“Publish”按钮，回到主界面，等1～10分钟后，就能够经过“你的用户名＋github.io”访问咱们的主页了，这时候咱们还能够添加本身的页面或者修改主页

前篇博客分享了一下本身初入github的过程，傻瓜式一步步搭建好主页后，终于该作正事儿了——写简历。在脑壳中构思了不少版本，最后终于决定，先写一个最传统的版本，因而我在箱子中翻出我word版本的简历，对照写一个html版本的。

word版本看起来是这个样子的

html版看起来是这样子的

原本觉得很简单的事情，没想到折腾很久，反反复复修改，终于弄出一个满意的版本,有兴趣的同窗能够到个人github上看看

技术点儿分析

源码

View Code

看起来平淡无奇，实际确实没什么高深的，都是最简单的html与css。。。不过最开始我图快全都用简单的table布局实现，后来在不断修改中，也用了一些心思，学到了一些新知识。为了用一些html5和CSS3的东西，只好舍弃了浏览器兼容性，目前我只在最新版本Chrome和Firefox上测试过，并且因为家里没有Windows环境，Mac上滚动条表现形式和Windows上不太同样，因此。。。。

页面结构

上面提到最开始我除了主框架所有使用table布局，后来改成html5版本，舍弃了大部分table(并非不用table了，table在数据展现方面仍是颇有优点的)，页面布局其实是这样的了

 1 <!DOCTYPE html>
 2 <html>
 3 <head></head>
 4 <body>
 5     <header></header>
 6     <article>
 7         <section></section>
 8         <section></section>
 9         <section></section>
10         <section></section>
11         <aside></aside>
12     </article>
13 </body>
14 </html>

reset

细心的朋友能够注意到页面引用了一个reset.css，这是根据雅虎的reset.css简单改动的一个版本，本身之前盲目的写了不少，不但凌乱不堪，并且大部分无用，会致使浏览器repaint，下降页面渲染效率

View Code

关于使用section、aside等标签不是装逼的辩解

其实最开始我也很看不惯html5的section、nav、aside等标签，明明和div同样，以为使用这个纯属装逼，后来接触到一些关于html结构化和语义化的知识后才认识到本身的浅薄，使用了这些标签后可以使计算机更容易理解网页内容，这些标签都是有语义的，好比nav标签里放的是页面导航，footer放的是页面的copyright等，搜索引擎等机器能够更针对性的查找、理解其须要的内容，关于这部分知识有兴趣能够看看web语义化

一直被忽略的::before/::after伪元素

每条前面的对勾之前我会直接逐个写到html中，看了一些网站源码才发现::berore/::after的妙处

li::before{
      content:url(./images/icons/yes.png);    
      padding-right:6px;
      vertical-align: middle;
    }

简简单单这样就搞定了，content能够制定内容，文字、图片均可以

关于::与:也就是伪元素与伪类区别

简单讲伪元素是为了标示某些元素如first-line等，而伪类是为了区别一个元素的不一样类别如:hover,:visited,越说越不明白，看看这个吧

使用disply:box, box-flex 属性布局

看到这种两栏儿布局，你们第一反应是什么，我反正上来想到的是table，而后是float，而后是display:inline-block,这几种布局的局限性很明显，再也不赘述，看看CSS3中的解决方案

<section style="display:box">
    <section style="box-flex:2;">lefft</section>
    <section style="box-flex:3;">right</section>
</section>

display:box属性赋予了咱们划分容器的能力，父容器有了display:box（真正使用须要添加浏览器前缀）属性后，其子元素div或section就再也不向标准block元素那样独占一行了，几个div能够共处一行，每一个div占多少呢？咱们可使用width属性为期赋予绝对宽度，也可使用box-flex（使用须要浏览器前缀）属性按比例划分，上面例子中left section占父容器宽度的2/(2+3)也就是2/5，右边是3/5。关于相关属性box-ordinal-group, box-orient, box-pack, box-align有兴趣同窗能够去网上查查资料

标题怎么凸出来

这个简单的效果让我折腾了一个小时，悲剧的是text－shadow我很早就使用过，用法能够看看CSS3的文字阴影—text-shadow，我不明白的是怎么弄就能让文字凸出来或者凹下去，每次就是瞎试，今天小研究了一下貌似明白了什么。

首先是文字颜色与背景颜色的统一，两个颜色相似才能方便作出这种效果，而后是阴影的颜色用反色，白色文字就用黑色阴影，至于凹凸就要看位移的正负了。个人这个的css是这样的

color:#e8e8e8; /*页面背景也是这个颜色*/
text-shadow: 2px 2px 2px #333, 0px 0px 5px #666;/*移位两次，正数就会凸出来，阴影颜色接近反色*/
font-size: 30px;
font-weight:bold;
text-align:right;
margin-top:15px;

回到顶部图标

因为使用截屏工具，那个图标不明显，其实页面滚动条再也不顶部的时候，页面上有个如今网站很常见的回到顶部图标的

难住个人倒不是这个图标的显示控制，这个很简单，把元素设position设为fixed，而后根据页面滚动条位置决定是否出现，Mac下滚动条是能够为负数的，这块儿得处理一下。

1 <aside id="wrap" style="position:fixed; bottom:100px; right:100px;display:none; opacity:0.5;">
2       <section style="background-image:url(images/icons/top.png); width:32px;height:32px;"></section>
3       <section class="reflect"></section>
4       <section class="shadow"></section>
5     </aside>

 1 $(function(){
 2       $('#wrap').on('click', function(event) {
 3         var obj=document.body.scrollTop>0? document.body:document.documentElement;
 4         $(obj).animate({"scrollTop":0}, 1000);
 5         $(this).animate({"opacity":0.5}, 1000);
 6       }).on('mouseover', function(event) {
 7         $(this).css('opacity',1);
 8       }).on('mouseout',function(event) {
 9         $(this).css('opacity',0.5);
10       });
11     });
12     $(document).scroll(function(event) {
13       var goTop=$('#wrap');
14       var scrollTop=document.body.scrollTop || document.documentElement.scrollTop || 0;
15       if(scrollTop>0){
16         if(goTop.css('display')=='none'){
17           $('#wrap').fadeIn(500);
18         } 
19       }else{
20         if(goTop.css('display')!='none'){
21           $('#wrap').fadeOut(500);
22         }
23       }
24     });

难住个人是倒影部分，关于这个倒影纯属那个啥了，原本处理很简单，其实就是我源代码中保留的部分，页面放一个aside加上style完事儿

 1 #goTop{
 2       position:fixed;
 3       right:100px; 
 4       bottom:100px; 
 5       background-image:url(images/icons/top.png);
 6       width:32px; 
 7       height:32px; 
 8       -webkit-box-reflect: below 0px -webkit-gradient(linear, center top, center bottom, from(transparent),color-stop(0.2, transparent), to(white));  
 9       opacity: 0.5;
10     }

效果和上面截图相似，悲剧的是只有Chrome支持，最起码的节操要求我至少把Firefox搞定，反复尝试终于找到了解决办法，具体说来是这样的

1  <aside id="wrap" style="position:fixed; bottom:100px; right:100px;display:none; opacity:0.5;">
2       <section style="background-image:url(images/icons/top.png); width:32px;height:32px;"></section>
3       <section class="reflect"></section>
4       <section class="shadow"></section>
5     </aside>

id为wrap的aside就是整个回到顶部部分，第一个section是上面那个没有倒影的图片，class为reflect的section是倒影图片

 1  .reflect{
 2       background-image:url(images/icons/top.png);
 3       width:32px; 
 4       height:32px; 
 5       -webkit-transform: scaleY(-1); 
 6       -moz-transform: scaleY(-1); 
 7       -ms-transform: scaleY(-1); 
 8       transform: scaleY(-1); 
 9       filter:alpha(opacity='80'); 
10       opacity: 0.8;
11     }

其实就是插入一样图片，而后使 transform: scaleY(-1); 倒置图片，加上必定的透明，但是这还没完，这样的效果是这样的

对比一下预期效果

却是有倒影了，可是倒影没有消失最后，好像有个向下的按钮似的。。。因此加入了class为shadow的section，就是为了让倒影逐渐消失

 1 .shadow{
 2       position: relative;
 3       top:-32px;
 4       left:0px;
 5       height:32px;
 6       width:32px;
 7       background-image: -moz-linear-gradient(center bottom, rgb(227,227,227) 30%, rgba(255,255,255,0) 100%); 
 8       background-image: -webkit-gradient(linear, center bottom, center top, color-stop(0.3, rgb(227,227,227)), color-stop(0.7, rgba(255,255,255,0))); 
 9       filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=#e8e8e8, EndColorStr=#ffffff); 
10     }

把section上移32px使其处于reflect正上方，而后对这层作一个透明渐变，使reflect处于相应位置的图像部分也透明渐变，终于达到预期效果。关于-moz-linear-gradient/-webkit-gradient的使用能够看看理解CSS3线性渐变

最后

原本就是本着玩玩儿的目的写这个在线简历的，没想到收获比我预期的大得多，熟悉了不少本身只知其一;不知其二的东西，并且制做过程当中产生了不少新想法，建议有想法的同窗们也试试，即便不想换工做，制做过程当中会有想不到的收获。

接下来会陆续作一些相似的，不一样样式的简历，可能要反复修改，应该进度会比较慢，主要是锻炼一下JavaScript, html5, CSS3技巧，能够在个人github上看看个人进度，尽可能尽快push 更新。

PS.虽然如今不急着换工做，但朋友看了个人简历内容后都以为写的弱爆了，都是空谈，看不出具体会什么，但愿热心的朋友也能给出这方面的修改意见

github建立简历 在github上写我的简历——先弄个主页