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.
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?
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.
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 :)
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!
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 :)
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.
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!
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.
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 :)
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!
I really like your site - simple and gets to the point! Also I've not seen a portfolio site have a laptop view theme (not sure what to call it!) but that's very cool! I think to make the nav bar stand out bit more and perhaps remove the default text-decoration as underlined when hovering over a project? It's maybe more a personal thing though!! Well done 😀😀
I've just completed my first portfolio site myself and it took me such a long time to do - with working and other commitments. lorna.dev if wanted to check it out - any feedback would be great too!!
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
Hi my name is Omar, I’m a software engineer that specializes in creating great front end experiences, primarily using react. When I’m not engineering I like to game and make music.
I love the little card on the homepage of your site, I kind of want to do something similar when I get to re-designing my site. Thanks for the inspiration!
Hey Paton. Initial thoughts it that it looks incredible. I like the gradient and the aligning of everything looks great. Very creative portfolio website. Make me want to redo mine to be more fun XD.
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
11 plus years* active enterprise development experience and a Fine art degree 🎨
Github README.md. Consists of Lot of Badges, git, png, and a lot of Love, Live Github Stats. Add this to your profile and help me with contributing to this stuff. Github Profile README.md
Maybe the mobile version should have better nav bar effect as after scrolling a little it takes form of black block (not very appealing on such beautiful design) . Overall Nice job 👍
Father and husband; Android Engineer and Quality Advocate; For fun, I enjoy playing video games, guitar, and table top games. I also dabble in hobby game dev and pixel arts.
Thank you! I will definitely reconfigure the navigation to stand out more :) And sorry about that! Is it super loud? I might have to see if I can make the default volume a little lower haha.
I really appreciate your work and your profile. I agree with Adrian Bece. Just want to let you know that I tried to open all the hyperlinks/buttons. I think INSTAGRAM is not working.
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:
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
Great job, keep learning and experimenting and good luck!
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?
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.
This portfolio show me what you are, amazing job!
Keep building with anothers stuff.
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 :)
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!
What I liked:
What I would improve:
These are all subjective!
Hope you find a good use of something :)
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.
Awesome website! I'm a big fan of the gradient and the terminal style. Just a few things that caught my eye:
Love how you have live demos for all the projects!
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.
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.
What is different Vue + router with React + router?
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 :)
Thanks. I'll try React later.
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!
I really like your site - simple and gets to the point! Also I've not seen a portfolio site have a laptop view theme (not sure what to call it!) but that's very cool! I think to make the nav bar stand out bit more and perhaps remove the default text-decoration as underlined when hovering over a project? It's maybe more a personal thing though!! Well done 😀😀
I've just completed my first portfolio site myself and it took me such a long time to do - with working and other commitments. lorna.dev if wanted to check it out - any feedback would be great too!!
Fab work! 😁
The Home is beautiful, you should make a template guide and commit it it to github publicly.
The same image on your index page (assuming that is your logo image) would fit great for your favicon. instead of using a "PJ"
The about page is with the color pallet is beautiful !!!!
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
IMHO it's pretty neat, there a couple of things that trigger my ocd though:
cat, because it makes more sense considering you're "printing" out the textThe icons on /hire are folders but clicking on them opens a file, perhaps change the icon?
"about me" dropdown is completely unnecessary
I would change the
paytonjewell $to something like
guest@paytonjewell.github.io:, and when you're simulating the cd's - update it to something like
guest@paytonjewell.github.io:~/hobbies/interests"to-top" button should be visible on mobile only
This is great feedback! Thank you so much for the explanations, I will definitely implement all of this :)
I love the little card on the homepage of your site, I kind of want to do something similar when I get to re-designing my site. Thanks for the inspiration!
Hey Paton. Initial thoughts it that it looks incredible. I like the gradient and the aligning of everything looks great. Very creative portfolio website. Make me want to redo mine to be more fun XD.
Awesome 👌🏻
I'm impressed by your portfolio website, I appreciate your creativity, your efforts, and your love for it!
Nice one!
I like the way you organized your Hiring information, go ahead
I love your portfolio! Especially the dark mode in your projects!
One thing, the nav should fade in to black. Otherwise it's lovely.
Rather then sharing my Personal Website link, I would go with GitHub ReadMe😁
Github README.md. Consists of Lot of Badges, git, png, and a lot of Love, Live Github Stats. Add this to your profile and help me with contributing to this stuff. Github Profile README.md
Hi there, I'm Hemant!👋 . 
Hi🙋♂️ ,
I'm 18 years old Self-taught Full-Stack developer from India.
-🥀 Learning GraphQl
-🔭 SpaceX FanBoi,
-🛸 Into High Energy Physics and Astrophysics
-💬 Connect? Here 👉🏼
I am Into ,🙏
Machine Learning, Web Development, SEO, Micro Services, System Design, Competetive Programming & Physics and Physics😼
- Languages and Tools...
- Blogs🌱
- Podcast⚡️
Thank You-🙏🏼
And in case they require Portfolio : hemant.codes/
looks pretty :) I have one suggestion for mobile view, it looks good if you make the text size responsive. All the best :)
Maybe the mobile version should have better nav bar effect as after scrolling a little it takes form of black block (not very appealing on such beautiful design) . Overall Nice job 👍
This is such a creative and aesthetically-pleasing portfolio. Well done! I also loved your tap-music app
Really fun & creative, awesome job! 🙌
I really like the Apple style folder icons. Nice looking site 😀
Thank you so much! I never would have thought of that!
The terminal UI is so cool as is the icon for the dark mode toggle!
Thank you! I will definitely reconfigure the navigation to stand out more :) And sorry about that! Is it super loud? I might have to see if I can make the default volume a little lower haha.
I really appreciate your work and your profile. I agree with Adrian Bece. Just want to let you know that I tried to open all the hyperlinks/buttons. I think INSTAGRAM is not working.
This is so amazing. Loved the design.
Seeing this, I don't think that you are on the newbie side.
Great job. Amazing work. 👌👌
This is awesome. I'd juste add a "text-lg-left text-center" on your bio div so it's centered on mobile device