My Personal Portfolio project + detailed workflow I used to build it

Hi freecodecampers!

I have finished my Personal Portfolio project, and I would love to hear some feedback (especially critiques).

Live page: https://darthcolo.github.io/freecodecamp-05-Personal-Portfolio-Webpage
CodePen: https://codepen.io/Darthcolo/pen/vYxRJPR
GitHub project: GitHub - Colo-Codes/freecodecamp-05-Personal-Portfolio-Webpage: Responsive Web Design > Responsive Web Design Projects > #5 - Build a Personal Portfolio Webpage

This is how I organised my workflow for this project:

  1. It started with a review of why I choose to do web development stuff. The first thing I do in the morning is to read (and, if necessary, edit) my mission statement:

• To learn and grow personally and professionally.
• To choose better quality problems and to enjoy the struggle (motivation is overrated).
• To focus on the essential and to do it well.
• To build mastery.
• To evolve.
• To inspire.

“He who has a why to live can bear almost any how.” - Friedrich Nietzsche

Web development is the essential subject on which my time and effort is focused. I enjoy solving web development problems because they allow me to learn and grow through the struggle, building my path to mastery. As a result, I am evolving and inspiring others.

Life is a journey, not a destination.

  1. I built a Kanban board with the main parts of the project. I used Notion, but I can also use Trello or GitHub Projects.

image

The idea here is to start with the top task (card) from the “Not started” column, and move it to the “In progress” one. Once the task is finished, that card is moved to the “Completed” column, and the process starts again with the next one in the “Not started” column.

  1. I found two designs that I liked, and took some ideas from them: a picture on the right, white background, a main colour, and a skew header.

image

image

  1. Then I opened Figma, created an account (I haven’t used it before), and started playing around with it to build my design (I have some experience with Photoshop, but Figma is quite simple to use).

image

(The mobile version ended up a bit different than the one I designed here.)

Designing my web page in Figma allowed me to choose the font (https://fonts.google.com/) and colours (https://color.adobe.com/create/color-wheel) I will use:

image

image

  1. Then I created a repository on GitHub to host my files and keep control of the changes I was about to make in my code:

image

  1. Then I started building the directory structure and files on my preferred IDE: VSCode.

image

  1. Next, I coded the basic HTML elements and structure in order to comply with the FCC user stories for this project. This allows me to focus on what is really important and necessary.
  2. Once that step is finished, I started gathering the images necessary for the web page, and store them locally. I now started to code the full web page structure and content (only HTML), in detail.
  3. Then, I moved to the CSS part. I applied basic styles, making sure I was meeting FCC user stories, and then I coded the rest of the styles needed for my design.
  4. Next, I worked on media queries to make the web page responsive.
  5. I tested the web page and made some modifications to pass the FCC tests on CodePen.
  6. I published my web page as a “live page” on GitHub.
  7. Finally, I published my project on FCC and wrote this post :smiley:

Cheers!

4 Likes

I really liked the way you spaced things around, color selection and font pairing. It is clear that you know what you are doing. However, I, as a website visitor was trying to see more content and some interactivity. May be CTA or if the scroll suggestion text was interactive.

I viewed it on my 6 inch mobile screen

2 Likes

Thanks for your feedback @HumbleAssassin ! I really appreciate it.

2 Likes

Thank you so much for includes the details of your workflow. A very helpful guide indeed.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.