Initial commit: TillTheEnd website with Vite + Tailwind CSS
This commit is contained in:
Loto
parent
6abeaf95e7
commit
b5a1673ed2
12 changed files with 294 additions and 0 deletions
1
.commitmsg
Normal file
1
.commitmsg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
Initial commit: project specification and README
|
||||||
13
Dockerfile
Normal file
13
Dockerfile
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
# 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;"]
|
||||||
6
docker-compose.yml
Normal file
6
docker-compose.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
services:
|
||||||
|
website:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "8080:80"
|
||||||
|
restart: unless-stopped
|
||||||
95
index.html
Normal file
95
index.html
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>TillTheEnd - Delivering results, not promises</title>
|
||||||
|
<meta name="description" content="IT consulting and freelancing services">
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<div id="app">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="container mx-auto py-6 flex justify-between items-center">
|
||||||
|
<div class="text-2xl font-bold">TillTheEnd</div>
|
||||||
|
<nav class="space-x-6">
|
||||||
|
<a href="#services" class="text-gray-600 hover:text-orange-500">Services</a>
|
||||||
|
<a href="#about" class="text-gray-600 hover:text-orange-500">About</a>
|
||||||
|
<a href="#contact" class="text-gray-600 hover:text-orange-500">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="container mx-auto py-20 text-center">
|
||||||
|
<h1 class="text-5xl font-bold mb-4">TillTheEnd</h1>
|
||||||
|
<p class="text-2xl text-gray-600 mb-8">Delivering results, not promises.</p>
|
||||||
|
<div class="flex justify-center space-x-4 mb-8">
|
||||||
|
<a href="#contact" class="bg-orange-500 text-white px-6 py-3 rounded hover:bg-orange-600">Contact</a>
|
||||||
|
<a href="https://github.com/iRave" class="border border-gray-300 px-6 py-3 rounded hover:bg-gray-100">GitHub</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-500">Software Development • Infrastructure • Consulting</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="container mx-auto py-20">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Services</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="text-center p-6">
|
||||||
|
<div class="text-4xl mb-4">💻</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Software Development</h3>
|
||||||
|
<p class="text-gray-600">Custom solutions tailored to your needs</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-6">
|
||||||
|
<div class="text-4xl mb-4">⚙️</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Infrastructure</h3>
|
||||||
|
<p class="text-gray-600">Reliable systems architecture</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-6">
|
||||||
|
<div class="text-4xl mb-4">💬</div>
|
||||||
|
<h3 class="text-xl font-bold mb-2">Consulting</h3>
|
||||||
|
<p class="text-gray-600">Expert guidance from concept to completion</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="container mx-auto py-20 bg-gray-50 rounded-lg">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-8">About</h2>
|
||||||
|
<div class="text-center max-w-2xl mx-auto">
|
||||||
|
<p class="text-gray-600">
|
||||||
|
TillTheEnd is an IT consulting and freelancing service focused on delivering
|
||||||
|
exceptional results for clients. With expertise in software development,
|
||||||
|
infrastructure, and strategic consulting, we help businesses achieve their
|
||||||
|
technology goals.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="container mx-auto py-20">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Contact</h2>
|
||||||
|
<div class="max-w-2xl mx-auto">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="font-semibold w-24">Email:</span>
|
||||||
|
<a href="mailto:contact@tilltheend.de" class="text-orange-500 hover:underline">contact@tilltheend.de</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="font-semibold w-24">GitHub:</span>
|
||||||
|
<a href="https://github.com/iRave" class="text-purple-500 hover:underline" target="_blank">github.com/iRave</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="font-semibold w-24">LinkedIn:</span>
|
||||||
|
<a href="https://de.linkedin.com/in/tilltheend" class="text-purple-500 hover:underline" target="_blank">de.linkedin.com/in/tilltheend</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="container mx-auto py-10 border-t mt-10 text-center text-gray-500">
|
||||||
|
<p>© 2026 TillTheEnd. All rights reserved.</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "tilltheend-website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.2.1",
|
||||||
|
"autoprefixer": "^10.4.27",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.2.1",
|
||||||
|
"vite": "^7.3.1"
|
||||||
|
},
|
||||||
|
"description": "Personal website for IT consulting and freelancing.",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "gitea@192.168.178.123:Loto/tilltheend-website.git"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss': {},
|
||||||
|
autoprefixer: {},
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/counter.js
Normal file
9
src/counter.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export function setupCounter(element) {
|
||||||
|
let counter = 0
|
||||||
|
const setCounter = (count) => {
|
||||||
|
counter = count
|
||||||
|
element.innerHTML = `count is ${counter}`
|
||||||
|
}
|
||||||
|
element.addEventListener('click', () => setCounter(counter + 1))
|
||||||
|
setCounter(0)
|
||||||
|
}
|
||||||
1
src/javascript.svg
Normal file
1
src/javascript.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
20
src/main.css
Normal file
20
src/main.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
background-color: #fafafa;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
4
src/main.js
Normal file
4
src/main.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import './main.css'
|
||||||
|
|
||||||
|
// TillTheEnd website initialization
|
||||||
|
console.log('TillTheEnd website loaded')
|
||||||
96
src/style.css
Normal file
96
src/style.css
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vanilla:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
16
tailwind.config.js
Normal file
16
tailwind.config.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
orange: '#f97316',
|
||||||
|
purple: '#a855f7',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue