jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add initial Astro project structure and components

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-09 13:38:05 +01:00
parent 0ab11c240c
commit 6cc0e06918
41 changed files with 11299 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/layout/Footer.astro Normal file
View File

@ -0,0 +1,70 @@
---
import FadeIn from "../ui/FadeIn.astro";
import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
---
<footer
role="contentinfo"
class="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border"
>
<div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
<div class="grid gap-16 sm:gap-24">
<FadeIn>
<div class="text-center space-y-4 sm:space-y-5">
<h2
class="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary"
>
Let&apos;s Connect
</h2>
<p
class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto"
>
Always interested in new opportunities and collaborations.
</p>
</div>
</FadeIn>
<FadeIn delay={0.1}>
<div class="flex flex-col items-center gap-8 sm:gap-12 font-['Instrument_Sans']">
<a
href="mailto:jleibl@proton.me"
class="group flex items-center gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
>
<FaEnvelope className="w-6 h-6 sm:w-8 sm:h-8" />
jleibl@proton.me
</a>
<div class="flex gap-6 sm:gap-10">
<a
href="https://github.com/AtomicWasTaken"
target="_blank"
rel="noopener noreferrer"
class="group theme-text-70 hover:theme-primary transition-colors"
aria-label="GitHub Profile"
>
<FaGithub className="w-8 h-8 sm:w-10 sm:h-10" />
</a>
<a
href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank"
rel="noopener noreferrer"
class="group theme-text-70 hover:theme-primary transition-colors"
aria-label="LinkedIn Profile"
>
<FaLinkedin className="w-8 h-8 sm:w-10 sm:h-10" />
</a>
</div>
</div>
</FadeIn>
<FadeIn delay={0.2}>
<div class="pt-6 sm:pt-12 text-center">
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
</p>
</div>
</FadeIn>
</div>
</div>
</footer>

39
src/components/layout/Footer.tsx
View File

@ -1,39 +0,0 @@
import { FadeIn } from '../ui/FadeIn';
export const Footer = () => {
return (
<footer role="contentinfo" className="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border">
<div className="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
<div className="grid gap-16 sm:gap-24">
<FadeIn>
<div className="text-center space-y-4 sm:space-y-5">
<h2 className="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary">Let&apos;s Connect</h2>
<p className="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto">
Always interested in new opportunities and collaborations.
</p>
</div>
</FadeIn>
<FadeIn delay={0.1}>
<div className="flex flex-col items-center gap-8 sm:gap-12">
<a
href="mailto:jleibl@proton.me"
className="group flex items-center gap-2 sm:gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
>
jleibl@proton.me
</a>
</div>
</FadeIn>
<FadeIn delay={0.2}>
<div className="pt-6 sm:pt-12 text-center">
<p className="theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
</p>
</div>
</FadeIn>
</div>
</div>
</footer>
);
};

80
src/components/layout/Header.astro Normal file
View File

@ -0,0 +1,80 @@
---
import MobileMenu from './MobileMenu.astro';
---
<header
class="fixed top-0 left-0 right-0 z-40 nav-glass backdrop-blur-lg theme-transition"
role="banner"
>
<div class="max-w-(--breakpoint-xl) mx-auto">
<nav class="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
<div class="flex items-center">
<a href="#hero" class="flex items-center gap-2 group" aria-label="Home">
<div class="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
<span class="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
<div class="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<span class="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
Jan-Marlon Leibl
</span>
</a>
</div>
<div class="hidden md:flex items-center">
<div class="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
{["About", "Work"].map((item) => (
<a
href={`#${item.toLowerCase()}`}
class="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
aria-label={`View my ${item.toLowerCase()}`}
>
{item}
</a>
))}
</div>
<div class="ml-6">
<a
href="mailto:jleibl@proton.me"
class="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
aria-label="Contact me via email"
>
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span class="text-sm">Contact</span>
<div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</a>
</div>
</div>
<div class="flex md:hidden">
<MobileMenu />
</div>
</nav>
</div>
<div class="h-px w-full theme-border opacity-50"></div>
</header>
<script>
document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('header');
if (header) {
header.style.transform = 'translateY(0)';
header.style.opacity = '1';
}
});
</script>
<style>
header {
transform: translateY(-100px);
opacity: 0;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
</style>

89
src/components/layout/Header.tsx
View File

@ -1,89 +0,0 @@
import { motion } from 'framer-motion';
import Link from 'next/link';
import dynamic from 'next/dynamic';
const MobileMenu = dynamic(() => import('./MobileMenu').then(mod => ({ default: mod.MobileMenu })), {
ssr: false,
loading: () => (
<div className="p-2 theme-accent rounded-lg theme-border">
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
)
});
export const Header = () => {
return (
<motion.header
className="fixed top-0 left-0 right-0 z-40 nav-glass backdrop-blur-lg theme-transition"
role="banner"
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{
type: "spring",
damping: 25,
stiffness: 100,
mass: 1,
delay: 0.2
}}
>
<div className="max-w-(--breakpoint-xl) mx-auto">
<nav className="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
<div className="flex items-center">
<Link href="/" className="flex items-center gap-2 group" aria-label="Home">
<div className="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
<span className="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
<div className="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"/>
</div>
<span className="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
Jan-Marlon Leibl
</span>
</Link>
</div>
<div className="hidden md:flex items-center">
<div className="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
{["Work", "About"].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
aria-label={`View my ${item.toLowerCase()}`}
>
{item}
</a>
))}
</div>
<div className="ml-6">
<motion.a
href="mailto:jleibl@proton.me"
className="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
aria-label="Contact me via email"
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
>
<svg className="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span className="text-sm">Contact</span>
<div className="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
<svg className="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</motion.a>
</div>
</div>
<div className="flex md:hidden">
<MobileMenu />
</div>
</nav>
</div>
<div className="h-px w-full theme-border opacity-50"></div>
</motion.header>
);
};

