diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index e2a03d1..aa300ff 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -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) => ( {item} diff --git a/src/components/layout/MobileMenu.astro b/src/components/layout/MobileMenu.astro index dbe0be1..f0ac072 100644 --- a/src/components/layout/MobileMenu.astro +++ b/src/components/layout/MobileMenu.astro @@ -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" }, ]; diff --git a/src/components/sections/About.astro b/src/components/sections/About.astro index a67f382..d267a20 100644 --- a/src/components/sections/About.astro +++ b/src/components/sections/About.astro @@ -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

- Fullstack Developer + Fullstack Web Developer +
+ Photographer Hobbyist

@@ -76,13 +78,13 @@ const interests = [

- 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.

- 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. +

+

+ 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.

diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro index 82e6307..89ba45a 100644 --- a/src/components/sections/Hero.astro +++ b/src/components/sections/Hero.astro @@ -19,7 +19,7 @@ import GermanyFlag from "../ui/GermanyFlag.astro"; Available for WorkOpen to New Projects
@@ -32,10 +32,10 @@ import GermanyFlag from "../ui/GermanyFlag.astro";

- Software Developer + Web Developer
based in from

@@ -44,15 +44,14 @@ import GermanyFlag from "../ui/GermanyFlag.astro";

- 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.

- View My Work + See My Work - Get in Touch + Say Hello
- Fullstack Developer + Fullstack Web Dev diff --git a/src/components/sections/Hobby.astro b/src/components/sections/Hobby.astro new file mode 100644 index 0000000..8138e8e --- /dev/null +++ b/src/components/sections/Hobby.astro @@ -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" }, +]; +--- + +
+
+
+
+ +
+ +
+

+ Hobby +

+
+
+ + +
+ +
+
+

+ 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. +

+

+ 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. +

+
+ +
+
+
+

+ Camera Evolution +

+
+
+
    + { + cameras.map((camera) => ( +
  • +
    + + + + {camera.name} +
    +

    {camera.description}

    +
    • + )) + } +
+
+ +
+
+

+ Favorite Genres +

+
+
+
    + { + genres.map((genre) => ( +
  • +
    + + + + {genre.name} +
    +

    {genre.description}

    +
    • + )) + } +
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 23f7735..3aa8a6e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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";
+