About the Portfolio Project: Personal Portfolio Website category

I had a look at your project. I like the main body, it has a clean and modern design, and the <> thing for headings is a nice touch.

The semi-transparent header looks cool, though I think your monogram clashes a bit stylistically with the rest of the page - just imo.

Why don’t you make it live with github.io? It would be cool to have links to your other projects too.

I’d be happy to get feedback from you on my page & projects :slight_smile:

Hi, here is my portfolio website completed for the Front-End Engineer path.
I ended up creating two .js files for the two interactive pages - for some reason if I tried to put the variables, functions and event listeners for two different HTML pages in one JavaScript file, I couldn’t get both to work at once. Any ideas why?
Anyway, I solved the problem by having 2 JS files, but not sure if this is best practice, so I’d love to hear your thoughts on this!
Here is the link to my site: Lizzie Codes

2 Likes

Hello @harlandski
Thanks a lot for your feedback!
It led me to find a great online checklist from the A11Y Project that I’m now using to check accessibility in my projects with more detail.
Also, I had a look at your page. It looks great, simple, and well-organized.
You seem to have very interesting hobbies jaja.
The roll-the-dice feature was fun, and the fact that you made this with sunshine and mountain views in Kazakhstan made me want to travel haha.
Thanks again for taking the time to write.
Please, write me any time… I’ll enjoy keeping in touch.
Have a great week!

1 Like

Hi @lizzie_codes
Awesome site. You gave it a clean structure and setting dedicated pages for each chunk of important info was a great creative decision.
Toggle lists in your courses: very nice.
Your project page was fantastic. Easy to click around and know all your projects.
One thing I would comment on is the “background in coding” section. It’s too wide and that makes the paragraph hard to read.
Anyways, you made a great site.
Reach out anytime… I’ll be happy to share some code talk.
Have a great week!

Hi @napetico , thanks for your feedback!
You’re right about the paragraph at the bottom - it is too wide. I need to make some more tweaks to improve how it looks on mobile devices so I’ll do that at the same time!

1 Like

Hi @lizzie_codes I like the clean design of your site, and as @napetico says the gallery of your projects is a really neat feature - you can see a lot without having to visit every site.

One tiny piece of constructive criticism - think about using only one width of black border, or not using them at all. When your page scrolls down the thick black border on your photo looks strange intersecting with the thin black border of your header box, just my subjective opinion.

I also have a background in modern languages and linguistics btw, and my mum’s side of the family is from West Yorkshire (Huddersfield) :smiley:

1 Like

Hi @harlandski , nice to ‘meet’ a fellow linguist! Thanks for your comments on the borders - I’ll have a look at that and see what tweaks I can make. :slight_smile:

1 Like

I’ve now added the README to my github repository, and I’ve linked you there @napetico :slight_smile:

1 Like

:smiling_face: Awesome @harlandski ! Thanks… Let’s keep in touch :metal:t3:

1 Like

looks nice. Keep going and happy coding!

1 Like

Hello Everyone,

Check my personal portfolio project here:
-Personal Portfolio-GitHub Pages
-Link to gitHub Repository

Any feedback would be highly appreciated. Thank you in advance.

Good luck to everyone and happy coding!!

Thank you in advance.

Hello, I am Femi.

I just checked your project out. Although this is a beautiful portfolio, I don’t think you covered the scope of the course so far. You were expected to add at least one or two functionality to your site using JavaScript and the DOM. But I could not find any of that sort in your portfolio.

Check out my project and tell me what I should improve. It has lots of functionality by the way. Also, tell me what I did wrong in the code or whether it is not readable or not:

Website: https://okunolafemi.netlify.app/
GitHub: GitHub - femronal/pern-portfolio

Thanks for your feedback. Javascript functionality is within Projects included. Honestly, I don’t like the look of a webpage and I feel there is a massive room for improvement in terms of layout and design. I’ve noted and will be working on this project as I advance with career path. I also took look at your portfolio and it looks really nice. Only thing I would mention is the primary font maybe. Is this the font which best suit you? Some buttons seem to be leading to wrong sections of the web page. After all project looks really good and appealing. Good luck with your journey and once again, thanks for feedback.

Hi Lizzie! :v:t3:

I had a look at your code and as I suspected the problem you are experiencing is from the fact that not all elements exist on each page, and so the JavaScript code throws an error when trying to manipulate or add event listeners to non-existent elements. To avoid this you can add if statements to check if an element exists on the current HTML page before adding event listeners to it. Having multiple JS files can make your code more organized and easier to navigate, but this can be particularly helpful in larger projects rather than small ones like yours.

