Portfolio Review

After spending a long time looking at inspirations, playing around with ideas, and self-doubting, I think I'm finally happy with my portfolio.

I'm definitely on the newbie side of the developer spectrum, so I know that my projects themselves aren't anything to write home about, but I would be very appreciative of any feedback that I can get! And that includes anything from design to best coding practices to ways to improve the projects I have listed.

Dev.to has been a fantastic resource for me in my learning process and I look forward to any constructive criticism I can get from this awesome community!

Here is the link to the portfolio website!

Comments

[Adrian Bece]

Great job on your website. I like the creative concept with the terminal UI and desktop icon tabs. Taking into consideration that you're a newbie, even though the site is a little bit rough around the edges, but the style and the idea makes up for it, in my opinion. Those rough edges will smooth out as you get more experienced, so keep at it. It takes time to learn how to create truly delightful, performant and smooth UI.

Here is some advice:

• "About me" in the nav doesn't really need to be a dropdown
• Nav text contrast on the homepage might be poor (white text on light gradient background). You can use many tools out there to check
• Avoid hamburger menu on mobile if you can. Save users an extra click (or tap) by having a fixed nav with all links present
• Your "PJ" logo can also be a link to homepage. I've instinctively kept clicking on the link, but nothing happened.
• "Hiring" page feels a bit empty when it's opened. Maybe have one of the tabs active by default?

It reminds me a lot how I started out (I've also used Bootstrap when starting out). I've actually wrote a post here about my own personal website and how I've changed it and improved it through the years. Maybe you can get some ideas or see what you can apply to your own.

My personal website - from zero to hero in 5 years

Adrian Bece ・ Jan 21 ・ 11 min read

#webdev #showdev #beginners #motivation

Great job, keep learning and experimenting and good luck!

[Payton Pierce]

Thank you so much for taking the time to offer so much feedback!
Once I have a handle on React and React Router, I'm hoping to improve the performance and get everything to load nice and easy.

I will definitely change the navigation to remove the dropdown, add a home link to the "PJ" logo and improve contrast, and I'll definitely play around with the mobile menu to see if I can avoid the hamburger menu.

Additionally, I love the suggestion to have one of the tabs open by default, I can definitely implement that.

Thank you for sharing your post about the improvements you've made to your own personal website over time -- I really appreciate that you emphasized the details of the things you were missing, such as lazy loading, code minification, and image optimization. It's nice to see actual examples I can research rather than just "you need to improve your performance" lol, as well as seeing the progression you made in your tech stack over the years.

You mentioned that you used Bootstrap when starting out. Do you recommend getting away from CSS frameworks? Or is there another one that you prefer?

[Adrian Bece]

Thank you, glad you found the article useful and I'm happy to help! I really wanted to put things into perspective and show how you can be a code newbie and still create awesome stuff, but how your projects can progress over time.

I'm using CSS frameworks for fast prototyping on my own projects, when I want to focus more on functionality and have a nice UI out of the box and not to worry about it. For my personal site, I'd like to showcase my skills, so I prefer having a custom-built CSS. Also, custom built CSS might be lower in size because it would (ideally) only contain styles that are used on the site.

I've also heard a lot of good things about Tailwind, so I recommend checking that one out too.

[Pedro Pimenta]

I'd like to add that you should improve on the margins and maybe font size for mobile. The about me page on mobile is a bit difficult to read because lines are very short, some only 2 or 3 words.

That would make it seems much more profeasional. Typography is very very important!

[Madza]

What I liked:

• Background gradient is awesome
• Rounded edges, proper shadow and light grey color choice of main card in homepage looks super clean on that gradient
• I love the hover effect on the avatar on the card, adds some interaction
• Great font choice on that main card, looks clean and sleek
• Nice layout of projects, easy to overview, with links to source

What I would improve:

• Clicking on PJ (in top-left corner) should take users to homepage from anywhere. Also consider to increase the font size of it significantly
• I would increase the icon size along with the font-size in the top nav.. Something tells me rounded fonts like Nunito, Montserrat, Quicksand or Varela Round would look nice there
• 'About me' shouldn't be a dropdown, just combine 'get to know me' and 'hobbies' in one page 'About me'
• Rename 'Hiring' to 'Skills' and make sure when you click on it, the content of 'Technologies' is already open
• Move 'Personality' info to 'About me' and replace the current 'Get to know me' section with it
• Remove 'Links' folder in 'Hiring', you already have all of them in your 'Home' main card.
• This way your current 'Hiring' page would be left with just 'Technologies'. I would remove the Folder-themed design, and leave just Technologies post when user click on 'Skills'.
• In footer make sure you make your name a link and it takes users to your Github or something
• Make sure to make URLs cleaner.. for better UX I would suggest to re-construct your site to SPA and integrate some simple router to load just the content that is new
• I don't know your dev browser, but make sure you check browser compatibility, test on different browsers.. For example on Chrome there is a blue shadow when I hover over portfolio icons, responsiveness bugs when I test in dev tools

These are all subjective!
Hope you find a good use of something :)

