Skip to content

Commit 7249d67

Browse files
jonathanperisclaude
jonathanperis
and
claude
committed
docs: add CLAUDE.md and .claude/memory for Claude Code context
Adds project-specific documentation for Claude Code including build commands, Next.js 16 static export architecture, and persistent memory covering GitHub GraphQL API integration, terminal UI theme, and data layer design. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent b2538e9 commit 7249d67

3 files changed

Lines changed: 155 additions & 0 deletions

File tree

‎.claude/memory/MEMORY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- [Architecture](architecture.md) — Next.js 16 static export, GitHub GraphQL API with fallback, terminal UI theme, data layer design

‎.claude/memory/architecture.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
name: Portfolio Site Architecture
3+
description: Next.js 16 static export, GitHub GraphQL API integration, terminal UI theme, SEO strategy
4+
type: project
5+
---
6+
7+
## Rendering Strategy
8+
9+
- **Server Components (RSC)**: `app/page.tsx` is async — fetches GitHub pinned repos at build time via GraphQL
10+
- **Client Components**: `Portfolio` (main UI), `ResumePage` (print-optimized) use `"use client"`
11+
- **Static export**: `output: "export"` in next.config.ts — no server at runtime, deployed to GitHub Pages
12+
13+
**Why:** Build-time data fetching means the site is pure static HTML/CSS/JS. No runtime server needed.
14+
15+
**How to apply:** All dynamic data must be fetched at build time. If adding new dynamic content, add it to `lib/github.ts` or `lib/data.ts`.
16+
17+
## GitHub API Integration
18+
19+
`lib/github.ts` fetches pinned repos via GraphQL with `GITHUB_TOKEN`:
20+
- Query: `user.pinnedItems` (first 12 repositories)
21+
- Fields: name, description, stargazerCount, primaryLanguage, url
22+
- **Fallback**: Hardcoded `FALLBACK_REPOS` array if API fails
23+
- **Exclusion**: `EXCLUDE_REPOS` array filters out the profile repo itself
24+
25+
## Data Architecture
26+
27+
`lib/data.ts` exports all static content:
28+
- `PROFILE` — name, email, location, social links
29+
- `SKILLS` — categorized technology list
30+
- `EXPERIENCES` — 10 professional roles (2011-present)
31+
- `FEATURED_PROJECTS` — 5 highlighted projects
32+
- `ROLES` — typing animation strings
33+
- `SOCIALS` — platform links
34+
- `EDUCATION` — BTech from UNIESP
35+
36+
## UI Features
37+
38+
- Terminal easter egg with CLI emulator (Konami code trigger)
39+
- Typing animation via custom `useTyping()` hook
40+
- Scroll progress indicator via `useScrollProgress()`
41+
- Fade-in animations via `useReveal()` (IntersectionObserver)
42+
- Dark terminal aesthetic with green accent color
43+
- Print-optimized resume at `/resume` with A4 CSS

‎CLAUDE.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# jonathanperis.github.io — Claude Code Guide
2+
3+
Personal developer portfolio built with Next.js 16, deployed as a static site to GitHub Pages.
4+
5+
**Live:** https://jonathanperis.github.io/
6+
7+
---
8+
9+
## Tech Stack
10+
11+
| Technology | Purpose |
12+
|-----------|---------|
13+
| Next.js 16.2 | App Router, static export |
14+
| React 19.2 | Component rendering |
15+
| TypeScript 5 | Type safety |
16+
| Tailwind CSS 4 | Utility-first styling |
17+
| GitHub GraphQL API | Fetch pinned repos at build time |
18+
| Google Analytics 4 | Traffic tracking |
19+
20+
---
21+
22+
## Build Commands
23+
24+
```sh
25+
npm run dev # Dev server on :3000
26+
npm run build # Static export to ./out
27+
npm run lint # ESLint (Next.js web vitals + TypeScript)
28+
npm start # Production server (local only)
29+
```
30+
31+
---
32+
33+
## Architecture
34+
35+
```
36+
Server Components (RSC)
37+
├── app/page.tsx # Async: fetches GitHub repos, renders Portfolio
38+
├── app/layout.tsx # Root: metadata, fonts, GA, JSON-LD
39+
└── app/resume/layout.tsx # Resume metadata
40+
41+
Client Components ("use client")
42+
├── Portfolio # Main interactive UI (terminal, typing, scroll)
43+
├── ResumePage # Print-optimized resume with PDF download
44+
├── Analytics # GA4 script injection
45+
└── JsonLd # Schema.org structured data
46+
47+
Data Layer
48+
├── lib/github.ts # GraphQL API + fallback repos
49+
└── lib/data.ts # PROFILE, SKILLS, EXPERIENCES, FEATURED_PROJECTS
50+
```
51+
52+
---
53+
54+
## Key Patterns
55+
56+
- **Static export** — `output: "export"` in next.config.ts, no server at runtime
57+
- **Build-time data fetching** — GitHub API called during `npm run build`
58+
- **Fallback data** — Hardcoded repos in `github.ts` if API fails
59+
- **Terminal easter egg** — CLI emulator with Konami code trigger
60+
- **Typing animation** — Custom `useTyping()` hook for role cycling
61+
- **Print optimization** — Resume page with A4 CSS, black/white media queries
62+
- **SEO** — JSON-LD (Schema.org Person), OG/Twitter meta, sitemap.xml
63+
- **Cache headers** — Static assets: `max-age=31536000, immutable`
64+
65+
---
66+
67+
## Project Structure
68+
69+
```
70+
jonathanperis.github.io/
71+
├── app/
72+
│ ├── page.tsx # Home page (server component)
73+
│ ├── portfolio.tsx # Main UI (client component)
74+
│ ├── layout.tsx # Root layout + metadata
75+
│ ├── globals.css # Tailwind + custom theme + animations
76+
│ ├── components/
77+
│ │ ├── analytics.tsx # GA4 integration
78+
│ │ └── json-ld.tsx # Structured data
79+
│ ├── lib/
80+
│ │ ├── github.ts # GitHub GraphQL client + fallback
81+
│ │ └── data.ts # Static profile/skills/experience data
82+
│ └── resume/
83+
│ ├── layout.tsx # Resume layout
84+
│ └── page.tsx # Print-optimized resume
85+
├── public/
86+
│ ├── cv_jonathan_peris.pdf # Downloadable CV
87+
│ ├── manifest.json # PWA manifest
88+
│ ├── robots.txt / sitemap.xml
89+
│ └── favicon.svg / apple-touch-icon.png
90+
├── next.config.ts # Static export, cache headers
91+
├── tsconfig.json # strict, ES2017, @/* alias
92+
├── postcss.config.mjs # Tailwind CSS v4
93+
└── .github/workflows/deploy.yml # GitHub Pages deploy on push to main
94+
```
95+
96+
---
97+
98+
## Environment Variables
99+
100+
| Variable | Purpose |
101+
|----------|---------|
102+
| `GITHUB_TOKEN` | GitHub API auth (provided by Actions) |
103+
| `NEXT_PUBLIC_GA_ID` | GA4 tracking ID (G-35CN95481D) |
104+
105+
---
106+
107+
## CI/CD
108+
109+
- **Trigger:** Push to main or manual dispatch
110+
- **Pipeline:** `npm ci` → `npm run build` → Upload `./out` → Deploy to GitHub Pages
111+
- **Dependabot:** Weekly npm + GitHub Actions updates

0 commit comments

Comments
 (0)