loading...
Cover image for Sharing my first personal website

Sharing my first personal website

mazentouati profile image Mazen Touati Updated on ・1 min read

Hi, folks

Finally, I made my first personal website. I'm a full-stack web developer who believes in simplicity and minimalism. In my personal website, I aimed to convey these feelings through a simple geeky design and UX.

well let's not talk too much, here it is :

Mazen Touati - Old version

I'll incrementally add tweaks to the website due the fact that I made it in a rush somehow. I'll open the source code when I organize and document it.

Third party plugins i used :
scroll reveal
Throttle from lodash

Please let me hear your thoughts and suggestion, thanks.


Notice

I made the first design iteration, so what you seeing now is an updated version, please refer to this post to see what's changed

Discussion

pic
Editor guide
Collapse
julesmanson profile image
jules manson

Almost everyone is telling you how nice it is without giving you any constructive criticism. First off I love the concept. Not too bad a design for a developer but it does have a few issues.

The UI needs work. It took me a few back and forths to realize it's a SPA. Part of the reason is that clicking on the Blog loses the navigation. It should remain fixed to the top right where it is with the other nav items. There are other issues like too small a font for all the white space. And the elements like fonts and other html look rather cheap to me like you didn't bother too much in the presentation (CSS).

You really should have a look at Lea Verou's outline for a course she is teaching at MIT in UI design. There is so much helpful information on there. It's organized so you can take a few hours or a few weeks to pick up some great tips and advice. It is up to you. Here is the link to view the course notes which are accessible to the public 6.813/6.831: User Interface Design & Implementation and another to Lea Verou's Homepage where she shares some outstanding front end tools she developed and videos of her talks and related articles.

In closing I would trust you to code my server and even the MVC frontend but would have reservations with you designing the view.

Collapse
mazentouati profile image
Mazen Touati Author

Hi Jules,
I really appreciate your remarks. That's true, i did not focus too much on the CSS due the fact that I continuously make changes and push them. Currently, I'm working on the navbar and the sizes issue. The problem was, i prototyped the design on Adobe XD, where it looked okay and sharp, and after I coded it; I deployed it immediately. I needed it to be live ASAP. I prioritized fixing the grammar and unatural expressions as it's more penalizing from non tech people and i got more feedbacks regarding that issue from native speakers so I proceeded fixing them rather than fixing the UI. Thanks again for sharing these links and I'll consider watching them, peace.

Collapse
julesmanson profile image
jules manson

You're welcome. I am glad it helped. Just one more thing. From your profile page on here I noticed that you have a Media Engineering Master's degree. That is quite impressive considering that most developers have at most a 4-yr degree or less. You worked hard for it so why not show it off. I would add it to the qualifications in your personal website.

Feel free to write back if you ever want a second set of eyes to critique your work.

Thread Thread
mazentouati profile image
Mazen Touati Author

Thanks Jules,
regarding my degree I already mentioned it into the autobiography section and into my résumé. I'll see if there's a better place to make it more recognizable.

I made a new post where I made a case study related to the new iteration, it would be great if you take a look :
The first design iteration of my personal website

Collapse
qm3ster profile image
Mihail Malo
  1. I really liked the BSOD.
  2. Don't be under root, people will think you are careless. ~/hello_world$, ~/about$ would make more sense
  3. Would be cool if the [G]ithub style links actually supported keyboard navigation, but ofc there are currently duplicates, even in one view
  4. Learn Rust, not golang 😋
Collapse
mazentouati profile image
Mazen Touati Author

Hey Mihail,
Thanks for your remarks. Currently, I'm working on tweaking the UI. I made numerous changes regarding the sizes, font-style, BSOD ( became creepier ) and so on. Thanks for the root advice, I'll implement it right away. Actually, I wanted to make it keyboard friendly but as you mentioned there's duplication in the same view. I'll check Rust I think it's interesting, isn't ?

Would it be okay if I notify you when i push the new tweaks ?

Collapse
qm3ster profile image
Mihail Malo

If you like, but I don't post here a lot.

Thread Thread
mazentouati profile image
Mazen Touati Author

I'll reach you somehow, through twitter maybe ^

Collapse
matteojoliveau profile image
Matteo Joliveau

I love the fake blue screen of death! That is such a funny and original idea, good job :D