108
src/components/layout/MobileMenu.astro Normal file
View File

@ -0,0 +1,108 @@
---
import GermanyFlag from '../ui/GermanyFlag.astro';
---
<div class="mobile-menu">
<button
id="mobile-menu-toggle"
class="p-2 theme-accent rounded-lg theme-border"
aria-label="Open menu"
aria-expanded="false"
>
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<div id="mobile-menu-overlay" class="fixed inset-0 bg-black opacity-0 z-90 pointer-events-none transition-opacity duration-300"></div>
<div id="mobile-menu-panel" class="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh] translate-x-full transition-transform duration-300">
<div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
<button
id="mobile-menu-close"
class="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
aria-label="Close menu"
>
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
<nav class="mb-8">
<div class="flex flex-col space-y-2">
{[
{ href: "#about", label: "About" },
{ href: "#work", label: "Work" }
].map((item) => (
<a
href={item.href}
class="menu-link p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
>
<span>{item.label}</span>
<svg class="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
))}
</div>
</nav>
<div class="mt-auto">
<div class="pt-4 border-t theme-border">
<a
href="mailto:jleibl@proton.me"
class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span>Contact Me</span>
</a>
</div>
<div class="pt-6 flex justify-center pb-6">
<GermanyFlag />
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('mobile-menu-toggle');
const close = document.getElementById('mobile-menu-close');
const overlay = document.getElementById('mobile-menu-overlay');
const panel = document.getElementById('mobile-menu-panel');
const menuLinks = document.querySelectorAll('.menu-link');
function openMenu() {
document.body.style.overflow = 'hidden';
toggle?.setAttribute('aria-expanded', 'true');
overlay?.classList.remove('opacity-0', 'pointer-events-none');
overlay?.classList.add('opacity-95');
panel?.classList.remove('translate-x-full');
}
function closeMenu() {
document.body.style.overflow = '';
toggle?.setAttribute('aria-expanded', 'false');
overlay?.classList.add('opacity-0', 'pointer-events-none');
overlay?.classList.remove('opacity-95');
panel?.classList.add('translate-x-full');
}
toggle?.addEventListener('click', openMenu);
close?.addEventListener('click', closeMenu);
overlay?.addEventListener('click', closeMenu);
menuLinks.forEach(link => link.addEventListener('click', closeMenu));
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && toggle?.getAttribute('aria-expanded') === 'true') {
closeMenu();
}
});
});
</script>

147
src/components/layout/MobileMenu.tsx
View File

