Building Your Own Portfolio Page

Building Your Own Portfolio Page


Hi guys! Just finished up this project and would love some feedback! Don’t have many projects yet but will add to it as time goes on

See the Pen freeCodeCamp : Build a Personal Portfolio Webpage by Jordan Miles (@NeutralDread) on CodePen.


Hi! So far its looking quite good, the background image choices are good and the quote is a nice touch.
To improve the website I would suggest the following

  • When I checked the responsiveness of your site I noticed that the Navbar at the top doesn’t collapse into the bootstrap collapsible navbar and the text just gets crammed you might want to check that out ( sorry if I have not explained it right I’ll provide an image if you need)

  • Make the social media icons slightly bigger you do have enough space for an increase both horizontally and vertically

  • Consider using washed out images which can definitely improve the readability of the text e.g. with washed out background you can easily use black text for that colour contrast

  • Maybe try another font but that is just a minor opinion of mine, the main issue is mainly the readability with the backgrounds you used

  • Using the codepen embed is actually a neat idea it would be awesome if you were able to make the output window larger so less scrolling is needed.

  • Also a caption for the codepen is definitely needed to explain the project. The caption could include the Project Name and the specific technologies you used which would really help exemplify the programming skills you wrote in the “About Me” section which would probably look good to the viewers/employers

Hope that helps


Thank you for the feedback!

I sort of understand what you mean by the nav bar resposiveness but if you could provide a more detailed explanation or example of how that could be done it would be much appreciated :slight_smile:

Also, is there a way you can make the image washed out with code? or would it have to be photo edited (or a different image)?
And i know i even tried making the row larger so the result window would require less scrolling but ill search around and see what i can find on it!


Nav Bar

Sure no problem! I will use my own portfolio page to demonstrate

This is my page in full screen view

And this is when its in a smaller screen size

See that mine has that button that expands when I press it and the options appear relatively neat. To be honest I literally copied the navbar element from bootstrap documentation and modified it to my own needs. Make sure you have the full boostrap code in though including the javascript it uses because the navbar requires it

Wash Out

Not as far as I know no sorry, for my pictures I literally took them myself from a ps4 game I liked and washed it out on PowerPoint before using them :sweat_smile: The images are good though I wouldn’t change them

If you want to see some other details yourself then feel free to check out mine its not perfect but I intend to edit it afterwards. Feel free to ask any more questions if you have any


Yeah that looks great! i’ll definitely have to try and implement that.
And darn haha, oh well i can play around with different fonts and maybe make in contrast more

By the way i looked into the embedding in CodePen and right before it generates your code to paste you can resize the window to change how much you have to scroll!


Definitely, experimenting with different fonts can help make your portfolio look less “Bootstrap-y” which helps the webpage stand out from other bootstrap pages giving it a uniqueness to what you already have.

For the code pen windows that good! You should be able to better present the projects in a way comfortable to viewers. Make sure that these codepens are still usable in both small and big screens though.