2023 • 3D Modeling, React, Three.js, UX/UI, Responsive Design
Solo Project
personal blog
Live website made from scratch with Three.js + React.
Overview and role
This is a website that I made for myself. My blog serves as a platform where I can casually share thoughts and snippets of projects and creative experiments. As a self-initiated solo project, I did all of the designing and developing, from start to finish. In total this took me around 3 weeks.
Home page that piques curiosity and invites interaction
Building it from scratch gave me full control of the features of my website, the main thing being the home page shown above. I knew I wanted it to pique curiosity and invite interaction with a purpose, characterizing not only my blog but the kind of projects I work on. I was drawn to the concept of my ideas residing in a literal head, and after exploring several 2D and 3D variations, I decided to go with this 3D figure. I did the modeling in Blender, and used React-Three-Fiber (a React renderer for Three.js) to display it and make it interactive on the browser.
Blog posts using GraphQL Headless CMS
After doing some research on creating blogs, I decided to use Hygraph, a Headless CMS, to manage my blog's written content. I then use a GraphQL API to access the content when building the site and created a static site generator with React to render individual post pages, making for a very streamlined and scaleable blog posting process.
Responsive cards and sorting/filtering feature
All pages of this website were tested to work on both web and mobile. This is most visible on the Archive page, where the cards displaying the blog posts change from a horizontal layout to a vertical one. The CSS grid property was crucial in creating this responsive design. As for sorting and filtering, users can choose to order by newest or by oldest, and also can filter the posts to show only experiments or only thoughts (for now those are the only two categories of posts).
Visual system
The motif of amorphous structures, visible when the head opens up or in the background of other pages, serve to represent the dynamic nature of my thoughts. In terms of typography, I searched for casual and inviting fonts to use for the blog posts. I included a serif font to use for text that I want to stand out, like headings and titles.
Learning from resources
This may have been a solo project, but the creation of this website would have been impossible without countless Youtube tutorials, open-source JS libraries, and lots of inspiration from various artists (the figure on the homepage is based on Felicia Chiao's artwork) and creative developers.