未加星标

How did I create my first personal website?

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

With the little bit of smart work, countless design iterations, a handful of resources, awesome inspirations, 55 git commits, page beautifying illustrations and subtle animations. Finally, my website is presentable. Well, this is just the beginning. In the future, the goal is to achieve near perfection with the overall design and user experience.

Constructive feedback is welcomed and appreciated. Here's the link to view my website - chinmay-joshi.com

Since the beginning, I used GitHub to host my codebase and website. You can check out the code here . According to the Git history, the first commit was on September 6, 2017. That means it took me over 430 days to make it publishable.


How did I create my first personal website?
There are three primary reasons I am writing a blog post - Show off what I have done. Get feedback from awesome developers like you. Reach and connect with like minds. What I fancy about the website? 1. Day and night mode -

The background colour changes according to the time you are visiting the website. If you visit after 7 in the evening, you can see the night mode, and it will be active until 7 in the morning. There's a button to toggle between the day and night mode.


How did I create my first personal website?
2. Round shaped transparent glass effect -

I created a semi-transparent layer of a glass looking element, with the hidden scrollbar. The visible scrollbar may have broken the overall fluidity and the UX.


How did I create my first personal website?
3. Auto-closing landing page -

When anyone opens the website, the first thing they see is a vertically floating animated gif with a welcome message. There's also a function to skip to the main website. You can find the typewriter styled effect here .


How did I create my first personal website?
4. Lowercase letters everywhere -

I don't know why I made that decision. I just wanted to be quirky in terms of the typography. I decided not to use any external font, because monospace was looking really good. When I started with the design I was using Nunito .


How did I create my first personal website?
5. Large fonts size -

Previously I used a comparatively small font size which reduced the readability. So I decided to have bold and large font sizes for everything. Because of that, the text is retaining more space. Throughout the page, I have added extra line height and letter spacing for cleaner looks.


How did I create my first personal website?
6. Click to view more information - On the main page, you can see an icon [+] which will help you to expand the associated section. When you toggle the [+] icon it becomes [-] and vice a versa. Once you expand the other tab, the previously opened tab will close automatically. The reason behind this idea is to save some space and avoid excessive page scroll.
How did I create my first personal website?
7. Satisfactory lighthouse score -

There's still a lot to improve in terms of performance.


How did I create my first personal website?
Technical and other resources - html5 CSS3 JQuery FontAwesome - All the icons are SVG images. Landing page image is from Google Images. Profile picture illustration - by a friend. So what's next? Improve page animations. Sometimes page slows down while transitioning from landing page to the main page. Remove JQuery. JQuery is a fantastic library, but I don't need it for a small website like this. The transition between the day and night mode is not fluid. Add a small animation which should eliminate the rigid effect. Replace the landing page's gif with better graphics (which should match with the profile avatar). Also, add a better favicon. Add offline page with the help of Service Worker API. HTTPS? Maybe... Custom email address? Maybe... Blog page, if I need one. Bug fixes and enhancements suggested by others. And many more things... Inspirations, credits and special thanks to - 1. The Community -

The wonderful community of developers who inspired me to create my own website.


How did I create my first personal website?
Building a Kickass Portfolio Ali Spittel

#portfolio #webdev #career #beginners


How did I create my first personal website?
I Created My Portfolio with React and Some Magic :tada: Dinesh Pandiyan

#css #react #javascript #webdev


How did I create my first personal website?
My New Kickass Portfolio Website Michael Hoffmann

#showdev #portfolio #webdev #career

Also, many more searches likethis and this

.

2. Dinesh Pandiyan -@flexdinesh , website -

I saw his website, and practically stole his idea of the raining background effect. It is so subtle and beautiful. Thank you, Dinesh.


How did I create my first personal website?
3. Ali Spittel -@aspittel -

I asked her multiple questions, at multiple times while designing the website. Her guidance and opinions have been beneficial. Thank you so much, Ali.

4. Karishma Joshi -@karishmajoshi4 -

She's the genius behind the beautiful illustration you saw on my website.

My website could never have been possible without your support. Kudos!

Which mode do you like the most... Day or Night?
How did I create my first personal website?

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:How did I create my first personal website?
本站链接:https://www.codesec.net/view/611795.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(10)