DEV Community

Cover image for Sharing my first personal website

Sharing my first personal website

Mazen Touati on November 22, 2018

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 webs...
Collapse
 
julesmanson profile image
jules manson • Edited

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 • Edited

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 • Edited

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 • Edited

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 • Edited

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

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

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) • Edited

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

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 • Edited

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

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

Great, thanks for pointing that out.

Collapse
 
shindesharad71 profile image
SHARAD SHINDE

I really liked that footer...!

Collapse
 
abhijitparida profile image
Abhijit Parida

Very creative and well designed for a first website.

Collapse
 
iamjoross profile image
Jose Ross Barredo

Did you only use github pages for this one?

Collapse
 
mazentouati profile image
Mazen Touati

nope, I used them for these websites too :
mazentouati.github.io/snacks/
mazentouati.github.io/snacksconsole

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 • Edited

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
 
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 • Edited

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 • Edited

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
 
antonreshetov profile image
Anton Reshetov

Oh, minimal is always cool! Thanks for post

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

Yeah, thanks for pointing that out.