Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change design #50

Merged
merged 2 commits into from
Jan 23, 2025
Merged

change design #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
234ec08
change design
hummusonrails Jan 23, 2025
08ce624
update presentation view
hummusonrails Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/static/images/about_image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/static/images/header.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 42 additions & 34 deletions src/components/Card.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,56 @@ interface Astro {

const {title, description, imgSrc, href} = Astro.props;
---
<div class="md max-w-[544px] p-4 md:w-1/2">
<div class:list={`${imgSrc && 'h-full'} overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}>
{imgSrc &&
(href ? (
<Link href={href} aria-label={`Link to ${title}`}>
<Image
alt={title}
src={imgSrc}
class="object-cover object-center md:h-36 lg:h-48"
width={544}
height={306}
/>
</Link>
) : (
<div class="md w-full p-4 md:w-1/2">
<div class="retro-container h-full">
{imgSrc && (
href ? (
<Link href={href} aria-label={`Link to ${title}`}>
<Image
alt={title}
src={imgSrc}
class="object-cover object-center md:h-36 lg:h-48"
width={544}
height={306}
alt={title}
src={imgSrc || "/placeholder.svg"}
class="border border-terminal-green"
width={544}
height={306}
/>
))}
<div class="p-6">
<h2 class="mb-3 text-2xl font-bold leading-8 tracking-tight">
</Link>
) : (
<Image
alt={title}
src={imgSrc || "/placeholder.svg"}
class="border border-terminal-green"
width={544}
height={306}
/>
)
)}
<div class="p-4">
<pre class="ascii-divider">
==================
</pre>

<h2 class="mb-3 text-xl font-mono">
{href ? (
<Link href={href} aria-label={`Link to ${title}`}>
{title}
</Link>
<Link href={href} aria-label={`Link to ${title}`} class="retro-link">
> {title}
</Link>
) : (
title
<span>> {title}</span>
)}
</h2>
<p class="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>

<p class="mb-3 font-mono text-terminal-dim">{description}</p>

{href && (
<Link
href={href}
class="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`Link to ${title}`}
>
Learn more &rarr;
</Link>
<Link
href={href}
class="retro-link"
aria-label={`Link to ${title}`}
>
[ACCESS FILE]
</Link>
)}
</div>
</div>
</div>

41 changes: 26 additions & 15 deletions src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,33 @@ import {SITE_METADATA} from '@/consts'

import Link from "./Link.astro";
---

<footer>
<div class="mt-16 flex flex-col items-center">
<div class="mb-3 flex space-x-4">
<SocialIcon kind="mail" href={`mailto:${SITE_METADATA.email}`} size={6}/>
<SocialIcon kind="github" href={SITE_METADATA.github} size={6}/>
<SocialIcon kind="linkedin" href={SITE_METADATA.linkedin} size={6}/>
<SocialIcon kind="twitter" href={SITE_METADATA.twitter} size={6}/>
<SocialIcon kind="substack" href={SITE_METADATA.substack} size={6}/>
<footer class="retro-container mt-16">
<pre class="ascii-divider">
____________________
| SYSTEM FOOTER |
|____________________|
</pre>

<div class="flex flex-col items-center gap-4">
<div class="flex gap-4">
<a href={`mailto:${SITE_METADATA.email}`} class="retro-link">[MAIL]</a>
<a href={SITE_METADATA.github} class="retro-link">[GITHUB]</a>
<a href={SITE_METADATA.linkedin} class="retro-link">[LINKEDIN]</a>
<a href={SITE_METADATA.twitter} class="retro-link">[TWITTER]</a>
<a href={SITE_METADATA.youtube} class="retro-link">[YOUTUBE]</a>
<a href={SITE_METADATA.substack} class="retro-link">[SUBSTACK]</a>
</div>
<div class="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
<Link href="/about">{SITE_METADATA.author}</Link>
<div>{` • `}</div>
<div>{`© ${new Date().getFullYear()}`}</div>
<div>{` • `}</div>
<Link href="/">Actualizing Developer Happiness</Link>

<pre class="text-terminal-dim">
==================================
| {SITE_METADATA.author} © {new Date().getFullYear()} |
==================================
</pre>

<div class="flex gap-2 text-sm font-mono">
<a href="/about" class="retro-link">ABOUT</a>
<span class="text-terminal-dim">|</span>
<a href="/" class="retro-link">HOME</a>
</div>
</div>
</footer>
76 changes: 41 additions & 35 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,57 @@ import MobileNav from "./MobileNav.astro";
import ThemeSwitcher from "./ThemeSwitcher.astro";
---

<header class="flex items-center justify-between py-10">
<div>
<a href="/" aria-label={SITE_METADATA.headerTitle}>
<div class="flex items-center justify-between">
<header class="retro-container mb-8">
<pre class="ascii-divider">
___________________
| SYSTEM MENU |
|___________________|
</pre>

<div class="flex items-center justify-between py-4">
<a href="/" aria-label={SITE_METADATA.headerTitle} class="retro-link no-underline">
<div class="flex items-center">
<div class="mr-3">
<Logo/>
</div>
{typeof SITE_METADATA.headerTitle === 'string' ? (
<div class="hidden h-6 text-2xl font-semibold sm:block">
{SITE_METADATA.headerTitle}
</div>
<div class="hidden h-6 text-2xl font-mono sm:block">
> {SITE_METADATA.headerTitle}
</div>
) : (
SITE_METADATA.headerTitle
)}
</div>
</a>
</div>
<div class="flex items-center leading-5 space-x-4 sm:space-x-6">
{NAVIGATION
.filter((link) => link.href !== '/')
.map((link) => (
<HeaderLink
href={link.href}
class="hidden sm:block font-medium text-gray-900 dark:text-gray-100"
>
{link.title}
</HeaderLink>
))}

<div class="flex items-center gap-4">
<nav class="hidden sm:flex gap-4">
{NAVIGATION
.filter((link) => link.href !== '/')
.map((link) => (
<a href={link.href} class="retro-link">
[{link.title}]
</a>
))}
</nav>

<form action="/search" method="GET" class="flex">
<input
type="text"
name="q"
placeholder="Ask the blog a question..."
class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-l-md"
/>
<button
type="submit"
class="px-4 py-2 bg-primary-500 text-white rounded-r-md"
>
Search
</button>
</form>
<form action="/search" method="GET" class="flex">
<input
type="text"
name="q"
placeholder="SEARCH://"
class="px-4 py-2 bg-terminal-black border border-terminal-green text-terminal-green font-mono focus:border-terminal-bright focus:outline-none"
/>
<button
type="submit"
class="retro-button"
>
[EXECUTE]
</button>
</form>

<ThemeSwitcher />
<MobileNav/>
<ThemeSwitcher />
<MobileNav/>
</div>
</div>
</header>
116 changes: 90 additions & 26 deletions src/components/MobileNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,55 @@
import Link from "./Link.astro";
import {NAVIGATION} from '@/consts';
---
<button aria-label="Toggle Menu" class="sm:hidden toggle-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="text-gray-900 dark:text-gray-100 h-8 w-8">
<path fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"/>
</svg>

<button aria-label="Toggle Menu" class="sm:hidden toggle-menu retro-button">
<pre class="text-terminal-green">
_____
|_____|
|_____|
|_____|
</pre>
</button>

<div id="mobileMenuContainer"
class="translate-x-full fixed left-0 top-0 z-10 h-full w-full transform opacity-95 dark:opacity-[0.98] bg-white duration-300 ease-in-out dark:bg-gray-950">
class="translate-x-full fixed left-0 top-0 z-10 h-full w-full transform bg-terminal-black border-r border-terminal-green duration-300 ease-in-out">
<div class="flex justify-end">
<button class="mr-8 mt-11 h-8 w-8 toggle-menu" aria-label="Toggle Menu">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="text-gray-900 dark:text-gray-100"
>
<path fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"/>
</svg>
<button class="mr-8 mt-11 h-8 w-8 toggle-menu retro-button" aria-label="Toggle Menu">
<pre class="text-terminal-green">
X X
X X
X
X X
X X
</pre>
</button>
</div>
<nav class="fixed mt-8 h-full">

<nav class="fixed mt-8 h-full w-full">
<pre class="ascii-divider px-12">
/====================\
| MAIN MENU |
\====================/
</pre>

{NAVIGATION.map(({href, title}) => (
<div class="px-12 py-4">
<Link href={href} class="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100">
{title}
</Link>
</div>
<div class="px-12 py-4 border-b border-terminal-dim last:border-0">
<Link
href={href}
class="retro-link text-2xl tracking-widest block hover:bg-terminal-green hover:text-terminal-black transition-colors"
>
{title}
</Link>
</div>
))}

<pre class="ascii-divider px-12 mt-8">
[END OF MENU]
=============
</pre>
</nav>
</div>


<script>
const mobileToggleButton = document.querySelectorAll('.toggle-menu');
const mobileMenuContainer = document.getElementById('mobileMenuContainer');
Expand All @@ -51,5 +64,56 @@ import {NAVIGATION} from '@/consts';
mobileMenuContainer.classList.toggle('translate-x-full', !isNavHidden);
mobileMenuContainer.classList.toggle('translate-x-0', isNavHidden);
document.body.style.overflow = isNavHidden ? 'hidden' : '';

// Add terminal boot-up animation when opening
if (isNavHidden) {
const links = mobileMenuContainer.querySelectorAll('a');
links.forEach((link, index) => {
setTimeout(() => {
link.style.opacity = '1';
link.textContent = `> ${link.textContent}`;
}, index * 100);
});
}
}
</script>

<style>
.toggle-menu pre {
line-height: 1;
transition: all 0.3s ease;
}

.toggle-menu:hover pre {
color: var(--terminal-bright);
}

#mobileMenuContainer {
background: linear-gradient(
to bottom,
var(--terminal-black) 0%,
rgba(0, 20, 0, 0.99) 100%
);
}

#mobileMenuContainer a {
opacity: 0;
transition: all 0.3s ease;
}

#mobileMenuContainer.translate-x-0 {
animation: bootUp 0.5s ease-out;
}

@keyframes bootUp {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
Loading