max/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: some shit?
Some checks failed
Deploy to SFTP Server / build (push) Failing after 50m12s
Details

Browse Source
This commit is contained in:
max_richter 2024-04-07 00:29:52 +02:00
parent 96c053d5ff
commit f76477db98
11 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/HeroCard.astro
View File

@ -32,9 +32,9 @@ const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
---
<Card
classes={`grid gradient border-1 border-neutral overflow-hidden ${cover ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
classes={`grid gradient border-1 border-neutral overflow-hidden ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}
>
<Card.Content classes="px-8 py-7 order-last sm:order-first">
<Card.Content classes="px-8 py-7 order-last xs:order-first">
<Card.Title classes="text-4xl flex items-center gap-2">
{icon && <img src={icon} class="h-6" />}
{title}

12
src/components/Image.astro
View File

@ -5,6 +5,7 @@ import { generateThumbHash } from "@helpers/image";
interface Props {
src: ImageMetadata;
alt: string;
pictureClass?: string;
class?: string;
caption?: string;
hash?: boolean;
@ -12,7 +13,14 @@ interface Props {
maxWidth?: number;
}
const { src: image, loader = true, hash = true, alt, maxWidth } = Astro.props;
const {
src: image,
loader = true,
pictureClass = "",
hash = true,
alt,
maxWidth,
} = Astro.props;
let thumbhash = hash ? await generateThumbHash(image) : "";
@ -40,7 +48,7 @@ const sizes = [
alt={alt}
data-thumbhash={thumbhash}
pictureAttributes={{
class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""}`,
class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
}}
class={Astro.props.class}
widths={sizes.map((size) => size.width)}

28
src/components/LanguagePicker.astro
View File

@ -24,19 +24,15 @@ const flags = {
const t = useTranslations(Astro.url);
---
<ul class="flex items-center gap-4">
{
Object.entries(locales).map(([lang, label]) => (
<li>
<a
class="flex gap-2 items-center"
href={translatePath(lang)}
data-astro-prefetch
>
<span class="text-xs">{flags[label as keyof typeof flags]}</span>
{t(label as "de")}
</a>
</li>
))
}
</ul>
{
Object.entries(locales).map(([lang, label]) => (
<a
class="flex gap-2 items-center"
href={translatePath(lang)}
data-astro-prefetch
>
<span class="text-xs">{flags[label as keyof typeof flags]}</span>
{t(label as "de")}
</a>
))
}

27
src/components/Max.astro
View File

@ -10,12 +10,15 @@ const t = useTranslations(Astro.url);
---
<Card
classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
>
<div class="image">
<div
class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
>
<Image
src={MaxImg}
alt="its mee"
class="object-bottom h-full object-cover w-1/2 xs:w-full"
hash={false}
maxWidth={700}
loader={false}
@ -28,7 +31,7 @@ const t = useTranslations(Astro.url);
</div>
</div>
<div class="content gap-2">
<div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
<h1 class="text-2xl">{t("home.title")}</h1>
<p>{t("home.subtitle")}</p>
</div>
@ -36,13 +39,11 @@ const t = useTranslations(Astro.url);
<style>
.image {
position: relative;
height: 130%;
align-self: end;
overflow: hidden;
border-bottom-left-radius: var(--border-radius-md);
display: flex;
align-items: flex-end;
}
.googley-eye-target {
height: calc(100% - 30px);
}
.image::before {
@ -72,12 +73,4 @@ const t = useTranslations(Astro.url);
top: 31%;
right: 12%;
}
.content {
padding: 30px;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
</style>

3
src/components/SmallGrid.astro Normal file
View File

@ -0,0 +1,3 @@
<div class="grid xs:grid-cols-2 gap-4 mt-4">
<slot />
</div>

2
src/components/arrows/ArrowA.astro
View File

@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
const t = useTranslations(Astro.url);
---
<div class="arrow flex items-center gap-2">
<div class="arrow items-center gap-2 hidden lg:flex">
<img src="/images/arrow_a.svg" alt="Arrow" />
<p class="text-xl">{t("latest-projects")}</p>
</div>

2
src/components/arrows/ArrowB.astro
View File

@ -3,7 +3,7 @@ import { useTranslations } from "@i18n/utils";
const t = useTranslations(Astro.url);
---
<div class="arrow flex items-center gap-2">
<div class="arrow items-center gap-2 hidden lg:flex">
<p class="text-xl">{t("latest-posts")}</p>
<img src="/images/arrow_b.svg" alt="Arrow" />
</div>

2
src/i18n/ui.ts
View File

@ -16,6 +16,7 @@ export const ui = {
"latest-posts": "Latest Posts",
"latest-projects": "Latest Projects",
'home.title': 'Hi, I’m Max :)',
'website-source': 'source',
'home.subtitle': 'Trained Media Designer, Blender Nerd, Developer and Hardware Tinkerer.',
'nav.blog': 'Blog',
'nav.projects': 'Projects',
@ -31,6 +32,7 @@ export const ui = {
"latest-projects": "Neueste Projekte",
"read-more": "weiterlesen",
'home.title': 'Hi, ich bin Max :)',
'website-source': 'Sourcecode',
'home.subtitle': 'Ausgebildeter Mediengestalter, Blender Nerd, Entwickler und Hardware Bastler.',
'nav.blog': 'Blog',
'nav.projects': 'Projekte',

10
src/layouts/Layout.astro
View File

@ -2,10 +2,12 @@
import LanguagePicker from "../components/LanguagePicker.astro";
import { AstroFont } from "astro-font";
import Nav from "../components/Nav.astro";
import { useTranslations } from "@i18n/utils";
interface Props {
title: string;
width?: "full" | "compact";
}
const t = useTranslations(Astro.url);
const { title, width = "compact" } = Astro.props;
---
@ -123,8 +125,14 @@ const { title, width = "compact" } = Astro.props;
<main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
<slot />
</main>
<footer class="px-4">
<footer class="px-4 flex gap-8 mb-4">
<LanguagePicker />
<a
href="https://git.max-richter.dev/max/website"
class="flex gap-2 items-center"
>
<span class="i-tabler-brand-git"></span>{t("website-source")}
</a>
</footer>
<style>
.layout-compact {

9
src/pages/index.astro
View File

@ -13,6 +13,7 @@ import SmallCard from "@components/SmallCard.astro";
import LinkCard from "@components/LinkCard.astro";
import ArrowA from "@components/arrows/ArrowA.astro";
import ArrowB from "@components/arrows/ArrowB.astro";
import SmallGrid from "@components/SmallGrid.astro";
const projects = filterCollection(
await getCollection("projects"),
@ -43,7 +44,7 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
<span class="i-tabler-circle-arrow-right-thin"></span>
<ArrowA />
{featuredProject && <HeroCard post={featuredProject} />}
<div class="grid xs:grid-cols-2 gap-4 mt-4">
<SmallGrid>
{
otherProjects.length > 0 &&
otherProjects.map((project) => <SmallCard post={project} />)
@ -53,19 +54,19 @@ const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
title={t("more-projects")}
icon="circle-arrow-right"
/>
</div>
</SmallGrid>
</section>
<section class="relative my-8">
{featuredPost && <HeroCard post={featuredPost} />}
<ArrowB />
<div class="grid grid-cols-2 gap-4 mt-4">
<SmallGrid>
{
otherPosts.length > 0 &&
otherPosts.map((post) => <SmallCard post={post} />)
}
<LinkCard link={tp("/blog")} title={t("more-posts")} />
</div>
</SmallGrid>
</section>
</Layout>

4
uno.config.ts
View File

@ -22,8 +22,8 @@ export default defineConfig({
"md": "20px",
"diag-md": "0px var(--border-radius-md) 0px var(--border-radius-md)"
},
screens: {
xs: "375px",
breakpoints: {
xs: "450px",
sm: "640px",
md: "768px",
lg: "1024px",