Collapse
mazentouati profile image
Mazen Touati Author

thanks, i hope it did not freaking you out haha

Collapse
matteojoliveau profile image
Matteo Joliveau

No worries, but I was a bit confused for a moment ahah

Collapse
nektro profile image
Meghan (she/her)

Very nice! Very clean and lots of great info.

For some personal feedback

  • the slow show of text is a little too slow and breaks the UX when scrolling
  • the blue screen is a very neat gag and I loved it but I'd also like if I could scroll into it instead of it jerking down after a certain Y
  • have a lot of fun with the QR code!
Collapse
mazentouati profile image
Mazen Touati Author

Thanks Meghan,
that's fair points out there, the slow revealing bugged me too; i'll fix it ASAP.
regarding the blue screen; scrolling to it will eliminate the surprise factor. Maybe, making the screen jump once ?

it would be great if you could review the console output; and the 404 page here a quick link
mazentouati.github.io/somethingNot...

i appreciate your review ^

Collapse
dinsmoredesign profile image
Derek D

The design is nice and flows well, though you might want to tighten up the text-heavy first section, maybe break it up into smaller, more digestible pieces throughout the page. Also - if you intend to showcase your skills in English, you might want to have someone proofread it before sending it to an employer, as there are quite a bit of typos and grammatical errors ;)

Collapse
julesmanson profile image
jules manson

Nice catch on the proof reading.

Collapse
mazentouati profile image
Mazen Touati Author

Thanks Derek, i'll consider re-making the first section.
And yeah i already noticed some typos, i'll double check the proofing and push the changes.

Collapse
asizikov profile image
Anton Sizikov

Oh, that blue screen :) Nice one!

Collapse
mazentouati profile image
Mazen Touati Author

haha, i'm glad you like it ^

Collapse
pnhuyduy profile image
HUY DUY

Hi, i downloaded your CV and found a typo error "Compsoer" in your Skills section.

Collapse
mazentouati profile image
Mazen Touati Author

Great, thanks for pointing that out.

Collapse
shindesharad71 profile image
SHARAD SHINDE

I really liked that footer...!

Collapse
iamjoross profile image
Jose Ross Barredo

Did you only use github pages for this one?

Collapse
mazentouati profile image
Collapse
julesmanson profile image
jules manson

Are you the creator of the Snacks (PHP/SQL) database on Github? I thought it was serverless and limited CRUD to pushing and reading JSON files. But what do I know? I rarely use GitHub.

Thread Thread
mazentouati profile image
Mazen Touati Author

Yes, I did created snacks @console. It's a part of a bigger project so called snacks project which aims to provide utilities that will make database management easier. Snacks@console is a browser-based console to execute SQL queries.
You can refer to this post to learn more
Snacks@console Intuitive browser-based SQL Console

GitHub is just a hosting service where most open source projects are hosted and created collaboratively through git.

Collapse
antonreshetov profile image
Anton Reshetov

Oh, minimal is always cool! Thanks for post

Collapse
fireinnti profile image
fireinnti

It's awesome and ill go into more detail later but the last part for blue screen. Did you mean to type crushed instead of crashed?

Collapse
mazentouati profile image
Mazen Touati Author

hi, Actually that's a typo i meant crashed. There are other typos out there. i'm double checking them now also i receive feedbacks like yours. Later i'll push the changes, thanks for pointing that out.

Collapse
stuarthaas profile image
Stuart Haas

Really clean and concise. Nice way to share your portfolio without having to worry about hosting. I should consider github pages to do this. I really dig the snacks console.

Collapse
mazentouati profile image
Mazen Touati Author

Yeah, github pages are a great way to host and continuously integrate the last changes. Unfortunately, it only supports client-side languages.

And i'm glad you liked snacks@console

Collapse
ffreemanjr profile image
ffreemanjr

Nice design. Captures the attention. Thank you for sharing.

Collapse
chiefnoah profile image
Noah Pederson

Love the little surprise at the end! Looks really good!

Collapse
abhijitparida profile image
Abhijit Parida

Very creative and well designed for a first website.

Collapse
bauripalash profile image
Palash Bauri 👻

On Mobile Devices, Navigation Bars ☰ button is on right side by panel is coming from left side! Awkward!

Collapse
mazentouati profile image
Mazen Touati Author

Yeah, thanks for pointing that out.