[Payton Pierce]

Thank you so much for your feedback! I will be implementing all of this, and I do have plans in the near future to recreate it all in React with Router to get the loading smoother and easier.

[Payton Pierce]

I greatly appreciate that you took the time to write this out -- I'm a little giddy to be getting real feedback from people who are more ahead of me in regards to working with the front-end and UX, so it's easy to assume that if they're in the workforce doing this every day, they know better than I do. But I completely agree that as far as the aesthetics go, it's mostly subjective and preference-based. I try to look for those "Oooh, I never would have thought of that!" moments, try it out and see how it compares to the way I initially did it, and if I don't like it, I trust my instincts :)

[Matt Mascioni]

Awesome website! I'm a big fan of the gradient and the terminal style. Just a few things that caught my eye:

• Maybe boost the font size of the PJ and navigation links just a little, possibly bolding the nav links to make them a little more readable.
• Since the "About Me" page has "Get to know me" and hobbies/interests on the same page, it might make sense to either not make this a dropdown or have the dropdown only open on hover, and on clicking "About Me", just bring you to the "Get to know me" section.

Love how you have live demos for all the projects!

[Zen]

What if you add a router to your portfolio. So, it does not reload all assets when moving pages. 🙂👍

I use router (Vue Router) for my Jekyll-based blog: mzaini30.js.org.

[Payton Pierce]

Thank you for this great suggestion! I am just starting to move into JS Frameworks and once I get a handle on React and React Router, I will definitely be utilizing it.

[Zen]

What is different Vue + router with React + router?

[Payton Pierce]

I don't think there's a big difference between the router functionalities overall, just that I prefer the React framework rather than the Vue framework :)

[Zen]

Thanks. I'll try React later.

[Aleksandr Hovhannisyan]

Very creative portfolio! You've received a lot of good feedback so far, but I wanted to touch on one minor point:

Pleaser / Trouble saying "no"

Don't say this, for your sake. You're telling companies that are considering you as a potential candidate that they can get away with underestimating your worth and paying you less for the same amount of work. I.e., you may end up getting a lower salary offer than you'd like.

[Payton Pierce]

Thank you so much! I never would have thought of that!

[Shravya Chepa]

This website is amazing 👌🏻 Very creative and beautiful. 🤩
Me too! I'm a newbie in this developer world too! And I got introduced to it by a Udemy course on full stack web development!
You have inspired me to build a portfolio website of my own!

[Matheus de Campos]

This portfolio show me what you are, amazing job!
Keep building with anothers stuff.

[Uchena Miller]

The Home is beautiful, you should make a template guide and commit it it to github publicly.

[Uchena Miller]

The same image on your index page (assuming that is your logo image) would fit great for your favicon. instead of using a "PJ"

[Uchena Miller]

The about page is with the color pallet is beautiful !!!!

[Uchena Miller]

In all the website is hot. Good Work.
But to seem for legit you look into buying your self a domain name and also, Dont rush the side projects, Just Design and work on 2 or 3 real world websites or web apps to show your real skills cause in my opinion the work you build from scratch matters more than any simple project anyone can just youtube and redesign it