Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/blairxu13/persona3-website/llms.txt

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

The Persona 3 portfolio site has no central theme file — visual styles are embedded as inline <style> tags inside individual JSX components, following a per-component CSS-in-JS pattern. This means color values, font imports, and decoration rules are scattered across files rather than living in a single stylesheet. Understanding where each value lives is essential before you start customizing.
CSS is not centralized. Each component (P3Menu.jsx, AboutMe.jsx, Socials.jsx, etc.) contains its own <style> block with hard-coded color values and @import font declarations. Changing the accent color, for example, requires a find-and-replace across multiple files rather than editing one variable.

​
Color Palette

The site uses a dark, high-contrast palette inspired by Persona 3’s deep navy and red UI motifs. The table below lists every key color token, its hex value, and the component(s) where it appears.
RoleHexUsed In
Background base#04060fP3Menu.jsx, App.css
Primary accent / active#c4001aP3Menu.jsx, AboutMe.jsx, Socials.jsx, .p3-stripe
Highlight / selectionrgba(245,122,139,0.22)P3Menu.jsx (.p3-stripe2 background)
Menu label active (dark fill)#6b0010P3Menu.jsx active label underlay
Menu label inactive#3ce2ffP3Menu.jsx default label color
Menu label hover#00d9ffP3Menu.jsx hover state
About / Socials bar background#111AboutMe.jsx, Socials.jsx
About / Socials active bar#c4001aAboutMe.jsx, Socials.jsx selected bar
Resume panel background#10185fResumePage.jsx left panel
Resume detail panel background#0f1c69ResumePage.jsx gradient right panel
Resume accent (cyan)#85f4ff / #8ef5ffResumePage.jsx headings, highlights
Page transition — default#0d1a3a, #1a6aff, #7dd4fcPageTransition.jsx default variant
Page transition — About#00184c, #53edff, #ffffffPageTransition.jsx about variant
Page transition — Resume#0f1760, #7ff6ff, #ffffffPageTransition.jsx resume variant
Page transition — Socials#00184c, #00dff7, #ffffffPageTransition.jsx socials variant

​
Changing the Accent Color

The primary red accent (#c4001a) is the most visually dominant color on the site. It appears in the active menu selection underlay, the animated bar highlights in AboutMe and Socials, and the .p3-stripe decoration. To change it globally:
  1. Open your editor’s project-wide find and replace (Ctrl+Shift+H / Cmd+Shift+H).
  2. Search for #c4001a across the entire src/ directory.
  3. Replace every occurrence with your chosen hex value.
The companion dark variant #6b0010 (used for the active label fill) should also be updated to a darker shade of your new accent. A good rule of thumb is to use 40–50% of the brightness of your main accent. 
/* Original */
background: #c4001a;   /* active accent */
background: #6b0010;   /* dark active fill */

/* Example: swap to a teal accent */
background: #007a6e;
background: #00352f;
To avoid future find-replace work, consider creating a src/theme.js constants file and importing values from it in each component. See the tip at the bottom of this page for a starter template.

​
Fonts

The site loads four Google Fonts families, each serving a distinct typographic role.
FamilyWeight / StyleRoleLoaded In
AntonRegular italicMenu labels, resume section titlesindex.html, P3Menu.jsx inline style
Bebas NeueRegularStats, hints, role labels, nav buttonsAboutMe.jsx inline style, Socials.jsx inline style
Barlow CondensedVariousBody copy in About Me and Socials panelsAboutMe.jsx inline style, Socials.jsx inline style
Montserrat300 (light)Reveal panel descriptive textRelevant panel component inline style
Fonts are loaded via @import at the top of each component’s embedded <style> tag. For example, P3Menu.jsx contains: 
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

  .p3-menu-label {
    font-family: 'Anton', sans-serif;
    font-style: italic;
  }
`}</style>
AboutMe.jsx and Socials.jsx each contain: 
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600&display=swap');
`}</style>

​
Changing Fonts

To swap a font, update the Google Fonts @import URL and the font-family declaration in the same <style> block.
  1. Choose a replacement on fonts.google.com and copy its @import URL.
  2. Replace the existing @import in the relevant component’s <style> tag.
  3. Update every font-family rule in that same block.
{/* Before — Anton for menu labels */}
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
  .p3-menu-label { font-family: 'Anton', sans-serif; }
`}</style>

{/* After — swap to Oswald */}
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
  .p3-menu-label { font-family: 'Oswald', sans-serif; }
`}</style>
Remember to update index.html as well if the font was also loaded there via a <link> tag.

​
Decoration Elements

Several purely decorative elements are defined in the global CSS and rendered as empty <div> nodes inside P3Menu.jsx.

​
.p3-stripe

A 5 px wide vertical stripe pinned to the right edge of the viewport, filled with the primary red accent (#c4001a). It sits above page content (z-index: 10) and ignores mouse events so it never blocks interaction. 
.p3-stripe {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: #c4001a;
  z-index: 10;
  pointer-events: none;
}
To change the color, replace #c4001a with your accent. To remove it, delete the corresponding <div className="p3-stripe" /> in P3Menu.jsx.

​
.p3-stripe2

A thinner 2 px stripe, offset 9 px from the right edge, with a very faint pink-blush tint (rgba(245,122,139,0.22)). Its low opacity keeps the double-rule subtle against dark backgrounds. 
.p3-stripe2 {
  position: absolute;
  right: 9px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(245,122,139,0.22);
  z-index: 10;
  pointer-events: none;
}

​
.p3-name-tag

A small rotated watermark in the top-left corner that reads “jade’s / persona”. It uses transform: rotate(18deg) and a low opacity to keep it subtle. To change the watermark text, find the element in P3Menu.jsx and update its inner text: 
{/* Change the watermark label */}
<div className="p3-name-tag">your name / portfolio</div>

​
.p3-name-tag positioning

The name tag element is absolutely positioned at top: 18px; left: 22px and rotated 18deg clockwise via transform: rotate(18deg) with a transform-origin of left top. These values are defined directly in the inline <style> block inside P3Menu.jsx.
A .p3-bg-word “SYSTEM” watermark element is sometimes referenced in older forks of this project, but it is not present in the current src/P3Menu.jsx. You do not need to delete anything — the element and its CSS rule simply do not exist in this codebase.

​
Creating a Shared Theme File

Because styles are currently spread across components, a shared constants file can save significant time when rebranding.
Create src/theme.js and import from it in every component that needs a color or font name. This won’t automatically update embedded <style> strings, but it works well for inline style={{}} props and JavaScript-driven animation values (e.g., Framer Motion color props).
// src/theme.js
export const colors = {
  bg:          '#04060f',
  accent:      '#c4001a',
  accentDark:  '#6b0010',
  highlight:   'rgba(245,122,139,0.22)',
  labelActive: '#3ce2ff',
  labelHover:  '#00d9ff',
  resumeBg:    '#10185f',
  resumeAccent:'#85f4ff',
};

export const fonts = {
  menu:   "'Anton', sans-serif",
  ui:     "'Bebas Neue', sans-serif",
  body:   "'Barlow Condensed', sans-serif",
  reveal: "'Montserrat', sans-serif",
};
Then import in a component:
import { colors, fonts } from '../theme';

// Use in a Framer Motion variant or inline style:
<motion.div style={{ background: colors.accent, fontFamily: fonts.menu }}>
  ABOUT ME
</motion.div>

Build docs developers (and LLMs) love

Get started for freeTalk to us