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 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, which I've affectionately named Maru ('marui' means round in Japanese). 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 amorphous blobs that you see when Maru's head opens up are representative of my thoughts and their dynamic nature, and these shapes appear on the other pages as well. In terms of typography, I searched for fonts that matched Maru - essentially, rounded and sans-serif. I fell in love with the Dongle typeface but there were a few factors that made it hard to use, including limited font weights and no italic options. The closest match I could find was Nunito, which gives me a lot more flexibility, so I use it for things like 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 that isn't to say that I could have done it alone - the creation of this website was made possible by countless Youtube tutorials, various JS libraries, and lots of inspiration from various artists (the figure on the homepage is based on Felicia Chiao's artwork) and creative developers.