new landing

andrioid · Sep 8, 2024 · 72d8c43 · 72d8c43
1 parent dd1fad0
commit 72d8c43
Show file tree

Hide file tree

Showing 12 changed files with 368 additions and 346 deletions.
diff --git a/css/global.css b/css/global.css
@@ -29,7 +29,7 @@ a.link {
   }
 }
 .topmenu li {
-  @apply bg-sky-700 rounded-md p-2 text-white bg-opacity-80 hover:bg-white hover:text-sky-900;
+  @apply bg-sky-700 rounded-md p-2 text-white bg-opacity-80 hover:bg-white hover:text-sky-900 font-semibold;
 }
 
 .btn {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
@@ -28,7 +28,6 @@ const ogImage = blogPost ? `/blog/${blogPost.slug}.png` : undefined;
 		<meta name="description" content={description} />
 		<meta name="og:description" content={description} />
 		<meta name="author" content={site.author} />
-		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link
 			rel="alternate"
 			type="application/rss+xml"

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -4,7 +4,9 @@ import andratar from "../../static/img/coffee-art.jpg";
 import NavItem from "./NavItem.astro";
 ---
 
-<nav class="flex items-center justify-between flex-wrap bg-blue-700 p-6">
+<nav
+	class="flex items-center justify-between flex-wrap bg-gradient-to-b from-andri to-black p-6 w-full"
+>
 	<a href="/" class="">
 		<div class="flex items-center flex-shrink-0 text-white mr-6">
 			<Image
@@ -18,9 +20,9 @@ import NavItem from "./NavItem.astro";
 		</div>
 	</a>
 
-	<div class="block flex-grow text-right">
+	<ul class="flex space-x-y topmenu gap-2">
 		<NavItem href="/">Home</NavItem>
 		<NavItem href="/blog/">Blog</NavItem>
 		<NavItem href="/rss.xml">RSS</NavItem>
-	</div>
+	</ul>
 </nav>
diff --git a/src/components/NavItem.astro b/src/components/NavItem.astro
@@ -2,9 +2,8 @@
 const { href } = Astro.props;
 ---
 
-<a
-	{href}
-	class="mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4"
->
-	<slot />
-</a>
+<li>
+	<a {href}>
+		<slot />
+	</a>
+</li>
diff --git a/src/components/PagesLayout.astro b/src/components/PagesLayout.astro
@@ -3,7 +3,7 @@ import Nav from "./Nav.astro";
 import "../../css/global.css";
 ---
 
-<div class="font-sans">
+<div class="font-sans w-full m-0">
 	<Nav />
 	<div><slot /></div>
 </div>
diff --git a/src/pages/_cmp/contact-dialog.astro b/src/pages/_cmp/contact-dialog.astro
@@ -1,5 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
 	children: HTMLElement;
@@ -12,35 +13,55 @@ const props = Astro.props;
 <div id="contact-button"><slot /></div>
 <div
 	id="contact-dialog"
-	class="space-x-0 w-full h-dvh md:w-auto md:h-auto p-6 bg-white text-black rounded-md shadow-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 fixed z-10 drop-shadow-lg border border-gray-300"
+	class={twMerge(
+		"hidden md:min-w-[40em] w-full h-full md:w-auto md:h-auto p-6 bg-white text-black rounded-md shadow-md drop-shadow-lg border border-gray-300 text-base",
+		"top-0 left-0 md:-translate-x-1/2 md:-translate-y-1/2 md:top-1/2 md:left-1/2 fixed z-10"
+	)}
 >
-	<div class="flex flex-row justify-end text-base mb-4" role="button">
+	<div class="flex flex-row justify-between text-base mb-8" role="button">
+		<h3 class="text-xl font-semibold">Contact Andri</h3>
 		<button id="contact-close"><Icon name="tabler:x" /></button>
 	</div>
+	<div class="flex flex-col text-base">
+		<label for="contact-email" class="font-semibold text-sm">E-mail</label>
+		<input
+			id="contact-email"
+			class="border rounded-md"
+			type="email"
+			placeholder="Your email address"
+		/>
+		<label for="contact-textarea" class="font-semibold text-sm"
+			>Message</label
+		>
+		<textarea
+			id="contact-textarea"
+			class="w-full h-[10em] border rounded-md"></textarea>
+		<button class="mt-6 rounded-md bg-andri text-white py-1 px-2"
+			>Send</button
+		>
+	</div>
 
-	<h3 class="text-xl">dialog component</h3>
-</div>
-
-<script>
-	(() => {
-		const dialog = document.querySelector(
-			"#contact-dialog"
-		) as HTMLDivElement;
-		const dialogButton = document.querySelector("#contact-button");
-		const closeButton = document.querySelector("#contact-close");
-		if (!dialogButton || !dialog) {
-			console.warn("Couldn't find dialog elements");
-			return;
-		}
+	<script>
+		(() => {
+			const dialog = document.querySelector(
+				"#contact-dialog"
+			) as HTMLDivElement;
+			const dialogButton = document.querySelector("#contact-button");
+			const closeButton = document.querySelector("#contact-close");
+			if (!dialogButton || !dialog) {
+				console.warn("Couldn't find dialog elements");
+				return;
+			}
 
-		console.log("dialog", dialog);
-		console.log("button", dialogButton);
+			console.log("dialog", dialog);
+			console.log("button", dialogButton);
 
-		dialogButton?.addEventListener("click", () => {
-			dialog.classList.remove("hidden");
-		});
-		closeButton?.addEventListener("click", () => {
-			dialog.classList.add("hidden");
-		});
-	})();
-</script>
+			dialogButton?.addEventListener("click", () => {
+				dialog.classList.remove("hidden");
+			});
+			closeButton?.addEventListener("click", () => {
+				dialog.classList.add("hidden");
+			});
+		})();
+	</script>
+</div>
diff --git a/src/pages/_cmp/skill-overview.astro b/src/pages/_cmp/skill-overview.astro
@@ -23,31 +23,33 @@ const { dt } = Astro.props;
 			))
 		}
 	</ul>
-	{
-		dt.map((skill, index) => (
-			<ul
-				id={skill.id}
-				class={twMerge(
-					"hidden flex-wrap justify-center gap-x-4 gap-y-4 mt-8",
-					`target:flex`
-				)}
-			>
-				{skill.keywords.map((k) => (
-					<li
-						class={twMerge(
-							"group relative flex flex-row items-center md:text-lg px-3 py-1 rounded-full bg-sky-100 text-sky-800",
-							k.score > 1 && "cursor-help"
-						)}
-					>
-						<SkillIcon className="mr-2" skill={k} /> {k.name}
-						{k.score > 1 && (
-							<div class="invisible group-hover:visible z-10 drop-shadow-md bg-pink-600 text-white font-bold rounded-full text-xs -bottom-2 -right-2 absolute px-2">
-								{`${k.score}+ years`}
-							</div>
-						)}
-					</li>
-				))}
-			</ul>
-		))
-	}
+	<div class="h-[10em]">
+		{
+			dt.map((skill, index) => (
+				<ul
+					id={skill.id}
+					class={twMerge(
+						"hidden flex-wrap justify-center gap-x-4 gap-y-4 mt-8",
+						`target:flex`
+					)}
+				>
+					{skill.keywords.map((k) => (
+						<li
+							class={twMerge(
+								"group relative flex flex-row items-center md:text-lg px-3 py-1 rounded-full bg-sky-100 text-sky-800",
+								k.score > 1 && "cursor-help"
+							)}
+						>
+							<SkillIcon className="mr-2" skill={k} /> {k.name}
+							{k.score > 1 && (
+								<div class="invisible group-hover:visible z-10 drop-shadow-md bg-pink-600 text-white font-bold rounded-full text-xs -bottom-2 -right-2 absolute px-2">
+									{`${k.score}+ years`}
+								</div>
+							)}
+						</li>
+					))}
+				</ul>
+			))
+		}
+	</div>
 </div>