feat: explore developer-ish portfolio aesthetic

DESIGN.md

@@ -0,0 +1,258 @@
+---
+version: alpha
+name: Jonathan Peris Developer Portfolio
+description: "Systems-console portfolio for a senior backend engineer: precise, dark, operational, and proof-oriented."
+colors:
+  primary: "#4ADE80"
+  background: "#08120D"
+  surface: "#101C15"
+  elevated: "#17271D"
+  border: "#294333"
+  border-strong: "#3B604A"
+  text: "#EEF8F0"
+  muted: "#B2C8B9"
+  dim: "#758B7C"
+  accent: "#4ADE80"
+  accent-light: "#86EFAC"
+  accent-dim: "#22C55E"
+  cyan: "#22D3EE"
+  purple: "#C084FC"
+  amber: "#F59E0B"
+  rose: "#FB7185"
+typography:
+  display:
+    fontFamily: DM Sans
+    fontSize: 4rem
+    fontWeight: 800
+    lineHeight: 1
+    letterSpacing: "-0.06em"
+  h1:
+    fontFamily: DM Sans
+    fontSize: 3.5rem
+    fontWeight: 800
+    lineHeight: 1.05
+    letterSpacing: "-0.05em"
+  h2:
+    fontFamily: DM Sans
+    fontSize: 2rem
+    fontWeight: 750
+    lineHeight: 1.1
+    letterSpacing: "-0.04em"
+  body:
+    fontFamily: DM Sans
+    fontSize: 1rem
+    fontWeight: 400
+    lineHeight: 1.65
+    letterSpacing: "0em"
+  small-mono:
+    fontFamily: JetBrains Mono
+    fontSize: 0.75rem
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "0.08em"
+rounded:
+  sm: 6px
+  md: 12px
+  lg: 18px
+  xl: 28px
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 40px
+  xxl: 64px
+components:
+  page:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.muted}"
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.md}"
+    padding: 24px
+  card-hover:
+    backgroundColor: "{colors.elevated}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.md}"
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.background}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+  button-secondary:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.accent-light}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+  button-secondary-hover:
+    backgroundColor: "{colors.elevated}"
+    textColor: "{colors.accent}"
+    rounded: "{rounded.sm}"
+    padding: 12px
+  chip:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.accent-light}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+  chip-muted:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.dim}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+  card-outline:
+    backgroundColor: "{colors.border}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  card-outline-hover:
+    backgroundColor: "{colors.border-strong}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.md}"
+    padding: 16px
+  terminal:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.text}"
+    rounded: "{rounded.lg}"
+    padding: 16px
+  terminal-prompt:
+    backgroundColor: "{colors.background}"
+    textColor: "{colors.accent-dim}"
+    rounded: "{rounded.sm}"
+    padding: 4px
+  tag-cyan:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.cyan}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+  tag-purple:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.purple}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+  tag-amber:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.amber}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+  tag-rose:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.rose}"
+    rounded: "{rounded.sm}"
+    padding: 8px
+---
+
+## Overview
+
+This design system supports `PRODUCT.md`: a proof-oriented portfolio for Jonathan Peris, a senior backend/platform engineer. The interface should feel like an operating console, deployment ledger, trace viewer, or systems manual — not like a generic portfolio template.
+
+The visual mood is dark green-black, precise, calm, and technical. It should communicate engineering maturity: clear hierarchy, restrained motion, strong text contrast, and small operational details that reward technical visitors without slowing down recruiters.
+
+The strongest design idea is **developer-ish but not gimmicky**: routes, manifests, chips, ledgers, traces, shell affordances, and repository cards are welcome; fake danger, hacker-roleplay, neon overload, and illegible cyberpunk effects are not.
+
+## Colors
+
+- **Background (`#08120D`)** anchors the site in a dark operational workspace.
+- **Surface (`#101C15`)** and **elevated (`#17271D`)** separate cards, panels, and terminal areas without bright boxes.
+- **Text (`#EEF8F0`)** is used for important copy and headings.
+- **Muted (`#B2C8B9`)** is the default long-form reading color.
+- **Dim (`#758B7C`)** is reserved for metadata, timestamps, route labels, and secondary captions.
+- **Accent (`#4ADE80`)** is the primary interaction and status color. It implies healthy systems, deploy readiness, and availability.
+- **Accent light (`#86EFAC`)** can highlight hover states, active labels, and emphasized links.
+- **Cyan, purple, amber, and rose** are supporting syntax/status colors. Use sparingly for language dots, stack tags, or code-like semantics.
+
+Use the accent color as a precision instrument, not a flood fill. Large panels should stay dark; green should mark state, focus, and the most important calls to action.
+
+## Typography
+
+Use **DM Sans** for both display and body text. The brand should feel modern, legible, and engineered rather than editorial or ornamental.
+
+Use **JetBrains Mono** for:
+
+- route-style labels (`/profile`, `/trace`, `/workbench`),
+- metadata and timestamps,
+- shell content,
+- manifest/YAML snippets,
+- small tags and status chips.
+
+Large headings should be compact and assertive, with tight negative tracking. Avoid decorative serif display type for this version; the product direction is operational clarity, not magazine polish.
+
+## Layout
+
+The layout should read like a technical dossier:
+
+1. **Hero / command surface:** immediate name, availability, role, remote context, resume/contact CTAs, and a manifest-like proof panel.
+2. **Profile packet:** concise summary of Jonathan's value proposition and operating principles.
+3. **Capability map:** stack grouped by language, backend, architecture, cloud, data, and frontend.
+4. **Experience trace:** chronological production history with the current role visually elevated.
+5. **Workbench:** curated featured projects before dynamic repository tail.
+6. **Repository tail and footer:** more proof, socials, and shell/easter-egg affordances.
+
+Spacing should be generous enough to feel calm, but dense enough to preserve a systems-console rhythm. Prefer grids, ledgers, and cards over large decorative illustrations.
+
+## Elevation & Depth
+
+Depth is subtle and mostly structural:
+
+- 1px borders for cards and panels.
+- Low-opacity green glows only on hero atmosphere, active states, and hover emphasis.
+- Noise/dot overlays may add texture, but must stay quiet and never reduce text readability.
+- Avoid glassmorphism that makes text sit on unstable backgrounds.
+
+Hover states can lift a card with a stronger border and shadow, but the base page should remain still and professional.
+
+## Shapes
+
+Use mostly rectangular cards with modest rounding:
+
+- `6px` for chips, buttons, and compact tags.
+- `12px` for cards and code panels.
+- `18px` to `28px` for large hero/terminal surfaces.
+
+Do not use pill shapes everywhere. Reserve pills for availability/status indicators and high-level signals.
+
+## Components
+
+### Navigation
+
+Navigation may use route-like labels and should stay sticky. Keep the resume/contact path visible and obvious.
+
+### Hero manifest / deploy ledger
+
+The hero proof panel may resemble YAML, a deploy ledger, or a terminal card. It should contain truthful product signals: experience, current lane, location/remote fit, availability, and key stack.
+
+### Cards
+
+Cards should be information-dense but not cramped. Each card needs a clear title, metadata, and one concise proof statement. Featured project cards can use language color accents, but the surrounding panel should remain in the main palette.
+
+### Tags and chips
+
+Tags are metadata, not decoration. Use them to make stack and domain fit scannable. Avoid turning every noun into a chip.
+
+### Terminal / shell
+
+The shell is a progressive enhancement and personality layer. It must not be the only way to access resume, contact, stack, or availability information. Keyboard behavior should be predictable: `Enter` submits, `Escape` closes, and focus is visible.
+
+### CTAs
+
+Primary CTA: resume/contact/hire path. Secondary CTA: GitHub, LinkedIn, project links, or open shell. CTAs should use clear verbs and preserve native link behavior.
+
+## Do's and Don'ts
+
+### Do
+
+- Make seniority, .NET/backend depth, remote readiness, and availability visible immediately.
+- Use operational metaphors: traces, manifests, ledgers, workbench, status, signals.
+- Keep claims tied to proof: current role, project links, stack groups, and work history.
+- Keep contrast high and body copy readable on dark backgrounds.
+- Use CSS-first motion and respect reduced-motion preferences when adding new animation.
+- Keep frequently edited content in `src/lib/data.ts`.
+
+### Don't
+
+- Don't make the site feel like a crypto, hacker, cyberpunk, or gaming landing page.
+- Don't hide contact or resume behind easter eggs.
+- Don't overuse neon green, blur, scanlines, or fake terminal noise.
+- Don't inflate claims beyond what `PRODUCT.md`, work history, and repositories support.
+- Don't replace human clarity with clever labels; route-style copy must still be understandable.
+- Don't introduce heavy runtime dependencies for purely decorative effects.