@ -1,147 +0,0 @@
import { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { GermanyFlag } from '../ui/GermanyFlag';
export const MobileMenu = () => {
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => {
document.body.style.overflow = '';
};
}, [isOpen]);
useEffect(() => {
const handleEscKey = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
setIsOpen(false);
}
};
document.addEventListener('keydown', handleEscKey);
return () => document.removeEventListener('keydown', handleEscKey);
}, [isOpen]);
return (
<>
<motion.button
onClick={() => setIsOpen(true)}
className="p-2 theme-accent rounded-lg theme-border"
aria-label="Open menu"
aria-expanded={isOpen}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
>
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</motion.button>
<AnimatePresence mode="wait">
{isOpen && (
<>
<motion.div
className="fixed inset-0 bg-black z-90"
initial={{ opacity: 0 }}
animate={{ opacity: 0.95 }}
exit={{ opacity: 0 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
onClick={() => setIsOpen(false)}
aria-hidden="true"
/>
<motion.div
className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh]"
ref={menuRef}
initial={{ x: "100%" }}
animate={{ x: 0 }}
exit={{ x: "100%" }}
transition={{ type: "spring", damping: 30, stiffness: 300, mass: 1 }}
>
<div className="nav-glass w-full h-full flex flex-col shadow-2xl"
style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)' }}>
<motion.button
onClick={() => setIsOpen(false)}
className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
aria-label="Close menu"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ type: "spring", stiffness: 300, damping: 20, delay: 0.2 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M6 18L18 6M6 6l12 12"></path>
</svg>
</motion.button>
<div className="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
<nav className="mb-8">
<motion.div
className="flex flex-col space-y-2"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ type: "spring", stiffness: 100, damping: 20, delay: 0.1 }}
>
{[
{ href: "#work", label: "Work" },
{ href: "#about", label: "About" }
].map((item, index) => (
<motion.a
key={item.href}
href={item.href}
onClick={() => setIsOpen(false)}
className="p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 20, delay: 0.2 + index * 0.1 }}
>
<span>{item.label}</span>
<svg className="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</motion.a>
))}
</motion.div>
</nav>
<motion.div
className="mt-auto"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", stiffness: 100, damping: 20, delay: 0.4 }}
>
<div className="pt-4 border-t theme-border">
<motion.a
href="mailto:jleibl@proton.me"
onClick={() => setIsOpen(false)}
className="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
whileHover={{ scale: 1.02 }}
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span>Contact Me</span>
</motion.a>
</div>
<div className="pt-6 flex justify-center pb-6">
<GermanyFlag />
</div>
</motion.div>
</div>
</div>
</motion.div>
</>
)}
</AnimatePresence>
</>
);
};

146
src/components/sections/About.astro Normal file
View File

@ -0,0 +1,146 @@
---
import FadeIn from '../ui/FadeIn.astro';
import { Icon } from 'astro-icon/components';
import { SiPhp, SiJavascript, SiMysql, SiReact } from 'react-icons/si';
import { FaGithub, FaLinkedin, FaGlobe, FaPalette } from 'react-icons/fa';
import { BsLightningChargeFill } from 'react-icons/bs';
import { IoServerOutline } from 'react-icons/io5';
import { Image } from 'astro:assets';
const technologies = [
{ name: 'PHP', icon: SiPhp },
{ name: 'JavaScript', icon: SiJavascript },
{ name: 'MySQL', icon: SiMysql },
{ name: 'React', icon: SiReact }
];
const interests = [
{ name: 'Web Development', icon: FaGlobe },
{ name: 'System Architecture', icon: IoServerOutline },
{ name: 'UI/UX Design', icon: FaPalette },
{ name: 'Performance Optimization', icon: BsLightningChargeFill }
];
---
<section id="about" class="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
<div class="max-w-(--breakpoint-xl) mx-auto">
<FadeIn>
<div class="flex items-baseline gap-4 mb-12 sm:mb-24">
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
About
</h2>
<div class="h-px grow bg-white/10 relative top-[-4px]"></div>
</div>
</FadeIn>
<div class="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
<div class="space-y-6 sm:space-y-8">
<FadeIn>
<div class="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
<Image
src="/profile-image.jpg"
alt="Jan-Marlon Leibl - Fullstack Software Developer"
width="400"
height="400"
class="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
/>
</div>
</FadeIn>
<FadeIn delay={0.1}>
<div class="space-y-2 text-center md:text-left">
<h3 class="font-['DM_Sans'] text-xl sm:text-2xl font-medium theme-primary">
Jan-Marlon Leibl
</h3>
<p class="font-['Instrument_Sans'] theme-text-70 text-base sm:text-lg">
Fullstack Developer
</p>
</div>
</FadeIn>
</div>
<FadeIn delay={0.2}>
<div class="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
<div class="space-y-6 sm:space-y-8">
<p class="text-xl sm:text-2xl theme-text-90 leading-relaxed">
Hello! I'm Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
</p>
<p class="text-base sm:text-xl theme-text-70 leading-relaxed">
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
<div class="space-y-6 sm:space-y-8">
<div class="flex items-baseline gap-4">
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Technologies
</h3>
<div class="h-px grow theme-border"></div>
</div>
<ul class="space-y-4 sm:space-y-5">
{technologies.map((tech) => (
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
<tech.icon className="w-5 h-5" />
</span>
{tech.name}
</li>
))}
</ul>
</div>
<div class="space-y-6 sm:space-y-8">
<div class="flex items-baseline gap-4">
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Interests
</h3>
<div class="h-px grow theme-border"></div>
</div>
<ul class="space-y-4 sm:space-y-5">
{interests.map((interest) => (
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
<interest.icon className="w-5 h-5" />
</span>
{interest.name}
</li>
))}
</ul>
</div>
</div>
<div class="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
<a
href="https://github.com/AtomicWasTaken"
target="_blank"
rel="noopener noreferrer"
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
>
<FaGithub className="w-5 h-5" />
View GitHub
</a>
<a
href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank"
rel="noopener noreferrer"
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
>
<FaLinkedin className="w-5 h-5" />
Connect on LinkedIn
</a>
</div>
</div>
</FadeIn>
</div>
</div>
</section>
<style>
.animate-button {
transition: transform 0.2s ease-out;
}
.animate-button:hover {
transform: scale(1.02);
}
</style>

