This very portfolio — a website to showcase my background
My role
UX/UI
Web Dev
Tools
Figma
Gatsby (React)
GraphQL
Styled Components
Framer Motion
Task
To make a lighweight online showcase of my design and development works with convenient UX and centered around my work
About
Design portfolios are often quite large, and if they are online, they might be slow. I wanted to make a fast online portfolio which is easy to maintain and whose speed does not depend on the amount of projects added. See the detailed exaplanation of design decisions below.
Process
UX Design
i wanted users to come to the contacts section from either the main page or a project page
UI Design
Filters and horizontal scroll for easy navigation to all the sections
System Design
To add a project, I need to make a new JSON file from a template and fill in several fields
Development
Dynamic project page generation from JSON files and a custom template
UX Design
I wanted to make an accent on my work, so I decided to build UX and UI around this. On the UX side, I wanted users to come to the contact section from either the main page or a project page as shown on the image on the side.
User flow
UI Design
As I wanted users to view different aspects of my work in a non-exhausting way and without constant vertical scrolling, I descided to use filters and horizontal scroll easy navigation to all the sections of the page.
System Design
I needed both user-friendliness and maintanability for the site to add projects easily. I decided to use Gatsby, for it is brilliant at static site generation, and this is what I wanted: to create project pages dynamically from a DIY template and a Markdown file. However, I was not satisfied with the rendering of Markdown in Gatsby (it is too narrow, and I needed more granular control), so I opted for JSON as project data files.
This very text is written in JSON. So I wrote a detailed template — a huge React component to account for many possible scenarios like using one or more iframes, images or different sections. By the time I finished, I have realized having reinvented an admin panel, which immediately made me feel not so cool and clever. But I feel good anyway!
Development
The project is written in Gatsby, GraphQL (as seen in Gatsby), Styled Components and Framer Motion for animations.
Bonus
As you might have noticed, I love jokes involving recursion.