changed components from react to astro

src/authors/swendel.json

@@ -1,15 +0,0 @@
-{
-    "firstName": "Sebastian",
-    "lastName": "Wendel",
-    "bio": "His focus is on software development as well as platform and cloud engineering.",
-    "image": {
-        "default": "/images/sebastian_wendel.jpg",
-        "alt": "Portrait of Sebastian Wendel"
-    },
-    "social": {
-        "mastodon": "@swendel@srx.digital",
-        "linkedin": "https://www.linkedin.com/in/sebastian-wendel-935b8a9a/"
-    },
-    "chat": "swendel@srx.digital",
-    "homepage": "https://srx.digital/"
-}

src/components/Footer.astro

@@ -0,0 +1,79 @@
+---
+import SRXLogo from "@srx/assets/srx-digital-logo.svg";
+import SrxLogoR from "@srx/assets/srx-digital-logo.svg?react";
+
+import { Image } from "astro:assets";
+import {
+	GitFork,
+	AtSign,
+	GithubIcon,
+	Linkedin,
+	MessagesSquare,
+	MessageSquareQuote,
+} from "lucide-react";
+---
+
+<footer>
+	<div class="contact">
+		<h3>
+			Du möchtest mit mir zusammenarbeiten? Ich freue mich auf deine
+			Nachricht.
+		</h3>
+		<br />
+		<p class="socials">
+			<a href="mailto:latigid.xrs@srx.digital"><AtSign /></a>
+			<a href="https://matrix.to/#/@swendel:curious.bio"
+				><MessagesSquare /></a
+			>
+			<a href="https://social.curious.bio/@swendel"
+				><MessageSquareQuote /></a
+			>
+			<a href="https://code.srx.digital/explore/repos"><GitFork /></a>
+			<a href="https://github.com/SebastianWendel"><GithubIcon /></a>
+			<a href="https://www.linkedin.com/in/sebastian-wendel-935b8a9a/"
+				><Linkedin /></a
+			>
+		</p>
+	</div>
+
+	<div class="address">
+		<div>
+			srx digital<br />
+			Development & Operations<br />
+		</div>
+		<br />
+		<address>
+			Sebastian Wendel<br />
+			Wohlwillstraße 2<br />
+			D-20359 Hamburg<br />
+		</address>
+	</div>
+
+	<SrxLogoR />
+</footer>
+
+<style>
+	footer {
+		@apply flex flex-col md:flex-row items-start bg-default text-white;
+	}
+
+	address {
+		@apply not-italic mt-8 md:mt-0;
+	}
+
+	.address {
+		@apply flex flex-col lg:flex-grow;
+	}
+
+	.contact {
+		@apply flex flex-col lg:flex-grow;
+	}
+
+	.socials {
+		@apply flex items-stretch gap-5;
+	}
+
+	.logo {
+		@apply fill-primary h-10;
+	}
+</style>

src/components/Footer.tsx

