Portfolio
A dynamic personal portfolio built with Next.js and Tailwind CSS, leveraging the GitHub API to showcase selected projects. The portfolio automatically fetches public repositories, filters those with specific display configurations, and presents them in an theme-aware interface.
Contents
🛠️ Technologies
Built with:
🚀 Getting Started
Prerequisites
Before running the application, ensure the following tools are installed on your system:
Live Demo
The application is hosted on Vercel and can be accessed directly:
https://portfolio-riadoliveira.vercel.app.
Local Setup
# Clone the repository
$ git clone https://github.com/RiadOliveira/Portfolio.git
# Navigate to project directory
$ cd Portfolio
# Install dependencies
$ npm install
# Start the development server
$ npm run dev
⚙️ Features
- Dynamic Project Showcase - Automatically fetches and displays GitHub repositories configured with .portfolio/displayData.json.
- Smart Filtering - Excludes profile repositories and only includes projects with proper display configuration.
- Theme-Aware UI - Light/dark theme toggle with persistent preference storage.
- Optimized Performance - Cached API responses with 1-hour expiration for both repository listings and README content.
- Interactive Previews - Modal-based README viewing with background loading for seamless user experience.
- Technology Badges - Automatically generated badges for all project technologies using standardized shields.io formatting.
- Responsive Design - Fully responsive layout optimized for all device sizes.
- Dynamic Metadata - Route-specific metadata including project titles and descriptions.
📂 Project Structure
Display Configuration
Projects are displayed when they contain a .portfolio/displayData.json file with the following structure:
type DisplayData = {
title: string; // Display name
extendedDescription: string; // Detailed project description
imageId: string; // GitHub image identifier
highlightColor: HighlightColor; // Tailwind color for UI accents
technologies: Technology[]; // Technologies used
features: Feature[]; // Key features (max 3)
attachmentsUrl?: boolean; // Image URL format flag
}
API Integration
The portfolio integrates with GitHub's API to:
- Fetch all public repositories (excluding profile README).
- Retrieve repository-specific display data.
- Load README content for project previews.
- Cache responses for optimal performance.
Routing System
- Home Route (
/): Displays filtered project list.
- Project Routes (
/[repositoryName]): Shows detailed project information.
- Parallel Routes: Enables background loading of README content via
@modal.
🎨 UI Components
- Theme Toggle: Light/dark mode switcher.
- Project Cards: Responsive cards displaying project image, title, and brief description.
- Technology Badges: Standardized badges for all supported technologies.
- Feature Displays: Highlighted project features with descriptive icons.
- README Modal: Interactive preview with loading states and caching.
- Dynamic Metadata: Route-specific page titles and descriptions.
📷 Application Screenshots
Home Page
- Displays filtered project list with cards.
- Shows profile information and social links.
- Includes theme toggle in header.
Project Page
- Shows detailed project information.
- Displays technology badges.
- Highlights content with project-specific color.
- Includes action buttons for preview and GitHub access.
README Modal
- Presents formatted README content.
- Maintains consistent styling with main UI.
- Includes loading state during fetch.
📝 License
This project is MIT Licensed. See
LICENSE file for more details.
👨💻 Author
Ríad Oliveira
🌐 Socials
