The first design iteration of my personal website
Tags: showdev, javascript, webdev, portfolio
Published: 2018-11-29 01:00:14

---
title: The first design iteration of my personal website
published: true
description: A case study of what I've changed in my personal website after one week since I've published it.
tags: #showdev #javascript #webdev #portfolio
cover_image: https://thepracticaldev.s3.amazonaws.com/i/eq4ntedvxnn9cdhnifcp.gif
---

Hi folks

Recently, I've shared online my first personal website and asked for feedback and suggestions. Fortunately, I've got what's enough to make another design iteration.

Before I start talking about what I've changed, I invite you to check my website first, in case you missed it or to check the new version.

[Mazen Touati - Old version](https://sunchayn.github.io/old)

.
.
.
.
.
.
.
.

Great welcome back,

First of all, I'm really happy that the first version got some attention and reached a lot of people world wide in less than one week.

![](https://thepracticaldev.s3.amazonaws.com/i/0zb1j5kdbb4rdnq07luq.PNG)

Thanks to the Dev community for sharing love

##Change log

####General

- I changed the font family and the size ( I made them bigger and more readable )
- I reformulated the textual content
- For mobile users only: now the navbar has a blue background color across all sections
- I reduced the revealing delay

####Hello world section

- I made the green text glowing
- I added an icon to indicate the keyboard experience ( I'll talk about it later )

####About section

- I removed the version switcher, now only the full version is accessible. The reason is : I don't want the visitor to miss an important detail about me as he most likely will choose the short path, if he is interested enough I prefer he reads the full version to get a better vision.
![](https://thepracticaldev.s3.amazonaws.com/i/51mrhlva1ozb1jh3qjgf.jpg)

- I made the signature self-drawing ( a static image is showing for browsers that do not support SVG embedding )

![](https://thepracticaldev.s3.amazonaws.com/i/81z8xt6rbuhzmau54tf6.gif)

####Projects section

- In the initial version, I made a stupid UI mistake and I did not notice it until I published the website. I made the projects appear like two separate group by not maintaining an even spacing horizontally and vertically between the elements. Now it's fixed.

![](https://thepracticaldev.s3.amazonaws.com/i/3zvj2uuvvsl0bblxez2r.jpg)

- I changed the animation for the hover state.

![](https://thepracticaldev.s3.amazonaws.com/i/5pwz8c4jsweshs7q3krs.gif)


####Blog section

- I added a title and description for the section
- I added a button to see all articles

####New section : contact section

- I extracted the contact section from the BSOD section
![](https://thepracticaldev.s3.amazonaws.com/i/bdtcebfdz5ak8fxvty3i.png)

####BSOD section
- I made it look creepier by adding a completion status animation
- I changed the color to be less bright
![](https://thepracticaldev.s3.amazonaws.com/i/eq4ntedvxnn9cdhnifcp.gif
)

####New feature: keyboard experience
Previously I made links appear like in command-line based applications. It shows the action's letter between brackets eg. [G]ithub, but I did not made it functional for technical reasons. The issue was that there's multiple links that have the same name even in the same viewport. I though about it and I've came with a solution which is triggering the link that's within the active block. The active block is selected based on the mouse position

*It's a beta feature, if you notice any buggy behavior please let me know*

####404 Page
I noticed that previous traffic did not hit the 404 page, this is a screen shot for the page

![](https://thepracticaldev.s3.amazonaws.com/i/a7xlquhkjfsu3mmfbna8.png
)

A live example of 404 page : http://sunchayn.github.io/somethingNotFound

####Misc
- I made changes on the page structure related to the SEO
- I optimized the content delivery for the CSS ( injected the critical CSS within the HTML )

##Future

- I plan to use the PWA techniques to make the website offline
- Focus more on optimizing content delivery and SEO

##Thanks
Finally, I would like to say thanks to the generous people who gave me feedbacks and suggestions in different communities: Dev community, Twitter, Reddit.

Specially these people :

{% user aspittel %}
{% user nektro %}
{% user julesmanson %}
{% user qm3ster %}

A special thanks go to [Tyler Charboneau](https://tylercharboneau.com/) for proofreading and suggesting a better textual content for my entire website.

I'm always thrilled to hear better ideas and suggestions. Please let me know if you have some, peace.