Jan Kocourek — Tech Card

Jednostránkový statický web ve stylu dark / server / sysadmin. Projekt používá Astro + Tailwind CSS 4 a generuje čistý statický obsah vhodný pro nginx, Apache, GitHub Pages, Cloudflare Pages apod.

1. Co potřebuješ

• Node.js 20 nebo novější
• npm
• Git je volitelný

Ověření:

node -v
npm -v

2. Instalace

Rozbal projekt a přejdi do něj:

cd jan-kocourek-tech-card
npm install

3. Lokální vývoj

npm run dev

Astro vypíše lokální adresu, typicky:

http://localhost:4321/

Při změně souborů se stránka automaticky obnovuje.

4. Kde změnit svoje údaje

Nejdůležitější soubor:

src/data/site.ts

Změň hlavně:

email: 'jan@example.cz',
phone: '+420 XXX XXX XXX',
linkedin: 'https://www.linkedin.com/in/jkocourek90/',
github: '#',

Ve stejném souboru můžeš upravit headline, popis a seznam technologií/služeb.

5. Build produkční verze

npm run build

Výsledný statický web vznikne v adresáři:

dist/

Pro kontrolu buildu lokálně:

npm run preview

6. Nasazení na nginx

Příklad umístění:

sudo mkdir -p /var/www/jankocourek.cz
sudo rsync -av --delete dist/ /var/www/jankocourek.cz/

Příklad nginx konfigurace /etc/nginx/sites-available/jankocourek.cz:

server {
    listen 80;
    listen [::]:80;

    server_name jankocourek.cz www.jankocourek.cz;
    root /var/www/jankocourek.cz;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(css|js|svg|png|jpg|jpeg|webp|ico|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

Aktivace:

sudo ln -s /etc/nginx/sites-available/jankocourek.cz /etc/nginx/sites-enabled/jankocourek.cz
sudo nginx -t
sudo systemctl reload nginx

7. HTTPS přes Let's Encrypt

Na Debianu/Ubuntu například:

sudo apt update
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d jankocourek.cz -d www.jankocourek.cz

Certbot upraví nginx konfiguraci a nastaví automatickou obnovu certifikátu.

8. Jednoduchý update webu

Po úpravách:

npm run build
sudo rsync -av --delete dist/ /var/www/jankocourek.cz/

Nginx není potřeba restartovat — mění se pouze statické soubory.

Struktura projektu

src/
├── components/
│   ├── About.astro
│   ├── Contact.astro
│   ├── Header.astro
│   ├── Hero.astro
│   └── Skills.astro
├── data/
│   └── site.ts
├── layouts/
│   └── Layout.astro
├── pages/
│   └── index.astro
└── styles/
    └── global.css

Responzivní design

Layout je připraven pro:

• desktop / velký monitor,
• notebook / MacBook,
• tablet,
• mobilní telefon.

Breakpointy jsou primárně na 1050 px, 760 px a 460 px. Na mobilu se navigace změní na hamburger menu, hero se skládá pod sebe a karty služeb se přepnou z více sloupců na dva nebo jeden.

Poznámka k Tailwindu

Tailwind CSS 4 je připojen přes oficiální @tailwindcss/vite plugin. Hlavní vzhled je záměrně v src/styles/global.css, protože u takto specifického designu je čitelnější mít většinu design systému na jednom místě. Tailwind tak zůstává k dispozici pro další úpravy a komponenty.