@@ -1,43 +0,0 @@
-import type React from 'react'
-import SRXLogo from '@srx/assets/srx-digital-logo.svg?react'
-
-interface Props {
-  children?: React.ReactNode
-}
-
-const Footer: React.FC<Props> = ({ children }: Props) => {
-  return (
-    <>
-      <div className={'flex gap-8 flex-col justify-between md:pt-0.5 z-10 lg:col-start-2 lg:col-span-5 col-span-1'}>
-        <div>
-          <SRXLogo className={'h-8 md:h-10'} />
-        </div>
-
-        <div className='flex flex-col gap-6 items-start'>
-          {children}
-        </div>
-      </div>
-
-      <div className={'z-10 col-span-1 lg:col-span-6'}>
-        <h3 className={'text-xl md:text-bb-3xl font-grotesk'}>
-          Du möchtest mit uns zusammenarbeiten? Wir freuen uns auf deine E-Mail.
-        </h3>
-
-        <div className={'flex flex-col md:flex-row justify-between text-base md:text-lg leading-[1.4] mt-[11.5rem] md:mt-[17.875rem]'}>
-          <div>
-            srx digital<br />
-            Development & Operations<br />
-          </div>
-
-          <address className={'not-italic mt-8 md:mt-0'}>
-            Sebastian Wendel<br />
-            Wohlwillstraße 2<br />
-            20359 Hamburg<br />
-          </address>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Footer

src/components/Hero.astro

@@ -0,0 +1,54 @@
+---
+import { Picture } from "astro:assets";
+import { LinkButton } from "@srx/components";
+import SwendelPortrait from "@srx/assets/swendel_portrait.webp";
+---
+
+<header>
+    <div class="hero">
+        <h1>You, me, technology.</h1>
+        <p>
+            Hallo! Ich bin Sebastian aus Hamburg, spezialisiert auf
+            Softwareentwicklung und Plattformengineering. Meine Welt sind Linux,
+            Container, Cloud und Hardware, besonders wenn's um Open-Source geht.
+            Ich helfe Firmen, ihre Digitalstrategien erfolgreich zu realisieren.
+        </p>
+
+        <LinkButton
+            className={"h-10"}
+            caption="Schreib mir"
+            href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
+        />
+        <slot />
+    </div>
+
+    <Picture
+        src={SwendelPortrait}
+        formats={["jpeg", "webp"]}
+        widths={[240, 540, 720, SwendelPortrait.width]}
+        sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${SwendelPortrait.width}px`}
+        alt="Porträt von Sebastian Wendel"
+    />
+</header>
+
+<style>
+    header {
+        @apply flex flex-col md:flex-row items-center;
+    }
+
+    h1 {
+        @apply mb-4;
+    }
+
+    p {
+        @apply mb-8 leading-relaxed text-xl;
+    }
+
+    img {
+        @apply rounded-xl;
+    }
+
+    .hero {
+        @apply flex flex-col lg:flex-grow;
+    }
+</style>

src/components/HeroSection.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-interface Props {
-  title: string
-  subtitle?: string
-  buttonCaption?: string
-}
-
-const HeroSection: React.FC<Props> = ({ title, subtitle, buttonCaption }: Props) => {
-  return (
-    <>
-      <div className='flex flex-col items-start pt-[18.625rem] pb-24 lg:pt-36 lg:pb-32 bg-bb-grey-200 px-5 lg:px-0 col-span-1 lg:col-span-5 lg:col-start-2'>
-        <h1 className='text-black font-grotesk font-medium text-[1.75rem] lg:text-5xl mt-7 leading-tight'>
-          {title}
-        </h1>
-        {subtitle && <p className='text-base lg:text-xl mt-6 text-bb-grey-500'>{subtitle}</p>}
-        {buttonCaption}
-      </div>
-
-      <div className='relative lg:pt-28 w-full overflow-visible bg-bb-grey-200 col-span-1 lg:col-start-8 lg:col-span-6'>
-        <div className={'lg:absolute h-[64vw] lg:h-[46rem] w-full overflow-hidden'}>
-          <picture>
-            <source srcSet='/images/swendel_portrait.webp' type='image/webp' />
-            <source srcSet='/images/swendel_portrait.jpg' type='image/jpeg' />
-            <img
-              src='/images/swendel_portrait.webp'
-              alt={
-                ''
-              }
-              width={671}
-              height={736}
-              className='relative lg:top-0 -top-[18vw] w-full lg:h-full object-cover'
-            />
-          </picture>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default HeroSection

src/components/LinkButton.tsx

@@ -4,7 +4,6 @@ interface Props {
   caption: string
   className?: string
   href?: string
-  dark?: boolean
   newTab?: boolean
   small?: boolean
 }
@@ -12,13 +11,12 @@ interface Props {
 const LinkButton: React.FC<Props> = ({
   caption,
   className,
-  dark = false,
   href,
   newTab,
   small,
 }: Props) => {
   return (
-    <a href={href} className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium hover:bg-opacity-75 ${dark ? 'bg-black text-white' : 'bg-white text-bb-grey-500'
+    <a href={href} className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium bg-secondary text-white hover:bg-opacity-75'
       } ${small ? 'py-[10px] px-4' : 'py-4 px-5'} ${className || ''}`}
       {...(newTab ? { target: '_blank' } : {})}>
       {caption}

src/components/Navbar.astro

@@ -0,0 +1,19 @@
+---
+import SrxLogo from "@srx/assets/srx-digital-logo.svg?react";
+---
+
+<nav class="section">
+	<a href={"/"}>
+		<SrxLogo />
+	</a>
+</nav>
+
+<style>
+	nav {
+		@apply bg-default h-20 py-5;
+	}
+
+	svg {
+		@apply fill-primary h-10;
+	}
+</style>

src/components/Navbar.tsx

@@ -1,25 +0,0 @@
-import type { Props } from 'astro'
-import type React from 'react'
-import { useState } from 'react'
-import { SectionGridContainer } from '@srx/components'
-import SrxLogo from '@srx/assets/srx-digital-logo.svg?react'
-
-const Navbar: React.FC<Props> = ({ }) => {
-  const [navListOpen] = useState(false)
-
-  return (
-    <SectionGridContainer className='fixed top-0 bg-white w-full z-20 border border-b-bb-grey-200'>
-      <div className={`${navListOpen ? 'flex-col h-dvh' : 'flex-row'} flex justify-between lg:items-center lg:col-start-2 col-span-1 lg:col-span-11`}>
-        <nav className={`flex ${navListOpen ? 'flex-col h-full' : 'flex-row'} w-full justify-between items-start lg:items-center px-5 lg:px-0`}>
-          <div className='flex justify-between items-center w-full h-20'>
-            <a href={'/'}>
-              <SrxLogo className={'h-8'} />
-            </a>
-          </div>
-        </nav>
-      </div>
-    </SectionGridContainer>
-  )
-}
-
-export default Navbar

src/components/SectionGridContainer.tsx

@@ -1,37 +0,0 @@
-import type React from 'react'
-import type { ElementType } from 'react'
-
-interface SectionGridContainerProps {
-  children: React.ReactNode
-  className?: string
-  innerClassName?: string
-  breakpoint?: 'lg' | 'xl' | '2xl'
-  as?: ElementType
-}
-
-const SectionGridContainer: React.FC<SectionGridContainerProps> = ({
-  children,
-  className,
-  innerClassName,
-  breakpoint = 'lg',
-  as: Tag = 'section',
-}) => {
-  const innerGridBreakpointClasses = {
-    lg: 'lg:grid-cols-inner lg:gap-4',
-    xl: 'xl:grid-cols-inner xl:gap-4',
-    '2xl': '2xl:grid-cols-inner 2xl:gap-4',
-  }
-
-  return (
-    <div className={`2xl:grid 2xl:grid-cols-outer 2xl:grid-wrapper ${className ?? ''}`}>
-      <Tag
-        className={`grid grid-cols-1 relative ${innerGridBreakpointClasses[breakpoint] ?? ''} ${
-          innerClassName || ''
-        }`}
-      >
-        {children}
-      </Tag>
-    </div>
-  )
-}
-export default SectionGridContainer

src/components/index.ts

@@ -1,13 +1,5 @@
-import Navbar from "@srx/components/Navbar";
-import HeroSection from "@srx/components/HeroSection";
-import Footer from  "@srx/components/Footer";
-import SectionGridContainer from "@srx/components/SectionGridContainer";
 import LinkButton from "@srx/components/LinkButton";
 
 export {
-  Navbar,
-  HeroSection,
-  Footer,
-  SectionGridContainer,
   LinkButton,
 }

src/content/config.ts

@@ -1,22 +0,0 @@
-import { z, defineCollection } from 'astro:content'
-
-const authorCollection = defineCollection({
-    type: 'data',
-    schema: z.object({
-      firstName: z.string(),
-      lastName: z.string(),
-      image: z.object({
-        default: z.string(),
-        webp: z.string().optional(),
-        alt: z.string(),
-      }),
-      chat: z.string().optional(),
-      social: z.string().optional(),
-      homepage: z.string().optional(),
-    }),
-  })
-
-  export const collections = {
-    authors: authorCollection,
-  }
-  

src/layouts/BaseLayout.astro

@@ -1,9 +1,10 @@
 ---
+import "@srx/styles/base.css";
 import "@fontsource-variable/literata";
 import "@fontsource-variable/manrope";
 import "@fontsource-variable/martian-mono";
-import "@srx/styles/base.css";
+import Navbar from "@srx/components/Navbar.astro";
-import { Footer, Navbar, SectionGridContainer } from "@srx/components";
+import Footer from "@srx/components/Footer.astro";
 
 interface Props {
     metaTitle?: string;
@@ -26,9 +27,11 @@ const {
     metaDate,
     metaSchema,
 } = Astro.props;
+
+const isProduction = import.meta.env.MODE === "production";
 ---
 
-<html lang="en" class="overflow-x-hidden scroll-smooth">
+<html lang="de" class="overflow-x-hidden scroll-smooth">
     <head>
         <meta charset="utf-8" />
         <title>{`${metaTitle} - ${metaSubtitle}`}</title>
@@ -76,17 +79,19 @@ const {
                 />
             )
         }
+        {
+            isProduction && (
+                <script
+                    src="https://analytics.srx.digital/script.js"
+                    data-website-id="herimee8win2thiZibohnaichei8uoDo"
+                    async
+                />
+            )
+        }
     </head>
+    <Navbar />
+    <slot />
+    <Footer />
+
 
-    <body class="flex flex-col overflow-x-hidden pt-20">
-        <Navbar buttonCaption="Schreib mir!" client:only="react" />
-        <slot />
-        <SectionGridContainer
-            as="footer"
-            className="bg-bb-grey-200 overflow-y-hidden"
-            innerClassName="pt-20 pb-14 relative px-5 2xl:px-0 gap-y-12"
-        >
-            <Footer />
-        </SectionGridContainer>
-    </body>
 </html>

src/pages/index.astro

@@ -1,5 +1,8 @@
 ---
 import BaseLayout from "@srx/layouts/BaseLayout.astro";
+import Hero from "@srx/components/Hero.astro";
 ---
 
-<BaseLayout />
+<BaseLayout>
+    <Hero />
+</BaseLayout>

src/styles/base.css

@@ -1,3 +1,55 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 :root {
-  color: #000;
+	--font-sans: "Manrope";
+	--font-serif: "Literata";
+	--font-mono: "Martian";
+
+	--color-black: #282828;
+	--color-grey-dark: #515151;
+	--color-grey-light: #cccccc;
+	--color-green: #26d07c;
+	--color-red: #f0506e;
+	--color-pumpkin: #f57855;
+	--color-gold: #ffdc50;
+	--color-forest: #28aa68;
+	--color-teal: #008791;
+	--color-arctic: #0cc0df;
+	--color-aqua: #5082d2;
+
+	--color-default: var(--color-black);
+	--color-primary: var(--color-green);
+	--color-secondary: var(--color-red);
+	--color-muted: var(--color-grey-light);
+	--color-accent: var(--color-teal);
 }
+
+::selection {
+	@apply bg-accent text-white;
+}
+
+nav,
+header,
+footer {
+	@apply px-20 py-10 gap-10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@apply font-serif italic font-medium;
+}
+
+h1 {
+	@apply text-6xl;
+}
+
+h3 {
+	@apply text-xl md:text-2xl;
+}
+