Hi, I’m Daiki Fujita, a designer based in Tokyo, Japan. In this case study, I’ll walk you through the making of my 2025 portfolio.
Background
This project began with two motivations: reaching my 10-year milestone as a designer, and wanting to create a platform to showcase my work more openly.
When I thought about my roots as a designer, I looked back to my childhood. My family ran a small electronics shop, and I was given a PC at an early age. I remember spending hours drawing with the Paint tool on Windows 95. That sense of joy and excitement—being able to make pictures on a computer—stayed with me. For this site, I wanted to capture that feeling and connect it to the concept of “Abstract & Concrete.”
Overview
In today’s world, where digital technology evolves so quickly and information is consumed in an instant, I wanted to focus on communicating only the essentials. That became the axis of the concept: balancing abstraction and concreteness.
To embody this visually, I kept the design minimal: only two colors, and elements based on points and planes. These became the foundation for three expressive styles—particles, pixel art, and mosaic art—unifying the atmosphere of the site and creating an immersive experience.
For this site, I decided to experiment with Framer, which I had been curious about for some time. The effects and animations were developed as original code components in React.
Design Approach
Particle
To express the idea of “seeing, touching, and feeling” each project, I used particle-based interactions. For every work, I created a key object and transformed it into particles.
These particle elements were built with an originally developed code component. Attributes such as particle count, size, color, position, and the degree and range of mouse pointer interaction can all be adjusted—and many other properties as well—through the GUI. Adding or updating works is designed to be simple—just upload an SVG.
This site is my personal portfolio, and each project featured here is a crystallization of my own work, expressed through the morphing of key objects. In addition, I enhanced the sense of immersion by adding a background effect where a particle-constructed space seems to warp dimensions as you scroll.
2D Graphic Effects
To reinforce the visual identity, I incorporated graphical effects made of planes. These appear during page landings and transitions, giving the site a consistent atmosphere.
Mosaic Effects
For project content, I used a pixel-reveal effect. By gradually visualizing the work, it sparks curiosity and invites viewers to stop and engage more deeply.
Subliminal Elements
The elements that flash randomly for a split second are inorganic in shape. They don’t carry meaning on their own, but they’re meant to raise a question: “In an age where information disappears in an instant, are we really grasping its essence?”
Hidden Details
I didn’t want the site to just feel sleek and stylish. So I added playful touches—like eyes that follow the cursor, or elements that fall asleep if left idle. I’m always sleepy.
The Tech Stack
- Frontend: Framer, React
- CMS: Framer CMS
- Design: Figma, Framer
Closing
Thanks so much for reading!
Creating this portfolio allowed me to reconnect with the same joy and excitement I felt as a kid, drawing on a computer for the first time. I poured that feeling into the site, and if visitors can feel even a little of that joy through this website, I would be truly happy!