radanliev.com — Personal Portfolio

Overview

radanliev.com is the personal portfolio of Risto Radanliev — software engineer, DIY maker, and musician (and the founder of RiseGravity). It tells one cohesive story across three worlds: the software he ships, the things he builds and 3D‑prints, and the music he releases. A single, fast page with scroll‑spy navigation guides visitors from a personal hero through About, Software, YouTube, Music, and a Creative Workshop, ending on a friendly contact section.

Design & Brand

• Type: Bricolage Grotesque for characterful display headings, Plus Jakarta Sans for body/UI, and JetBrains Mono for metadata labels
• Color: a semantic system built on a blue primary and orange accent, used in animated gradient text and hover accents
• Surfaces: glass‑morphism navigation, a faint dot‑grid page texture, and soft radial color blooms behind the hero and contact for depth
• Tone: playful but precise — "Engineer by trade, maker and musician by obsession."

Architecture

• Framework: Next.js 14 (App Router) + React 18 + TypeScript, with below‑the‑fold sections dynamically code‑split for a fast first paint
• Server: a custom server.js wraps Next's handler so the Spotify/YouTube API routes keep a module‑level 1‑hour in‑memory cache across requests
• Security: middleware.ts applies a Content‑Security‑Policy plus HSTS, X‑Frame‑Options, and Permissions‑Policy headers
• No CMS, no database, no forms — content is component‑authored, dynamic data is fetched and cached server‑side

[app]        layout.tsx (SEO/OG + fonts + GA) · page.tsx (scroll-spy nav)
[app/api]    /spotify (client-credentials OAuth, cached) · /youtube (RSS, cached)
[components] Hero · About · SoftwareSection · YouTubeSection · MusicSection ·
             WorkshopSection · Contact · Reveal · TypedTagline · Magnetic · CursorGlow

Sections & Content

• Software: the RiseGravity story and a six‑card service grid — Web Development, Mobile, AI & Machine Learning, Cloud Infrastructure, UX/UI Design, and Technical Consulting
• Creative Workshop: 3D printing and electronics/DIY, with featured Thingiverse models (a video‑editing controller, a macropad with display, an OBS controller)

Live Integrations

• Music: the Spotify Web API (client‑credentials flow) pulls the latest releases, rendered as album cards with 30‑second in‑browser preview players, a spinning‑vinyl playing state, and an audio‑reactive equalizer
• YouTube: the public RSS feed for the "Risto Innovates" channel (parsed with fast-xml-parser, no API key) surfaces the latest videos with thumbnails, view counts, and dates
• Both feeds are fetched server‑side and cached for an hour, with graceful fallbacks if an upstream is unavailable

Motion & Interaction

• Scroll reveals: a lightweight IntersectionObserver component fades sections up on entry (CSS‑driven, staggered) instead of heavier JS animation
• TypedTagline: a rotating type‑in/type‑out headline ("I build software", "I solder circuits", …)
• Magnetic hover on interactive elements and a desktop‑only CursorGlow that trails the pointer
• Easter egg: the Konami code triggers confetti and a console greeting
• Every effect respects prefers-reduced-motion, falling back to a clean static state

Performance & SEO

• CSS‑first animation and code‑splitting keep the page light and responsive
• Per‑page OpenGraph/Twitter metadata and JSON‑LD‑ready structure; a strict CSP that still allows the Spotify, YouTube, and Thingiverse image CDNs
• Time‑aware greeting, scroll‑spy active‑section pill, and a mobile glass nav round out the polish

What made it work

• One page, one story — three distinct domains unified by a single design system
• Real, living content via cached Spotify and YouTube feeds rather than static placeholders
• A motion system that feels crafted but never costs performance or accessibility