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

.
.
.
.
.
.
.
.

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.

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.
  

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

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.

• I changed the animation for the hover state.

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

BSOD section

• I made it look creepier by adding a completion status animation
• I changed the color to be less bright

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

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 :

A special thanks go to Tyler Charboneau 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.