Re-designing my Portfolio

Photo by Fredrick Tendong on Unsplash

I’ve recently done a wireframe re-design of my current portfolio and hope to get it done by the end of this month! I’ve been wanting to do it for a while as I had felt more comfortable writing code in React.js and styling things up with CSS. I’m considering switching out TailwindCSS for traditional CSS by using styled components as my library, but I’ll have to think about it first before committing to that.

My Portfolio Before

Top
Bottom
About Me extended when clicked.

When I first did my portfolio I had used class components and some functional components when having a useState(). I’m going to be switching that out completely by using functional components fully instead. Below is a partial snippet of one of the functional components I used that had a useEffect() for a modal component.

Functional Component
Class Component

Looking back at my class component now (super cringe), I know I can turn this into a functional component instead since this is basically just a simple <p> tag with text inside. Not only that but the <br /> is definitely avoidable. I’ll be re-doing this using CSS instead.

The reason why I’ll stick mainly to functional components is because it’s strictly presentational while class components are mainly used for state changes. Most of the components I had coded in my portfolio are presentational, minus the useState() and useEffect() hooks that were utilized. But since there’s an existing library for state changes in functional components, I’ve found it hard to go back to regular class-based components when working with React.js.

Portfolio v2.0 Mockup

I’ve decided to add more details to the portfolio and have a centered Hero section for the “About Me” and additional links on the side. Rather than the navigation bar staying on top, I’m going to just have it stay at the bottom at all times instead. I’ll also have a toggle-able light-mode to dark-mode on the navigational bar for accessibility.

The four squares icon will pop out an additional container below the regular navigational bar. This will show the additional sections of my portfolio and when clicked, it will auto-scroll to that chosen section.

Hero section w/ a sticky navbar
Navbar toggled

I’m going to have all of my portfolio projects in one component that the user can scroll horizontally with, rather than having it all in one vertical component in in cards. This way I can have a separate component that can pass data onto the title, description, image, and link to the demo.

Project Slide
Footer

Lastly, the footer will have a dedicated button for email/inquiries and have the social icons below as well. I’m going to stick with React.js and Netlify but include additional libraries. I’m also considering having preview cards of the recent blog posts I’ve made as well, but first I’ll work on the foundation and everything first.

These are the colours I used in Figma:

Decided to make it more colourful rather than black and white with small pops of colour. Pretty excited to re-do my portfolio now that I see how I can improve on it. Can’t wait to share it soon!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store