149
src/components/sections/About.tsx
View File

@ -1,149 +0,0 @@
import { motion } from 'framer-motion';
import Image from 'next/image';
import { FadeIn } from '../ui/FadeIn';
import { SiPhp, SiJavascript, SiMysql, SiReact } from 'react-icons/si';
import { MdWeb, MdArchitecture, MdDesignServices, MdSpeed } from 'react-icons/md';
interface Tech {
name: string;
icon: React.ReactNode;
}
interface Interest {
name: string;
icon: React.ReactNode;
}
const technologies: Tech[] = [
{ name: 'PHP', icon: <SiPhp /> },
{ name: 'JavaScript', icon: <SiJavascript /> },
{ name: 'MySQL', icon: <SiMysql /> },
{ name: 'React', icon: <SiReact /> }
];
const interests: Interest[] = [
{ name: 'Web Development', icon: <MdWeb /> },
{ name: 'System Architecture', icon: <MdArchitecture /> },
{ name: 'UI/UX Design', icon: <MdDesignServices /> },
{ name: 'Performance Optimization', icon: <MdSpeed /> }
];
export const About = () => {
return (
<section id="about" className="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
<div className="max-w-(--breakpoint-xl) mx-auto">
<FadeIn>
<div className="flex items-baseline gap-4 mb-12 sm:mb-24">
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
About
</h2>
<div className="h-px grow bg-white/10 relative top-[-4px]"></div>
</div>
</FadeIn>
<div className="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
<div className="space-y-6 sm:space-y-8">
<FadeIn>
<div className="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
<Image
src="/profile-image.jpg"
alt="Jan-Marlon Leibl - Fullstack Software Developer"
width={400}
height={400}
priority
className="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
/>
</div>
</FadeIn>
<FadeIn delay={0.1}>
<div className="space-y-2 text-center md:text-left">
<h3 className="font-['DM_Sans'] text-xl sm:text-2xl font-medium theme-primary">
Jan-Marlon Leibl
</h3>
<p className="font-['Instrument_Sans'] theme-text-70 text-base sm:text-lg">
Fullstack Developer
</p>
</div>
</FadeIn>
</div>
<FadeIn delay={0.2}>
<div className="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
<div className="space-y-6 sm:space-y-8">
<p className="text-xl sm:text-2xl theme-text-90 leading-relaxed">
Hello! I&apos;m Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
</p>
<p className="text-base sm:text-xl theme-text-70 leading-relaxed">
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what&apos;s possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
<div className="space-y-6 sm:space-y-8">
<div className="flex items-baseline gap-4">
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Technologies
</h3>
<div className="h-px grow theme-border"></div>
</div>
<ul className="space-y-4 sm:space-y-5">
{technologies.map((tech) => (
<li
key={tech.name}
className="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"
>
<span className="text-lg theme-text-40 group-hover:theme-text-90 transition-colors">{tech.icon}</span>
{tech.name}
</li>
))}
</ul>
</div>
<div className="space-y-6 sm:space-y-8">
<div className="flex items-baseline gap-4">
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Interests
</h3>
<div className="h-px grow theme-border"></div>
</div>
<ul className="space-y-4 sm:space-y-5">
{interests.map((interest) => (
<li
key={interest.name}
className="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"
>
<span className="text-lg theme-text-40 group-hover:theme-text-90 transition-colors">{interest.icon}</span>
{interest.name}
</li>
))}
</ul>
</div>
</div>
<div className="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
<motion.a
href="https://github.com/AtomicWasTaken"
target="_blank"
rel="noopener noreferrer"
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90"
whileHover={{ scale: 1.02 }}
>
View GitHub
</motion.a>
<motion.a
href="https://www.linkedin.com/in/janmarlonleibl/"
target="_blank"
rel="noopener noreferrer"
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90"
whileHover={{ scale: 1.02 }}
>
Connect on LinkedIn
</motion.a>
</div>
</div>
</FadeIn>
</div>
</div>
</section>
);
};

115
src/components/sections/Hero.astro Normal file
View File

