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

Started work on the Hero section.

Browse Source
This commit is contained in:
Cyril Šebek 2024-04-02 21:04:11 +02:00
parent 44eabc1a09
commit 38bec6c326
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
9 changed files with 72 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Hero.astro Normal file
View File

@ -0,0 +1,11 @@
<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
<div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg">
<h1 class="text-4xl text-accent">Lorem Ipsum</h1>
<h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2>
</div>
<div class="bg-teal-200 col-start-1 col-end-7 row-start-1 row-end-7 z-10">
<img src="https://loremflickr.com/g/1500/1500/cat,girl/all?lock=132" alt="" class="object-cover h-full w-full">
</div>
<div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
</div>

10
src/components/Navbar.astro
View File

@ -3,21 +3,21 @@ import Navlink from "./Navlink.astro";
const links = [ const links = [
{ {
display: "Home", display: "Home",
icon: "H",
href: "/" href: "/"
}, { }, {
display: "Blog", display: "Blog",
icon: "B",
href: "/blog" href: "/blog"
}, { }, {
display: "About", display: "About",
icon: "A",
href: "/about" href: "/about"
}, {
display: "Contact",
href: "/contact"
} }
]; ];
--- ---
<nav class="bg-white w-full flex justify-center"> <nav class="w-full flex justify-center">
<div class="justify-around w-full md:w-[767px] flex"> <div class="justify-around w-full md:w-[767px] flex">
{ links.map((item) => (<Navlink href={item.href}, display={item.display}, icon={item.icon} isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) } { links.map((item) => (<Navlink href={item.href}, display={item.display}, isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
</div> </div>
</nav> </nav>

9
src/components/Navlink.astro
View File

@ -1,6 +1,11 @@
--- ---
import { getRelativeLocaleUrl } from "astro:i18n"; import { getRelativeLocaleUrl } from "astro:i18n";
const { display, href, icon, isActive } = Astro.props; const { display, href, isActive } = Astro.props;
--- ---
<a href={getRelativeLocaleUrl(Astro.currentLocale, href)} class={(isActive ? "bg-yellow-300 " : " ") + "w-full text-center"}><span class="hidden lg:visible">{icon}</span><span>{display}</span></a>
<a
href={getRelativeLocaleUrl(Astro.currentLocale, href)}
class={(isActive ? "bg-accent " : "bg-content hover:bg-primary ") + " w-full text-center mx-0.5"}
><span>{display}</span></a
>

8
src/layouts/MainLayout.astro
View File

@ -1,18 +1,18 @@
--- ---
const { title, description, lang } = Astro.props; const { title, description, lang, themeOverride } = Astro.props;
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang={lang}> <html lang={lang} data-theme={themeOverride ? themeOverride : undefined}>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content={description}> <meta name="description" content={description}>
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="bg-bkg"> <body class="bg-bkg h-dvh w-full">
<Navbar /> <!--<Navbar /> -->
<slot/> <slot/>
</body> </body>
</html> </html>

16
src/pages/[lang]/contact/index.astro Normal file
View File

@ -0,0 +1,16 @@
---
import MainLayout from "../../../layouts/MainLayout.astro";
//@ts-ignore
import { dictionary } from "../../../i18n/dictionary";
const { title, description } = dictionary[Astro.currentLocale];
export async function getStaticPaths() {
return ["en", "fr", "cs", "de"].map((lang) => {
return { params: { lang } };
});
}
---
<MainLayout title={title} description={description} lang={Astro.currentLocale}>
</MainLayout>

5
src/pages/[lang]/index.astro
View File

@ -1,5 +1,6 @@
--- ---
import MainLayout from "../../layouts/MainLayout.astro"; import MainLayout from "../../layouts/MainLayout.astro";
import Hero from "../../components/Hero.astro";
//@ts-ignore //@ts-ignore
import { dictionary } from "../../i18n/dictionary"; import { dictionary } from "../../i18n/dictionary";
@ -11,6 +12,6 @@ export async function getStaticPaths() {
}); });
} }
--- ---
<MainLayout title={title} description={description} lang={Astro.currentLocale}> <MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="">
<Hero />
</MainLayout> </MainLayout>

10
src/pages/index.astro
View File

@ -12,8 +12,12 @@ if (Astro.preferredLocale) {
<MainLayout title="sitetitle" description="sitedescription" lang="en"> <MainLayout title="sitetitle" description="sitedescription" lang="en">
<h1>Welcome</h1> <h1>Welcome</h1>
<p> <p>
"homeP1" You shouldn't be here. please continue to one of the following:
{Astro.url.toString()}
{getLocaleByPath("en")}
</p> </p>
<ul>
<li><a href="/en">English Version / English</a></li>
<li><a href="/cs">Czech Version / Česky</a></li>
<li><a href="/de">German Version [WIP] / Deutsch [laufende Arbeiten]</a></li>
<li><a href="/fr">French Version [WIP] / Français [travail en cours]</a></li>
</ul>
</MainLayout> </MainLayout>

8
src/style/index.css
View File

@ -3,7 +3,7 @@
@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-000224-ffe500&fonts=Poppins-Poppins Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-000568-ffe500&fonts=Poppins-Poppins
*/ */
@layer base { @layer base {
:root { :root {
@ -19,7 +19,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-bkg: 0deg, 0%, 6%; --color-bkg: 0deg, 0%, 6%;
--color-content: 240deg, 4%, 91%; --color-content: 240deg, 4%, 91%;
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 237deg, 100%, 7ˇ; --color-secondary: 237deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
} }
} }
@ -28,7 +28,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-bkg: 0deg, 0%, 6%; --color-bkg: 0deg, 0%, 6%;
--color-content: 240deg, 4%, 91%; --color-content: 240deg, 4%, 91%;
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 237deg, 100%, 7ˇ; --color-secondary: 237deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
} }
@ -36,7 +36,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-bkg: 0deg, 0%, 94%; --color-bkg: 0deg, 0%, 94%;
--color-content: 240deg, 4%, 9%; --color-content: 240deg, 4%, 9%;
--color-primary: 54deg, 100%, 50%; --color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 20%;
--color-accent: 262deg, 73%, 47%; --color-accent: 262deg, 73%, 47%;
} }
} }

19
tailwind.config.mjs
View File

@ -1,14 +1,23 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
function withOpacity(variableName) {
return ({ opacityValue }) => {
if (opacityValue !== undefined) {
return `hsla(var(${variableName}), ${opacityValue})`
}
return `hsl(var(${variableName}))`
}
}
export default { export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: { extend: {
colors: { colors: {
bkg: 'hsl(var(--color-bkg))', bkg: withOpacity('--color-bkg'),
content: 'hsl(var(--color-content))', content: withOpacity('--color-content'),
primary: 'hsl(var(--color-primary))', primary: withOpacity('--color-primary'),
secondary: 'hsl(var(--color-secondary))', secondary: withOpacity('--color-secondary'),
accent: 'hsl(var(--color-accent))', accent: withOpacity('--color-accent'),
}, },
}, },
}, },