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.

The portfolio is a single-page React application bootstrapped with Create React App. All visible content—skills, projects, experience, education—is driven by a single data file. The component tree mirrors the visual layout: a top-level App.js composes section components in order, each pulling from src/data/constants.js.

​
Directory tree

src/
  App.js                     # Main app component, renders all sections
  index.js                   # React entry point
  index.css                  # Global styles
  components/
    Navbar.jsx               # Navigation bar
    canvas/
      Stars.jsx              # Three.js animated star canvas (background)
    sections/
      Hero.jsx               # Landing hero with typewriter effect
      Skills.jsx             # Technical/soft skills grid
      Frameworks.jsx         # Tech stack grid with icons
      Experience.jsx         # Vertical timeline of work history
      Education.jsx          # Vertical timeline of education
      Projects.jsx           # Projects grid with category filter
      Contact.jsx            # EmailJS contact form
      Footer.jsx             # Footer
    cards/                   # Card components for projects/skills
    Dialog/
      ProjectDetails.jsx     # Modal dialog for project details
    HeroBgAnimation/         # Background animation for hero
  data/
    constants.js             # All data: Bio, skills, frameworks, experiences, projects, education
    translations.js          # i18n strings for EN/ES
  context/                   # React context providers
  utils/
    Themes.js                # styled-components dark theme tokens
  images/                    # Image assets

​
Key files and directories

​
src/App.js

The root component. It wraps the entire app in a ThemeProvider with the dark theme, sets up BrowserRouter, and renders all section components in sequence. It also owns the openModal state used to open the ProjectDetails dialog.

​
src/data/constants.js

The single source of truth for all content. Every piece of user-facing data—personal bio, skills list, frameworks, work experience entries, projects, and education—is exported from this file as plain JavaScript arrays and objects. To update any content on the site, this is the file to edit. Exports:
ExportDescription
BioName, roles, description, links (GitHub, LinkedIn, email, resume)
skillsArray of technical and soft skills
frameworks8 categories of tech stack items with icons
experiences6 work experience entries for the timeline
projects7 project entries for the projects grid
education3 education entries for the education timeline

​
src/data/translations.js

Contains internationalization strings for English and Spanish. Managed by react-i18next. Add or update translated strings here to support new UI copy in both languages.

​
src/utils/Themes.js

Exports darkTheme and lightTheme objects consumed by the styled-components ThemeProvider in App.js. This is where design tokens such as background colors, primary/secondary colors, and text colors are defined. The primary brand color is #FF7F00 (orange).

​
src/components/sections/

Each file in this directory corresponds to a visible section of the page. Sections read data from constants.js and render it using card components, MUI components, Framer Motion animations, and styled-components.

​
src/components/canvas/Stars.jsx

A Three.js scene rendered via @react-three/fiber that animates a star field behind the entire page. It sits as a fixed background element inside App.js.

​
src/components/Dialog/ProjectDetails.jsx

A modal dialog that opens when a user clicks on a project card. The openModal state (stored in App.js) passes the selected project’s data to this component.

​
src/images/

Static image assets used in the app. Images for projects are referenced as publicly hosted URLs in constants.js rather than local files.
To add or update projects, see Adding Projects. To change colors or theming, see Theming, Styles & Animations.

Build docs developers (and LLMs) love

Get started for freeTalk to us