Skip to main content

Overview

All project data is centralized in src/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
{
  id: string,           // Unique identifier for routing
  title: string,        // Project name in CAPS
  tagline: string,      // Category/type
  tech: string,         // Tech stack summary
  techList: array,      // Detailed tech stack
  badge: string,        // Optional badge text
  desc: string,         // Short description for gallery
  fullDesc: string,     // Long description for detail page
  challenge: string,    // Problem statement
  solution: string,     // Your approach
  stats: {
    role: string,       // Your role
    timeline: string,   // Project timeline
    team: string        // Team size/location
  },
  img: string,          // Image path
  imgAlt: string        // Accessibility description
}

Complete Real Example

Here’s a full project from the source code:
projects.js
{
  id: 'chatverde',
  title: 'CHAT VERDE',
  tagline: 'CONVERSATIONAL APP',
  tech: 'F# • .NET • NLP • C#',
  techList: ['F#', '.NET', 'NLP', 'C#', 'Windows Forms'],
  badge: '',
  desc: 'Optimized search performance handling natural language queries with under 100ms response times.',
  fullDesc: 'A conversational console application developed in F# on .NET to query the "Medicina Verde 100% Natural" product catalog using natural language. It features advanced search capabilities with exact tokenization and intent recognition.',
  challenge: 'Finding products in a catalog of 500 items was difficult due to strict spelling requirements and lack of natural language understanding, causing a high match loss for common spelling variations.',
  solution: 'I developed a search engine prioritizing specific fields with tokenization and stopword removal, improving precision by over 10%. I implemented case and accent-insensitive text normalization ending in 0% match loss, and integrated intent recognition to list full categories (e.g., "shampoos").',
  stats: {
    role: 'Software Engineer',
    timeline: 'November 2025',
    team: 'Estelí, Nicaragua'
  },
  img: '/ChatVerde.webp',
  imgAlt: 'Console conversational interface'
}

Field Explanations

Core Identifiers

Type: stringUnique identifier used in URL routing. Must be:
  • Lowercase
  • No spaces (use hyphens)
  • URL-safe characters only
Example: 'e-commerce-platform', 'chat-app', 'productivity-tool'This creates routes like /project/e-commerce-platform
Type: stringDisplay name shown in the UI. Typically in UPPERCASE for the design aesthetic.Example: 'ALLEGRA E-COMMERCE', 'BUSINESS DIRECTORY'
Type: stringProject category or type. Usually UPPERCASE.Examples:
  • 'E-COMMERCE'
  • 'DIRECTORY APP'
  • 'ERP SYSTEM'
  • 'FINTECH TOOL'

Technology Stack

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.
Type: array of stringsDetailed list of all technologies used. Displayed as badges on the project detail page.Example:
techList: ['React', 'Vite', 'API', 'Tailwind CSS', 'JavaScript']

Descriptions

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
Example:
desc: 'Reduced page load time by 60% through a complete architectural refactor.'
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
Example:
fullDesc: 'A high-performance e-commerce platform built to handle complex checkout flows and high traffic. The project focused on transitioning a legacy codebase to a modern component-based architecture.'

Problem & Solution

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?
Example:
challenge: 'The existing legacy HTML/JavaScript codebase suffered from poor performance and difficulty in maintenance. Implementing a secure, multi-method checkout flow required careful integration of multiple payment gateway APIs and complex form validations.'
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?
Example:
solution: 'I refactored the entire frontend using Vite and React, implementing a robust state management system. I also integrated several payment gateway APIs and developed an asynchronous form validation system that significantly reduced user input errors.'

Project Metadata

Type: objectProject metadata displayed on the detail page.
stats: {
  role: 'Full Stack Engineer',     // Your role
  timeline: 'July 2025',            // When you worked on it
  team: '4 Developers'              // Team context
}
Tips:
  • team can be team size or location
  • timeline can be a month/year or duration
Type: stringOptional badge text for special recognition. Leave empty ('') if not needed.Examples:
  • 'FEATURED'
  • 'AWARD WINNER'
  • 'OPEN SOURCE'
  • '' (no badge)

Images

Type: stringPath to the project image. Images should be placed in the public/ folder.Example:
img: '/ChatVerde.webp'
This references public/ChatVerde.webpRecommended specs:
  • Format: WebP for best performance
  • Dimensions: 800x600px or similar 4:3 ratio
  • Size: Under 200KB
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
Example:
imgAlt: 'Console conversational interface'

Adding a New Project

1

Open projects.js

Navigate to src/data/projects.js
2

Add Image to Public Folder

Place your project image in the public/ folder:
public/
  my-new-project.webp
3

Add Project Object

