4 files changed, 65 insertions(+), 15 deletions(-)

M components/AboutPage/Clock.tsx
M components/AboutPage/ProfileCard.tsx
M fresh.gen.ts
A islands/Clock.tsx

@@ 8,7 8,7 @@ const timeOptions = {
 
 export default class Clock extends Component {
   timer: number | undefined;
-  state: { time: number } | { time: Date };
+  state: { time: number };
   constructor() {
     super();
     this.state = { time: Date.now() };


@@ 36,9 36,9 @@ export default class Clock extends Component {
     const deltaFromUTC = time.getUTCHours() - currentLocalHours;
 
     return (
-      <li className="row-end-3">
+      <span>
         {currentLocalTime} ({"UTC-" + deltaFromUTC})
-      </li>
+      </span>
     );
   }
 }

@@ 1,6 1,12 @@
-// import Clock from "../../islands/Clock.tsx";
-import Clock from "./Clock.tsx";
-import { clockSvg, collegeSvg, locationSvg } from "./images.tsx";
+// import Clock from "./Clock.tsx";
+import Clock from "../../islands/Clock.tsx";
+import { ClockIcon, College, MapPin } from "./images.tsx";
+
+const iconProps = {
+  size: 24,
+  color: "#f0f0f0",
+  stroke: 1.75,
+};
 
 export default function ProfileCard() {
   return (


@@ 9,7 15,6 @@ export default function ProfileCard() {
       style={{
         background: "rgba(10, 8, 0, 0.70)",
         color: "#f0f0f0",
-        // minWidth: "",
         borderRadius: "0.8rem",
         border: "6.45px solid #2b2b2b",
         padding: "25px",


@@ 34,20 39,32 @@ export default function ProfileCard() {
       </div>
       <style>
         {`
-.profile-card li {
+#profile-card-text {
   height: 30px;
   line-height: 30px;
 }
       `}
       </style>
-      <div className="grid grid-rows-3 max-w-lg text-sm list-none whitespace-nowrap">
-        <div className="row-end-1">{collegeSvg}</div>
-        <li className="row-end-1">
+      <div className="grid grid-rows-3 max-w-lg whitespace-nowrap">
+        <div className="row-end-1 w-8">
+          <div className="m-1">
+            {College(iconProps)}
+          </div>
+        </div>
+        <span className="row-end-1">
           Indiana University Indianapolis
-        </li>
-        <div className="row-end-2">{locationSvg}</div>
-        <li className="row-end-2">Greater Indianapolis, IN, USA</li>
-        <div className="row-end-3">{clockSvg}</div>
+        </span>
+        <div className="row-end-2 w-8">
+          <div className="m-1">
+            {MapPin(iconProps)}
+          </div>
+        </div>
+        <span className="row-end-2">Indianapolis, IN, USA</span>
+        <div className="row-end-3 w-8">
+          <div className="m-1">
+            {ClockIcon(iconProps)}
+          </div>
+        </div>
         <Clock />
       </div>
     </div>

@@ 13,6 13,7 @@ import * as $positions_slug_ from "./routes/positions/[slug].tsx";
 import * as $posts from "./routes/posts.tsx";
 import * as $posts_slug_ from "./routes/posts/[slug].tsx";
 import * as $projects from "./routes/projects.tsx";
+import * as $Clock from "./islands/Clock.tsx";
 import * as $DiscordLink from "./islands/DiscordLink.tsx";
 import * as $MarkdownBlock from "./islands/MarkdownBlock.tsx";
 import * as $SplashTextDisplay from "./islands/SplashTextDisplay.tsx";


@@ 34,6 35,7 @@ const manifest = {
     "./routes/projects.tsx": $projects,
   },
   islands: {
+    "./islands/Clock.tsx": $Clock,
     "./islands/DiscordLink.tsx": $DiscordLink,
     "./islands/MarkdownBlock.tsx": $MarkdownBlock,
     "./islands/SplashTextDisplay.tsx": $SplashTextDisplay,

@@ 0,0 1,31 @@
+import { useSignal } from "@preact/signals";
+import { useCallback, useEffect } from "preact/hooks";
+
+const timeOptions = {
+  timeZone: "America/Indiana/Indianapolis",
+  hour12: false,
+  timeStyle: "medium" as const,
+};
+
+export default function Countdown() {
+  const now = useSignal(new Date());
+
+  const updateTime = useCallback(() => {
+    now.value = new Date();
+  }, [now]);
+
+  useEffect(() => {
+    const timer = setInterval(updateTime, 1000);
+    return () => clearInterval(timer);
+  }, [updateTime]);
+
+  const currentLocalTime = now.value.toLocaleString("en-US", timeOptions);
+  const currentLocalHours = parseInt(currentLocalTime.split(":")[0]);
+  const deltaFromUTC = now.value.getUTCHours() - currentLocalHours;
+
+  return (
+    <span>
+      {currentLocalTime} ({"UTC-" + deltaFromUTC})
+    </span>
+  );
+}