New Portfolio
Improving the use of components, reducing amount and increasing their versatility. Improved use of color theming.
UI/UX, Website
Problems
There were multiple different card types, multiple button types for icon or no icon. 100s of colors.
Slow performance
My previous portfolio was sometimes slow to load. Large images and complex animations accelerated this issue.
Accessibility
My previous site utilized quite a bit of animation, motion in hovering, moving the mouse etc. Users could not use the preferred reduce motion.
Key Improvements & New features*
Added simple back to navigation
In the previous site it was utilizing code that would also include jumping to IDs which hurt the user experience.
Better components
Improving the use of properties and splitting primary & secondary versions for easier updating.
Color naming convention*
Introducing a new way to apply colors across everything to make the light/dark feasible but also easy to update.
Accessibility
Reduced amount of animation & motion. Utilizing alt text for images.
Dark/Light mode*
Automatic theme toggle for readability and personal preference.
Where It’s Still Evolving
Performance optimizations
Reducing amount of components, ensuring small/reasonable image sizes. Removed complex components (Blur gradient).
SEO optimizations
Improving the SEO of the site. Need to learn more about SEO itself and how to apply it best to my site.
Color naming convention
Improving the way I apply and utilize colors across my portfolio and components.
Accessibility
Aria labels where applicable and much more accessibility best practices to learn.
Read more about the Development Process
Old vs New — components
My previous site as you can see had many components. For example the main different imported components, project cards etc. I think it all became a bit unwieldy to keep consistent and update now and into the future based on my learning path.
Color naming convention
Below shows an example of my new way of utilizing color. Still needs to be refined and will most likely be subject to change. I think currently the best way for me is to basically have a default style then include in folders the unique styles. For example my project cards will have a color used from the project so they might be different depending on the project.
As you can see I've structured this in the Cards/Project Card/Default styles/Unique styles.
This also lets me create a light and dark color for the site which automatically changes based on the users browser preference.
Component versatility
With my expanded knowledge on utilizing components and properties from Figma building out real projects from my Council Internship this made it very simple and easy to do the same in Framer. Using the properties description to separate and create basically sections of properties massively helps on the more complex components.
Final Site
*Mostly a finished site. Images and some project pages need to be filled out.