Personal portfolio. Next.js 16 (App Router), Tailwind v4, deployed on Vercel.
🌐 Live: danieljanda.cz
- Stack
- Local development
- Project structure
- Where to update content
- Brand manual
- Deployment
- Voice & tone
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 (CSS-first config) |
| Fonts | Satoshi (via Fontshare CDN), JetBrains Mono (Google Fonts) |
| Hosting | Vercel |
| Source control | GitHub |
No external UI libraries. All components are custom and live in components/.
Requirements: Node.js 20+ and npm.
git clone https://github.com/danieljanda37/danieljanda-web.git
cd danieljanda-web
npm install
npm run devOpen http://localhost:3000.
The dev server has hot reload — saving any file in app/ or components/ refreshes automatically. Stop with Ctrl+C.
For production build & test:
npm run build
npm startdanieljanda-web/
├── app/
│ ├── layout.tsx ← root layout, fonts, metadata, viewport
│ ├── page.tsx ← všechen obsah stránky (texty, timeline, čísla, sekce)
│ └── globals.css ← Tailwind import + design tokens (barvy, animace)
├── components/ ← všechny custom komponenty (viz dále)
├── public/ ← statické soubory (favicon, OG image)
├── next.config.ts
├── tsconfig.json
└── package.json
| Soubor | Co dělá |
|---|---|
RotatingText.tsx |
Přepínací text v hero sekci (Software developer / IT specialist / …) |
LiveClock.tsx |
Živé hodiny v Krkonoších, používá Intl API |
FadeIn.tsx |
Wrapper, který fade-inuje obsah při scrollu (IntersectionObserver) |
GradientText.tsx |
Animovaný magenta gradient přes text |
ScrollReveal.tsx |
Postupné odhalování textu slovo po slovu při scrollu |
LogoLoop.tsx |
Nekonečný horizontální marquee (denní chleba sekce) |
BentoCard.tsx |
Karta v bento gridu, 3D tilt na hover |
TiltCard.tsx |
3D náklon obecný wrapper (jen desktop) |
Magnetic.tsx |
Tlačítko se přitahuje k myši (jen desktop) |
ScrollProgress.tsx |
Magenta progress bar nahoře |
SplashCursor.tsx |
Jemný splash trail za kurzorem (jen desktop) |
ExpandableTimeline.tsx |
Klikatelná časová osa s detaily |
SimpleIcon.tsx |
Wrapper pro brand ikony z simpleicons.org |
Veškerý obsah stránky je v jednom souboru — app/page.tsx. Konfigurační konstanty jsou nahoře, ať se snadno hledá.
Na začátku page.tsx:
const EMAIL = "hi@danieljanda.cz";
const GITHUB_USER = "danieljanda37";
const GITHUB_REPO = "danieljanda-web";
const SOCIALS = {
github: `https://github.com/${GITHUB_USER}`,
linkedin: "https://linkedin.com/",
instagram: "https://www.instagram.com/jandadaniel/",
spotify: "https://open.spotify.com/user/11150452748",
};Konstanta timeline: TimelineItem[] v page.tsx. Každá položka má:
{
period: "2019 — současnost", // období v monospace
company: "SkiResort", // velký nadpis
role: "IT & Systems Manager — …", // podtitulek
location: "Krkonoše", // vpravo na desktopu
description: "...", // kratký popis (vždy viditelný)
accent: true, // přidá magenta puntík + "current"
details: ["...", "..."], // bullety v rozevřeném detailu
link: { label: "...", href: "..." } // volitelný link (otevírá nové okno)
}Přidání nové položky: zkopíruj existující objekt, uprav. Pořadí v poli = pořadí na stránce (shora dolů).
Kazdé číslo (1+ mld. Kč, 12+, 80%, 6×) je inline v JSX v page.tsx. Najdi sekci BENTO STATS a uprav přímo.
yearsCoding se počítá automaticky:
const yearsCoding = new Date().getFullYear() - 2014;Pokud změníš počáteční rok, uprav 2014.
Konstanta learning v page.tsx. Každá karta:
{
title: "Computer vision pro lyžaře",
description: "...",
tags: ["Tag 1", "Tag 2", "Tag 3"]
}Konstanta services v page.tsx. Stejná struktura jako learning.
Tři pole: toolsRow1, toolsRow2, czTools.
První dva s ikonami:
{ slug: "make", label: "Make.com" }Slug = identifikátor na simpleicons.org. Najdi ikonu, slug je v URL po /icons/.
Třetí (czTools) jen text.
Konstanta stack:
{ name: "TypeScript", since: "2020" }Konstanta RotatingText words=[…] v JSX. Stačí přidat/odebrat věty.
| Variable | Hex | Použití |
|---|---|---|
--color-bg |
#0a0a0b |
Hlavní pozadí stránky |
--color-bg-soft |
#111113 |
Karty, dlaždice |
--color-fg |
#ededee |
Hlavní text |
--color-muted |
#6f6f74 |
Sekundární text, popisky |
--color-line |
#1c1c20 |
Dělící čáry |
--color-accent |
#ec4899 |
Magenta — CTA, akcenty, hover state |
--color-accent-soft |
rgba(236,72,153,0.12) |
Akcent na pozadí (hover) |
--color-accent-line |
rgba(236,72,153,0.32) |
Akcent border |
Změna akcentní barvy = změň --color-accent a --color-accent-line/--color-accent-soft budou ladit automaticky díky stejnému RGB.
- Satoshi (sans, font-display) — všechny nadpisy, body text. Načítá se z Fontshare CDN přes
<link>vlayout.tsx. - JetBrains Mono (mono) — popisky, časy, tagy, kód. Načítá se z Google Fonts přes
next/font/google.
Změna fontu: uprav layout.tsx (Google import) a globals.css (CSS variable --font-sans / --font-mono).
Velké nadpisy používají clamp() pro plynulé škálování:
font-size: clamp(min, preferred, max);Příklady použité na stránce:
- Hero jméno:
clamp(3.5rem, 18vw, 14rem) - „Let's build" v kontaktu:
clamp(3rem, 15vw, 9rem) - Velká čísla v bento:
clamp(2.5rem, 9vw, 4.5rem)
Tailwind default scale, multiplikuje 4px ale nejčastěji se používá gap-4 (16px), gap-8 (32px), py-16 až py-32 na sekce.
- Pravdivý a konkrétní. Žádné buzzwords.
- Sebevědomý, ne arogantní. „Postavil jsem", ne „pomohl jsem postavit".
- Konkrétní čísla, kde lze. „80 % lyžařů", „60člennou skupinu", „2018 Audi A8".
- Krátké věty, technický slovník. Cílová skupina chápe, co je YOLO, REST API, BigQuery.
- Žádné lži. Tvrzení musí být ověřitelné.
- Žádné humor "from the heart". Pokud vtip, tak suchý, sebeironický, technický.
local → git push → GitHub → Vercel (auto-deploy)
Vercel je napojený na branch main. Každý push spustí build a nasazení. Preview deployments jsou automaticky vytvořeny pro PR a non-main brache.
danieljanda.cz je registrována u Forpsi, DNS A/CNAME záznamy směřují na Vercel:
Apro@→76.76.21.21CNAMEprowww→cname.vercel-dns.com
Nastavení v Vercel: Project Settings → Domains.
hi@danieljanda.cz je nastaven přes Cloudflare Email Routing → forwarduje do osobního Gmailu. Free.
Žádné. Stránka je čistě statická.
- OG image (auto-generated přes
opengraph-image.tsx) - Sitemap + robots.txt (
next-sitemap) - Plausible / Vercel Analytics
- Anglická verze (
/en) - Reálné case studies (Apps Script invoice pipeline, CableGuard, e-shop)
- Blog /
/notes
Code: MIT (see LICENSE). Content (texts, photos): © Daniel Janda, all rights reserved.
Built in Krkonoše.