How I built my portfolio and what I learnt from it
“Can I see your portfolio?” is a question you’ll be asked a lot as a young jobseeker or BootCamp grad when applying for a job. Knowing this, I knew I needed to develop a portfolio to show off the abilities I’d learned and my professional growth, but I didn’t know where to begin.
I knew I wanted two things before I started working on my portfolio:
- I wanted my portfolio to accurately reflect who I am.
- To be simple and straightforward for ANYONE to navigate.
With these two goals in mind, I started reading articles on portfolio building to figure out how I wanted my portfolio to be organized and for inspiration.
Following that, I created a few low-fidelity wireframes for a landing page, which I subsequently executed in Figma.
I’ll include a few images of the high-fidelity designs I created.
Before you ask, I do not know what was going on with the third design either.
Choosing a Font Type and Colour:
After finishing my landing page, I moved on to designing the rest of my website’s pages, which required me to think about things like font choice and color scheme. If you look at the images above, you’ll notice that I divided my website into light and dark modes, but as I continued, I realized that doing so would remove a lot of my personality. I’m a big fan of colors, and I wanted that to be known. Because it portrays simplicity and modernity, I chose the DM Sans Font, a low-contrast geometric sans serif style, which aligned with the goals I had set while building my website.
When it came to choosing the colors for my website, I researched a lot about color psychology and took it into consideration.
Colour psychology: Colors may elicit emotions, elicit behaviors, and shift thinking patterns. The study of how colors influence our behavior is known as color psychology. Certain colors elicit specific responses in the user’s psyche; for example, black is traditionally worn at funerals to indicate that we are mourning.
Dark jungle green was my color choice (1A1E23) Because of its association with wisdom, I also chose two hues of pink as accent colors, Faux-Lavender blush (FFEBF2) and Philippine pink (FF2990) due to its calming effect.
Building my design:
There are various No-code technologies available, notably WebFlow and Airtable. I had previously decided that I would create my website since I believe it would allow me to tailor it to my liking. In building my website, I used React JS and since I had previously designed what it would look like, it was easier to develop.
I divided my portfolio into five sections.
- Home Page: This included a quick overview of who I was, my talents, four previous projects, extracurricular activities, and how to reach me. This was done because I realized that not everyone would want to navigate through the many sections on the website, so I offered summaries for those who didn’t have the time to do so. You can see more about this here.
2. About Page: This includes Medium essays to provide readers a better understanding of who I was and learn more about my previous and current experiences, as well as a broader description of who I was, what motivates me, and my ideas. You can read more about me here.
3. Projects Page: Because I am interested in both development and design, I wanted to include both in my portfolio. The projects page featured six projects and case studies that detailed my involvement, the tools I used to create the project (Google Docs, Figma, VS code), the project’s duration, photographs, and the problem the project was attempting to answer. You can read my case studies here.
4. Resume Page: Although I do not believe that a resume page is necessary for everyone, I opted to include one to allow visitors to my portfolio to understand more about my experiences, and education.
5. Contact Page: A contact page with a message and a content form driven by EmailJS was included, allowing me to receive emails entered into the contacts form.
6. 404 Page: Users find 404 sites frustrating, so I incorporated a popular meme on my custom 404 page, along with a message and a back to home button that took the user back to the main page, to make the user’s experience less frustrating.
Lessons I learned while building my portfolio:
Let who you are shine through: Anyone who visits your portfolio is interested in learning more about you, your personality, your experience, and so on. For example, a ton of people have dark theme portfolios, and while it's super cool, it just didn’t feel like me. I also know it’s difficult for many individuals, including myself, to talk about themselves, so I make a Google doc to ask myself, “Why Me?”
- What made me interested in this field ?
- What are the skills i have that would make me perfect for a job in this industry
- What motivates me in relation to the industry in which I work?
- What differentiates me from other candidates in this field?
You don't need a skill chart: I know what you’re thinking: no one makes skill charts anymore. However, I’m here to inform you that people still do. Don’t put restrictions on yourself by writing something like “30% proficiency in React Js.”
Always Proofread: You don’t want to be the person whose portfolio or resume contains typos. Doing this also allows you to check if all of your links are correct, making it easier for people to contact you.
Make your portfolio easy to navigate: I know we’ve heard it before, but I’m here to remind you that it’s essential. For portfolios containing case studies or blog posts, how easy is it to scroll back to the top, use the navbar, go back to a previous page, or continue to the next page?
The easier it is to navigate, the better the user experience.
Write a Case Study: This sounds super stressful, but I promise, it’s worth it. It allows whoever is reading any of your projects to know more about a project in its entirety, what it aims to solve, the role you played in carrying out this project to avoid confusion, what tools you used etc.
The changes Never end: The first version of your portfolio is unlikely to be the final version. I lost track of how many git commits I did, so don’t be scared to make changes until you’re satisfied.
If you’re presently working on your portfolio or rebuilding it, feel free to leave feedback or anything else you think I missed in the comments. Best of luck to everyone!!
