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 uses a dark theme throughout, with no light mode variant. Styles are applied through three complementary systems: styled-components’ ThemeProvider for design tokens, styled-components for layout and custom elements, and Framer Motion for scroll and entrance animations. Translations for English and Spanish are managed separately by react-i18next.

​
Dark theme tokens — src/utils/Themes.js

The file src/utils/Themes.js exports darkTheme and lightTheme objects. darkTheme is passed to styled-components’ ThemeProvider at the top of App.js: 
import styled, { ThemeProvider } from 'styled-components';
import { darkTheme } from './utils/Themes';

<ThemeProvider theme={darkTheme}>
  {/* entire app */}
</ThemeProvider>
darkTheme defines design tokens such as background colors, primary and secondary palette colors, and text colors. Every styled-components styled element in the tree can access these via the theme prop (e.g., ${({ theme }) => theme.primary}). The primary brand color is #FF7F00 (orange). To adjust the global color palette — for example, to change the accent color or card backgrounds — edit the token values in Themes.js. Key token groups in darkTheme:
Token groupExamples
Backgroundsbg, bgLight, bgGlass, bgCard
Brand colorsprimary (#FF7F00), primaryLight, primaryDark, primaryGlow
Secondarysecondary (#854CE6), secondaryLight
GradientsgradientHero, gradientCard, gradientText
Texttext_primary, text_secondary, text_tertiary, text_accent
Borders & shadowsborder, borderHover, shadowCard, shadowOrange
Cardscard, card_light

​
Styled-components

Layout components and section containers are built with styled-components. These appear throughout the section files in src/components/sections/ and in App.js itself. A notable example is the Wrapper component rendered in App.js, which groups sections and applies a gradient background between them: 
<Wrapper>
  <Skills />
  <Frameworks />
  <Experience />
</Wrapper>
and lower in the tree: 
<Wrapper>
  <Education />
  <Contact />
</Wrapper>
Wrapper is a styled div that creates the visual separation between page sections. To adjust section background gradients or spacing, locate and edit the Wrapper definition in App.js or the file where it is imported from. Individual section files define their own styled containers (e.g., SkillsContainer, ProjectsWrapper) directly in the same file, keeping styles co-located with the component that uses them.

​
Framer Motion animations

Entrance and scroll animations are handled by Framer Motion. The AnimatePresence wrapper in App.js enables exit animations for mounted/unmounted components: 
import { AnimatePresence } from 'framer-motion';

<AnimatePresence>
  <div>
    <Hero />
    {/* ... */}
  </div>
</AnimatePresence>
Individual sections use motion components with variants and whileInView to trigger animations as the user scrolls. To change the timing, easing, or type of animation for a section, edit the variants object defined at the top of the relevant section file.

​
Three.js star background

The StarCanvas component (src/components/canvas/Stars.jsx) renders an animated star field using @react-three/fiber and @react-three/drei. It is positioned as a fixed background element behind all content. To adjust the star density, size, or rotation speed, edit the geometry and animation parameters inside Stars.jsx.

​
Internationalization (i18n)

The site supports English and Spanish. Translations are stored in src/data/translations.js and loaded by react-i18next. The language configuration and i18next initialization live in src/context/ (or adjacent to the translation file). To add or update translated strings:
  1. Open src/data/translations.js.
  2. Locate the key you want to change under the en (English) or es (Spanish) namespace.
  3. Update the string value. If you are adding a new UI string, add the same key to both language objects.
// Actual structure in translations.js
export const translations = {
  en: {
    about: "About",
    skills: "Skills",
    experience: "Experience",
    contact_desc: "Feel free to reach out if you have any questions or opportunities.",
    hi: "Hi, I am",
    technical_skills: "Technical Skills",
    // ... flat key-value pairs
  },
  es: {
    about: "Acerca",
    skills: "Habilidades",
    experience: "Experiencia",
    contact_desc: "No dudes en comunicarte conmigo si tienes alguna pregunta u oportunidad.",
    hi: "Hola, soy",
    technical_skills: "Habilidades Técnicas",
    // ... flat key-value pairs
  }
};
In components, strings are accessed via the useLanguage context hook, which exposes a translate() helper: 
import { useLanguage } from '../../context/LanguageContext';

const { translate } = useLanguage();
// ...
<h1>{translate('technical_skills')}</h1>
For a full overview of which files control layout and data, see Codebase Structure.

Build docs developers (and LLMs) love

Get started for freeTalk to us