@ -0,0 +1,115 @@
---
import FadeIn from '../ui/FadeIn.astro';
import GermanyFlag from '../ui/GermanyFlag.astro';
---
<section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 sm:pt-8" id="hero">
<div class="absolute inset-0 theme-bg-gradient"></div>
<div class="max-w-7xl w-full relative pt-8 sm:pt-24">
<FadeIn className="space-y-8 sm:space-y-16">
<div class="space-y-6 sm:space-y-8">
<div class="space-y-6 sm:space-y-8">
<div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
</div>
<div class="space-y-2 sm:space-y-3">
<h2 class="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
Jan-Marlon Leibl
</h2>
<div>
<h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
Software Developer
<br />
<span class="theme-secondary">based in <GermanyFlag /></span>
</h1>
</div>
</div>
</div>
<p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
</p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
<a
href="#work"
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
>
View My Work
<svg
class="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a
href="mailto:jleibl@proton.me"
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
>
Get in Touch
<svg
class="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
<div class="border-t theme-border pt-5 pb-5">
<div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-8 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
<div class="text-center sm:border-r theme-border last:border-r-0">
<div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EMAIL</span>
</div>
<a
href="mailto:jleibl@proton.me"
class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg"
>
jleibl@proton.me
</a>
</div>
<div class="text-center sm:border-r theme-border last:border-r-0">
<div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">ROLE</span>
</div>
<span class="theme-text-90 text-base sm:text-lg">
Fullstack Developer
</span>
</div>
<div class="text-center">
<div class="mb-3 sm:mb-4">
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EXPERIENCE</span>
</div>
<span class="theme-text-90 text-base sm:text-lg">
5+ Years
</span>
</div>
</div>
</div>
</FadeIn>
</div>
</section>
<style>
.animate-button {
transition: transform 0.2s ease-out;
}
.animate-button:hover {
transform: scale(1.03);
}
.animate-button:active {
transform: scale(0.97);
}
</style>

107
src/components/sections/Hero.tsx
View File

@ -1,107 +0,0 @@
import { motion } from 'framer-motion';
import { FadeIn } from '../ui/FadeIn';
import { GermanyFlag } from '../ui/GermanyFlag';
export const Hero = () => {
return (
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-24 sm:pt-8">
<div className="absolute inset-0 theme-bg-gradient"></div>
<div className="max-w-(--breakpoint-xl) w-full relative pt-8 sm:pt-24">
<FadeIn className="space-y-8 sm:space-y-16">
<div className="space-y-6 sm:space-y-8">
<div className="space-y-6 sm:space-y-8">
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
</div>
<div className="space-y-2 sm:space-y-3">
<h2 className="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
Jan-Marlon Leibl
</h2>
<div>
<h1 className="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
Software Developer
<br />
<span className="theme-secondary">based in <GermanyFlag /></span>
</h1>
</div>
</div>
</div>
<p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
</p>
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
<motion.a
href="#work"
className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
>
View My Work
<svg
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</motion.a>
<motion.a
href="mailto:jleibl@proton.me"
className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.97 }}
>
Get in Touch
<svg
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</motion.a>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 font-['Instrument_Sans'] text-sm sm:text-base tracking-wide border-t theme-border pt-6 sm:pt-8">
<div className="space-y-1.5 sm:space-y-2.5 group">
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Email</span>
<a
href="mailto:jleibl@proton.me"
className="theme-text-90 hover:theme-primary transition-colors flex items-center gap-2 sm:gap-2.5 group-hover:gap-3 duration-300"
>
jleibl@proton.me
<svg
className="w-4 h-4 sm:w-5 sm:h-5 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
<div className="space-y-1.5 sm:space-y-2.5">
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Role</span>
<span className="theme-text-90">
Fullstack Developer
</span>
</div>
<div className="space-y-1.5 sm:space-y-2.5">
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Experience</span>
<span className="theme-text-90">
5+ Years
</span>
</div>
</div>
</FadeIn>
</div>
</section>
);
};

178
src/components/sections/Work.astro Normal file
View File