Add a new object to the projects array:
export const projects = [
  {
    id: 'my-new-project',
    title: 'MY NEW PROJECT',
    tagline: 'WEB APP',
    tech: 'React • TypeScript • Node.js',
    techList: ['React', 'TypeScript', 'Node.js', 'PostgreSQL'],
    badge: '',
    desc: 'Built a real-time collaboration tool serving 10K+ users.',
    fullDesc: 'A comprehensive real-time collaboration platform with advanced features including live document editing, video conferencing, and task management.',
    challenge: 'Traditional collaboration tools lacked real-time synchronization and were difficult to use across different devices.',
    solution: 'I implemented WebSocket-based real-time sync with offline support and responsive design, ensuring seamless experience across all devices.',
    stats: {
      role: 'Lead Developer',
      timeline: 'March 2026',
      team: '3 Developers'
    },
    img: '/my-new-project.webp',
    imgAlt: 'Real-time collaboration dashboard interface'
  },
  // ... existing projects
];
4

Test Your Changes

Run the development server and verify:
  • Project appears in the gallery
  • Clicking opens the detail page
  • All fields display correctly
npm run dev
Projects are displayed in the order they appear in the array. Place your most important projects first.

Complete Code Example

Here’s the full projects.js structure with two projects:
projects.js
export const projects = [
  {
    id: 'allegra',
    title: 'ALLEGRA E-COMMERCE',
    tagline: 'E-COMMERCE',
    tech: 'React • Vite • Tailwind CSS',
    techList: ['React', 'Vite', 'API'],
    badge: '',
    desc: 'Reduced page load time by 60% through a complete architectural refactor.',
    fullDesc: 'A high-performance e-commerce platform built to handle complex checkout flows and high traffic. The project focused on transitioning a legacy codebase to a modern component-based architecture.',
    challenge: 'The existing legacy HTML/JavaScript codebase suffered from poor performance and difficulty in maintenance. Implementing a secure, multi-method checkout flow required careful integration of multiple payment gateway APIs and complex form validations.',
    solution: 'I refactored the entire frontend using Vite and React, implementing a robust state management system. I also integrated several payment gateway APIs and developed an asynchronous form validation system that significantly reduced user input errors.',
    stats: {
      role: 'Full Stack Engineer',
      timeline: 'July 2025',
      team: '4 Developers'
    },
    img: '/TiendaDeRopaAllegra.webp',
    imgAlt: 'E-commerce dashboard interface'
  },
  {
    id: 'directory',
    title: 'BUSINESS DIRECTORY',
    tagline: 'DIRECTORY APP',
    tech: 'JavaScript • Tailwind CSS',
    techList: ['JavaScript', 'Tailwind CSS', 'Google Maps API', 'Accessibility'],
    badge: '',
    desc: 'Interactive search platform for local businesses with real-time filtering.',
    fullDesc: 'A comprehensive platform designed to digitize the online presence of local businesses. It features a high-performance search engine and dynamic mapping.',
    challenge: 'Many local businesses lacked an online presence or had difficult-to-find information. The goal was to create a highly accessible (90+ Lighthouse score) platform that would be easy for anyone to use.',
    solution: 'I developed an interactive search platform with real-time filtering and dynamic map rendering using the Google Maps API. I optimized the user experience with efficient CSS and responsive design principles.',
    stats: {
      role: 'Frontend Developer',
      timeline: 'June 2025',
      team: '1 Developer'
    },
    img: '/EsteliHub.webp',
    imgAlt: 'Abstract map interface'
  }
];

Removing a Project

1

Open projects.js

Navigate to src/data/projects.js
2

Delete Project Object

Remove the entire project object from the array, including the comma.
3

(Optional) Remove Image

Delete the associated image from the public/ folder if no longer needed.
Make sure to maintain valid JavaScript syntax. Each object should be separated by a comma, except the last one.

Reordering Projects

Projects display in array order. To reorder:
  1. Cut the entire project object
  2. Paste it in the new position
  3. Ensure commas are correct between objects
export const projects = [
  { /* Featured project - shown first */ },
  { /* Second project */ },
  { /* Third project */ },
  // ...
];

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

Duplicate IDs: Each project must have a unique id. Duplicates will cause routing issues.
// ❌ Bad
{ id: 'project' },
{ id: 'project' }  // Duplicate!

// ✅ Good
{ id: 'project-one' },
{ id: 'project-two' }
Missing Commas: Don’t forget commas between objects.
// ❌ Bad
{ id: 'one' }
{ id: 'two' }  // Missing comma!

// ✅ Good
{ id: 'one' },
{ id: 'two' }
Invalid Image Paths: Images in public/ must start with /
// ❌ Bad
img: 'project.webp'

// ✅ Good
img: '/project.webp'

Next Steps

Contact Form

Set up EmailJS for the contact form

Styling

Customize colors, fonts, and themes

Build docs developers (and LLMs) love