Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JuanRojasDev/juan-rojas-portafolio-web/llms.txt

Use this file to discover all available pages before exploring further.

All portfolio projects are defined in src/data/constants.js as entries in the projects array. To add a new project, you only need to edit that one file—no component changes required.

​
Project object structure

Each entry in the projects array follows this shape: 
{
  id: 7,                            // Unique integer, increment from the last entry
  title: "Project Name",
  date: "Jan 2024 - Mar 2024",      // Date range as a string
  description: "A short description of what the project does and what technologies it uses.",
  image: "https://example.com/screenshot.png",  // Publicly hosted image URL
  tags: ["React", "Node.js", "MongoDB"],         // Tech stack used
  category: "web app",              // "web app" | "mobile app" | "machine learning"
  github: "https://github.com/JuanRojasDev/project-repo",
  webapp: "https://project-live-url.com",
  member: [
    {
      name: "Juan Rojas",
      img: "https://example.com/avatar.jpg",
      linkedin: "https://linkedin.com/in/juanrojas",
      github: "https://github.com/JuanRojasDev"
    }
  ]
}

​
Adding a new project

1

Open constants.js

Open src/data/constants.js in your editor and scroll to the projects array near the top of the file.
2

Find the last entry and note its id

The current projects run from id: 0 to id: 6. Your new entry should use id: 7 (or one higher than the last entry you see).
3

Add a new object to the array

Append a new object at the end of the projects array, following the structure above. Make sure to include a trailing comma after the previous last entry.
export const projects = [
  // ...existing entries...
  {
    id: 7,
    title: "My New Project",
    date: "Apr 2024 - May 2024",
    description: "A full-stack e-commerce platform built with React and Node.js.",
    image: "https://i.imgur.com/your-screenshot.png",
    tags: ["React", "Node.js", "Express", "MongoDB"],
    category: "web app",
    github: "https://github.com/JuanRojasDev/my-new-project",
    webapp: "https://my-new-project.vercel.app",
    member: [
      {
        name: "Juan Rojas",
        img: "https://avatars.githubusercontent.com/u/your-id",
        linkedin: "https://linkedin.com/in/juanrojas",
        github: "https://github.com/JuanRojasDev"
      }
    ]
  }
];
4

Save the file and check the result

Save constants.js. If your dev server is running (npm start), the Projects section will update immediately. Verify that:
  • The project card appears in the grid
  • The correct category filter shows it
  • Clicking the card opens the ProjectDetails modal with the right data

​
Category options

The category field controls which filter tab the project appears under in the Projects section. The three valid values are:
ValueFilter tab
"web app"Web App
"mobile app"Android App
"machine learning"Machine Learning
Using a value that does not match one of the three strings above will cause the project to be excluded from all filtered views.

​
Member array

The member array lists the contributors for a project. It is displayed inside the ProjectDetails modal. Each member object takes the following fields:
FieldDescription
nameFull name displayed on the card
imgURL of the member’s avatar image
linkedinFull URL to the member’s LinkedIn profile
githubFull URL to the member’s GitHub profile
If the project has no collaborators, you can pass an empty array (member: []) or omit the field entirely.

​
Notes on images

Project images are referenced as publicly hosted URLs, not local files. Suitable hosting options include:
  • Imgur (https://i.imgur.com/...)
  • GitHub repository raw assets
  • Any CDN or image hosting service that returns a direct image URL
Images should ideally be screenshots or previews at a consistent aspect ratio (16:9 works well for project cards).

Build docs developers (and LLMs) love

Get started for freeTalk to us