141 lines
No EOL
3.5 KiB
Markdown
141 lines
No EOL
3.5 KiB
Markdown
# TillTheEnd Website Specification
|
|
|
|
## Overview
|
|
|
|
Personal website for TillTheEnd — IT consulting and freelancing.
|
|
|
|
## Visual Style
|
|
|
|
Inspired by ollama.com: minimal, clean, light.
|
|
|
|
- **Background:** White/off-white (`#fafafa` or `#ffffff`)
|
|
- **Text:** Dark gray/black (`#111` or `#1a1a1a`)
|
|
- **Accents:** Orange (`#f97316`) + Purple (`#a855f7`) — used sparingly for links, buttons, icons
|
|
- **Typography:** System fonts (Inter or system-ui), clean sans-serif
|
|
- **Layout:** Single page, minimal navigation, lots of whitespace
|
|
- **No:** Animations, gradients, heavy shadows (keep it flat)
|
|
|
|
## Branding
|
|
|
|
- **Name:** TillTheEnd
|
|
- **Slogan:** "Delivering results, not promises."
|
|
- **Play on words:** Name "Till" + "to the end" = commitment to completion
|
|
|
|
## Contact
|
|
|
|
| Platform | Value |
|
|
|----------|-------|
|
|
| Email | contact@tilltheend.de |
|
|
| GitHub | https://github.com/iRave |
|
|
| LinkedIn | https://de.linkedin.com/in/tilltheend |
|
|
|
|
## Services
|
|
|
|
1. **Software Development** — Custom solutions tailored to your needs
|
|
2. **Infrastructure** — Reliable systems architecture
|
|
3. **Consulting** — Expert guidance from concept to completion
|
|
|
|
## Page Sections
|
|
|
|
### 1. Header
|
|
- Logo/Name: "TillTheEnd" (left)
|
|
- Minimal nav: Services | About | Contact (right, optional — could skip)
|
|
|
|
### 2. Hero
|
|
```
|
|
TillTheEnd
|
|
Delivering results, not promises.
|
|
|
|
[Contact] [GitHub]
|
|
|
|
Software Development • Infrastructure • Consulting
|
|
```
|
|
|
|
### 3. Services (3 columns, icons)
|
|
| Icon | Service | Description |
|
|
|------|---------|-------------|
|
|
| `</>` | Software Development | Custom solutions tailored to your needs |
|
|
| `⚙️` | Infrastructure | Reliable systems architecture |
|
|
| `💬` | Consulting | Expert guidance from concept to completion |
|
|
|
|
### 4. About (placeholder)
|
|
```
|
|
About
|
|
[Short bio — fill in later]
|
|
```
|
|
|
|
### 5. Contact (simple links)
|
|
```
|
|
Contact
|
|
email: contact@tilltheend.de
|
|
github: github.com/iRave
|
|
linkedin: de.linkedin.com/in/tilltheend
|
|
```
|
|
|
|
### 6. Footer
|
|
```
|
|
© 2026 TillTheEnd. All rights reserved.
|
|
```
|
|
|
|
## Tech Stack
|
|
|
|
| Item | Choice |
|
|
|------|--------|
|
|
| **Framework** | Vite + plain HTML (no React/Vue — keep it simple) |
|
|
| **Styling** | Tailwind CSS (via PostCSS) |
|
|
| **Icons** | Heroicons or Lucide (inline SVG) |
|
|
| **Container** | Nginx Alpine (serves static files) |
|
|
| **Port** | 8080 (configurable via env) |
|
|
| **Size** | < 50KB total (gzipped) |
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
tilltheend-website/
|
|
├── Dockerfile # Multi-stage: Node build → Nginx serve
|
|
├── docker-compose.yml # Port 8080 (configurable)
|
|
├── package.json # Vite + Tailwind
|
|
├── tailwind.config.js # Custom colors (orange/purple)
|
|
├── vite.config.js # Build config
|
|
├── index.html # Single page entry
|
|
├── src/
|
|
│ ├── main.css # Tailwind imports + custom styles
|
|
│ └── main.js # Minimal JS (if needed)
|
|
└── README.md # How to run/deploy
|
|
```
|
|
|
|
## Dockerfile
|
|
|
|
```dockerfile
|
|
# Build stage
|
|
FROM node:20-alpine AS builder
|
|
WORKDIR /app
|
|
COPY package*.json ./
|
|
RUN npm ci
|
|
COPY . .
|
|
RUN npm run build
|
|
|
|
# Serve stage
|
|
FROM nginx:alpine
|
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
|
EXPOSE 80
|
|
CMD ["nginx", "-g", "daemon off;"]
|
|
```
|
|
|
|
## docker-compose.yml
|
|
|
|
```yaml
|
|
services:
|
|
website:
|
|
build: .
|
|
ports:
|
|
- "8080:80"
|
|
restart: unless-stopped
|
|
```
|
|
|
|
## Deployment Notes
|
|
|
|
- Exposes port 8080
|
|
- Can be put behind reverse proxy (Caddy, Traefik, Nginx)
|
|
- Static files only — no server-side logic needed
|
|
- Build once, deploy anywhere |