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 = [
{
display: "Home",
icon: "H",
href: "/"
}, {
display: "Blog",
icon: "B",
href: "/blog"
}, {
display: "About",
icon: "A",
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">
{ 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>
</nav>

9
src/components/Navlink.astro
View File

@ -1,6 +1,11 @@
---
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 "../style/index.css";
---
<!DOCTYPE html>
<html lang={lang}>
<html lang={lang} data-theme={themeOverride ? themeOverride : undefined}>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content={description}>
<title>{title}</title>
</head>
<body class="bg-bkg">
<Navbar />
<body class="bg-bkg h-dvh w-full">
<!--<Navbar /> -->
<slot/>
</body>
</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 Hero from "../../components/Hero.astro";
//@ts-ignore
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>

10
src/pages/index.astro
View File

@ -12,8 +12,12 @@ if (Astro.preferredLocale) {
<MainLayout title="sitetitle" description="sitedescription" lang="en">
<h1>Welcome</h1>
<p>
"homeP1"
{Astro.url.toString()}
{getLocaleByPath("en")}
You shouldn't be here. please continue to one of the following:
</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>

8
src/style/index.css
View File

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

19
tailwind.config.mjs
View File

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