I just finished doing my portfolio website and I wanted to share with you guys so that I can get some feedback or maybe it could help some of you guys. I tried to go for a minimalist and clean look when creating this and I think I did well. It was not too hard, but to figure out the functions in javascript for the interactive feature took a bit more time (had to revise the javascript and DOM lessons again and some research on stackoverflow and w3school). The whole process took 2 days for me. Please give me some feedback so that I can improve the design more. Appreciate you guys who took some time to look at my portfolio website. Love ya!
Cool!
I like the greeting in different languages, thatās a nice touch.
A few things:
When I click on any of the projects āwebsiteā and āsource codeā links, it just takes me back to the main page of your site. (ie: they donāt go to the projects). When I looked at the source code the <a href> tag doesnāt have a address in it, just ā#ā which I believe just links to the top of the current web page.
Perhaps change the heading from āEducationā to āEducation & Experienceā and then add āProfessional Experienceā and then put Codecademy under that subheading. (?)
I would remove the link to your Instagram. There should be a separation between professional and personal life. Prospective employers donāt need to know your personal social media accounts, unless of course those accounts are not personal but professional in nature and showcase more of your work.
I will remove the Instagram link and edit the education part later! As of the projects, the website and source code links arenāt available yet as some of them are ongoing and planned projects which will be fully completed once I finished the Full Stack Software Engineer Path Course (currently 40%). Once I finished the course and all the projects, I would update the projectsā links in the portfolio.
Hey Amir,
Looks really good! I really like the cleanness of the design, and your color choices are great!
Basically everything is loads better than I can do at the moment (Iāve only completed the HTML and CSS parts of the Full Stack track, and am some way into JS) and looks amazing, but one thing that I can offer a bit of advice on is the hover transitions - when you make the icons/boxes bigger on hover, they mess up the position of the other nearby items a bit (except in Projects, which looks fantastic). I found that a way around that is to make a corresponding correction to the margin of the element. For example, if you have an element with an all-round margin of 1rem and an all-round padding of 1rem, you can āgrowā the element by increasing the padding to 1.2 and reducing the margin to 0.8 - the total stays at 2rem, so the surrounding elements arenāt affected but the box itself gets bigger.
Actually, on looking again, this might happen with the āContentsā section because of the border, but that has the same fix - if you have a margin of 2px and want to add a 1px border, reduce the margin to 1px to keep the spacing between elements the same.
My attempt at this project is at Jon Roskilly - Web Developer btw, but as I say, itās not as polished as yours! Great job
Also just noticed that āGuten Tag!ā is immediately followed by āHai!ā, which is slightly jarring as a German speaker, because āHaiā in German is shark, so it looks like you say āGood day! SHARK!ā but that is a silly thing to complain about.
Hey Jon! Really love your portfolio. It gave me a retro-ish vibes. Pretty cool.
After checking my portfolio again I agree with you, some transition messes up with the position of other items. Iāll edit them out now. And also thanks for letting me know about āHaiā definition in German. I will put Hola after the Guten Tag so there will be no confusion.
Btw, I really love the transition of āabout meā , āprojectsā, āskillsā and ācontactā at the header of your portfolio. I realized codecademy website also uses that type of transition. Can I know how you did them?
Hi Amir, of course! Actually I was kind of surprised by how good it looked when I was trying it - I wanted to get exactly the effect that is on the site, but thought I would have to transition the actual size of the boxes (which, as weāve said, is a bit tricky). In reality, making the box a significantly lighter color and increasing the size of the box shadow was all that was needed.
Hereās the relevant CSS (stuff like setting the background to yellow etc. is in the general styling and isnāt really necessary for the effect):
nav li {
margin-right: 1rem;
padding: 0.6rem;
box-shadow: 3px 4px 3px black;
font-size: 1.3rem;
transition: all 0.4s ease-in;
}
nav li:hover {
background-color: white;
box-shadow: 6px 6px 5px black;
}