First Portfolio Blog

This site is built on top of Next.js. Next.js is a framework based on React, but it covers a wide range of features needed for practical web application development, including routing, metadata management, server-side logic, static generation, image optimization, and SEO support. At first, a portfolio website may seem like something that can be built with only HTML and CSS. However, when considering features such as a blog, project pages, a contact form, OGP metadata, language switching, content management, and future scalability, it becomes easier to treat the site not as a simple static page, but as a proper application. This is especially true for the blog feature. A blog requires URL design, slug management, metadata, list pages, detail pages, and control over publication status. For that reason, I use the Next.js App Router to separate the structure by page while keeping the content easier to manage. For blog content management, I use Supabase. At first, it is possible to write article data directly inside the code. However, as the number of articles grows, and as the site starts handling Japanese and English content, publication status, structured content blocks, and image galleries, managing everything only in code becomes increasingly difficult. To solve this, I decided to manage blog articles in a database using Supabase PostgreSQL. Each article stores information such as the title, slug, body, excerpt, tags, publication status, published date, created date, and updated date. This allows the frontend to have a clear responsibility: fetch and display only published articles. Supabase also supports Row Level Security, which makes it possible to control access to data directly at the database level. Even in personal development, it is important to think about what data should be public and how permissions should be designed. This becomes especially important when building public-facing features such as blogs or contact forms. The goal should not simply be “make it work,” but also to consider “what should be visible” and “where write access should be allowed.” For the UI implementation, I use Tailwind CSS. One of the strengths of Tailwind CSS is that it allows visual styling to be adjusted quickly at the component level. Spacing, colors, borders, gradients, responsive behavior, hover effects, backdrop blur, and shadows can all be managed without constantly moving back and forth between separate CSS files. In this site, I use many visual elements such as card-based UI, glass-like layers, glow effects, radial gradients, and responsive layouts. However, the goal is not simply to make the design flashy. I wanted to create a UI that is easy to read as a technical blog while also leaving a strong impression as a portfolio. A technical blog loses its value if the text is difficult to read. At the same time, a portfolio also needs to create a strong first impression. Because of that, I paid close attention to the balance between readability and visual expression. On pages where users read articles, I focused on spacing and line height. On card list pages, I prioritized information structure and visual guidance. On the top page, I used animation and 3D expression to create a more memorable impression. In this way, I adjust the density and movement of the UI depending on the role of each page.

In this portfolio, I also use UI animation with Framer Motion and 3D expression with React Three Fiber. Framer Motion is a very useful library for adding natural animations to React applications. In this site, I use it for section transitions, card appearances, hover interactions, fade-ins, slide animations, and visual support during page transitions. Animation is not something that should simply be added for the sake of movement. Excessive animation can become noise for users. However, well-designed animation can communicate UI state changes naturally and help users understand where they are looking and where they can go next. In other words, animation is not only decoration. It is also part of information design. For example, instead of displaying cards instantly, adding a slight delay and fade-in effect can make it easier for users to recognize a group of content. A subtle floating motion on hover can intuitively tell users that an element is clickable. By adding motion to section transitions, the entire page feels less like a static collection of information and more like a connected experience. This site also includes 3D expression using React Three Fiber. React Three Fiber is a library that allows Three.js to be used within React’s component structure. However, once you actually start using it, you quickly realize that it requires a different way of thinking from ordinary React development. In the React world, UI is usually built around concepts such as state, props, components, and rendering. In 3D expression, however, concepts such as scene, camera, light, mesh, material, geometry, animation loops, buffers, and frame updates become important. In particular, working with per-frame updates using useFrame, controlling objects through refs, creating particle effects, positioning models, and managing cameras requires a different mindset from ordinary DOM-based UI development. I feel that React Three Fiber is not simply a “magic library that makes 3D easy in React.” Rather, it is a technology that brings the world of Three.js into React and forces you to think carefully about how to design the boundary between them. Outside the Canvas, the structure can be organized like a normal React application. Inside the Canvas, however, you often deal with objects that move every frame, coordinates that change in real time, buffers, and animation state. If you try too hard to force these into ordinary React component design patterns, the implementation can actually become more complicated. This is one of those areas that is difficult to understand until you actually work with it. When integrating 3D expression into a website, performance is just as important as visual impact. If the model data is too heavy, loading becomes slow. If there are too many particles, rendering cost increases. In addition, performance can vary greatly depending on the user’s device, such as smartphones, laptops, or desktop machines. For that reason, 3D expression needs to be designed while balancing visuals, performance cost, presentation, and usability. In this portfolio, I treat 3D assets and animation not merely as decoration, but as elements that communicate my technical interests and creative direction. What kinds of technology am I interested in? What kind of UI do I find beautiful? How much detail do I believe is worth building into an interface? I wanted the entire site to express these ideas as well. As a result, this portfolio became more than just a profile website. It became a practical web application built by combining Next.js, Supabase, Tailwind CSS, Framer Motion, React Three Fiber, and 3D assets. In this blog, I will continue documenting the production process, technology choices, implementation challenges, improvements, performance tuning, UI design, and experiments with 3D expression. A portfolio is not something that ends once it is completed. I believe it should continue to grow along with my technical skills and the way I think about development. This site will serve both as a reflection of where I am now as an engineer and as a place to record my growth going forward..