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

1
src/layouts/BaseLayout.astro
View File

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

67
src/styles/global.css
View File

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