feat: add hobby section and update navigation links
This commit is contained in:
@ -37,10 +37,10 @@ import MobileMenu from "./MobileMenu.astro";
|
||||
class="flex bg-black/5 backdrop-blur-md overflow-hidden theme-border border divide-x divide-white/5 shadow-sm rounded-xl"
|
||||
>
|
||||
{
|
||||
["About", "Work", "Contact"].map((item, index) => (
|
||||
["About", "Hobby", "Work", "Contact"].map((item, index) => (
|
||||
<a
|
||||
href={`#${item.toLowerCase()}`}
|
||||
class={`nav-item px-5 py-2 theme-secondary hover:theme-primary theme-transition ${index === 0 ? "rounded-l-xl" : ""} ${index === 2 ? "rounded-r-xl" : ""}`}
|
||||
class={`nav-item px-5 py-2 theme-secondary hover:theme-primary theme-transition ${index === 0 ? "rounded-l-xl" : ""} ${index === 3 ? "rounded-r-xl" : ""}`}
|
||||
aria-label={`View my ${item.toLowerCase()}`}
|
||||
>
|
||||
{item}
|
||||
|
||||
@ -3,6 +3,7 @@ import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
|
||||
|
||||
const navItems = [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Hobby", href: "#hobby" },
|
||||
{ label: "Work", href: "#work" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
];
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
---
|
||||
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 { SiPhp, SiJavascript, SiMysql, SiReact, SiTypescript, SiAstro } from "react-icons/si";
|
||||
import { FaGithub, FaLinkedin, FaGlobe, FaPalette, FaCamera } 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: "TypeScript", icon: SiTypescript },
|
||||
{ name: "React", icon: SiReact },
|
||||
{ name: "PHP", icon: SiPhp },
|
||||
{ name: "Astro", icon: SiAstro },
|
||||
];
|
||||
|
||||
const interests = [
|
||||
{ name: "Web Development", icon: FaGlobe },
|
||||
{ name: "System Architecture", icon: IoServerOutline },
|
||||
{ name: "UI/UX Design", icon: FaPalette },
|
||||
{ name: "Performance Optimization", icon: BsLightningChargeFill },
|
||||
{ name: "Creative Vision", icon: FaCamera },
|
||||
];
|
||||
---
|
||||
|
||||
@ -66,7 +66,9 @@ const interests = [
|
||||
Jan-Marlon Leibl
|
||||
</h3>
|
||||
<p class="font-['Instrument_Sans'] theme-text-70 text-base sm:text-lg">
|
||||
Fullstack Developer
|
||||
Fullstack Web Developer
|
||||
<br>
|
||||
Photographer Hobbyist
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
@ -76,13 +78,13 @@ const interests = [
|
||||
<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.
|
||||
Hey there! I'm Jan-Marlon, but everyone calls me Jan. My coding journey kicked off at age 11 with C#, after being amazed by a simple app my friend built.
|
||||
</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.
|
||||
These days, I work with PHP and TypeScript to build cool stuff on the web. I've grown from tinkering with basic projects to crafting robust systems that thousands of people use daily.
|
||||
</p>
|
||||
<p class="text-base sm:text-xl theme-text-70 leading-relaxed">
|
||||
I bring the same eye for detail to my code that I do to my photography. There's something magical about creating something both functional and beautiful, whether it's a web app or a perfect shot.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ import GermanyFlag from "../ui/GermanyFlag.astro";
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span
|
||||
class="theme-secondary uppercase tracking-wider text-xs sm:text-sm font-medium font-['Instrument_Sans']"
|
||||
>Available for Work</span
|
||||
>Open to New Projects</span
|
||||
>
|
||||
</div>
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
@ -32,10 +32,10 @@ import GermanyFlag from "../ui/GermanyFlag.astro";
|
||||
<h1
|
||||
class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.05] sm:leading-[0.95] max-w-4xl theme-primary theme-transition"
|
||||
>
|
||||
Software Developer
|
||||
Web Developer
|
||||
<br />
|
||||
<span class="theme-secondary inline-flex items-center gap-2"
|
||||
>based in <GermanyFlag /></span
|
||||
>from <GermanyFlag /></span
|
||||
>
|
||||
</h1>
|
||||
</div>
|
||||
@ -44,15 +44,14 @@ import GermanyFlag from "../ui/GermanyFlag.astro";
|
||||
<p
|
||||
class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-tight theme-transition"
|
||||
>
|
||||
Passionate about creating digital experiences, with a focus on PHP and modern web
|
||||
technologies.
|
||||
Crafting engaging digital experiences with PHP, TypeScript, and a splash of creative thinking.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 sm:gap-5">
|
||||
<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-xl transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
|
||||
>
|
||||
View My Work
|
||||
See 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"
|
||||
@ -67,7 +66,7 @@ import GermanyFlag from "../ui/GermanyFlag.astro";
|
||||
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-xl theme-button-secondary hover:theme-bg-05 transition-all text-sm sm:text-base tracking-tight font-medium group shadow-sm"
|
||||
>
|
||||
Get in Touch
|
||||
Say Hello
|
||||
<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"
|
||||
@ -112,7 +111,7 @@ import GermanyFlag from "../ui/GermanyFlag.astro";
|
||||
>
|
||||
</div>
|
||||
<span class="theme-text-90 text-base sm:text-lg block w-full">
|
||||
Fullstack Developer
|
||||
Fullstack Web Dev
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
104
src/components/sections/Hobby.astro
Normal file
104
src/components/sections/Hobby.astro
Normal file
@ -0,0 +1,104 @@
|
||||
---
|
||||
import FadeIn from "../ui/FadeIn.astro";
|
||||
import { FaCamera, FaPhotoVideo } from "react-icons/fa";
|
||||
import { MdPhotoCamera, MdCameraAlt } from "react-icons/md";
|
||||
|
||||
const cameras = [
|
||||
{ name: "Nikon D7200", icon: MdCameraAlt, description: "Dad's camera that got me hooked on photography" },
|
||||
{ name: "Nikon D3300", icon: MdCameraAlt, description: "My first personal camera where it all began" },
|
||||
{ name: "Sony A7 III", icon: MdPhotoCamera, description: "Current setup that's taken my shots to the next level" },
|
||||
];
|
||||
|
||||
const genres = [
|
||||
{ name: "Portrait", icon: FaCamera, description: "Love capturing people's authentic expressions" },
|
||||
{ name: "Street", icon: FaCamera, description: "Finding beauty in everyday urban moments" },
|
||||
{ name: "Studio", icon: FaPhotoVideo, description: "Creating controlled lighting magic" },
|
||||
{ name: "Landscape", icon: FaPhotoVideo, description: "Chasing perfect light in nature" },
|
||||
];
|
||||
---
|
||||
|
||||
<section id="hobby" class="py-24 sm:py-40 px-4 sm:px-8 relative">
|
||||
<div class="absolute inset-0 theme-bg-gradient opacity-50"></div>
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="max-w-(--breakpoint-xl) mx-auto relative">
|
||||
<FadeIn>
|
||||
<div class="flex items-baseline gap-4 mb-12 sm:mb-24">
|
||||
<h2
|
||||
class="font-['DM_Sans'] text-3xl sm:text-5xl font-semibold tracking-tight theme-primary"
|
||||
>
|
||||
Hobby
|
||||
</h2>
|
||||
<div class="h-px grow theme-border opacity-60"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div class="grid gap-12 sm:gap-16">
|
||||
<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">
|
||||
When I'm not coding, you'll find me with a camera in hand, hunting for that perfect shot that tells a story without words.
|
||||
</p>
|
||||
<p class="text-base sm:text-xl theme-text-70 leading-relaxed">
|
||||
It all started with borrowing my dad's Nikon D7200 – I was instantly hooked. Eventually got my own Nikon D3300 to learn the basics. These days, I'm having a blast with my Sony A7 III, experimenting with different styles and techniques across various photography genres.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md: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-wider font-medium">
|
||||
Camera Evolution
|
||||
</h3>
|
||||
<div class="h-px grow theme-border opacity-30"></div>
|
||||
</div>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
{
|
||||
cameras.map((camera) => (
|
||||
<li class="text-base sm:text-lg group flex flex-col gap-1 theme-text-70 hover:theme-text-90 cursor-default theme-bg-05 px-4 py-3 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-all">
|
||||
<camera.icon className="w-5 h-5" />
|
||||
</span>
|
||||
{camera.name}
|
||||
</div>
|
||||
<p class="text-sm theme-text-50 pl-9">{camera.description}</p>
|
||||
</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-wider font-medium">
|
||||
Favorite Genres
|
||||
</h3>
|
||||
<div class="h-px grow theme-border opacity-30"></div>
|
||||
</div>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
{
|
||||
genres.map((genre) => (
|
||||
<li class="text-base sm:text-lg group flex flex-col gap-1 theme-text-70 hover:theme-text-90 cursor-default theme-bg-05 px-4 py-3 rounded-xl shadow-sm hover:shadow-md border border-transparent hover:theme-border transition-all duration-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-all">
|
||||
<genre.icon className="w-5 h-5" />
|
||||
</span>
|
||||
{genre.name}
|
||||
</div>
|
||||
<p class="text-sm theme-text-50 pl-9">{genre.description}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -5,6 +5,7 @@ import SkipToContent from "../components/ui/SkipToContent.astro";
|
||||
import Hero from "../components/sections/Hero.astro";
|
||||
import About from "../components/sections/About.astro";
|
||||
import Work from "../components/sections/Work.astro";
|
||||
import Hobby from "../components/sections/Hobby.astro";
|
||||
import Contact from "../components/sections/Contact.astro";
|
||||
import Footer from "../components/layout/Footer.astro";
|
||||
|
||||
@ -30,6 +31,7 @@ import "@fontsource/instrument-sans/500.css";
|
||||
<main id="main-content">
|
||||
<Hero />
|
||||
<About />
|
||||
<Hobby />
|
||||
<Work />
|
||||
<Contact />
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user