+ 
+ 
+-
-
+
{humanize(author)} diff --git a/src/layouts/components/AuthorCard.astro b/src/layouts/components/AuthorCard.astro deleted file mode 100644 index 3a30ac1..0000000 --- a/src/layouts/components/AuthorCard.astro +++ /dev/null @@ -1,30 +0,0 @@ ---- -import { plainify } from "@/lib/utils/textConverter"; -import ImageMod from "./ImageMod.astro"; -import Social from "./Social.astro"; - -const { data } = Astro.props; -const { title, image, social } = data.data; ---- - - diff --git a/src/layouts/components/BlogCard.astro b/src/layouts/components/BlogCard.astro index 7d1390b..ee1761e 100644 --- a/src/layouts/components/BlogCard.astro +++ b/src/layouts/components/BlogCard.astro @@ -33,7 +33,7 @@ const { title, image, date, author, categories } = data.data; -
-
+
{humanize(author)} diff --git a/src/layouts/shortcodes/AsteroidViewer.tsx b/src/layouts/shortcodes/AsteroidViewer.tsx new file mode 100644 index 0000000..ac9d55b --- /dev/null +++ b/src/layouts/shortcodes/AsteroidViewer.tsx @@ -0,0 +1,426 @@ +import React, { useEffect, useRef, useState } from "react"; + +// Asteroid 33662 Tacescu orbital elements from JPL SBDB API +const TACESCU = { + epoch: 2461000.5, + a: 2.45, + e: 0.106, + i: 7.05, + om: 144, + w: 145, + ma: 272, +}; + +const TIME_SPEEDS = [ + { label: "1 Day", value: 1 }, + { label: "1 Week", value: 7 }, + { label: "1 Month", value: 30 }, + { label: "1 Year", value: 365 }, +]; + +// Planet colors (standard astronomical colors) +const PLANET_COLORS: Record (null); + const simRef = useRef (null); + const [isPlaying, setIsPlaying] = useState(true); + const [speed, setSpeed] = useState(7); + const [currentDate, setCurrentDate] = useState(new Date()); + const [dateInput, setDateInput] = useState(""); + const [distances, setDistances] = useState({ earth: 0, sun: 0 }); + const [showScrollHint, setShowScrollHint] = useState(false); + const [simReady, setSimReady] = useState(false); + const animationRef = useRef (null); + const scrollHintTimeoutRef = useRef (null); + + useEffect(() => { + if (!containerRef.current) return; + + let isMounted = true; + let distanceInterval: number | null = null; + + const initSpacekit = async () => { + const Spacekit = await import("spacekit.js"); + + if (!isMounted || !containerRef.current) return; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const sim = new (Spacekit as any).Simulation(containerRef.current, { + basePath: "https://typpo.github.io/spacekit/src", + startDate: new Date(), + startPaused: true, // We control time manually + camera: { + initialPosition: [0, -5, 2.5], + }, + debug: { + showStats: false, + }, + }); + + simRef.current = sim; + + // Sun - stationary at center + sim.createSphere("Sun", { + position: [0, 0, 0], + radius: PLANET_RADII.Sun, + color: PLANET_COLORS.Sun, + labelText: "Sun", + }); + + // Inner planets with spheres + sim.createSphere("Mercury", { + ephem: Spacekit.EphemPresets.MERCURY, + radius: PLANET_RADII.Mercury, + color: PLANET_COLORS.Mercury, + labelText: "Mercury", + }); + sim.createSphere("Venus", { + ephem: Spacekit.EphemPresets.VENUS, + radius: PLANET_RADII.Venus, + color: PLANET_COLORS.Venus, + labelText: "Venus", + }); + const earth = sim.createSphere("Earth", { + ephem: Spacekit.EphemPresets.EARTH, + radius: PLANET_RADII.Earth, + color: PLANET_COLORS.Earth, + labelText: "Earth", + }); + sim.createSphere("Mars", { + ephem: Spacekit.EphemPresets.MARS, + radius: PLANET_RADII.Mars, + color: PLANET_COLORS.Mars, + labelText: "Mars", + }); + + // Outer planets with spheres + sim.createSphere("Jupiter", { + ephem: Spacekit.EphemPresets.JUPITER, + radius: PLANET_RADII.Jupiter, + color: PLANET_COLORS.Jupiter, + labelText: "Jupiter", + }); + sim.createSphere("Saturn", { + ephem: Spacekit.EphemPresets.SATURN, + radius: PLANET_RADII.Saturn, + color: PLANET_COLORS.Saturn, + labelText: "Saturn", + }); + sim.createSphere("Uranus", { + ephem: Spacekit.EphemPresets.URANUS, + radius: PLANET_RADII.Uranus, + color: PLANET_COLORS.Uranus, + labelText: "Uranus", + }); + sim.createSphere("Neptune", { + ephem: Spacekit.EphemPresets.NEPTUNE, + radius: PLANET_RADII.Neptune, + color: PLANET_COLORS.Neptune, + labelText: "Neptune", + }); + sim.createSphere("Pluto", { + ephem: Spacekit.EphemPresets.PLUTO, + radius: PLANET_RADII.Pluto, + color: PLANET_COLORS.Pluto, + labelText: "Pluto", + }); + + // Asteroid 33662 Tacescu + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const asteroidEphem = new (Spacekit as any).Ephem(TACESCU, "deg"); + const asteroid = sim.createSphere("33662 Tacescu", { + ephem: asteroidEphem, + radius: PLANET_RADII.Asteroid, + color: PLANET_COLORS.Asteroid, + labelText: "33662 Tacescu", + }); + + // Add ecliptic drop lines to show inclination + const orbit = asteroid.getOrbit(); + if (orbit) { + const eclipticLines = orbit.getLinesToEcliptic(); + sim.getScene().add(eclipticLines); + } + + // Update distances periodically + const updateDistances = () => { + if (!isMounted) return; + try { + const now = sim.getDate(); + const asteroidPos = asteroid.getPosition(now); + const earthPos = earth.getPosition(now); + const sunDist = Math.sqrt( + asteroidPos[0] ** 2 + asteroidPos[1] ** 2 + asteroidPos[2] ** 2, + ); + const earthDist = Math.sqrt( + (asteroidPos[0] - earthPos[0]) ** 2 + + (asteroidPos[1] - earthPos[1]) ** 2 + + (asteroidPos[2] - earthPos[2]) ** 2, + ); + setDistances({ earth: earthDist, sun: sunDist }); + setCurrentDate(now); + } catch { + // Positions not ready yet + } + }; + + distanceInterval = window.setInterval(updateDistances, 1000); + updateDistances(); + + // Mark simulation as ready to trigger animation + if (isMounted) { + setSimReady(true); + } + }; + + initSpacekit(); + + return () => { + isMounted = false; + if (distanceInterval) { + clearInterval(distanceInterval); + } + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }, []); + + // Animation loop for time controls + useEffect(() => { + if (!isPlaying || !simReady || !simRef.current) return; + + let lastTime = 0; + + const animate = (currentTime: number) => { + const sim = simRef.current; + if (!sim) return; + + if (lastTime === 0) { + lastTime = currentTime; + animationRef.current = requestAnimationFrame(animate); + return; + } + + const deltaMs = currentTime - lastTime; + lastTime = currentTime; + + // Days per second equals the speed value (1 day/sec for speed=1, 7 days/sec for speed=7, etc.) + const daysPerSecond = speed; + const daysToAdvance = (deltaMs / 1000) * daysPerSecond; + + const currentJd = sim.getJd(); + sim.setJd(currentJd + daysToAdvance); + animationRef.current = requestAnimationFrame(animate); + }; + + animationRef.current = requestAnimationFrame(animate); + + return () => { + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + } + }; + }, [isPlaying, speed, simReady]); + + // Handle scroll wheel - require Ctrl key for zooming + useEffect(() => { + const container = containerRef.current; + if (!container) return; + + const handleWheel = (e: WheelEvent) => { + if (!e.ctrlKey) { + // Show hint when scrolling without Ctrl + setShowScrollHint(true); + + // Clear existing timeout + if (scrollHintTimeoutRef.current) { + clearTimeout(scrollHintTimeoutRef.current); + } + + // Hide hint after 2 seconds + scrollHintTimeoutRef.current = window.setTimeout(() => { + setShowScrollHint(false); + }, 2000); + + // Stop event from reaching spacekit so it doesn't zoom + e.stopPropagation(); + // Don't prevent default - allow page scroll + return; + } + + // Ctrl is pressed - handle zoom manually with reversed direction + e.preventDefault(); + e.stopPropagation(); + + const sim = simRef.current; + if (!sim) return; + + // Get the camera and manually adjust zoom with reversed direction + const camera = sim.getViewer()?.camera; + if (camera) { + // Reverse the delta: positive deltaY (scroll down) = zoom in, negative = zoom out + const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; + camera.position.multiplyScalar(zoomFactor); + } + }; + + // Use capture phase to intercept before spacekit's Three.js controls + container.addEventListener("wheel", handleWheel, { + passive: false, + capture: true, + }); + + return () => { + container.removeEventListener("wheel", handleWheel, { capture: true }); + if (scrollHintTimeoutRef.current) { + clearTimeout(scrollHintTimeoutRef.current); + } + }; + }, []); + + const handleStep = (direction: number) => { + if (!simRef.current) return; + const sim = simRef.current; + sim.setJd(sim.getJd() + direction * speed); + }; + + const handleDateSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!simRef.current || !dateInput) return; + const date = new Date(dateInput); + if (!isNaN(date.getTime())) { + simRef.current.setDate(date); + setDateInput(""); + } + }; + + const formatDate = (date: Date) => { + return date.toISOString().split("T")[0]; + }; + + return ( + + + + {/* Time Controls */} ++ ); +} diff --git a/src/layouts/shortcodes/FloatImage.tsx b/src/layouts/shortcodes/FloatImage.tsx new file mode 100644 index 0000000..7d21a0b --- /dev/null +++ b/src/layouts/shortcodes/FloatImage.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +interface FloatImageProps { + src: string; + alt: string; + side?: "left" | "right"; + width?: string; + children: React.ReactNode; +} + +const FloatImage = ({ + src, + alt, + side = "left", + width = "50%", + children, +}: FloatImageProps) => { + const floatClass = + side === "left" ? "float-left mr-6 mb-4" : "float-right ml-6 mb-4"; + + return ( +++ + {/* Info Overlay */} ++ + + + + ++ + +++ + {/* Scroll Hint */} + {showScrollHint && ( +33662 Tacescu+Earth Distance: {distances.earth.toFixed(3)} AU+Sun Distance: {distances.sun.toFixed(3)} AU+{formatDate(currentDate)} UTC+++ )} ++ Press Ctrl + scroll to zoom ++++ ); +}; + +export default FloatImage; diff --git a/src/layouts/shortcodes/ImageGallery.astro b/src/layouts/shortcodes/ImageGallery.astro new file mode 100644 index 0000000..db09885 --- /dev/null +++ b/src/layouts/shortcodes/ImageGallery.astro @@ -0,0 +1,94 @@ +--- +import ImageMod from "@/components/ImageMod.astro"; +import { + Swiper, + SwiperButtonNext, + SwiperButtonPrev, + SwiperPagination, + SwiperSlide, + SwiperWrapper, +} from "astro-swiper"; + +interface Image { + src: string; + alt?: string; + caption?: string; +} + +interface Props { + images: Image[]; + autoplay?: boolean; + loop?: boolean; + height?: string; +} + +const { images, autoplay = false, loop = true, height = "400px" } = Astro.props; + +const galleryId = `gallery-${Math.random().toString(36).substring(2, 9)}`; + +const swiperOptions = { + spaceBetween: 16, + loop, + ...(autoplay && { + autoplay: { + delay: 3000, + disableOnInteraction: true, + }, + }), + navigation: { + nextEl: `.${galleryId}-next`, + prevEl: `.${galleryId}-prev`, + }, + pagination: { + el: `.${galleryId}-pagination`, + type: "bullets" as const, + clickable: true, + dynamicBullets: false, + }, +}; +--- + ++
{children}++diff --git a/src/lib/utils/dateFormat.ts b/src/lib/utils/dateFormat.ts index 9b960d5..a5d603b 100755 --- a/src/lib/utils/dateFormat.ts +++ b/src/lib/utils/dateFormat.ts @@ -1,12 +1,33 @@ -import { format } from "date-fns"; - +/** + * Formats a date using UTC values to avoid timezone shifting issues. + * YAML dates like "2015-05-02" are parsed as UTC midnight, so we use + * UTC timezone to display the intended date regardless of local timezone. + */ const dateFormat = ( date: Date | string, - pattern: string = "dd MMM, yyyy", + pattern: string = "MMM d, yyyy", ): string => { - const dateObj = new Date(date); - const output = format(dateObj, pattern); - return output; + const d = typeof date === "string" ? new Date(date) : date; + + const formatter = new Intl.DateTimeFormat("en-US", { + timeZone: "UTC", + day: pattern.includes("dd") ? "2-digit" : "numeric", + month: pattern.includes("MMMM") ? "long" : "short", + year: "numeric", + }); + + const parts = formatter.formatToParts(d); + const get = (type: string) => parts.find((p) => p.type === type)?.value ?? ""; + + const tokens: Record+ ++ {images.map((image) => ( + ++ + ))} +++++ {image.caption && ( ++ + {image.caption} +
+ )} ++++ + ++ + ++ { - image && ( + image && show_image !== false && (({ - params: { - single: author.id, - }, - props: { author }, - })); - return paths; -} - -const { author } = Astro.props; -const { title, social, meta_title, description, image } = author.data; -const { Content } = await render(author); - -// get all posts by author -const BLOG_FOLDER = "blog"; -const posts = await getSinglePage(BLOG_FOLDER); -const postFilterByAuthor = posts.filter( - (post) => slugify(post.data.author) === slugify(title), -); ---- - - - - - diff --git a/src/pages/authors/index.astro b/src/pages/authors/index.astro deleted file mode 100755 index 925fb1a..0000000 --- a/src/pages/authors/index.astro +++ /dev/null @@ -1,31 +0,0 @@ ---- -import AuthorCard from "@/components/AuthorCard.astro"; -import Base from "@/layouts/Base.astro"; -import { getListPage, getSinglePage } from "@/lib/contentParser.astro"; -import PageHeader from "@/partials/PageHeader.astro"; - -const authorIndex = await getListPage("authors", "-index"); - -if (authorIndex.data.draft) { - return Astro.redirect("/404"); -} - -const authors = await getSinglePage("authors"); ---- - ----- -- { - image && ( --- ) - } - {title}
---- - - { - postFilterByAuthor.map((post) => ( ---- )) - } -- - - - - diff --git a/src/pages/awards/[single].astro b/src/pages/awards/[single].astro index 017d692..da0b509 100644 --- a/src/pages/awards/[single].astro +++ b/src/pages/awards/[single].astro @@ -1,6 +1,7 @@ --- import Base from "@/layouts/Base.astro"; import { getSinglePage } from "@/lib/contentParser.astro"; +import dateFormat from "@/lib/utils/dateFormat"; import { markdownify } from "@/lib/utils/textConverter"; import { render } from "astro:content"; import type { GetStaticPaths } from "astro"; @@ -21,8 +22,16 @@ interface Props { const { award } = Astro.props; const { Content } = await render(award); -const { title, meta_title, description, image, date, categories, tags } = - award.data; +const { + title, + meta_title, + description, + image, + date, + categories, + tags, + show_image, +} = award.data; ------ { - authors.map((author) => ( ---- )) - } -- { - image && ( + image && show_image && ( - { - date && ( - - {new Date(date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - })} - - ) - } + {date && {dateFormat(date, "MMMM d, yyyy")}} { categories && categories.length > 0 && ( diff --git a/src/pages/index.astro b/src/pages/index.astro index 30e73c1..a247029 100755 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -113,30 +113,21 @@ const { mosaic, aboutme, featured_projects, recent_posts } = homepage.data; { aboutme.video?.enable && ( -) } diff --git a/src/pages/projects/[single].astro b/src/pages/projects/[single].astro index 4cc6900..510c7d8 100644 --- a/src/pages/projects/[single].astro +++ b/src/pages/projects/[single].astro @@ -1,6 +1,7 @@ --- import Base from "@/layouts/Base.astro"; import { getSinglePage } from "@/lib/contentParser.astro"; +import dateFormat from "@/lib/utils/dateFormat"; import { markdownify } from "@/lib/utils/textConverter"; import { render } from "astro:content"; import type { GetStaticPaths } from "astro"; @@ -21,7 +22,7 @@ interface Props { const { project } = Astro.props; const { Content } = await render(project); -const { title, meta_title, description, image, date, categories, tags } = +const { title, meta_title, description, image, date, categories, tags, show_image } = project.data; --- @@ -36,7 +37,7 @@ const { title, meta_title, description, image, date, categories, tags } =+
{aboutme.video.title}
- ++ +{ - image && ( + image && show_image && ( - {new Date(date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - })} + {dateFormat(date, "MMMM d, yyyy")} ) } diff --git a/src/styles/components.css b/src/styles/components.css index 0e348b6..e9f681d 100755 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1,3 +1,10 @@ +/* clearfix for float layouts */ +.clearfix::after { + content: ""; + display: table; + clear: both; +} + /* section style */ .section { @apply py-24 xl:py-28; diff --git a/src/styles/generated-theme.css b/src/styles/generated-theme.css index 7fad710..f71a150 100644 --- a/src/styles/generated-theme.css +++ b/src/styles/generated-theme.css @@ -18,12 +18,12 @@ /* === Darkmode Colors === */ --color-darkmode-primary: #fff; --color-darkmode-body: #1c1c1c; - --color-darkmode-border: #3e3e3e; + --color-darkmode-border: #3E3E3E; --color-darkmode-light: #222222; --color-darkmode-dark: #fff; - --color-darkmode-text: #b4afb6; + --color-darkmode-text: #B4AFB6; --color-darkmode-text-dark: #fff; - --color-darkmode-text-light: #b4afb6; + --color-darkmode-text-light: #B4AFB6; /* === Font Families === */ --font-primary: Heebo, sans-serif;
-
-
+
+
+
+## 2013 Ultimate Ascent
+
+As my first real robot I've ever designed, this one holds a special place in my heart. It has a frame made out of 8020 Aluminum extrusion with 4 omni-directional "swerve" wheel modules, giving this robot the capability of moving in any direction on a 2d plane! Although this robot didn't win any awards, it is my favorite over the years. It competed as a part of the [2013 FRC Ultimate Ascent challenge](https://en.wikipedia.org/wiki/Ultimate_Ascent).
+
+
+
+
+
+
+