When Alternative Finds You
Freelancing typically means juggling shopper work whereas attempting to spend money on your individual progress and future prospects. Selecting to dedicate time to work on your self isn’t a simple resolution as a result of it may possibly shortly really feel such as you’re “dropping” cash. However as a French expression goes, “Le hasard fait bien les choses”, which will be translated to “As luck would have it”.
One month, I immediately discovered myself with none tasks or revenue. Relatively than seeing it as a setback, I selected to deal with it as a chance: a uncommon likelihood to be proactive and switch this quiet interval to my benefit by fully rethinking my portfolio.
Defining Goal
With the fifth iteration of my portfolio, I already had a stable basis, so ranging from scratch wasn’t mandatory. The construction was easy and clear, I refined it into three pages:
- Residence: introduces the necessities, previews tasks, and guides guests to discover my profile or dive into the work.
- Work: showcases every mission with fullscreen parallax imagery, important information, and color-driven animations. A number of navigation paths make sure the content material flows naturally and each mission will get observed.
- About: presents my background, strategy, companies, and get in touch with info.
The true problem wasn’t the construction although, it was the connection between kind and content material which nonetheless didn’t really feel absolutely aligned. That’s why I revisited each phrase and rethought each sentence, ensuring the portfolio didn’t simply showcase my work, but in addition actually mirrored who I’m and what issues most to me as an unbiased.
With that basis clarified, it was time to outline the aim behind it. With a background in design, and having grown right into a frontend developer over time, I wished my portfolio to lastly convey the duality that defines my work. That’s how the intention and guiding imaginative and prescient of my new portfolio took form:
Reclaiming my UI eye whereas asserting technical experience.
Format & Identification
Having grown up within the birthplace of the Swiss Fashion (recognized in graphic design for its modular grids, sans-serif typography, and minimalist graphic parts) and having studied structure for a 12 months, my strategy is of course rooted in programs, precision, and symmetry. The purpose was to create a refined identification, rigorously built-in and delivered to life by way of distinctive animations.
Fonts & Colours
With simplicity in thoughts, I selected a single fashionable and versatile typeface: Neue Montreal from Pangram Pangram Foundry. An intentional nod to the three years I spent in Canada.
The colour palette can also be intentionally restrained: shades of black and white, with a contact of orange on the About web page so as to add a extra private really feel. On the opposite pages, the primary colours of every mission information the visible course, letting the work itself take heart stage.
Strict Grid System
The portfolio additionally depends on a single strict grid, with parts stretched throughout the display and positioned to take advantage of the area. This disciplined format offers each web page a way of stability, rhythm and consistency
Growth Overview
For each mission, I attempt to set myself a technical problem or study one thing new. For this one, it was constructing a backend with Sanity. It ensures longevity and effectivity, mixed with my regular tech stack that I at all times attempt to maintain as fashionable and up-to-date as potential.
Tech & Instruments
- Nuxt 4: versatile frontend framework
- Sanity CMS: headless content material administration
- TypeScript & SCSS: modular and reusable code
- Pinia: to handle international state and information
- Lenis: easy scrolling
- GSAP: scroll and textual content animations
- Swiper: touch-friendly sliders
- WebGL: pixel path impact
- Vite & Nitro: server-side optimization
- Infomaniak: eco-friendly internet hosting
Backend Construction Overview
studio/ # Sanity CMS — Again-office content material administration
├── schemaTypes/ # Content material sort definitions
├── construction.ts # Studio sidebar construction
├── sanity.config.ts # Sanity mission configuration
└── sanity.cli.ts # CLI configurationFrontend Construction Overview
net/ # Nuxt 4 Utility — Entrance-end
├── app.vue # Root element, format & transitions
├── nuxt.config.ts # Nuxt configuration
├── pages/ # File-based routing
│ ├── index.vue # Residence web page
│ └── [...uri].vue # Dynamic catch-all (CMS-driven pages)
├── parts/
│ ├── blocks/ # CMS-driven content material sections
│ ├── nav/ # Navigation parts
│ ├── shared/ # Reusable UI parts
│ ├── icons/ # SVG icon
│ ├── system/ # Dev / debug utilities solely
│ └── templates/ # Web page-level templates
│ ├── About.vue
│ ├── Error.vue
│ └── Initiatives.vue
├── composables/ # Reusable Vue logic
├── shops/ # Pinia international state
│ ├── content material.ts # CMS content material retailer
│ └── ui.ts # UI state (navigation, loader…)
├── plugins/ # Nuxt plugins (app initialization)
├── directives/ # Customized Vue directives
│ ├── textAnim.ts # v-text-anim directive
│ └── scrollReveal.ts # v-scroll-reveal directive
├── middleware/ # Route middleware and redirections
├── server/ # Nitro server
│ └── api/sanity/[query].ts # Sanity API proxy endpoint
├── utils/ # Helper capabilities
│ └── sanityQueries.ts # GROQ question definitions
└── belongings/ # World stylesheets & fontsContent material is fetched from Sanity as soon as at load by way of a server-side plugin, cached in Pinia shops to keep away from redundant API calls, then a single catch-all route [...uri].vue matches any URL, seems to be up the corresponding information within the retailer, and dynamically renders the precise web page template with its parts.
Every element is self-contained with its personal scoped SCSS and logic, whereas sharing SCSS utilities (mixins, easings, media queries) and composables (scroll animations, textual content reveals) are imported on demand and globally accessible.
Responsive System
To make sure pixel-perfect implementation of the design and hold layouts constant throughout all screens, I depend on two custom-built parts that collectively kind a simple to implement responsive system.
Grid Overlay
The primary component, impressed by Figma’s Format Guides (⇧ + G on Mac), is a element that shows the grid as an overlay and utilized in improvement atmosphere. It may be absolutely configured to match the design grid precisely.
Fluid Sizing
Then, a {custom} SCSS perform permits all sizes (font sizes, spacing, padding) to scale fluidly with the viewport as an alternative of leaping at mounted breakpoints. The result’s a smoother expertise and a extra managed format throughout all display sizes.
The perform, fluid-px(), generates a clamp() worth based mostly on three reference breakpoints:
- 480px: minimal viewport, the place the worth reaches its smallest measurement
- 1440px: design artboard, matching the precise worth outlined in Figma
- 2560px: most viewport, the place the worth reaches its cap
Instance utilization:
font-size: fluid-px(24); // → 21.6px at 480px, 24px at 1440px, 36px at 2560px
font-size: fluid-px(24, 16, 32); // → 16px at 480px, 24px at 1440px, 32px at 2560pxBy default, the minimal and most values are calculated routinely (×0.9 and ×1.5 of the enter worth), however they will also be overridden manually. This produces a single responsive worth with no media queries required.
SCSS configuration
// Breakpoints
$fluid-min-viewport: 480 !default;
$fluid-artboard-size: 1440 !default;
$fluid-max-viewport: 2560 !default;
// PX → REM
@perform fluid-px-to-rem($px, $root: 16) {
@return calc($px / $root * 1rem);
}
@perform fluid-px($worth, $min: null, $max: null) {
$min-vw: $fluid-min-viewport;
$pref-vw: $fluid-artboard-size;
$max-vw: $fluid-max-viewport;
@if $min == null { $min: $worth * 0.9; }
@if $max == null { $max: $worth * 1.5; }
$min-rem: fluid-px-to-rem($min);
$value-rem: fluid-px-to-rem($worth);
$max-rem: fluid-px-to-rem($max);
$slope-1: (#{$worth - $min}) / (#{$pref-vw - $min-vw});
@return clamp(
#{$min-rem},
calc(#{$min-rem} + #{$slope-1} * (100vw - #{$min-vw}px)),
#{$max-rem}
);
}Instance
p {
width: fluid-px(340);
font-size: fluid-px(24);
margin-top: fluid-px(100, 60, 120);
margin-bottom: fluid-px(100, 60, 120);
}By scaling each dimension collectively, the container and the textual content shrink on the identical fee. The variety of phrases per line stays constant, stopping surprising wrapping or format shifts. The identical paragraph merely adapts easily to any display measurement.
Modular and Contextual Navigation
An simply accessible and context-aware navigation bar that breaks the inflexible format to convey some flexibility and motion. Sitting on the backside heart of the display, it’s a wholly modular element that invitations the consumer to play and work together with.
One element, three totally different behaviors pushed by the web page state:
- Residence: pages hyperlinks and a mission carrousel permitting to shortly entry a selected content material
- Work: thumbnail of present mission with a number of actions buttons round it, considered one of them triggering a full tasks record aiming to once more simplify navigation within the web page
- About: present seen part and arrow to navigate into web page with social hyperlinks showing on hover
To bolster the accessibility intention, the module responds to keyboard enter: arrow keys to navigate and Escape to go residence, permitting the consumer to go to your entire web site utilizing just one element.
Tailor-made Animations
All animations are triggered both on scroll or on mouse interplay. They goal to create a type of geeky feeling, highlighting my dev-side all through the positioning. To maintain them simple to make use of and constant, the pixel-based one are reusable parts with parameters whereas the others are centralized into two programs: useScrollProgress, a Lenis-driven composable for scroll-based animations, and v-text-anim, a {custom} Vue directive powered by GSAP SplitText that handles all textual content results with a single attribute.
- Pixel Transition: On arrival, the display loader disappears in a grid of stable white pixels, revealing the web page beneath.
- Pixel Path: In the identical vibe, a WebGL canvas renders coloured pixels sampled immediately from the underlying pictures. Every pixel has a randomized lifetime and fades out independently, creating an natural, scattered path that displays the precise content material beneath the cursor.
- Terminal reveal: Textual content sorts out character by character with a blinking block cursor transferring alongside as if it was printed in actual time by a command line. As soon as full, the cursor disappears.
- Glitch reveal: randomizes by way of glitch characters (
@#$%&*, digits, uppercase letters) earlier than resolving to the actual textual content. It feels just like the textual content is being decoded or descrambled. - Parallax: Because the consumer scrolls, the fullscreen pictures and the footer translate with robust destructive values to offers the sensation of inertia and depth.
Conclusion & Ideas
This newest model of my portfolio is a vital milestone. For the primary time, I set a transparent deadline to finish a full identification redesign with a function. The result’s a web site that displays my strengths: rigorous, but artistic, and has given me credibility and visibility I by no means may have imagined. After all, this web site will proceed to evolve, however the important thing lesson is obvious: even for private tasks, a structured strategy and methodology result in the very best outcomes.
I hope this case research conjures up your individual artistic journey. Thanks for sticking round and don’t hesitate to achieve out!