I hope you find my reply helpful! Happy coding! :slight_smile:

Hello Everyone,

Over the past few weeks, I’ve been working diligently on my personal portfolio project and I am finally at a stage where I feel comfortable sharing it with you. I would sincerely appreciate it if you could take a few minutes to look over my project and provide me with your honest feedback. Whether it’s about the design, the code, the functionality, or even the documentation, I am open to all kinds of constructive criticism. :slightly_smiling_face:

You can access the website at https://stoyanvisuals.com.
You can take a peak at the project code here.

Thank you in advance for your time and valuable input. I believe that your feedback will not only help me to improve this project but also assist me in growing as a developer. :man_technologist:t3:

Happy coding! :keyboard:

2 Likes

Hi Napoleon,

Your project is very interesting! I love the idea of having the social icons fixed to the right and move with the viewport as the user scrolls. I also like the color schemes for your light and dark themes, but if I had to pick one I’d stick with the light theme. The web page looks really cool on mobile as well!

Now a little bit of constructive criticism! :slight_smile:

Consider reducing the font size for headings and paragraphs for 4k monitors because it almost poked my eyes out! :smiley:
Everything looks good up until 1440px viewport width, but after that it becomes enormous.

I also noticed that you are not saving the user preference for light or dark theme, so the value is not persisted across pages or when you refresh the page. Consider using the localStorage property of the window interface in JavaScript to save the user’s prefered theme in local storage, so next time they come back to your website or as they navigate between pages, their theme will be saved and applied on page load. Also you should use the data-theme attribute on the body or html nodes, combined with CSS variables. This way you can then use JavaScript to listen for a click event on the theme-switcher button and toggle between themes with just 15-20 lines of JavaScript instead of nearly 100 like in your case.

I hope my feedback was helpful! Keep up the good work and remember to have fun coding! :man_technologist:t3:

1 Like

Hi,
Thanks so much! I assume that can be something as simple as
if (element) {//add function here} ?
I’ve just had a look at your portfolio too, it looks great! I like the shapes that move with the mouse.
When I clicked on About Me, I just got the loading page (4 moving circles) - I guess you’ve just not added a page here yet? Or is there a broken link?

Hi Stoyan!
Let me first thank you for taking the time to give a thorough look into my site. I truly appreciate it :slightly_smiling_face:
Second, thanks a lot for the nice words and the great suggestions.
The idea for the fixed social icons came from a great programmer’s personal site (I think I left a link in the documentation).
Actually most of my design came from her site :smile: :face_with_peeking_eye:
The colors, I made a pallete using tools from Adobe, and I agree with you about the light version (looks nicer).
About you feedback (bring it on haha)
I’m sorry for the severe eye damage haha… I didn’t realize I left the font that big. Next time I’ll make sure to check bigger screens and not only my laptop and mobile.
About your suggestion to save the theme preferences and to use the data-theme attribute, you got me there! I didn’t know that can be done and in the last days I was tired, exited to launch it, and a week passed the deadline I agree with my self for this project haha…
I promise to look into those. It’s always nice to learn a few things I didn’t knew about.
Your feedback was very helpful! Thanks again :+1:t3:
Now let me take a look at your site and return the uplifting feedback.
See ya! :sunglasses:

Hi again Stoyan :wave:t3:
I took a deep look at your site and code.
It looks very nice. I enjoyed the symbols responding to cursor position in the hero section and the on-hover animation on the projects cards.
I notice the when clicking on the About-Me button on the navbar, the preloader comes in but no page is loaded, so it just stays there indefinitely.
Inspecting your code I realized I had noting to say haha :smile: You put so much effort on it and wrote top-level code for you site and complex functions I don’t even remember (my respects)… for the parts I could get it looked neatly written.
I got a chance to see how you used the localStorage to save user’s preferred theme. Thanks for that.
I wish I could give you a better critique but dude, your code is awesome! :metal:t3:
I should be asking questions, not giving critique haha
Keep it up bro… Have a great coding :pray:t3:

Thank you so much, Lizzie! I’m really glad you like it. I’m really interested to find out which theme people prefer more, so I’d be happy if you tell me which of the themes you find more visually appealing.
Also thank you for pointing out that I have forgotten to disable the About Me link, since I have not built the About Me page yet. :smiley:

As for the issue with your JS code, yes a simple if statement to check if the element exist on the current HTML page should do it.

1 Like