I developed a complete portfolio platform from scratch using Next.js 15 (App Router) with TypeScript, implementing a file system-based media management system without the need for a database. The project includes interactive galleries with lazy loading, a complete internationalization system with next-intl (ES/EN), and a fully responsive design with advanced animations using Framer Motion.
Create a system that manages more than 48 multimedia files (24 images + 24 videos) without a database, but with dynamic metadata and efficient search.
I implemented a File System API-based system that automatically scans directories (/public/media/), generates dynamic metadata, and uses Server Components for initial rendering with zero database query overhead.
Ultra-fast media system that loads metadata at build-time, with progressive lazy loading and automatic image optimization with Sharp.
Create galleries with 24+ multimedia elements each, maintaining optimal performance and fluid user experience.
I implemented lazy loading with Intersection Observer, infinite scroll, fullscreen modals with keyboard navigation, and image optimization with Next/Image and Sharp.
Galleries that load instantly with infinite scroll, minimal memory consumption and optimized Core Web Vitals.
Show advanced UI components with modern effects (glassmorphism, morphing, 3D) that work perfectly on all devices.
I created a modular component system with Framer Motion, parallax effects, cascade animations (stagger), and smooth transitions optimized for mobile-first.
Impressive visual experience with fluid animations and premium effects that work perfectly on any device.
File System API automatically scans directories, generates thumbnails with Sharp, and creates dynamic metadata without database. Automatic image and video optimization with strategic caching.
Lazy loading with Intersection Observer, infinite scroll, fullscreen modals with keyboard navigation, and zoom effects. Support for images and videos with immersive playback.
Resend integration for sending emails with custom HTML templates, real-time validation, rate limiting in API Routes, and automatic confirmation.
WebGallery with real-time interactive components: morphing buttons, glassmorphism cards, animated gradient inputs, 3D transformation icons, and parallax effects.
InteractiveFirmament with animated particles, hero section with glassmorphism and sweeping light, smooth page transitions, and cascade animations with Framer Motion.
Server Components by default, strategic lazy loading, intelligent caching, automated optimization scripts, and complete SEO with dynamic metadata, robots.ts, sitemap.ts and hreflang.
System that automatically scans media from file system, generates dynamic metadata without database, using File System API.
// Automatic media scanning from file system
const mediaFiles = await fs.readdir(path.join(process.cwd(), 'public/media'));
const mediaData = await Promise.all(
mediaFiles.map(async (file) => {
const stats = await fs.stat(path.join('public/media', file));
return {
filename: file,
size: stats.size,
modified: stats.mtime,
type: file.endsWith('.mp4') ? 'video' : 'image'
};
})
);Optimized lazy loading implementation that loads content only when entering viewport, optimizing performance.
// Optimized lazy loading with Framer Motion
const { ref, inView } = useInView({
threshold: 0.1,
triggerOnce: true
});
return (
<motion.div
ref={ref}
initial={{ opacity: 0, y: 50 }}
animate={inView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
>
{inView && <MediaGallery items={media} />}
</motion.div>
);