Junot Montpre — Portfolio

Personal portfolio — full-stack developer, 5th year at Epitech Paris. Available now for an internship, a fixed-term or a permanent position.

Live site: mpjunot.github.io

Tech stack

Area	Technologies
Frontend	React 19, TypeScript, Vite 7
Styling	Tailwind CSS 3.4 + CSS custom properties
Typography	System font stack (San Francisco on Apple) — no webfont request
Motion	CSS transitions only — no animation library
Hosting	GitHub Pages, deployed by GitHub Actions

No runtime dependency beyond React: the expanding project rows, the scroll-spy navigation and the hover states are plain CSS and one IntersectionObserver.

Repository structure

├── portfolio/                 # React app (Vite)
│   ├── src/
│   │   ├── App.tsx           # Page layout and components
│   │   ├── data.ts           # All content: projects, experience, skills, contact
│   │   ├── index.css         # Design tokens and component styles
│   │   └── assets/           # Project screenshots (WebP)
│   ├── index.html
│   └── package.json
└── .github/workflows/
    └── deploy.yml            # Build and deploy to GitHub Pages

Getting started

Prerequisites: Node.js 20+, pnpm.

cd portfolio
pnpm install
pnpm dev          # http://localhost:5173

Other commands:

pnpm run build    # type-check and build, output in portfolio/dist/
pnpm run lint
pnpm preview      # serve the production build locally

Editing the content

Everything readable on the site lives in portfolio/src/data.ts. Changing a project, a job or a skill never requires opening App.tsx.

Three conventions govern the Stack section:

1. A technology appears in exactly one row. Docker belongs to devops, not to tools as well; languages live only in skills.languages with their level, never in backend. A development-mode guard at the bottom of data.ts logs Stack — doublons : … to the browser console if a name shows up twice.
2. coreStack lists what is used day to day. Those entries render as coral chips; everything else renders as plain text. Add or remove a name and the display follows.
3. Languages group themselves by level. skills.languages is grouped on the level field at render time, so a new level creates its own line with no further wiring.

Colours and type are CSS custom properties on :root in index.css: --accent (coral), --ink, --fg, --dim, --edge, plus --soft and --line derived from the accent with color-mix(). Changing --accent retints the whole page, including chips, links, focus rings and the background halo.

Accessibility and performance

• Keyboard-navigable: project rows open on focus as well as on hover, and every interactive element has a visible focus ring.
• On touch devices (@media (hover: none)) the project drawers stay open, since hover-only content would otherwise be unreachable.
• prefers-reduced-motion disables transitions and smooth scrolling.
• Screenshots are served as WebP. No webfont, no analytics, no tracker.

Deployment

Every push to main triggers the deploy.yml workflow, which builds portfolio/ and uploads portfolio/dist to GitHub Pages.

The repository must have Settings → Pages → Build and deployment → Source set to GitHub Actions.

Contact

• Email: junot-hery-nantenaina.montpre@epitech.eu
• LinkedIn: linkedin.com/in/junot-montpre
• GitHub: github.com/mpJunot

---

© 2026 Junot Montpre. All rights reserved.