✦ Arka — Portfolio

A dark, editorial single-page portfolio — crafted with obsessive attention to detail.

_{Warm earthy palette · Editorial typography · Kinetic smooth scroll · Real-time Discord status · 4 languages}

---

Overview

A dark-themed, single-page portfolio engineered with Next.js 16 App Router, React 19, Tailwind CSS 4, and Framer Motion 12. The site is statically exported and deployed to GitHub Pages via GitHub Actions — then served on the custom domain arka.riftmc.net. Zero server costs, blazing-fast load times.

"Building digital products people remember."

Highlights

Core sections Hero — editorial clamp-sized typography with staggered reveal About — bio, beliefs, workflow, animated count-up stats Projects — auto-fetched from GitHub API; ANS pinned at #1 with a dedicated badge Tech stack — interactive grid with "why I use it" explanations per tech Timeline — developer journey milestones, ANS at the top Live — real-time Discord presence via Lanyard Contact — serverless, API-backed form

Interactive features Command palette — ⌘K / Ctrl+K to navigate, copy links, change language, open socials Warp scroll — unified Lenis-powered smooth scroll engine (warpTo()) i18n — live language switcher (EN · FR · ES · DE), 4 locale files Blueprint Mode — alternate blueprint-style theme unlocked by the Konami code Christmas Theme — seasonal overlay that opts in automatically in December Scroll scrubber — top progress bar is clickable; drag/click to jump anywhere

Design & motion Framer Motion throughout with spring physics & stagger Ambient mesh gradient via CSS @property animation prefers-reduced-motion respected site-wide via MotionConfig Fluid clamp-based typography up to 112px Custom grain texture overlay for film-like depth

Mobile-first Responsive layout across every breakpoint Mobile HUD — bottom dock with section progress indicator Long-press on active tab reveals quick actions (Top / Copy / Share) Snap carousel for featured projects Haptic feedback on nav interactions

Tech Stack

Framework    →  Next.js 16 (App Router, static export)
Language     →  TypeScript 5 (strict mode)
Styling      →  Tailwind CSS 4 + clsx + tailwind-merge
UI           →  React 19, Framer Motion 12
Scrolling    →  Lenis (kinetic smooth scroll)
Data         →  SWR, Lanyard API, GitHub REST API
Commands     →  cmdk (⌘K palette)
Icons        →  Lucide React
Fonts        →  Syne · Sora · Space Mono · Green Energy (display)
Deploy       →  GitHub Pages via GitHub Actions → arka.riftmc.net

Keyboard Shortcuts

Shortcut	Action
⌘K / Ctrl+K	Open command palette
↑ ↑ ↓ ↓ ← → ← → B A	Toggle Blueprint Mode
Esc	Close any overlay
Tab	Focus-visible rings appear on every interactive element

Project Structure

src/
├── app/                      # App Router: layout, pages, global CSS
├── components/
│   ├── sections/             # Hero, About, FeaturedProjects,
│   │                         # TechStack, TechSlider, Timeline, Contact
│   ├── features/             # CommandPalette, LiveStatus,
│   │                         # LanguageSelector, ProjectCarousel
│   ├── layout/               # Navbar, Footer, MobileHUD, ScrollManager
│   └── ui/                   # ScrollProgress, MagneticButton, Preloader…
├── context/                  # Warp, Language, Blueprint, Christmas
├── hooks/                    # useLanyard, useHaptics
├── i18n/
│   ├── engine.ts             # t() / tp() / transNodes APIs
│   └── locales/              # en.json · fr.json · es.json · de.json
├── lib/                      # utilities (cn, optimization helpers)
└── types/                    # shared type definitions

Getting Started

Prerequisites

• Node.js ≥ 18
• npm (or pnpm / bun)

Installation

git clone https://github.com/Arka-ui/portfolio.git
cd portfolio
npm install

# Set up environment variables
cp .env.example .env.local
# → fill in NEXT_PUBLIC_API_URL

Development

npm run dev          # → http://localhost:3000

Production Build

npm run build        # → static export to ./out
npm run start        # → serve the production build
npm run lint         # → ESLint

Environment Variables

Variable	Required	Purpose
NEXT_PUBLIC_API_URL	✅	Backend endpoint for the contact form & telemetry

For CI/CD, add this as a repository secret in GitHub → Settings → Secrets and variables → Actions.

Deployment

The site deploys automatically on every push to main:

Workflow	Role
.github/workflows/nextjs.yml	GitHub Pages–native deploy
.github/workflows/deploy.yml	Alternative deploy pipeline

Both inject the NEXT_PUBLIC_API_URL secret at build time. The final artifact is served from the custom domain arka.riftmc.net (CNAME configured in public/CNAME).

Contributing

Issues and suggestions are welcome — but note the license below: this is a personal portfolio, not a starter template.

1. Fork the repository
2. Create your branch (git checkout -b feat/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feat/amazing-feature)
5. Open a Pull Request

License

This project is not open-source. See the LICENSE for full details.

TL;DR — You can read the code, learn from it, and build your own portfolio from scratch. You cannot clone or fork this repo and pass it off as yours with minor edits. Small snippets (~30 lines) are fine to reuse with attribution.

---

✦ Visit the live portfolio →

Crafted by Arka — a self-taught full-stack developer from France.