my portfolio ver.1

Portfolio Site as an Artwork

The concept behind this site was to create a digital art piece and portfolio website with the same sensibility as painting a single canvas. Starting from the idea "What if the portfolio site itself became an artwork, rather than just displaying works and achievements?", I designed the entire site to function as a unified piece of art.

Exploring Shader Expressions and the Beauty of Serendipity

Having always been deeply fascinated by shader-based expressions and real-time transformations, I extensively explored my preferred visual language centered around shader techniques, which ultimately gave birth to this site's main visual.

Noise moves through time, distorting textures in its wake. Elements layer upon this foundation, creating different appearances with each frame—I found myself completely captivated by this continuous stream of unpredictable, beautiful moments born from serendipity. The moment I completed this visual, I knew I had to build an entire site around it.

Modern Yet Classical, Classical Yet Modern

While this portfolio site is built upon cutting-edge shader expressions, I also wanted to pay respect to the deep history of "fine art" by incorporating classical elements that would give the site a timeless quality.

I carefully considered many aspects, from font selection to layout variations, but what I'm particularly proud of is the use of hand-drawn patterns that I created myself, featured on the homepage and several sub-pages. By incorporating these imperfect, analog, and classical elements created by human hands, I believe I've managed to infuse warmth into this digital artwork.

Website Experience as a Museum

While this site functions as a single artwork, when considered in its original context as a "portfolio site," it also serves as an exhibition space—essentially, a museum. With this dual purpose in mind, I wanted it to fulfill its role as a museum by incorporating not just information delivery, but interactive changes and engagements that users can influence as part of the viewing experience.

Experience Design for Each Page

• Profile Page: Implemented mouse-driven tilt effects on images. Even my mundane profile becomes a more engaging experience with simple mouse movements.
• Projects Page: Focused on transition methods for content switching, implementing animations that make the act of navigation itself enjoyable.
• Gallery Page - Viewing Experience Woven with Ripples

  The Gallery page features a unique WebGL implementation different from other pages. Mouse movements generate ripples, with images revealed beneath these ripples.

  This isn't simply about viewing images—I want visitors to appreciate the distorted images created by the ripples. Gallery images warp under the influence of ripples, changing in real-time. I hope you'll experience the fascination of these visual transformations born from serendipity.

Atelier Page - Engaging with Shader Art

As an experimental approach to encourage more active participation, I created the Atelier page. Here, visitors can enjoy a creative experience based on the same shaders used for the site's main visual.

Creative Features

• Color Adjustment: Create your own preferred color palette
• Mouse Interaction: Add fluid effects through cursor movement
• Random Textures: API-driven random texture acquisition creates unique color combinations each time
• Noise Coefficient Control: Modify the overall visual appearance

This section also incorporates elements focused on beauty through serendipity. Completed visuals can be automatically screenshot with a single click, so please experiment freely and share your unique creations on social media.

A Small Touch - The Appearance of Frames

Based on the "single painting" concept, when the screen exceeds certain dimensions, frames appear around the site's rendering area, creating the visual effect of a single painting hung on a tiled wall. This allows visitors to experience the site as if they were truly viewing an artwork in a gallery.