Introduction
How I built my new Portfolio with Framer
This would be my second time building out a portfolio on Framer and have learnt quite a bit building my first one. In the second one I decided to really clean up in my color naming & usage, reduced complexity on most components, accessibility and performance improvements. Its also got much less content as in no photography work, graphic design, branding etc and is entirely focused on the product/ui/ux work. I think its the right direction but I may include that work in the future.
2025
2-4 weeks
Product Designer
Personal Portfolio
Variables
How I've used Framers Variables to build my website. Utilizing colors, components, text sizes, and link styles to deliver a refined, streamlined, and quality site.
I've created Figma styles many times before and decided to re use the colors and generated a set of typography sizes from, Typescale. With the new colors I tested them for accessibility for mainly alerts used in the site.
I think I do need to clean up how the colors are used in components and considering the simplicity of my site they could most likely be renamed to reduce and improve clarity. It would also keep the components from getting out of hand with inconsistency if they for the most part, start from the same baseline.
For example, Background, Text, textAlt, Container, Border, borderHovered etc could be the new set of colors used. Then the Cards colors might simply be adding the unique hover colors for the various projects.
Styles
Figma Color palettes
Light/dark mode
Components
Subject to Change
Components used to build the site, how I've used Framers Assets panel to organise, collate and keep my site working and up to date.
I've organised multiple components into folders, and single components are left out of folders. The navigation folder contains the nav-item which make up the navbar, an example of atomic design principles in use in my portfolio. I've decided to separate my primary and secondary buttons but I definitely could keep them together but I find it easier to just drag and drop whichever I need rather then open a dropdown and selecting either one.
I've organised my iconography which includes brand and language logos, and the main icon set being used is a version of Material Symbols. I have two link components one acts as a normal link which can have or not have padding, and the other is the copy email component which is styled the same as links. I also have paragraph link styles but those are managed elsewhere in Framers Assets panel.
Components
Component Assets
Component Example - Card
Using the card component as an example, I've streamlined how I use color and how the properties are shown in different sections.
I've renamed my cards in order of Large - Medium - Small. The large card, previously known as the Banner-card, displays a large title, project description, tags and multiple more imagery. The medium card is a step down, featuring a subtitle for the description of the project, tags, and limited imagery. The small card features an icon, title, description, no tags and no imagery. These are much better and somewhat follow my typography in the project being, S,M,L,XL,XXL.
Card Components
Large - Medium - Small.
Cards on Mobile
Medium Card Variables
Site Structure
Changing how my portfolio site is structured to better navigate people between work, design & development work, and in general better information architecture.
The previous portfolio was basically in groups with, UI/UX, Graphic Design, Coding Projects etc. This isn't terrible but when you have an app you both designed and built having two separate cards would not be a great user experience.
The new site structure looks more complex and has an extra level of nesting but in terms of user experience is much better. The pages are still separate but considering my main focus is in design the user will always (if applicable) be greeted with that page first. Then they can choose to view either design / development work through the buttons.
Design / Development
Previous
New Design
