Overview
All project data is centralized insrc/data/projects.js. This file exports an array of project objects that power both the Projects gallery and individual ProjectDetail pages.
Project Schema
Each project follows this structure:projects.js
Complete Real Example
Here’s a full project from the source code:projects.js
Field Explanations
Core Identifiers
id
id
Type:
stringUnique identifier used in URL routing. Must be:- Lowercase
- No spaces (use hyphens)
- URL-safe characters only
'e-commerce-platform', 'chat-app', 'productivity-tool'This creates routes like /project/e-commerce-platformtitle
title
Type:
stringDisplay name shown in the UI. Typically in UPPERCASE for the design aesthetic.Example: 'ALLEGRA E-COMMERCE', 'BUSINESS DIRECTORY'tagline
tagline
Type:
stringProject category or type. Usually UPPERCASE.Examples:'E-COMMERCE''DIRECTORY APP''ERP SYSTEM''FINTECH TOOL'
Technology Stack
tech
tech
Type:
stringConcise tech stack summary separated by bullets (•). Shown on project cards.Example: 'React • Vite • Tailwind CSS'Tip: Keep it to 3-5 main technologies for readability.techList
techList
Type:
array of stringsDetailed list of all technologies used. Displayed as badges on the project detail page.Example:Descriptions
desc
desc
Type:
stringShort description (1-2 sentences) shown on the project card in the gallery view.Best practices:- Lead with impact/metrics if possible
- Keep it under 150 characters
- Focus on the main achievement
fullDesc
fullDesc
Type:
stringExtended description (2-4 sentences) shown on the project detail page.Best practices:- Provide more context than
desc - Explain what the project does
- Mention key features
Problem & Solution
challenge
challenge
Type:
stringThe problem or challenge the project addressed. This helps showcase your problem-solving abilities.Structure:- What was the initial problem?
- Why was it a challenge?
- What constraints existed?
solution
solution
Type:
stringYour approach to solving the challenge. This is where you shine!Structure:- What did you do?
- What technologies/approaches did you use?
- What was the result?
Project Metadata
stats
stats
Type: Tips:
objectProject metadata displayed on the detail page.teamcan be team size or locationtimelinecan be a month/year or duration
badge
badge
Type:
stringOptional badge text for special recognition. Leave empty ('') if not needed.Examples:'FEATURED''AWARD WINNER''OPEN SOURCE'''(no badge)
Images
img
img
Type: This references
stringPath to the project image. Images should be placed in the public/ folder.Example:public/ChatVerde.webpRecommended specs:- Format: WebP for best performance
- Dimensions: 800x600px or similar 4:3 ratio
- Size: Under 200KB
imgAlt
imgAlt
Type:
stringAccessibility description for screen readers.Best practices:- Describe what’s shown in the image
- Don’t start with “Image of” or “Picture of”
- Be concise but descriptive
Adding a New Project
Projects are displayed in the order they appear in the array. Place your most important projects first.
Complete Code Example
Here’s the fullprojects.js structure with two projects:
projects.js
Removing a Project
Reordering Projects
Projects display in array order. To reorder:- Cut the entire project object
- Paste it in the new position
- Ensure commas are correct between objects
Image Optimization Tips
WebP Format
Use WebP for 25-35% smaller file sizes compared to JPEG/PNG
Dimensions
Recommended: 800x600px (4:3 ratio) for consistent display
File Size
Keep under 200KB per image for optimal performance
Compression
Use tools like Squoosh.app or TinyPNG to compress images
Common Mistakes to Avoid
Next Steps
Contact Form
Set up EmailJS for the contact form
Styling
Customize colors, fonts, and themes