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

Details XD

Browse Source
This commit is contained in:
Cyril Šebek 2024-04-16 11:28:35 +02:00
parent 82251d5272
commit 0befb1f4f1
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
8 changed files with 114 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LangSwitcher.jsx
View File

@ -34,7 +34,7 @@ export function LangSwitcher() {
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons["lang"] }} /> <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-56"> <DropdownMenuContent className="w-56">
<DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}> <DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>

2
src/components/NavButton.jsx
View File

@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
export function NavButton({selected, variant}) { export function NavButton({selected, variant}) {
return ( return (
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent" : "text-content")} dangerouslySetInnerHTML={{ __html: icons[variant] }} /> <Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
) )
} }

4
src/components/Showcase.astro
View File

@ -7,5 +7,7 @@ const { title, description } = dictionary[Astro.currentLocale];
--- ---
<SinglePage> <SinglePage>
<ShowcaseTabs client:load/> <div class="flex flex-col h-screen">
<ShowcaseTabs client:load />
</div>
</SinglePage> </SinglePage>

90
src/components/ShowcaseTabs.jsx
View File

@ -43,51 +43,51 @@ const data = [{
export function ShowcaseTabs() { export function ShowcaseTabs() {
return ( return (
<Tabs defaultValue={data[0].value} className="h-full"> <Tabs defaultValue={data[0].value} className="h-[87%] bottom-0 flex flex-col">
<div className="my-auto">
{data.map((item) => ( <div>
<TabsContent value={item.value} className=""> {data.map((item) => (
<Card className="h-full"> <TabsContent value={item.value} className="">
<CardHeader> <Card className="h-full">
<CardTitle>{item.title}</CardTitle> <CardHeader>
<CardDescription> <CardTitle>{item.title}</CardTitle>
{item.description} <CardDescription>
</CardDescription> {item.description}
</CardHeader> </CardDescription>
<CardContent> </CardHeader>
<Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}> <CardContent>
<CarouselContent> <Carousel className="w-full h-full" opts={{ align: "start", loop: "true" }}>
{item.images.map((image, index) => ( <CarouselContent>
<CarouselItem key={index}> {item.images.map((image, index) => (
<Card> <CarouselItem key={index}>
<CardContent className="flex aspect-square items-center justify-center p-6"> <Card>
<img src={image.src} alt={image.alt} /> <CardContent className="flex aspect-square items-center justify-center p-6">
</CardContent> <img src={image.src} alt={image.alt} />
</Card> </CardContent>
</CarouselItem> </Card>
))} </CarouselItem>
</CarouselContent> ))}
<div className="w-full pt-10 grid grid-cols-2 gap-4 "> </CarouselContent>
<div className="col-start-1 flex text-center justify-center w-full h-full"> <div className="w-full pt-10 grid grid-cols-2 gap-4 ">
<CarouselPrevious /> <div className="col-start-1 flex text-center justify-center w-full h-full">
</div> <CarouselPrevious />
<div className="col-start-2 flex justify-center"> </div>
<CarouselNext /> <div className="col-start-2 flex justify-center">
</div> <CarouselNext />
</div> </div>
</Carousel> </div>
</CardContent> </Carousel>
</Card> </CardContent>
</TabsContent> </Card>
)) </TabsContent>
} ))}
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}> {data.map((item) => (
{data.map((item) => ( <TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger> ))}
))} </TabsList>
</TabsList> </div>
</div>
</Tabs> </Tabs>
) )
} }

2
src/components/ThemeSelector.jsx
View File

@ -33,7 +33,7 @@ export function ThemeSelector() {
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} /> <Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-20"> <DropdownMenuContent className="w-20">
<DropdownMenuRadioGroup value={theme} onValueChange={newTheme}> <DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>

2
src/layouts/MainLayout.astro
View File

@ -3,7 +3,7 @@ const { title, description, lang, themeOverride } = Astro.props;
import { ViewTransitions } from 'astro:transitions'; import { ViewTransitions } from 'astro:transitions';
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
import "../style/globals.css"; //import "../style/globals.css";
--- ---
<!doctype html> <!doctype html>

71
src/style/globals.css
View File

@ -1,71 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}

62
src/style/index.css
View File

@ -1,6 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* /*
Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins
Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins
@ -14,6 +15,22 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;
--color-accent: 262deg, 73%, 47%; --color-accent: 262deg, 73%, 47%;
--color-accent-red: 0deg, 84%, 60%; --color-accent-red: 0deg, 84%, 60%;
--border: 214.3 31.8% 91.4%;
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--input: 214.3 31.8% 91.4%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -25,6 +42,21 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
--color-accent-red: 0deg, 84%, 60%; --color-accent-red: 0deg, 84%, 60%;
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--input: 216 34% 17%;
--muted: 223 47% 11%;
--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%;
--card-foreground: 213 31% 91%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
} }
} }
@ -36,6 +68,21 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
--color-accent-red: 0deg, 84%, 60%; --color-accent-red: 0deg, 84%, 60%;
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--input: 216 34% 17%;
--muted: 0 0% 15%;
--muted-foreground: 215.4 16.3% 56.9%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 9 20% 21%;
--card: 0 0% 15%;
--card-foreground: 213 31% 91%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
} }
:root[data-theme="theme_light"] { :root[data-theme="theme_light"] {
@ -46,5 +93,20 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;
--color-accent: 262deg, 73%, 47%; --color-accent: 262deg, 73%, 47%;
--color-accent-red: 0deg, 84%, 60%; --color-accent-red: 0deg, 84%, 60%;
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--input: 214.3 31.8% 91.4%;
--muted: 210 4% 85%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
} }
} }