|
1 | 1 | # davidbingmann.de |
2 | 2 |
|
3 | | -A personal website built with React + Vite, showcasing my profile, projects, and resume. |
| 3 | +My personal website (profile, projects, resume, and an Impressum page). |
4 | 4 |
|
5 | | -## ✨ Features |
| 5 | +## How It's Built |
6 | 6 |
|
7 | | -- **Responsive Design**: Minimal, mono-inspired layout with subtle motion |
8 | | -- **Social Media Integration**: Links to GitHub, LinkedIn, X/Twitter, and Bluesky |
9 | | -- **Interactive Timeline**: Visual resume presentation |
10 | | -- **Modern Visual Style**: Full-bleed hero, soft gradients, and clean typography |
11 | | -- **Containerized Deployment**: Docker & Docker Compose |
| 7 | +- **Frontend**: React + Vite |
| 8 | +- **Routing**: React Router (a small SPA with a few routes) |
| 9 | +- **Styling**: hand-written CSS (`src/styles.css`) using CSS custom properties and a `data-theme` attribute on `index.html` |
| 10 | +- **Icons**: `react-icons` |
| 11 | +- **Content**: mostly plain React components; the resume is driven by `src/data/timeline.js` |
12 | 12 |
|
13 | | -## 🚀 Quick Start |
| 13 | +## How It's Programmed |
14 | 14 |
|
15 | | -### Prerequisites |
| 15 | +- `src/main.jsx` renders `<App />`; `src/App.jsx` defines the client-side routes and wraps everything in `src/components/Layout.jsx`. |
| 16 | +- `src/components/Layout.jsx` keeps navigation and social links as simple arrays and maps them to `NavLink`/`<a>` elements. |
| 17 | +- `src/pages/Home.jsx` implements the hero "typed command" effect with a small `useEffect`-driven timer (typing, then hiding the prompt). |
| 18 | +- `src/pages/Resume.jsx` renders the timeline by mapping `timelineItems`; each item sets a CSS variable (`--delay`) for a staggered reveal animation. |
16 | 19 |
|
17 | | -- Node.js 20+ |
18 | | -- npm |
| 20 | +## Code Layout |
19 | 21 |
|
20 | | -### Development |
| 22 | +- `index.html`: HTML shell (loads the font, sets the initial theme, mounts `#root`) |
| 23 | +- `src/main.jsx`: React entry point (renders `<App />` and imports global styles) |
| 24 | +- `src/App.jsx`: route table (`/`, `/projects`, `/resume`, `/impressum`) |
| 25 | +- `src/components/Layout.jsx`: shared page chrome (nav + footer + `<Outlet />`) |
| 26 | +- `src/pages/*`: page components |
| 27 | +- `src/data/timeline.js`: resume timeline data |
| 28 | +- `src/assets/*` and `public/*`: images and static assets (e.g. `favicon.ico`) |
21 | 29 |
|
22 | | -```bash |
23 | | -npm install |
24 | | -npm run dev |
25 | | -``` |
| 30 | +## Hosting Files (Descriptive) |
26 | 31 |
|
27 | | -### Production Preview |
| 32 | +This repo also keeps the hosting setup I use for the site: |
28 | 33 |
|
29 | | -```bash |
30 | | -npm run build |
31 | | -npm run preview |
32 | | -``` |
33 | | - |
34 | | -## 🔧 Tech Stack |
35 | | - |
36 | | -- **Frontend**: React, Vite |
37 | | -- **UI**: Custom CSS |
38 | | -- **Routing**: React Router |
39 | | -- **Containerization**: Docker & Docker Compose |
40 | | -- **Web Server**: Caddy (reverse proxy) |
| 34 | +- `Dockerfile`: builds the Vite app and serves it via Vite's preview server |
| 35 | +- `docker-compose.yml`: wires the app container to Caddy (plus Watchtower) |
| 36 | +- `Caddyfile`: reverse-proxy + compression + a small set of security headers |
0 commit comments