Hello! I’m Stefan, a artistic developer primarily based out of Stockholm, Sweden. On this case examine, I’ll take you thru the design and growth strategy of my 2025 portfolio.
I really like doing facet tasks as a artistic outlet and as a spot for experiments. As I noticed I used to be behind with my very own portfolio and wished to make use of the chance to mix my love for typography and coding.
Aimed toward showcasing my work centered on movement and interactivity, the positioning relies round a minimalist design complemented by dynamic visuals. These embrace typographic animations, WebGL video grid and seamless web page transitions. The purpose was to create an attractive and performance-optimized expertise that communicates my work in a clear, daring, and artistic trend showcasing a specific group of tasks I labored on over the previous 10 years.
Design and movement
The design language is uncooked and unpolished, reflecting my ardour for experimenting and creativity within the digital house. This aesthetic, impressed by Swiss print design, blends offset grid layouts with beneficiant empty house and a robust give attention to typography. It creates an environment that requires artistic movement concepts.
Listed here are a number of of the design highlights:
- Offset layouts: The web page layouts are uneven and unbalanced in components which provides dynamics to the visible presentation.
- Geometry and typography: Angular and geometric shapes alongside typographic components act as pivot factors throughout web page transitions and content material loading.
- Interactive components: Daring animations, glitchy shader results, noisy lo-fi background and infinite scroll interactions all type an interaction between the inflexible structured core and the extra fluid digital overlay.
- Movement motifs: I like so as to add movement motifs and patterns within the tasks I work on. These can entail a variety of various things – from distinct micro-interactions to uncommon web page transitions and daring hero animations. Just like a catchy a part of a track, these visible hooks are repeating interactions or animations that catch the person’s eye and hopefully make the expertise extra memorable.
Tech stack
The portfolio was constructed utilizing fashionable net applied sciences that guarantee each excessive efficiency and depart room for creativity. Right here’s a fast breakdown of the instruments I used:
- React: The core of the positioning is Subsequent.js with its pages router (vital for seamless web page transitions) using dynamic imports and code-splitting, server-side rendering, and static website technology.
- Framer Movement: Framer Movement (now Movement) was the apparent selection for its ease of integration with React given the declarative nature and composability. So as to add to that, utilizing the present crucial features like animate to control shader uniforms is at all times helpful.
- SCSS modules: This supplies scoped types permitting for extra maintainable and modular CSS.
- Three.js & React Three Fiber: Interactive WebGL integration used for visible components and shader results, including a further layer of depth and movement to the positioning.
- CDN: Video content material is hosted on Cloudflare’s R2 bucket and delivered through its CDN.
- Vercel: Internet hosting on Vercel offered seamless deployment, excessive availability, and efficiency optimizations.
Key options and highlights
Typography animation
The principal movement motif current on the positioning is the characters-to-word animation. This took place as an experiment whereas I used to be attempting to code up one thing participating that connects the uncooked typographic layouts with the digital fashion of interactions. The phrases are divided into particular person characters which then come collectively via movement, illustrating how coding bits and items in the end type the top product.
From a technical standpoint, that is achieved by splitting every string into numerous iterations and offsetting every section primarily based on its index and string size. Along with that, limiting the section space creates a masks and permits for a fluid meeting of the ultimate phrase inside. The bits assemble collectively by having masked components transfer alongside the x axis forming the glass-like parallax impact.
<span
aria-hidden
fashion={{
left: `${(index / complete) * 100}%`,
width: `${100 / complete + 0.01}%`,
}}
>
<movement.span
preliminary={{ x: from }}
animate={animate && { x: to }}
transition={{
period: 1.25 + index * 0.025,
delay: delay + index * 0.025,
ease: easeExpOut,
}}
>
{textual content}
</movement.span>
</span>Intro animation and web page transitions
One of many core options of this portfolio are the web page hero results. Leveraging the ability of Movement library, I created customized transitions between pages that intention to really feel pure and fascinating, serving to to maintain the person immersed within the web site. Combining dynamic fade results with content material animation there’s a way of motion and liveliness that enhances this in any other case minimalist design.
The code associated to those essential web page crossfades is positioned in a shared Structure element wrapping each web page. It renders Movement’s AnimatePresence which dictates how the rendered pages will enter and exit — mount and unmount. It additionally supplies helpful callbacks that guarantee subsequent triggers and on this case state modifications that orchestrate the principle scroll controller.
<AnimatePresence mode="wait">
<movement.essential
key={asPath}
preliminary={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ period: 0.5, ease: easeQuadInOut }}
onAnimationStart={onLayoutAnimationStart}
onAnimationComplete={onLayoutAnimationEnd}
>
{youngsters}
</movement.essential>
</AnimatePresence>Customized navigation
The homepage acts as a welcome display screen and is navigated away on scroll placing the tasks on the forefront of the positioning. Equally, the tasks web page represents an outline that permits a direct glimpse into every portfolio piece but additionally permits for a fast manner again to the splash display screen by scrolling upwards.
The problem right here was to mix the 2 scroll interactions – the WebGL scroll and the navigation scroll. For this objective I relied on Lethargy scroll to detect correct scroll occasions and paired it with a customized scroll controller primarily based on Digital scroll that’s used all through the positioning as the principle scrolling engine.
Video rendering and shader results
With the rising demand for high-quality media experiences, I ensured the help for high-definition video content material operating at 60fps and hosted it on R2 to ensure fast load occasions. Movies are carried out with WebGL as textures. With a view to enable for the next video compression fee with out noticeable artifacts, the fragment shader has an added LED overlay alongside the noise grain on high of every video. This additionally has the visible impact of presenting all of the tasks via the identical lens, making a constant thread that ties the person portfolio items collectively.
The displacement taking place when loading and switching tasks manipulates the vertices alongside the x axis utilizing a noise-based sample. On the similar time, it creates a time buffer that permits the brand new movies to begin loading whereas the transition is in progress. Moreover, an added sense of depth is created by making use of a curved bend to the modelPosition within the vertex shader.
The tasks media is rendered in a resourceful manner by sharing aircraft meshes. If a venture has fewer movies than one other, the additional meshes are skipped and never rendered. This manner the WebGL overhead is optimized because the variety of meshes is at all times stored on the minimal.
So as to add to that, all of the meshes share a single aircraft geometry between them.
const geometry = useMemo(
() => new THREE.PlaneGeometry(planeSize.width, planeSize.top, 1, 128),
[planeSize.width, planeSize.height]
)One other visually attention-grabbing shader impact is a pseudo-noise-like movement of the segmented items within the background — basically a time-based visible sample that provides motion. Right here it’s emphasised.
Infinite easy scrolling
The about web page is an editorial bit and it options an infinite scroll/loop — an interplay I actually prefer to see utilized in the appropriate context. Right here, it’s primarily based on the shared scroll engine retaining the identical fluid really feel between the WebGL grid on the tasks web page and DOM motion on the about web page.
Making a easy scrolling impact will be carried out in several methods at the moment, a few of them extra accessible than others and every having their very own use. For the aim of this venture, and once more exploring and having enjoyable, I wished to tackle making a reusable infinite scrolling idea that works on contact gadgets as properly.
The gist of it’s — A totally arbitrary web page content material is handed in because the element enter and will get segmented into sections. Primarily based on the rendered dimensions of every part the information is saved — top and high offset of every part. As we now collect the whole dimension of the whole web page, the scroll logic retains observe of this setup and interprets solely the at present seen part associated to the progress, the remainder are idle. This permits for optimum DOM manipulation as transforms are utilized within the body loop solely when wanted. This scrolling approach has contact and resize help and permits for content material of any form and dimension.
Cellular model
The cellular model retains the identical UI interactions and movement rules except the WebGL layer. This assures a extra light-weight website leveraging native HTML5 video components and browser-optimized content material loading. To be extra in step with the desktop model, different visible components are added similar to movies grid on the tasks web page.
Wrap up
That’s it! I hope it was a enjoyable learn.
You may try the positioning right here. If in case you have any questions or wish to say hello or construct one thing collectively, be happy to succeed in out to me via my electronic mail. And one for the street—use .gif as your open-graph pictures. It’ll animate the place supported.
Learn Codrops!