@ -0,0 +1,178 @@
---
import { SiNextdotjs, SiTailwindcss, SiTypescript, SiPhp, SiJavascript, SiMysql, SiDiscord } from 'react-icons/si';
import { BsLightningChargeFill } from 'react-icons/bs';
import { FaCode } from 'react-icons/fa';
import { HiOutlineCollection } from 'react-icons/hi';
import { MdLaunch } from 'react-icons/md';
import FadeIn from '../ui/FadeIn.astro';
interface Project {
title: string;
year: string;
description: string;
icon: any;
tags: Array<{
name: string;
icon: any;
}>;
}
const getTagIcon = (tag: string) => {
switch (tag) {
case 'Next.js':
return SiNextdotjs;
case 'Tailwind CSS':
return SiTailwindcss;
case 'TypeScript':
return SiTypescript;
case 'PHP':
return SiPhp;
case 'JavaScript':
return SiJavascript;
case 'MySQL':
return SiMysql;
case 'Performance':
return BsLightningChargeFill;
case 'Discord API':
return SiDiscord;
default:
return null;
}
};
const getProjectIcon = (title: string) => {
if (title.includes('ventry')) {
return MdLaunch;
} else if (title.includes('ShareUpload')) {
return HiOutlineCollection;
} else if (title.includes('RestoreM')) {
return SiDiscord;
} else {
return FaCode;
}
};
const projects: Project[] = [
{
title: 'ventry.host v2',
year: '2025',
description: 'Free file hosting revamped with a modern design and improved user experience.',
icon: getProjectIcon('ventry.host v2'),
tags: [
{ name: 'Next.js', icon: getTagIcon('Next.js') },
{ name: 'Tailwind CSS', icon: getTagIcon('Tailwind CSS') },
{ name: 'TypeScript', icon: getTagIcon('TypeScript') }
]
},
{
title: 'ventry.host',
year: '2023',
description: 'A free file hosting solution with thousands of daily visitors.',
icon: getProjectIcon('ventry.host'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'JavaScript', icon: getTagIcon('JavaScript') },
{ name: 'MySQL', icon: getTagIcon('MySQL') }
]
},
{
title: 'ShareUpload',
year: '2022',
description: 'High-performance file sharing platform with unlimited storage.',
icon: getProjectIcon('ShareUpload'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'MySQL', icon: getTagIcon('MySQL') },
{ name: 'Performance', icon: getTagIcon('Performance') }
]
},
{
title: 'RestoreM',
year: '2023',
description: 'Discord server backup and restoration service.',
icon: getProjectIcon('RestoreM'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'MySQL', icon: getTagIcon('MySQL') },
{ name: 'Discord API', icon: getTagIcon('Discord API') }
]
}
];
const sortedProjects = [...projects].sort((a, b) => {
return parseInt(b.year) - parseInt(a.year);
});
---
<section id="work" class="py-20 sm:py-40 px-4 sm:px-8 relative">
<div class="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
<div class="max-w-(--breakpoint-xl) mx-auto relative">
<FadeIn>
<div class="flex flex-col gap-3 mb-12 sm:mb-24">
<span class="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
Portfolio
</span>
<div class="flex items-baseline gap-4">
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
Selected Work
</h2>
<div class="h-px grow theme-border"></div>
</div>
</div>
</FadeIn>
<div class="grid gap-24 sm:gap-40">
{sortedProjects.map((project, index) => (
<FadeIn delay={index * 0.1}>
<div class="group relative">
<div class="absolute top-0 left-0 right-0 flex items-center gap-4">
<div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
{project.year}
</div>
<div class="h-px grow theme-border"></div>
</div>
<div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16">
<div class="space-y-4 sm:space-y-8">
<h3 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
{project.title}
</h3>
<p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl">
{project.description}
</p>
</div>
<div class="space-y-6 sm:space-y-12">
<div class="space-y-4 sm:space-y-6">
<h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Technologies
</h4>
<div class="flex flex-wrap items-center gap-3 sm:gap-4">
{project.tags.map((tag, tagIndex) => {
const Icon = tag.icon;
return (
<span
class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs"
>
<span class="mr-2 flex items-center">
<Icon className="text-lg" />
</span>
{tag.name}
{tagIndex !== project.tags.length - 1 && (
<span class="ml-2 opacity-0">•</span>
)}
</span>
);
})}
</div>
</div>
</div>
</div>
<div class="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div>
</div>
</FadeIn>
))}
</div>
</div>
</section>

178
src/components/sections/Work.tsx
View File

