alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add colors and logo

Browse Source
This commit is contained in:
Alex Lebens
2025-07-23 20:30:50 -05:00
parent e820e4f163
commit 9f346ee156
9 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/directus.ts
View File

@@ -9,6 +9,7 @@ type Global = {
email: string;
portrait: string;
portrait_alt: string;
logo: string;
about: string;
};

19
src/components/Footer.astro
View File

@@ -59,16 +59,15 @@ const socialLinks = [
<div class="col-span-1 md:col-span-3">
<a href="/" class="group inline-block">
<div class="flex items-center">
<div
class="relative flex h-10 w-10 transform items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-600 shadow-lg transition-transform dark:from-zinc-200 dark:to-zinc-400"
>
<span
class="theme-transition-all text-xl font-bold text-zinc-100 duration-300 dark:text-zinc-900"
>
{global.initals}
</span>
<div class="absolute inset-0"></div>
<div class="mx-auto aspect-square overflow-hidden rounded-lg">
<img
src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
alt="logo"
class="max-h-[40px] max-w-[40px] object-cover"
loading="eager"
/>
</div>
<span
class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
>
@@ -112,7 +111,7 @@ const socialLinks = [
<!-- Quick links -->
<div class="col-span-1 md:col-span-3">
<h3
class="theme-transition-color relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
class="theme-transition-color after:bg-turquoise dark:after:bg-turquoise relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-zinc-100"
>
Navigation
</h3>

14
src/components/Navigation.astro
View File

@@ -25,7 +25,19 @@ const currentPath = pathname.slice(1);
>
<div class="mx-auto flex max-w-3xl items-center justify-between px-4">
<!-- Logo -->
<a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">{global.initals}</a>
<a
href="/"
class="from-midnight to-turquoise relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br text-xl shadow-lg transition-transform"
>
<div class="mx-auto aspect-square overflow-hidden rounded-lg">
<img
src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
alt="logo"
class="max-h-[40px] max-w-[40px] object-cover"
loading="eager"
/>
</div>
</a>
<!-- Desktop navigation -->
<nav class="hidden items-center space-x-6 sm:flex">

2
src/components/ThemeToggle.astro
View File

@@ -5,7 +5,7 @@
<button
id="theme-toggle"
data-theme-toggle
class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
class="group hover:bg-desert/50 dark:hover:bg-midnight/50 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:focus:ring-zinc-700"
aria-label="Toggle dark mode"
>
<div class="relative z-10 flex h-5 w-5 items-center justify-center">

13
src/pages/about.astro
View File

@@ -57,12 +57,10 @@ const skills = await directus.request(
<h2
class="theme-transition-color mb-6 flex items-center justify-center text-2xl font-bold text-zinc-900 sm:mb-8 sm:text-3xl md:justify-start dark:text-zinc-100"
>
<span
class="theme-transition-bg mr-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
<span class="theme-transition-bg bg-turquoise mr-4 hidden h-1 w-8 sm:inline-block sm:w-12"
></span>
About Me
<span
class="theme-transition-bg ml-4 hidden h-1 w-8 bg-zinc-300 sm:inline-block sm:w-12 dark:bg-zinc-700"
<span class="theme-transition-bg bg-turquoise ml-4 hidden h-1 w-8 sm:inline-block sm:w-12"
></span>
</h2>
@@ -119,7 +117,7 @@ const skills = await directus.request(
<div class="theme-transition-bg relative h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 sm:h-2 dark:bg-zinc-700">
<div
class="progress-bar-animate theme-transition-bg absolute top-0 left-0 h-full rounded-full bg-gradient-to-r from-zinc-700 via-zinc-600 to-zinc-800 transition-all duration-1000 dark:from-zinc-300 dark:via-zinc-400 dark:to-zinc-200"
class="progress-bar-animate theme-transition-bg from-turquoise via-bermuda to-turquoise absolute top-0 left-0 h-full rounded-full bg-gradient-to-r transition-all duration-1000"
style={`width: ${skill.level}%`}
/>
</div>
@@ -162,7 +160,7 @@ const skills = await directus.request(
<div class="group">
<a
href=`mailto:${global.email}`
class="theme-transition-all inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors group-hover:bg-blue-600 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:bg-blue-600 dark:group-hover:text-zinc-100"
class="theme-transition-all group-hover:bg-turquoise inline-flex items-center justify-center rounded-lg bg-zinc-900 px-6 py-3 text-base font-medium text-zinc-100 transition-colors duration-300 group-hover:text-zinc-100 sm:px-8 sm:py-4 sm:text-lg dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:text-zinc-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -180,9 +178,6 @@ const skills = await directus.request(
</svg>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">Say Hello</span>
<span
class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-100 transition-all duration-300 group-hover:w-full"
></span>
</span>
</a>
</div>

4
src/pages/blog/index.astro
View File

@@ -92,7 +92,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">Read article</span>
<span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
<span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
</span>
<svg
viewBox="0 0 16 16"
@@ -212,7 +212,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">Read article</span>
<span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
<span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
</span>
<svg
viewBox="0 0 16 16"

4
src/pages/index.astro
View File

@@ -37,7 +37,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
<span class="relative inline-block">
selfhosting.
<span
class="theme-transition-bg absolute -bottom-1 left-0 h-1 w-full origin-left transform bg-zinc-800 dark:bg-zinc-200"
class="theme-transition-bg bg-turquoise absolute -bottom-1 left-0 h-1 w-full origin-left transform"
></span>
</span>
</span>
@@ -156,7 +156,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">Read article</span>
<span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
<span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
</span>
<svg
viewBox="0 0 16 16"

4
src/pages/tags/[tag].astro
View File

@@ -103,7 +103,7 @@ const relatedTags = [
<span class="absolute -bottom-1 left-0 h-1 w-full bg-zinc-200 dark:bg-zinc-700"
></span>
<span
class="animate-expand absolute -bottom-1 left-0 h-1 w-full bg-zinc-900 opacity-70 dark:bg-zinc-100"
class="animate-expand bg-turquoise absolute -bottom-1 left-0 h-1 w-full opacity-70"
></span>
</span>
</h1>
@@ -214,7 +214,7 @@ const relatedTags = [
>
<span class="relative inline-block overflow-hidden">
<span class="relative z-10">Read article</span>
<span class="absolute bottom-0 left-0 h-0.5 w-0 bg-zinc-800 transition-all duration-300 group-hover:w-full dark:bg-zinc-200" />
<span class="bg-turquoise absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full" />
</span>
<svg
viewBox="0 0 16 16"

2
src/styles/global.css
View File

@@ -10,7 +10,7 @@
--color-turquoise: #0da797;
--color-bermuda: #7fbab4;
--color-desert: #f9deb2;
--color-bronze: #9ef75e;
--color-bronze: #9e7f5e;
}
@layer base {