chore: Cleaned up code, adjusted header margin
d87bc086
4 file(s) · +5 −50
| 1 | - | import React, { useState, useEffect } from "react"; |
|
| 2 | - | ||
| 3 | - | interface DecryptingTextProps { |
|
| 4 | - | text: string; |
|
| 5 | - | className?: string; |
|
| 6 | - | } |
|
| 7 | - | ||
| 8 | - | const characters = |
|
| 9 | - | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?"; |
|
| 10 | - | ||
| 11 | - | export function DecryptingText({ text, className = "" }: DecryptingTextProps) { |
|
| 12 | - | const [decryptedText, setDecryptedText] = useState(""); |
|
| 13 | - | ||
| 14 | - | useEffect(() => { |
|
| 15 | - | const totalDuration = 1500; // 1.5 seconds |
|
| 16 | - | const intervalDuration = 30; // Update every 30ms |
|
| 17 | - | const steps = totalDuration / intervalDuration; |
|
| 18 | - | ||
| 19 | - | let step = 0; |
|
| 20 | - | const intervalId = setInterval(() => { |
|
| 21 | - | if (step < steps) { |
|
| 22 | - | setDecryptedText( |
|
| 23 | - | text |
|
| 24 | - | .split("") |
|
| 25 | - | .map((char, index) => { |
|
| 26 | - | if (index < (step / steps) * text.length) { |
|
| 27 | - | return char; |
|
| 28 | - | } |
|
| 29 | - | return characters[Math.floor(Math.random() * characters.length)]; |
|
| 30 | - | }) |
|
| 31 | - | .join(""), |
|
| 32 | - | ); |
|
| 33 | - | step++; |
|
| 34 | - | } else { |
|
| 35 | - | clearInterval(intervalId); |
|
| 36 | - | setDecryptedText(text); |
|
| 37 | - | } |
|
| 38 | - | }, intervalDuration); |
|
| 39 | - | ||
| 40 | - | return () => clearInterval(intervalId); |
|
| 41 | - | }, [text]); |
|
| 42 | - | ||
| 43 | - | return <span className={`font-mono ${className}`}>{decryptedText}</span>; |
|
| 44 | - | } |
| 32 | 32 | ||
| 33 | 33 | </script> |
|
| 34 | 34 | ||
| 35 | - | <header id="main-header" class="group relative mb-28 flex items-center justify-between sm:pl-[4.5rem]"> |
|
| 35 | + | <header id="main-header" class="group relative mb-14 sm:mb-28 flex items-center justify-between sm:pl-[4.5rem]"> |
|
| 36 | 36 | <div class="flex sm:flex-col"> |
|
| 37 | 37 | <a |
|
| 38 | 38 | href="/" |
|
| 42 | 42 | > |
|
| 43 | 43 | ||
| 44 | 44 | <svg |
|
| 45 | - | key="0" |
|
| 46 | 45 | class="mr-3 h-10 w-6 sm:pb-4 sm:absolute sm:left-[-4.5rem] sm:mr-0 sm:h-20 sm:w-12" |
|
| 47 | 46 | fill="none" |
|
| 48 | 47 | stroke="currentColor" |
|
| 16 | 16 | ||
| 17 | 17 | <PageLayout meta={{ title: "Home" }}> |
|
| 18 | 18 | <section> |
|
| 19 | - | <DecryptingHeader text="Hey There!" className="title pb-6" /> |
|
| 19 | + | <DecryptingHeader text="Hey there!" className="title pb-6" /> |
|
| 20 | 20 | <p class="mb-4"> |
|
| 21 | 21 | My name is Steve. I'm a DX Engineer and creator with a desire to |
|
| 22 | 22 | help build the future of the web. My latest project is <a |
| 24 | 24 | const { page, uniqueTags } = Astro.props; |
|
| 25 | 25 | ||
| 26 | 26 | const meta = { |
|
| 27 | - | title: "Posts", |
|
| 28 | - | description: "A collection of posts by me for an Asto starter theme", |
|
| 27 | + | title: "Blog", |
|
| 28 | + | description: "Posts by Steve", |
|
| 29 | 29 | }; |
|
| 30 | 30 | ||
| 31 | 31 | const paginationProps = { |
|
| 45 | 45 | --- |
|
| 46 | 46 | ||
| 47 | 47 | <PageLayout meta={meta}> |
|
| 48 | - | <DecryptingHeader text="Posts" className="title mb-6" /> |
|
| 48 | + | <DecryptingHeader text="Blog" className="title mb-6" /> |
|
| 49 | 49 | <div class="grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8"> |
|
| 50 | 50 | <section aria-label="Blog post list"> |
|
| 51 | 51 | <ul class="space-y-8 text-left"> |
|