blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

sync

Browse Source
This commit is contained in:
Blboun3
2024-05-26 13:29:06 +02:00
parent a8ec23e1e8
commit 0c2600a7f6
9 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ShowcaseTabs.jsx
View File

@@ -1,4 +1,3 @@
import { Button } from "../components/ui/button";
import {
Card,
CardContent,
@@ -13,38 +12,7 @@ import {
TabsTrigger,
} from "../components/ui/tabs";
const data = [
{
value: "thisPage",
handle: "Projekt 1",
title: "This Page",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "thatPage",
title: "That Page",
handle: "Projekt 2",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
{
value: "otherPge",
title: "Other Page",
handle: "Projekt 3",
description: "random text",
images: [
{ src: "temp.jpg", alt: "text" },
{ src: "temp.jpg", alt: "text2" },
],
},
];
import { data } from "../content/showcase";
export function ShowcaseTabs() {
return (
@@ -54,18 +22,26 @@ export function ShowcaseTabs() {
>
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
{data.map((item) => (
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
<TabsTrigger value={item.value} key={item.value}>{item.handle}</TabsTrigger>
))}
</TabsList>
{data.map((item) => (
<TabsContent value={item.value} className="h-full">
<TabsContent value={item.value} className="h-full" key={item.value}>
<Card className="h-[90%] my-auto">
<CardHeader>
<CardTitle>{item.title}</CardTitle>
<CardDescription>{item.description}</CardDescription>
<CardDescription>
<span className="text-pretty">{item.description}</span>
</CardDescription>
</CardHeader>
<CardContent>
<img src="/temp.jpg" alt="" />
<CardContent className="h-[85%] w-full">
<div className="h-full w-full">
<img
src={item.image}
alt={item.imageAlt}
className="object-cover h-full w-full rounded-lg "
/>
</div>
</CardContent>
</Card>
</TabsContent>

2
src/components/ui/card.jsx
View File

@@ -5,7 +5,7 @@ import { cn } from "../../lib/utils"
const Card = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
className={cn("rounded-lg border border-bkg bg-card text-card-foreground shadow-sm", className)}
{...props} />
))
Card.displayName = "Card"

6
src/components/ui/dropdown-menu.jsx
View File

@@ -36,7 +36,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] overflow-hidden rounded-md border-bkg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
@@ -94,7 +94,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-bkg",
className
)}
{...props}>

29
src/content/showcase.js Normal file
View File

@@ -0,0 +1,29 @@
export const data = [
{
value: "thisPage",
handle: "Projekt 1",
title: "This Page",
href: "/potato",
description: "random text os iuoiu fsd ufiodsu foid sufo dsufois dufoisd eee sfsdffsdfsd sd sd ds dsfsv sd dss ds ds ufiosdufi osdufsdfsd iofusdoifudu siofsdfids ofudsiouoi",
image: "/temp.jpg",
imageAlt: "text"
},
{
value: "thatPage",
title: "That Page",
handle: "Projekt 2",
href: "/potat2",
description: "random text",
image: "/temp.jpg",
imageAlt: "text"
},
{
value: "otherPage",
title: "Other Page",
handle: "Projekt 3",
href: "/kartoffeln",
description: "random text",
image: "/temp.jpg",
imageAlt: "text"
},
];

2
src/layouts/MainLayout.astro
View File

@@ -21,7 +21,7 @@ import "../style/index.css";
document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));});
</script>
<Navbar transition:persist/>
<div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth" transition:animate="slide">
<div class="bg-bkg h-dvh overflow-y-scroll snap-mandatory snap-y scroll-smooth " transition:animate="slide" style="scrollbar-width: thin;">
<slot />
</div>
</body>

7
src/layouts/MarkDownPostLayout.astro Normal file
View File

@@ -0,0 +1,7 @@
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>{frontmatter.autor}</p>
<slot />

2
src/layouts/SinglePage.astro
View File

@@ -1,4 +1,4 @@
<div class="snap-start w-screen h-screen overflow-clip pt-14">
<div class="snap-start h-screen overflow-clip pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"

15
src/pages/index.astro
View File

@@ -1,7 +1,18 @@
---
import { getLocaleByPath } from "astro:i18n";
import type { GetStaticPaths } from "astro";
import MainLayout from "../layouts/MainLayout.astro";
export const getStaticPaths = (() => {
return [
{params: {lang: "en"}},
{params: {lang: "cs"}},
{params: {lang: "de"}},
{params: {lang: "fr"}}
];
}) satisfies GetStaticPaths;
const { lang } = Astro.params
// Don't remove - redirects user to language version for the preffered language
if (Astro.preferredLocale) {
return Astro.redirect(`/${Astro.preferredLocale}/`);
@@ -9,7 +20,7 @@ if (Astro.preferredLocale) {
---
<MainLayout title="sitetitle" description="sitedescription" lang="en">
<MainLayout title="sitetitle" description="sitedescription" lang={lang}>
<h1>Welcome</h1>
<p>
You shouldn't be here. please continue to one of the following:

8
src/style/index.css
View File

@@ -42,16 +42,16 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-secondary: 273deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%;
--color-accent-red: 0deg, 84%, 60%;
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--input: 216 34% 17%;
--muted: 223 47% 11%;
--muted: 0 0% 15%;
--muted-foreground: 215.4 16.3% 56.9%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--card: 224 71% 4%;
--border: 9 20% 21%;
--card: 0 0% 15%;
--card-foreground: 213 31% 91%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;