@ -1,178 +0,0 @@
import { FadeIn } from '../ui/FadeIn';
import { SiNextdotjs, SiTailwindcss, SiTypescript, SiPhp, SiJavascript, SiMysql, SiDiscord } from 'react-icons/si';
import { BsLightningChargeFill } from 'react-icons/bs';
import { FaCode } from 'react-icons/fa';
import { HiOutlineCollection } from 'react-icons/hi';
import { MdLaunch } from 'react-icons/md';
import React from 'react';
interface Project {
title: string;
year: string;
description: string;
icon: React.ReactNode;
tags: Array<{
name: string;
icon: React.ReactNode;
}>;
}
const getTagIcon = (tag: string) => {
switch (tag) {
case 'Next.js':
return <SiNextdotjs className="text-lg" />;
case 'Tailwind CSS':
return <SiTailwindcss className="text-lg" />;
case 'TypeScript':
return <SiTypescript className="text-lg" />;
case 'PHP':
return <SiPhp className="text-lg" />;
case 'JavaScript':
return <SiJavascript className="text-lg" />;
case 'MySQL':
return <SiMysql className="text-lg" />;
case 'Performance':
return <BsLightningChargeFill className="text-lg" />;
case 'Discord API':
return <SiDiscord className="text-lg" />;
default:
return null;
}
};
const getProjectIcon = (title: string) => {
if (title.includes('ventry')) {
return <MdLaunch className="text-2xl" />;
} else if (title.includes('ShareUpload')) {
return <HiOutlineCollection className="text-2xl" />;
} else if (title.includes('RestoreM')) {
return <SiDiscord className="text-2xl" />;
} else {
return <FaCode className="text-2xl" />;
}
};
const projects: Project[] = [
{
title: 'ventry.host v2',
year: '2025',
description: 'Free file hosting revamped with a modern design and improved user experience.',
icon: getProjectIcon('ventry.host v2'),
tags: [
{ name: 'Next.js', icon: getTagIcon('Next.js') },
{ name: 'Tailwind CSS', icon: getTagIcon('Tailwind CSS') },
{ name: 'TypeScript', icon: getTagIcon('TypeScript') }
]
},
{
title: 'ventry.host',
year: '2023',
description: 'A free file hosting solution with thousands of daily visitors.',
icon: getProjectIcon('ventry.host'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'JavaScript', icon: getTagIcon('JavaScript') },
{ name: 'MySQL', icon: getTagIcon('MySQL') }
]
},
{
title: 'ShareUpload',
year: '2022',
description: 'High-performance file sharing platform with unlimited storage.',
icon: getProjectIcon('ShareUpload'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'MySQL', icon: getTagIcon('MySQL') },
{ name: 'Performance', icon: getTagIcon('Performance') }
]
},
{
title: 'RestoreM',
year: '2023',
description: 'Discord server backup and restoration service.',
icon: getProjectIcon('RestoreM'),
tags: [
{ name: 'PHP', icon: getTagIcon('PHP') },
{ name: 'MySQL', icon: getTagIcon('MySQL') },
{ name: 'Discord API', icon: getTagIcon('Discord API') }
]
}
];
// Sort projects by year (newest first)
const sortedProjects = [...projects].sort((a, b) => {
return parseInt(b.year) - parseInt(a.year);
});
export const Work = () => {
return (
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative">
<div className="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
<div className="max-w-(--breakpoint-xl) mx-auto relative">
<FadeIn>
<div className="flex flex-col gap-3 mb-12 sm:mb-24">
<span className="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
Portfolio
</span>
<div className="flex items-baseline gap-4">
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
Selected Work
</h2>
<div className="h-px grow theme-border"></div>
</div>
</div>
</FadeIn>
<div className="grid gap-24 sm:gap-40">
{sortedProjects.map((project, index) => (
<FadeIn key={index} delay={index * 0.1}>
<div className="group relative">
<div className="absolute top-0 left-0 right-0 flex items-center gap-4">
<div className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
{project.year}
</div>
<div className="h-px grow theme-border"></div>
</div>
<div className="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16">
<div className="space-y-4 sm:space-y-8">
<h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
{project.title}
</h3>
<p className="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl">
{project.description}
</p>
</div>
<div className="space-y-6 sm:space-y-12">
<div className="space-y-4 sm:space-y-6">
<h4 className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
Technologies
</h4>
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
{project.tags.map((tag, tagIndex) => (
<span
key={tagIndex}
className="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs"
>
<span className="mr-2 flex items-center">{tag.icon}</span>
{tag.name}
{tagIndex !== project.tags.length - 1 && (
<span className="ml-2 opacity-0">•</span>
)}
</span>
))}
</div>
</div>
</div>
</div>
<div className="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div>
</div>
</FadeIn>
))}
</div>
</div>
</section>
);
};

66
src/components/ui/FadeIn.astro Normal file
View File

@ -0,0 +1,66 @@
---
interface Props {
className?: string;
delay?: number;
direction?: 'up' | 'down' | 'left' | 'right';
distance?: number;
}
const {
className = "",
delay = 0,
direction = 'up',
distance = 20
} = Astro.props;
const directionMap = {
up: { x: 0, y: distance },
down: { x: 0, y: -distance },
left: { x: distance, y: 0 },
right: { x: -distance, y: 0 }
};
const { x, y } = directionMap[direction];
const uniqueId = `fade-in-${Math.random().toString(36).substring(2, 9)}`;
---
<div id={uniqueId} class={`fade-in ${className}`} data-delay={delay} data-direction={direction}>
<slot />
</div>
<style>
.fade-in {
opacity: 0;
transform: translate(var(--start-x, 0px), var(--start-y, 20px));
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translate(0px, 0px);
}
</style>
<script define:vars={{ uniqueId, x, y, delay }}>
document.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById(uniqueId);
if (element) {
element.style.setProperty('--start-x', `${x}px`);
element.style.setProperty('--start-y', `${y}px`);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => {
element.classList.add('visible');
}, delay * 1000);
observer.disconnect();
}
});
}, { threshold: 0.1, rootMargin: "0px 0px -10% 0px" });
observer.observe(element);
}
});
</script>

51
src/components/ui/FadeIn.tsx
View File

