介绍一下，这是我的个人网站

Feb 15 2018 DELIBERATE PRATICE

PERSONAL WEBSITE 个人网站

Tool HTML CSS JQUERY

作为一名软件工程专业的学生，没有一个个人网站好像说不过去啊，所以我花了四天半的时间，除了帮家里干点活之外，我都在电脑前学习+写代码，初步学习了一些前端知识（学校里我学的是后台开发），捣腾出了一个个人网站。

× 风格设定 ×

作为一个有想法、有个性、有原则的当代大学生，并秉承着逼格怎么高怎么来与国际接轨的理念，最终将网站风格确定为‘极简主义’风格。

网站的排版从简，让浏览网站的观看者可以第一时间关注到网站内容，虽然没什么看头；

网站字体从简，以简洁现代的Raleway字体为主，个性突出的Adele字体和Realist风格的Helvetica的字体为辅；

网站配色从简，以经典的黑白灰构成网站的颜色组成。

×模块设计×

作为一个极简风格的网站，同样不希望网站的模块太过复杂，导致浏览者找不到重点。这里我设定了5大模块，分别是HOME、GALLERY、PROJECTS、CV、CONTACT.

HOME一个简单的背景图片，并给出一段简单的自我介绍，让浏览者迅速知道‘我是谁’

GALLERY展示我的一小部分摄影作品，如果想查看更多，我在最后也没有给出链接

PROJECTS这个模块是关键模块，用于展示我个人大大小小的项目，涉及编程及艺术。

CV这里展示了一份简单的个人简历，包含工作经历、教育情况、个人技能，这可以让网页浏览者可以进一步了解我的情况

CONTACT一些联系方式，如果有朋友对我有意思，可以通过上面的联系方式跟我say hello~

×编写代码×

我一直学习的都是后端开发，对前端的知识可以这么概括：知道html的结构，然后就没有然后了。

这次编写个人网站，我主要是当成学习前端知识的一个练习，期间边查阅官方文档边写Demo，然后运用到个人网站上面。

我从2月10日的中午开始写主页内容，磕磕绊绊，花了一个下午才写完。

第二天写gallery模块的时候，我想偷个懒，花了老半天实现了不论我上传的照片是什么比例的都可以以正方形展示出来的效果。这样我就可以只上传一张照片，缩略图也使用这张，点击放大的也是用这张，但这样的弊端也是显而易见的(后面会提到)。

第三天写projects模块，需要在网页中插入视频。我首先想到的是使用外链，比如引入腾讯视频，但尝试好久都没有解决自适应高度的问题，所以决定使用html5的标签，虽然用起来很简单，但出来的效果不理想，网页加载视频的速度太太太慢了！！然后第四天决定用回标签，花了一些时间解决了自适应高度的问题。接下来的两个模块内容也很简单，所以很快就写完了。然后就把项目打包部署到了服务器上测试，结果网页加载的速度超级无敌慢，问题就是出现在图片资源上面。

第五天的时候，针对这个问题进行优化，经过好几轮测试，最终网页的加载速度还算可以接受吧。等到晚上的时间，我把响应式的布局写完，最终再测试了一次，网站就悄咪咪地上线了。

因为没有用框架，自己目前能力也有限，所以移动端的布局没有电脑端的好看，下次学了框架再修改吧。

× 遇到的问题 ×

通过编写这个网站，我感觉我的收获还是蛮大的，学习到很多如果不实操就永远不会知道的知识。

网页的图片大小直接影响网页的加载速度。我在朋友圈发摄影作品的时候，照片的长边都是2000px的，这样经过压缩之后图片还是高清的。然后在网页上我也插入了长边为2000px的图片，一张图片的大小就1~2M，十多张放一块加载就非常卡了。

后来我在Lightroom处理两份图片，一份是剪裁成正方形的缩略图，28张图片压缩导出后才2M左右，这样网页可以在2秒左右加载完。另一份为大图，用于浏览者点击缩略图放大呈现的效果。虽然我这样做好像挺麻烦的，但是我可以开发一个后台程序，将这些繁琐的工作都交给后台处理，这个目标就过阵子去实现吧

初步学习了前端知识。我发现网页设计和ps做图片差不多，现在对html+css有了初步的了解，上手只是时间的问题。

响应式布局。现在的大部分网站都是响应式布局，这样不论在什么设备上都可以得到一个不错排版效果。这次我没有使用框架，响应式做的就比较粗糙了，所以接下来还是要学习以下前端框架的。

对‘用户体验’和‘性能优化’有了更深刻的理解。相信有了这次实践，在以后的项目中我也会多去考虑这些问题的。

最后，附上我的个人网站网址

zhonglinhao.top

有空来看看呗