c0ntroller/frontpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Activity

Better responsive design
All checks were successful
Deploy Astro / Build and Deploy (push) Successful in 43s
Details

Browse Source
This commit is contained in:
Daniel Kluge
2026-03-22 11:08:47 +01:00
parent 12a39bf8b4
commit 6654e4b954
4 changed files with 152 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Navigation.astro
View File

@@ -7,7 +7,7 @@ import Logo from "../assets/logo.svg";
<div class="nav-content"> <div class="nav-content">
<a href="/" class="logo"> <a href="/" class="logo">
<Logo class="logo-img" /> <Logo class="logo-img" />
c0ntroller.de <span class="logo-text">c0ntroller.de</span>
</a> </a>
<div class="links"> <div class="links">
<a <a
@@ -83,4 +83,13 @@ import Logo from "../assets/logo.svg";
color: rgb(var(--accent-base)); color: rgb(var(--accent-base));
font-weight: 600; font-weight: 600;
} }
@media (max-width: 500px) {
.logo-text {
display: none;
}
.links {
gap: 1rem;
}
}
</style> </style>

1
src/layouts/BaseLayout.astro
View File

@@ -20,6 +20,7 @@ const {
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

116
src/pages/index.astro
View File

@@ -1,23 +1,24 @@
--- ---
import WelcomeTypewriter from '../components/WelcomeTypewriter.astro'; import WelcomeTypewriter from "../components/WelcomeTypewriter.astro";
import BaseLayout from '../layouts/BaseLayout.astro'; import BaseLayout from "../layouts/BaseLayout.astro";
import { Icon } from 'astro-icon/components'; import { Icon } from "astro-icon/components";
import socials from "../data/socials.json"; import socials from "../data/socials.json";
--- ---
<BaseLayout title="c0ntroller.de" theme="default"> <BaseLayout title="c0ntroller.de" theme="default">
<div class="landing-wrapper"> <div class="landing-wrapper">
<div class="hero-section"> <div class="hero-section">
<div class="socials fade-in-up shadow-glow glass-bg glass-container"> <div class="socials fade-in-up shadow-glow glass-bg glass-container">
{socials.map(({ name, url, icon }) => ( {
<a href={url} target="_blank" rel="noreferrer" class="social-link"> socials.map(({ name, url, icon }) => (
<Icon name={icon} desc={name} /> <a href={url} target="_blank" rel="noreferrer" class="social-link">
</a> <Icon name={icon} desc={name} />
))} </a>
))
}
</div> </div>
<h1 class="gradient-text reveal-text">Willkommen auf meiner Seite.</h1> <h1 class="gradient-text reveal-text">Willkommen auf meiner Seite.</h1>
<p class="subtitle fade-in-up"> <p class="subtitle fade-in-up">Hier geht es unter anderem um:</p>
Hier geht es unter anderem um:
</p>
<WelcomeTypewriter class="fade-in-up" /> <WelcomeTypewriter class="fade-in-up" />
</div> </div>
@@ -29,7 +30,7 @@ import socials from "../data/socials.json";
<p>Meine neuesten Projekte und Experimente.</p> <p>Meine neuesten Projekte und Experimente.</p>
</div> </div>
</a> </a>
<a href="/blog" class="bento-card blog shadow-glow"> <a href="/blog" class="bento-card blog shadow-glow">
<div class="card-content glass-bg"> <div class="card-content glass-bg">
<div class="icon"><Icon name="lucide:pen-tool" /></div> <div class="icon"><Icon name="lucide:pen-tool" /></div>
@@ -37,7 +38,7 @@ import socials from "../data/socials.json";
<p>Einige planlose Gedanken über Technologie und Design.</p> <p>Einige planlose Gedanken über Technologie und Design.</p>
</div> </div>
</a> </a>
<a href="/book" class="bento-card book shadow-glow"> <a href="/book" class="bento-card book shadow-glow">
<div class="card-content glass-bg"> <div class="card-content glass-bg">
<div class="icon"><Icon name="lucide:book-open" /></div> <div class="icon"><Icon name="lucide:book-open" /></div>
@@ -82,7 +83,7 @@ import socials from "../data/socials.json";
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
gap: .5rem; gap: 0.5rem;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
@@ -116,10 +117,19 @@ import socials from "../data/socials.json";
max-width: 1000px; max-width: 1000px;
} }
@media (max-width: 800px) { @media (max-width: 700px) {
.landing-wrapper {
padding: 0;
margin-top: -1rem;
}
.bento-grid { .bento-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.hero-section {
margin-bottom: 2rem;
}
} }
.bento-card { .bento-card {
@@ -177,27 +187,63 @@ import socials from "../data/socials.json";
font-size: 1rem; font-size: 1rem;
} }
.portfolio { background: linear-gradient(135deg, rgba(var(--accent-base--portfolio), 0.5) 0%, rgba(var(--accent-base--portfolio), 0.15) 100%); } .portfolio {
.blog { background: linear-gradient(135deg, rgba(var(--accent-base--blog), 0.8) 0%, rgba(var(--accent-base--blog), 0.15) 100%); } background: linear-gradient(
.book { background: linear-gradient(135deg, rgba(var(--accent-base--book), 0.8) 0%, rgba(var(--accent-base--book), 0.15) 100%); } 135deg,
rgba(var(--accent-base--portfolio), 0.5) 0%,
rgba(var(--accent-base--portfolio), 0.15) 100%
);
}
.blog {
background: linear-gradient(
135deg,
rgba(var(--accent-base--blog), 0.8) 0%,
rgba(var(--accent-base--blog), 0.15) 100%
);
}
.book {
background: linear-gradient(
135deg,
rgba(var(--accent-base--book), 0.8) 0%,
rgba(var(--accent-base--book), 0.15) 100%
);
}
.portfolio:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1); } .portfolio:hover {
.blog:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4); } box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1);
.book:hover { box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4); } }
.blog:hover {
box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4);
}
.book:hover {
box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4);
}
.portfolio .icon { color: rgb(var(--accent-base--portfolio)); } .portfolio .icon {
.blog .icon { color: rgb(var(--accent-base--blog)); } color: rgb(var(--accent-base--portfolio));
.book .icon { color: rgb(var(--accent-base--book)); } }
.blog .icon {
color: rgb(var(--accent-base--blog));
}
.book .icon {
color: rgb(var(--accent-base--book));
}
@keyframes fadeUp { @keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.reveal-text { .reveal-text {
animation: fadeUp 0.8s ease-out forwards; animation: fadeUp 0.8s ease-out forwards;
} }
.fade-in-up { .fade-in-up {
animation: fadeUp 1s ease-out forwards; animation: fadeUp 1s ease-out forwards;
opacity: 0; opacity: 0;
@@ -209,12 +255,20 @@ import socials from "../data/socials.json";
animation: fadeUp 0.8s ease-out forwards; animation: fadeUp 0.8s ease-out forwards;
opacity: 0; opacity: 0;
} }
.portfolio { animation-delay: 0.4s; } .portfolio {
.blog { animation-delay: 0.6s; } animation-delay: 0.4s;
.book { animation-delay: 0.8s; } }
.blog {
animation-delay: 0.6s;
}
.book {
animation-delay: 0.8s;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.bento-card, .fade-in-up, .reveal-text { .bento-card,
.fade-in-up,
.reveal-text {
animation: none; animation: none;
opacity: 1; opacity: 1;
transform: none; transform: none;

67
src/styles/global.css
View File

@@ -1,4 +1,6 @@
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease; transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
} }
@@ -16,66 +18,79 @@
inherits: true; inherits: true;
initial-value: 214, 134, 249; initial-value: 214, 134, 249;
} }
@property --bg-image { @property --bg-image {
syntax: '<image>'; syntax: '<image>';
inherits: true; inherits: true;
initial-value: url('../assets/backgrounds/bubble.svg'); initial-value: url('../assets/backgrounds/bubble.svg');
} }
@property --bg-image-static { @property --bg-image-static {
syntax: '<image>'; syntax: '<image>';
inherits: true; inherits: true;
initial-value: url('../assets/backgrounds/bubble-static.svg'); initial-value: url('../assets/backgrounds/bubble-static.svg');
} }
@property --glass-bg { @property --glass-bg {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: rgba(20, 25, 35, 0.4); initial-value: rgba(20, 25, 35, 0.4);
} }
@property --glass-border { @property --glass-border {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: rgba(255, 255, 255, 0.08); initial-value: rgba(255, 255, 255, 0.08);
} }
@property --glass-blur { @property --glass-blur {
syntax: '<length>'; syntax: '<length>';
inherits: true; inherits: true;
initial-value: 16px; initial-value: 16px;
} }
@property --glass-shadow { @property --glass-shadow {
syntax: '<shadow>'; syntax: '<shadow>';
inherits: true; inherits: true;
initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37); initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
} }
@property --text-main { @property --text-main {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: #e0e7f0; initial-value: #e0e7f0;
} }
@property --text-muted { @property --text-muted {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: #92a1b6; initial-value: #92a1b6;
} }
@property --bg-color { @property --bg-color {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: #0d0117; initial-value: #0d0117;
} }
@property --accent-base--default { @property --accent-base--default {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 214, 134, 249; initial-value: 214, 134, 249;
} }
@property --accent-base--portfolio { @property --accent-base--portfolio {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 255, 181, 102; initial-value: 255, 181, 102;
} }
@property --accent-base--blog { @property --accent-base--blog {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 111, 221, 246; initial-value: 111, 221, 246;
} }
@property --accent-base--book { @property --accent-base--book {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
@@ -87,7 +102,7 @@
--bg-color: #0d0117; --bg-color: #0d0117;
--text-main: #e0e7f0; --text-main: #e0e7f0;
--text-muted: #92a1b6; --text-muted: #92a1b6;
--glass-bg: rgba(20, 25, 35, 0.4); --glass-bg: rgba(20, 25, 35, 0.4);
--glass-border: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.08);
--glass-blur: 16px; --glass-blur: 16px;
@@ -123,10 +138,24 @@ body[data-theme="book"] {
--bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg'); --bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
} }
body:has(nav a[href="/"]:hover) { --accent-base: var(--accent-base--default);} body:has(nav a[href="/"]:hover) {
body:has(nav a[href="/portfolio"]:hover), body:has(.portfolio:hover) { --accent-base: var(--accent-base--portfolio); } --accent-base: var(--accent-base--default);
body:has(nav a[href="/blog"]:hover), body:has(.blog:hover) { --accent-base: var(--accent-base--blog); } }
body:has(nav a[href="/book"]:hover), body:has(.book:hover) { --accent-base: var(--accent-base--book); }
body:has(nav a[href="/portfolio"]:hover),
body:has(.portfolio:hover) {
--accent-base: var(--accent-base--portfolio);
}
body:has(nav a[href="/blog"]:hover),
body:has(.blog:hover) {
--accent-base: var(--accent-base--blog);
}
body:has(nav a[href="/book"]:hover),
body:has(.book:hover) {
--accent-base: var(--accent-base--book);
}
html { html {
background-color: var(--bg-color); background-color: var(--bg-color);
@@ -153,7 +182,12 @@ body {
} }
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: rgb(var(--accent-base)); color: rgb(var(--accent-base));
font-weight: 600; font-weight: 600;
margin-top: 2rem; margin-top: 2rem;
@@ -215,13 +249,24 @@ a:hover {
} }
/* Mobile Responsiveness */ /* Mobile Responsiveness */
@media (max-width: 600px) { @media (max-width: 500px) {
.container { .container {
padding: 1rem; padding: 1rem;
} }
.glass-container { .glass-container {
padding: 1.25rem; padding: 1.25rem;
} }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; } h1 {
} font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1.1rem;
}
}