PORTFOLIOKEVIN NAZAR MUFADHOLBUILDING MODERN WEBSITESFULLSTACK DEVELOPERAVAILABLE FOR REMOTE WORK
A mobile-first, single-page personal website that centralizes social media links, projects, portfolio, and contact info — built with React, TypeScript, and Tailwind CSS v4, with all content managed through environment variables.
VinnDeev Link Hub was born as a personal branding hub — a single destination that gathers every social profile, project, portfolio link, and contact channel in one clean page. The goal was to move away from scattered links and generic link-in-bio tools, and instead ship something fast, simple, and fully self-managed. Every piece of content on the page is driven by environment variables, so updating the site means editing one `.env` file — no code changes, no redeploys beyond a rebuild.
Built with React 19 and TypeScript for a type-safe, component-based UI, bundled and served by Vite, and styled with Tailwind CSS v4 using a design system defined via `@theme` tokens. The page is composed of small, focused components — profile header, social links, featured links, contact CTA, and footer — assembled in a main layout that renders an animated background grid. Data flows from `.env` through a small data layer that parses JSON arrays with graceful fallbacks to built-in defaults, while custom inline SVG icons give each social platform its signature brand color. Fonts are self-hosted as woff2 for performance, and a static skeleton in `index.html` paints at first contentful paint and is removed once React mounts.
All site data — meta tags, profile, contact, social links, and featured links — is read from `.env` via `VITE_` variables, with sensible built-in defaults so the site works out of the box without configuration.
Custom inline SVG icons for GitHub, LinkedIn, Instagram, and TikTok, each filled with the platform's official brand color for instant recognition, with a graceful fallback icon for unknown platforms.
Theme follows the system via `prefers-color-scheme`, with design tokens and overrides defined in `src/index.css` using Tailwind v4 `@theme`.
A static HTML skeleton lives in `index.html` outside the React root so it renders immediately, then a short timer removes it after React mounts — revealing the app without a blank flash or layout shift.
A slowly drifting grid of lines and accent dots sits behind the content, while cards respond with hover effects and a 45° rotating arrow for a tactile, premium feel.
Environment-driven meta tags, a `sitemap.xml`, a `robots.txt`, self-hosted woff2 fonts, and a minimal dependency footprint keep the page light and indexable.
Rendering a skeleton via React would delay the first paint until JavaScript loads, defeating the purpose of a perceived-fast loading experience on slower connections.
Placed the skeleton as static HTML directly in `index.html`, outside `#root`, so the browser paints it immediately — then removed it with a `useEffect` timer after React mounted to reveal the live app with a fade-in.
Reading JSON arrays from `.env` is stringly-typed and error-prone — a malformed value could silently break the page or crash the build with confusing errors.
Built a small parsing utility (`parseJsonArray`) that validates input against typed interfaces, falls back to curated defaults on failure, and maps each entry to its matching icon at the type level.
Link-in-bio pages tend to look identical — the same layouts, stock icons, and dark gradients — making it hard to stand out while keeping the page minimal.
Designed a distinctive identity from scratch: custom SVG brand icons, a violet `#5b3eff` primary color, curated font pairing (Bricolage Grotesque, Hanken Grotesk, JetBrains Mono), and a subtle animated grid background that gives the page motion without clutter.
