srx/srx.astro.nix
1
0
Fork 0
Code Issues 4 Pull requests Packages Projects Releases Wiki Activity

refactored all React components to Astro components

Browse source
This commit is contained in:
Sebastian Wendel 2024-03-13 16:59:59 +01:00
parent ab970683d2
commit a67c4bd71c
6 changed files with 57 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/Button.astro Normal file
View file

@ -0,0 +1,22 @@
---
import { ArrowRightIcon } from "lucide-react";
interface Props {
className?: string;
caption: string;
href?: string;
tab?: boolean;
small?: boolean;
}
const { className, caption, href, tab, small } = Astro.props;
---
<a
href={href}
class={`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 || ""}`}
{...tab ? { target: "_blank" } : {}}
>
{caption}
<ArrowRightIcon className="h-6 w-6" />
</a>

27
src/components/Footer.astro
View file

@ -1,5 +1,6 @@
---
import SRXLogo from "@srx/assets/srx-digital-logo.svg?react";
import Config from "@srx/config/page.json";
import Logo from "@srx/components/Logo.astro";
import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
---
@ -7,13 +8,13 @@ import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
class="flex flex-col md:flex-row items-start bg-default text-white py-20"
>
<div class="flex flex-col lg:flex-grow">
<h3>
Du möchtest mit mir zusammenarbeiten? Ich freue mich über deinen
Kontakt.
</h3>
<h3>{Config.site.cta}</h3>
<p class="flex items-stretch gap-5 py-5">
<a
href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
href={"mailto:" +
`${Config.contact.email.address}` +
"?subject=" +
`${encodeURIComponent(Config.contact.email.subject)}`}
><AtSign /></a
>
<a href="https://matrix.to/#/@swendel:curious.bio"
@ -28,15 +29,17 @@ import { AtSign, GitFork, Linkedin, MessagesSquare } from "lucide-react";
<div class="flex flex-col lg:flex-grow">
<div>
srx digital<br />
Development & Operations<br />
{Config.site.title}<br />
{Config.site.subtitle}<br />
</div>
<address class="not-italic mt-8 md:mt-0 py-5">
Sebastian Wendel<br />
Wohlwillstraße 2<br />
D-20359 Hamburg<br />
{Config.company.name}<br />
{Config.company.street}
{Config.company.building}<br />
{Config.company.country}-{Config.company.plz}
{Config.company.city}<br />
</address>
</div>
<SRXLogo className="fill-primary h-10" />
<Logo />
</footer>

58
src/components/Hero.astro
View file

@ -1,54 +1,30 @@
---
import { Picture } from "astro:assets";
import { LinkButton } from "@srx/components";
import SwendelPortrait from "@srx/assets/swendel_portrait.webp";
import Portrait from "@srx/assets/swendel_portrait.webp";
import Config from "@srx/config/page.json";
import Button from "@srx/components/Button.astro";
---
<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>
<header class="flex flex-col md:flex-row items-center">
<div class="flex flex-col lg:flex-grow">
<h1 class="mb-4">{Config.site.claim}</h1>
<p class="mb-8 leading-relaxed text-xl">{Config.site.description}</p>
<LinkButton
className={"h-10"}
caption="Schreib mir"
href={"mailto:latigid.xrs@srx.digital?subject=Kontakt%20%C3%BCber%20die%20Website"}
<Button
href={"mailto:" +
`${Config.contact.email.address}` +
"?subject=" +
`${encodeURIComponent(Config.contact.email.subject)}`}
caption={Config.contact.email.caption}
/>
<slot />
</div>
<Picture
src={SwendelPortrait}
class="rounded-xl"
src={Portrait}
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`}
widths={[240, 540, 720, Portrait.width]}
sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${Portrait.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>

28
src/components/LinkButton.tsx
View file

@ -1,28 +0,0 @@
import { ArrowRightIcon } from "lucide-react"
interface Props {
caption: string
className?: string
href?: string
newTab?: boolean
small?: boolean
}
const LinkButton: React.FC<Props> = ({
caption,
className,
href,
newTab,
small,
}: Props) => {
return (
<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}
<ArrowRightIcon className='h-6 w-6' />
</a>
)
}
export default LinkButton

18
src/components/Navbar.astro
View file

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

5
src/components/index.ts
View file

@ -1,5 +0,0 @@
import LinkButton from "@srx/components/LinkButton";
export {
LinkButton,
}