Project Overview

FolioFlow is a portfolio web application generator designed for developers, designers, and creators who want a fast, modern, and easily maintainable portfolio. Its core concept revolves around using the file system as a headless CMS.

The entire structure of the website—categories, projects, articles, and their content—is derived from a simple directory structure containing markdown files and images. This approach eliminates the need for a database or an external CMS, making content updates as simple as a git push.

Key Technologies

• Next.js App Router: For a high-performance, server-first architecture.
• React Server Components: To minimize client-side JavaScript and improve load times.
• Tailwind CSS & shadcn/ui: For a utility-first styling workflow and a set of beautiful, accessible components.
• Markdown: To write content with ease. gray-matter and react-markdown are used for processing.

Core Features

The implementation focused on several key areas:

1. Static Content Engine: A custom script using Node.js fs module recursively scans the /content directory at build time. It parses directory names for categorization and reads markdown frontmatter for metadata.
2. Dynamic Routing: Next.js dynamic routes [category] and [category]/[slug] are used to generate pages for each content item automatically.
3. Image Handling: The system automatically detects a cover image and creates a gallery from other images within a project folder. next/image is used for optimization.
4. Tag-Based Filtering: All tags are aggregated from content, and a client-side filtering system using URL search parameters allows users to explore content by topic.