mostly
This commit is contained in:
Michael Freno
@@ -180,69 +180,79 @@ export function LeftBar() {
|
||||
<a href="/">Freno.dev</a>
|
||||
</h3>
|
||||
</Typewriter>
|
||||
<Typewriter keepAlive={false} class="z-50 h-full">
|
||||
<div class="text-text flex flex-col px-4 text-xl font-bold">
|
||||
<ul class="gap-4">
|
||||
{/* Recent blog posts */}
|
||||
<li class="mt-2 mb-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-lg font-semibold">Recent Posts</span>
|
||||
<div class="flex flex-col gap-3">
|
||||
<Show when={recentPosts()} fallback={<TerminalSplash />}>
|
||||
<For each={recentPosts()}>
|
||||
{(post) => (
|
||||
<a
|
||||
href={`/blog/${post.title}`}
|
||||
class="hover:text-subtext0 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<span>{post.title.replace(/_/g, " ")}</span>
|
||||
|
||||
<span class="text-subtext0 text-sm">
|
||||
{new Date(post.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric"
|
||||
})}
|
||||
<div class="text-text flex flex-col px-4 text-xl font-bold">
|
||||
<ul class="gap-4">
|
||||
{/* Recent blog posts */}
|
||||
<li class="mt-2 mb-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-lg font-semibold">Recent Posts</span>
|
||||
<div class="flex flex-col gap-3">
|
||||
<Show when={recentPosts()} fallback={<TerminalSplash />}>
|
||||
<For each={recentPosts()}>
|
||||
{(post) => (
|
||||
<a
|
||||
href={`/blog/${post.title}`}
|
||||
class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
|
||||
>
|
||||
<Typewriter class="flex flex-col" keepAlive={false}>
|
||||
<div class="relative overflow-hidden">
|
||||
<img
|
||||
src={post.banner_photo || "/blueprint.jpg"}
|
||||
alt="post-cover"
|
||||
class="float-right mb-1 ml-2 h-12 w-16 rounded object-cover"
|
||||
/>
|
||||
<span
|
||||
class="inline wrap-break-word hyphens-auto"
|
||||
style="hyphens: auto;"
|
||||
>
|
||||
{post.title.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<span class="text-subtext0 clear-both text-sm">
|
||||
{new Date(post.date).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric"
|
||||
})}
|
||||
</span>
|
||||
</Typewriter>
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="absolute bottom-12">
|
||||
<div class="flex flex-col gap-4">
|
||||
<ul class="gap-4">
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/blog">Blog</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#services">Services</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Right bar navigation merged for mobile */}
|
||||
<ul class="border-overlay0 gap-4 border-t pt-4 md:hidden">
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#home">Home</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#about">About</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#services">Services</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Typewriter keepAlive={false} class="absolute bottom-12">
|
||||
<div class="flex flex-col gap-4">
|
||||
<ul class="gap-4">
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/blog">Blog</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* Right bar navigation merged for mobile */}
|
||||
<ul class="border-overlay0 gap-4 border-t pt-4 md:hidden">
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#about">About</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Typewriter>
|
||||
</Typewriter>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -302,13 +312,13 @@ export function RightBar() {
|
||||
<div class="text-text flex h-screen flex-col justify-between px-4 py-10 text-xl font-bold">
|
||||
<ul class="gap-4">
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#home">Home</a>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#about">About</a>
|
||||
</li>
|
||||
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
|
||||
<a href="#services">Services</a>
|
||||
<a href="/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, createEffect, onCleanup } from "solid-js";
|
||||
import { Component, createSignal, onMount, onCleanup } from "solid-js";
|
||||
|
||||
interface CountdownCircleTimerProps {
|
||||
duration: number;
|
||||
@@ -6,23 +6,46 @@ interface CountdownCircleTimerProps {
|
||||
size: number;
|
||||
strokeWidth: number;
|
||||
colors: string;
|
||||
children: () => any;
|
||||
children: (time: number) => any;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
|
||||
const radius = (props.size - props.strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
|
||||
|
||||
const [remainingTime, setRemainingTime] = createSignal(
|
||||
props.initialRemainingTime
|
||||
);
|
||||
|
||||
// Calculate progress (0 to 1)
|
||||
const progress = () => props.initialRemainingTime / props.duration;
|
||||
const progress = () => remainingTime() / props.duration;
|
||||
const strokeDashoffset = () => circumference * (1 - progress());
|
||||
|
||||
onMount(() => {
|
||||
const interval = setInterval(() => {
|
||||
setRemainingTime((prev) => {
|
||||
const newTime = prev - 1;
|
||||
if (newTime <= 0) {
|
||||
clearInterval(interval);
|
||||
props.onComplete?.();
|
||||
return 0;
|
||||
}
|
||||
return newTime;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
onCleanup(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: `${props.size}px`,
|
||||
height: `${props.size}px`,
|
||||
height: `${props.size}px`
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
@@ -47,11 +70,11 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
|
||||
fill="none"
|
||||
stroke={props.colors}
|
||||
stroke-width={props.strokeWidth}
|
||||
stroke-dasharray={circumference}
|
||||
stroke-dashoffset={strokeDashoffset()}
|
||||
stroke-dasharray={`${circumference}`}
|
||||
stroke-dashoffset={`${strokeDashoffset()}`}
|
||||
stroke-linecap="round"
|
||||
style={{
|
||||
transition: "stroke-dashoffset 0.5s linear",
|
||||
transition: "stroke-dashoffset 0.5s linear"
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
@@ -61,10 +84,10 @@ const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
transform: "translate(-50%, -50%)"
|
||||
}}
|
||||
>
|
||||
{props.children()}
|
||||
{props.children(remainingTime())}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
59
src/components/RevealDropDown.tsx
Normal file
59
src/components/RevealDropDown.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { createSignal, JSX } from "solid-js";
|
||||
|
||||
export default function RevealDropDown(props: {
|
||||
title: string;
|
||||
children: JSX.Element;
|
||||
}) {
|
||||
const [isRevealed, setIsRevealed] = createSignal(false);
|
||||
|
||||
const toggleReveal = () => {
|
||||
setIsRevealed(!isRevealed());
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="border-surface0 relative mb-4 overflow-visible rounded-lg border">
|
||||
{/* Button Header */}
|
||||
<div
|
||||
class="bg-mantle flex cursor-pointer items-center justify-between p-3"
|
||||
onClick={toggleReveal}
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-600 dark:text-gray-300">
|
||||
{/* Life and lineage icon */}
|
||||
</span>
|
||||
<span class="font-medium">{props.title}</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
{/* Reveal Arrow */}
|
||||
<svg
|
||||
class={`h-5 w-5 transition-transform duration-200 ${
|
||||
isRevealed() ? "rotate-180" : ""
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reveal Content */}
|
||||
<div
|
||||
class={`absolute right-0 left-0 z-10 overflow-hidden transition-all duration-300 ease-in-out ${
|
||||
isRevealed() ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div class="bg-mantle p-4 shadow-lg dark:bg-gray-900">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function TerminalSplash() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="bg-base mx-auto flex min-h-full w-full flex-col items-center justify-center overflow-hidden">
|
||||
<div class="bg-base flex min-h-screen w-full flex-col items-center justify-center overflow-hidden">
|
||||
<div class="text-text max-w-3xl p-8 font-mono text-4xl whitespace-pre-wrap">
|
||||
<div class="flex items-center justify-center">
|
||||
{spinnerChars[showing()]}
|
||||
|
||||
Reference in New Issue
Block a user