DEV Community

Cover image for The first design iteration of my personal website
Mazen Touati
Mazen Touati

Posted on • Edited on

The first design iteration of my personal website

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.

Top comments (34)

Collapse
 
jsn1nj4 profile image
Elliot Derhay • Edited

Love your design, though even more because of the execution. I've only looked at it on mobile, but it looks awesome and flows really well -- and I'm saying this as someone who tends to shy away from Windows in favor of Linux. Lol

Collapse
 
julesmanson profile image
jules manson • Edited

I am primarily a Windows user but I do occasionally go on mac or whatever they are called these days. I never understood why some people gravitate toward linux systems. From my point of view I like windows because it is familiar, it is now very stable. 10 never crashed on me since day one. I am primarily a user of productive apps (engineering 3d software, office, web developing, etc. and yes sometimes porn too lol) so access to my most important applications is critical, and it is now free. So what draws people to a less familiar system that may or may not be as stable as windows, isn't mainstream, has far fewer apps and substitutes that are usually subpar, and probably has poor support? Is it that because you want to be different? Or perhaps you like to dabble with creating apps on it because youre a programmer? I just dont get it.

Collapse
 
jsn1nj4 profile image
Elliot Derhay

Some people prefer more freedom and transparency than Windows gives. Some like to be able to tinker with their OS. There's also affordability and lower resource usage.

In my case, along with some of what's listed above, the tools and such that I work with are actually geared more towards Linux use anyway, so that's just 1 more thing that pulls me in that direction.

Linux definitely isn't a one-size-fits-all environment, especially with the number of Linux distros and DE choices out there.

So, like most things, it comes down to personal preferences and requirements for the most part.

Collapse
 
mazentouati profile image
Mazen Touati

haha there's enough for both linux and windows users ๐Ÿคœ๐Ÿค›

Collapse
 
julesmanson profile image
jules manson

This is my reply to JSn1nj4. Maybe you can answer it for me:

I am primarily a Windows user but I do occasionally go on mac or whatever they are called these days. I never understood why some people gravitate toward linux systems. From my point of view I like windows because it is familiar, it is now very stable. 10 never crashed on me since day one. I am primarily a user of productive apps (engineering 3d software, office, web developing, etc. and yes sometimes porn too lol) so access to my most important applications is critical, and it is now free. So what draws people to a less familiar system that may or may not be as stable as windows, isn't mainstream, has far fewer apps and substitutes that are usually subpar, and probably has poor support? Is it that because you want to different? Or perhaps you like dabble with creating apps on it because youre a programmer? I just dont get it.

Collapse
 
jess profile image
Jess Lee

๐Ÿ‘€ @aspittel @nektro @julesmanson @qm3ster ๐Ÿ™‚

Collapse
 
qm3ster profile image
Mihail Malo

What's going on here?
I'm calling the private security company.

Collapse
 
bengreenberg profile image
Ben Greenberg

This looks so great! I love your use of empty space to draw the viewer to the content and your choice of animated text, etc. is just enough to keep it really fun and interesting without being overwhelming. Really well done! Congrats!

Collapse
 
julesmanson profile image
jules manson

It looks a lot better. I specially like your skeleton-like navigation. I won't comment on any other issues others have already written about. But there is a saying that a website is never finished. Here is what I would do with the next iteration. Give the bottom view an authentic-looking Windows 10 crash in every detail. Then after about two seconds fade it out leaving a nice layout with all your contact info. Here is link to an authentic (Windows 10 crash)[windowscentral.com/how-troubleshoo...]. Just a note on 10. It never happened to me. I find 10 to be very stable.

Collapse
 
mazentouati profile image
Mazen Touati

It sounds interesting, I will think about it. Thanks for your suggestion. Though, i got BSOD a couple of times on my Win10 haha.

Collapse
 
mark_nicol profile image
Mark Nicol

Nice work. That is really clear and distinctive without being overpowering. It looks like you've had a lot of fun putting it together. Thanks for sharing the process there are so many good ideas there.

Collapse
 
liltechnomancer profile image
Levi แ•™(โ‡€โ€ธโ†ผโ€ถ)แ•—

Holy cow this is so good! The design is really cool without being over the top. I really like it!

Collapse
 
itachiuchiha profile image
Itachi Uchiha

I love this community :)

Collapse
 
mazentouati profile image
Mazen Touati

indeed ๐Ÿฆ„

Collapse
 
jrkd profile image
Jono • Edited

Great website Mazen! Love all the little touches (especially the [keyboard-shortcut]).

Will definitely get you far if your looking to catch the eye of lead devs looking to hire.

5/5

Collapse
 
mazentouati profile image
Mazen Touati

Thanks Jono- I hope so, and I'm glad you like it ๐Ÿ˜Š๐Ÿฆ„

Collapse
 
ideepaksuryas profile image
Deepak Surya

Hey, awesome website buddy. And thanks for sharing it with us. Nice work, I'm gonna try and make something similar, because this is so damn inspiring.

Collapse
 
mazentouati profile image
Mazen Touati

I'm glad it inspires you. Please reach me out if you have any question.

Collapse
 
ideepaksuryas profile image
Deepak Surya

Yep! ๐Ÿ˜‰

Collapse
 
zerodivider profile image
Zeljka Zivanovic

oh, god, I just love it :D