Personal Portfolio Website (Full-Stack Software Engineer Course)

Hey Coders!

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!

Link to the GitHub Pages:

Link to Git Repo:

Stay Safe!
Noob Coder

2 Likes

Cool! :partying_face:
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.

1 Like

Thank you for the good advices!

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.

Thanks Lisalisaj for the feedback!

1 Like

Looks great. Really nice animations!
I just completed my project GitHub - matthiasludwig/codecademy-porfolio-project | My Porfolio and went much more basic to be honest (since I could not bring myself getting deep into CSS)

What was your approach to doing these animations? Did you do them all yourself or use jquery for that?

Hey man, great portfolio!

For the on load transition I implemented CSS Keyframe which I learned from StackOverFlow, it is easy to do, here’s the link: css - css3 transition animation on load? - Stack Overflow
And for the slide in transition when scrolling down the website, I just used the jQuery plugins provided here: Slide In Element When Scrolling Down - slideIn.js | Free jQuery Plugins
Follow the steps and edit the index.html a bit and you are good to go.

Let me know when you implemented these transition to your portfolio so I can check them out again!

Peace :v:

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 :slight_smile:

2 Likes

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.

1 Like

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?

1 Like

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;
    }

Thanks Jon! It is simpler that I thought it would. Would definitely try that for my next project.