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