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.
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
- 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
- I made the green text glowing
- I added an icon to indicate the keyboard experience ( I'll talk about it later )
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 )
- 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.
- I added a title and description for the section
- I added a button to see all articles
- I extracted the contact section from the BSOD section
- I made it look creepier by adding a completion status animation
- I changed the color to be less bright
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
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://mazentouati.github.io/somethingNotFound
- 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 )
- I plan to use the PWA techniques to make the website offline
- Focus more on optimizing content delivery and SEO
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.