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 :
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
Top comments (34)
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.
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.
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.
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
~/hello_world$,~/about$would make more senseHey 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 ?
If you like, but I don't post here a lot.
I'll reach you somehow, through twitter maybe ^
I love the fake blue screen of death! That is such a funny and original idea, good job :D
thanks, i hope it did not freaking you out haha
No worries, but I was a bit confused for a moment ahah
Very nice! Very clean and lots of great info.
For some personal feedback
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 ^
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 ;)
Nice catch on the proof reading.
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.
Oh, that blue screen :) Nice one!
haha, i'm glad you like it ^
Hi, i downloaded your CV and found a typo error "Compsoer" in your Skills section.
Great, thanks for pointing that out.
I really liked that footer...!
Very creative and well designed for a first website.
Did you only use github pages for this one?
nope, I used them for these websites too :
mazentouati.github.io/snacks/
mazentouati.github.io/snacksconsole
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.
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.
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?
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.
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.
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
Nice design. Captures the attention. Thank you for sharing.
Oh, minimal is always cool! Thanks for post
On Mobile Devices, Navigation Bars ☰ button is on right side by panel is coming from left side! Awkward!
Yeah, thanks for pointing that out.