@ -1,51 +0,0 @@
import { ReactNode } from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
interface FadeInProps {
children: ReactNode;
className?: string;
delay?: number;
direction?: 'up' | 'down' | 'left' | 'right';
distance?: number;
}
export const FadeIn = ({
children,
className = "",
delay = 0,
direction = 'up',
distance = 20
}: FadeInProps) => {
const [ref, inView] = useInView({
triggerOnce: true,
threshold: 0.1,
rootMargin: "0px 0px -10% 0px"
});
const directionOffset = {
up: { x: 0, y: distance },
down: { x: 0, y: -distance },
left: { x: distance, y: 0 },
right: { x: -distance, y: 0 }
};
const { x, y } = directionOffset[direction];
return (
<motion.div
ref={ref}
initial={{ opacity: 0, x, y }}
animate={inView ? { opacity: 1, x: 0, y: 0 } : { opacity: 0, x, y }}
transition={{
type: "spring",
damping: 20,
stiffness: 100,
delay
}}
className={className}
>
{children}
</motion.div>
);
};

58
src/components/ui/GermanyFlag.astro Normal file
View File

@ -0,0 +1,58 @@
<div
id="germany-flag"
role="group"
aria-label="Theme switcher with German flag colors"
style="display:inline-flex;width:3em;height:0.6em;margin-left:0.1em;vertical-align:middle;border-radius:1px;overflow:hidden;opacity:0.6;cursor:pointer;"
class="germany-flag-container hover:opacity-80 transition-opacity duration-200"
>
<button
id="theme-black"
aria-label="Switch to dark theme"
data-theme="black"
style="flex:1;background-color:rgba(0, 0, 0, 0.5);border-left:2px solid rgba(255, 255, 255, 0.1);border-top:2px solid rgba(255, 255, 255, 0.1);border-bottom:2px solid rgba(255, 255, 255, 0.1);"
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
></button>
<button
id="theme-red"
aria-label="Switch to red theme"
data-theme="red"
style="flex:1;background-color:rgba(255, 0, 0);"
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
></button>
<button
id="theme-gold"
aria-label="Switch to gold theme"
data-theme="gold"
style="flex:1;background-color:rgba(255, 204, 0);"
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
></button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const themeButtons = document.querySelectorAll('.theme-button');
const currentTheme = localStorage.getItem('theme') || 'black';
document.documentElement.setAttribute('data-theme', currentTheme);
document.getElementById(`theme-${currentTheme}`)?.classList.add('ring-1', 'ring-white/20');
themeButtons.forEach(button => {
button.addEventListener('click', () => {
const theme = button.getAttribute('data-theme');
if (!theme) return;
themeButtons.forEach(btn => btn.classList.remove('ring-1', 'ring-white/20'));
button.classList.add('ring-1', 'ring-white/20');
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
const themeChangedEvent = new CustomEvent('themeChanged', {
detail: { theme }
});
document.dispatchEvent(themeChangedEvent);
});
});
});
</script>

57
src/components/ui/GermanyFlag.tsx
View File

@ -1,57 +0,0 @@
import { useContext } from 'react';
import { motion } from 'framer-motion';
import { ThemeContext } from '../../context/ThemeContext';
export const GermanyFlag = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<motion.div
role="group"
aria-label="Theme switcher with German flag colors"
style={{
display: "inline-flex",
width: "3em",
height: "0.6em",
marginLeft: "0.1em",
verticalAlign: "middle",
borderRadius: "1px",
overflow: "hidden",
opacity: 0.6,
cursor: "pointer"
}}
whileHover={{
opacity: 0.8,
transition: { duration: 0.2 }
}}
>
<motion.button
aria-label="Switch to dark theme"
aria-pressed={theme === 'black'}
style={{ flex: 1, backgroundColor: "rgba(0, 0, 0, 0.5)", borderLeft: "2px solid rgba(255, 255, 255, 0.1)", borderTop: "2px solid rgba(255, 255, 255, 0.1)", borderBottom: "2px solid rgba(255, 255, 255, 0.1)" }}
onClick={() => setTheme('black')}
className={theme === 'black' ? 'ring-1 ring-white/20' : ''}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
/>
<motion.button
aria-label="Switch to red theme"
aria-pressed={theme === 'red'}
style={{ flex: 1, backgroundColor: "rgba(255, 0, 0)" }}
onClick={() => setTheme('red')}
className={theme === 'red' ? 'ring-1 ring-white/20' : ''}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
/>
<motion.button
aria-label="Switch to gold theme"
aria-pressed={theme === 'gold'}
style={{ flex: 1, backgroundColor: "rgba(255, 204, 0)" }}
onClick={() => setTheme('gold')}
className={theme === 'gold' ? 'ring-1 ring-white/20' : ''}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
/>
</motion.div>
);
};