Fonti.dev - Personal Portfolio & Blog

My personal portfolio website is more than just a showcase—it's a technical demonstration of modern web development practices, performance optimization, and thoughtful user experience design. Built with cutting-edge technologies and deployed with production-grade infrastructure.

Project Overview

This portfolio serves as both a professional showcase and a technical playground where I can experiment with the latest web technologies. It demonstrates my expertise in front-end architecture, performance optimization, accessibility, and SEO while maintaining a distinctive visual identity.

Key Features

Advanced Animation System

A sophisticated multi-layer animation system that creates an immersive experience:

GSAP ScrollTrigger: Scroll-linked animations with smooth parallax effects.
Framer Motion: Physics-based spring animations for micro-interactions.
Custom Cursor: Magnetic cursor effect with smooth following behavior.
Reduced Motion Support: Respects user accessibility preferences with fallback layouts.

Content Management

A modern, type-safe content system for blog posts and portfolio projects:

Content Collections: TypeScript-first MDX content management with automatic type generation.
Dynamic Routes: Automatic route generation for blog posts and portfolio items.
MDX Support: Rich content with embedded React components.
Schema Validation: Compile-time validation of frontmatter data.

Performance & SEO

Comprehensive optimization for search engines and user experience:

Dynamic OG Images: Automatically generated Open Graph images using Next.js next/og.
Structured Data: JSON-LD schemas for Person, WebSite, BlogPosting, and CreativeWork.
Dynamic Sitemap: Auto-generated XML sitemap from content collections.
Core Web Vitals: Optimized for LCP <2.5s, FID <100ms, CLS <0.1.
Lighthouse Score: 95+ across all metrics (Performance, Accessibility, SEO).

Accessibility Features

WCAG 2.1 AA compliant with modern accessibility best practices:

Semantic HTML: Proper use of <article>, <nav>, <time>, and heading hierarchy.
ARIA Labels: Descriptive labels for screen readers on all interactive elements.
Keyboard Navigation: Full keyboard support with visible focus indicators.
Touch Targets: Minimum 44x44px for all clickable elements.
Skip Links: Quick navigation to main content for keyboard users.

Technical Architecture

Frontend Stack

Framework: Next.js 16 with App Router and React 19
Language: TypeScript with strict mode enabled
Styling: Tailwind CSS v4 with custom design tokens
Fonts: Geist Sans & Geist Mono (self-hosted for performance)
Components: Custom components with motion and accessibility built-in

Animation Libraries

GSAP + ScrollTrigger: For scroll-based animations and timelines
Framer Motion: For component-level animations and gestures
Custom Hooks: useReducedMotion for accessibility
Performance: Dynamic imports for below-fold sections

Content & Data

Content Collections: TypeScript-first MDX content management
MDX Components: Custom components for rich blog content
Image Optimization: Next.js Image with automatic WebP/AVIF
Analytics: Self-hosted Umami analytics (privacy-focused)

Build & Deployment

Build Output: Standalone mode for optimized Docker images
Deployment: Docker containers on VPS
CI/CD: Automated builds with quality checks
CDN: Cloudflare for global edge caching

Design Philosophy

Visual Language

The design follows a dark, technical aesthetic inspired by developer tools:

Color Palette: Neutral grays with strategic white accents
Typography: Bold headlines with tight tracking, monospace for metadata
Spacing: Generous whitespace with rhythmic vertical spacing
Grid System: Subtle grid overlays and technical accent elements

Interaction Design

Every interaction is intentional and delightful:

Magnetic Buttons: Cursor-following effect on CTAs
Hover States: Smooth color and grayscale transitions
Loading States: Skeleton loaders with animated pulses
Page Transitions: Staggered reveals with GSAP

Mobile-First Approach

Responsive design with mobile as the priority:

Breakpoints: 640px, 768px, 1024px, 1440px
Typography Scales: Fluid type that adapts across viewports
Touch Gestures: Horizontal scroll for work section on mobile
Performance: Smaller images and reduced animations on mobile

Technical Highlights

1. SEO Optimization

Comprehensive technical SEO implementation:

// Dynamic sitemap generation
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    ...staticRoutes,
    ...blogPosts.map(post => ({
      url: `https://fonti.dev/blog/${post.slug}`,
      lastModified: post.date,
      priority: 0.6,
    })),
  ];
}

2. Structured Data

JSON-LD schemas for rich search results:

const personSchema = {
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Januar Fonti",
  jobTitle: "Senior Front-End Developer",
  knowsAbout: ["Vue.js", "Nuxt.js", "React", "Next.js"],
  // ... more properties
};

3. Performance Optimization

Strategic code splitting and lazy loading:

const About = dynamic(() => import("@/components/sections/about"));
const Gallery = dynamic(() => import("@/components/sections/gallery"));

4. Accessibility

Proper ARIA implementation:

<section aria-labelledby="services-heading">
  <h2 id="services-heading">Services</h2>
  {/* ... */}
</section>

Metrics & Performance

Build Performance

Build Time: ~12 seconds
Bundle Size: ~715KB total (optimized)
JavaScript: ~180KB (with code splitting)
CSS: ~35KB (Tailwind with purge)

Runtime Performance

LCP: 2.1s (Good - target <2.5s)
FID: 60ms (Good - target <100ms)
CLS: 0.05 (Good - target <0.1)
Lighthouse: 95+ across all categories

SEO Metrics

Indexed Pages: All pages indexed within 48 hours
Rich Snippets: Person schema eligible
Sitemap: Auto-updated with new content
Robots.txt: Configured with proper crawl rules

Results & Impact

Technical Achievements

✅ 95+ Lighthouse Score: Across Performance, Accessibility, SEO, Best Practices
✅ Zero Accessibility Errors: WCAG 2.1 AA compliant
✅ Sub-3s Load Time: Fast initial page load on 4G networks
✅ 100% TypeScript: Type-safe codebase with strict mode

Professional Benefits

📈 Portfolio Showcase: Demonstrates modern web development expertise
📈 Technical Blog: Platform for sharing knowledge and insights
📈 Code Quality: Production-grade code as a hiring signal
📈 SEO Presence: High visibility in search results for target keywords

Learning Outcomes

Next.js 16 App Router: Mastered latest React framework patterns
Animation Performance: Optimized GSAP/Framer Motion for 60fps
SEO Best Practices: Comprehensive structured data implementation
Accessibility Standards: WCAG 2.1 AA compliance across all pages

Future Enhancements

Planned Features

Dark/Light Mode: Theme toggle with system preference detection
Blog Search: Full-text search with Algolia or Fuse.js
Reading Progress: Visual indicator for blog posts
View Counter: Page view tracking with Upstash Redis
Comments System: Giscus integration for blog discussions

Performance Optimizations

Image CDN: Cloudflare Images for automatic optimization
Service Worker: PWA capabilities with offline support
HTTP/3: Enable QUIC protocol on hosting platform
Edge Functions: Move some features to Cloudflare Workers

Conclusion

Fonti.dev represents the intersection of technical excellence and thoughtful design. Every line of code, animation, and interaction has been carefully crafted to create a portfolio that not only showcases my work but also serves as a demonstration of my capabilities as a Senior Front-End Developer.

The website achieves the trifecta of modern web development: fast, accessible, and beautiful—proving that performance and aesthetics are not mutually exclusive.

Tech Stack: Next.js 16, React 19, TypeScript, Tailwind CSS v4, GSAP, Framer Motion
Performance: 95+ Lighthouse, <3s Load Time
Status: Live in Production 🚀