PRODUCT.md

@@ -0,0 +1,118 @@
+# PRODUCT.md
+
+## Product
+
+`jonathanperis.github.io` is Jonathan Peris's public developer portfolio and proof-of-work hub. It should help hiring managers, technical interviewers, engineering leaders, collaborators, and consulting prospects understand who Jonathan is, what he is strong at, and why he is credible for backend/system architecture work.
+
+The site is not a generic resume template. It is a compact technical artifact that should feel like it belongs to an engineer who builds production systems, cares about delivery, and can still make the interface memorable.
+
+## Primary Outcomes
+
+1. **Convert qualified visitors into conversations.** Make it easy for the right person to contact Jonathan for remote roles, backend/platform engineering work, or selected architecture consulting.
+2. **Communicate seniority quickly.** Within the first screen, make clear: 12+ years, .NET/Azure/fintech depth, remote collaboration, and production ownership.
+3. **Show proof, not just claims.** Use work history, featured repositories, live project links, and concise engineering principles to demonstrate taste and execution.
+4. **Keep the portfolio maintainable.** The content model, components, and design tokens should be simple enough for future agents and humans to update safely.
+
+## Audience
+
+### Hiring managers and recruiters
+
+They need a fast answer to: "Is this person relevant for a senior software engineering role?" The page should foreground current role, availability, location/remote context, contact links, resume, and technology fit.
+
+### Engineering leaders and staff/principal engineers
+
+They need evidence of judgment. The site should emphasize systems thinking, reliability, boundaries, delivery discipline, and concrete project/work examples instead of buzzword density.
+
+### Technical interviewers
+
+They need scannable signals: stack, past domains, architecture vocabulary, repository links, and enough implementation detail to start a deeper technical conversation.
+
+### Consulting prospects and collaborators
+
+They need to know where Jonathan can help: backend architecture, .NET modernization, fintech/business systems, cloud delivery, and pragmatic implementation.
+
+## Positioning
+
+Jonathan is a production-focused software engineer with 12+ years of experience, centered on .NET, fintech/business systems, cloud delivery, and clean architecture. The strongest positioning is:
+
+> Senior backend/platform engineer for teams that need durable business systems, clear architecture boundaries, and reliable delivery.
+
+Supporting signals:
+
+- Current software engineering work at Derivative Path on financial modules: General Ledger, Hedge Accounting, Fiscal Calendar, and DerivativeEDGE.
+- Deep .NET ecosystem experience: .NET Core+, ASP.NET Core, Entity Framework, MAUI, Blazor.
+- Architecture vocabulary backed by years of delivery: CQRS, DDD, microservices, hexagonal architecture, clean architecture, SAGA pattern.
+- DevOps/cloud literacy: Azure, Azure DevOps, Docker, Kubernetes, CI/CD.
+- Curiosity beyond the main lane: Rust, Go, Python, TypeScript, WebAssembly, game/dev experiments, and performance-oriented repositories.
+
+## Brand Personality
+
+- **Competent, not loud.** Confident language, restrained claims, proof-first framing.
+- **Systems-minded.** The interface may borrow from terminals, runbooks, traces, manifests, and deployment ledgers.
+- **Human but concise.** Keep small personal touches and easter eggs, but do not let them obscure professional clarity.
+- **Pragmatic.** Architecture is framed as a way to reduce operational cost, not as decoration.
+- **Remote-ready.** Brazil-based, US-team-friendly, async-capable, comfortable with distributed engineering work.
+
+## Content Principles
+
+1. **Lead with the current value proposition.** The hero should quickly communicate role, experience, availability, location/remote fit, and contact path.
+2. **Every section earns its space.** Avoid filler sections; each block should answer a likely visitor question.
+3. **Prefer specific nouns.** Use concrete domains, modules, stacks, and project names over generic adjectives.
+4. **Separate signals from proof.** A short signal chip can say ".NET + Azure"; a nearby section should explain where that shows up in work.
+5. **Keep availability current.** The current stance is: open to remote roles and selected backend architecture consulting.
+6. **Keep generated repository data subordinate.** Dynamic GitHub projects are useful proof, but the curated workbench/featured list should set the narrative.
+
+## Required User Journeys
+
+### Recruiter fast path
+
+1. Land on homepage.
+2. See availability, role, experience, and remote/location context immediately.
+3. Click LinkedIn, email/contact, or resume without scrolling deeply.
+
+### Engineering evaluator path
+
+1. Read hero and profile packet.
+2. Scan capability map and engineering principles.
+3. Inspect experience trace and featured projects.
+4. Open GitHub/live project links.
+
+### Curious developer path
+
+1. Notice the console/runbook aesthetic.
+2. Open the interactive shell or find the easter egg.
+3. Explore repositories and social links.
+
+## Functional Requirements
+
+- Static Astro site deployable to GitHub Pages.
+- React-powered interactive portfolio component.
+- Build-time GitHub project fetching where configured, with safe fallbacks.
+- Resume route and/or resume CTA available from primary navigation.
+- Contact/social links available in hero/footer and keyboard/screen-reader accessible.
+- Hidden shell/easter egg preserved as progressive enhancement; core content must remain useful without it.
+- Analytics events may track outbound/social/resume interactions, but must not block navigation.
+
+## Non-Goals
+
+- Do not become a blog platform unless there is an explicit content strategy.
+- Do not over-index on animation at the expense of readability or performance.
+- Do not present Jonathan as a full-service agency or generic freelancer marketplace profile.
+- Do not hide the resume/contact path behind clever terminal interactions.
+- Do not let the site look like a cryptocurrency, cyberpunk, gaming, or hacker-roleplay landing page.
+
+## Product Quality Bar
+
+- **Clarity:** A first-time visitor should understand Jonathan's profile in under 10 seconds.
+- **Credibility:** Claims should map to work history, project links, or explicit engineering principles.
+- **Accessibility:** Text contrast, focus states, semantic structure, and reduced-motion friendliness matter.
+- **Performance:** Static output should remain lightweight; decorative effects should be CSS-first.
+- **Maintainability:** Data that changes often belongs in `src/lib/data.ts`; global visual decisions belong in `DESIGN.md` and CSS tokens.
+- **Trust:** External links should be accurate, current, and safe (`rel="noreferrer noopener"`).
+
+## Success Signals
+
+- More qualified inbound contact via LinkedIn/email/Workana/GitHub.
+- Recruiters can quickly identify Jonathan as a senior .NET/backend engineer.
+- Technical reviewers can cite specific projects, architecture choices, and domains.
+- Future redesigns remain consistent because `PRODUCT.md` defines product intent and `DESIGN.md` defines visual rules.

astro.config.ts

@@ -11,6 +11,6 @@ export default defineConfig({
     sitemap(),
   ],
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss() as never],
   },
 });