~chrono/personal-website-alyx

6a43198e0ca150fab663ce48dbeb31e7daac23d1 — Chrono 4 months ago d0f62c4
update about page & disable politics page
5 files changed, 11 insertions(+), 78 deletions(-)

D components/AboutPage/Clock.tsx
M components/AboutPage/ProfileCard.tsx
D components/AboutPage/images.tsx
M components/Header/Header.tsx
M routes/_app.tsx
D components/AboutPage/Clock.tsx => components/AboutPage/Clock.tsx +0 -44
@@ 1,44 0,0 @@
import { Component } from "preact";

const timeOptions = {
  timeZone: "America/Indiana/Indianapolis",
  hour12: false,
  timeStyle: "medium" as const,
};

export default class Clock extends Component {
  timer: number | undefined;
  state: { time: number };
  constructor() {
    super();
    this.state = { time: Date.now() };
  }

  // Lifecycle: Called whenever our component is created
  componentDidMount() {
    // update time every second
    this.timer = setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  }

  // Lifecycle: Called just before our component will be destroyed
  componentWillUnmount() {
    // stop when not renderable
    clearInterval(this.timer);
  }

  render() {
    const time = new Date(this.state.time);

    const currentLocalTime = time.toLocaleString("en-US", timeOptions);
    const currentLocalHours = parseInt(currentLocalTime.split(":")[0]);
    const deltaFromUTC = time.getUTCHours() - currentLocalHours;

    return (
      <span>
        {currentLocalTime} ({"UTC-" + deltaFromUTC})
      </span>
    );
  }
}

M components/AboutPage/ProfileCard.tsx => components/AboutPage/ProfileCard.tsx +5 -1
@@ 1,6 1,10 @@
// import Clock from "./Clock.tsx";
import Clock from "../../islands/Clock.tsx";
import { ClockIcon, College, MapPin } from "./images.tsx";

// icons
import ClockIcon from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/clock.tsx";
import College from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/building.tsx";
import MapPin from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/map-pin.tsx";

const iconProps = {
  size: 24,

D components/AboutPage/images.tsx => components/AboutPage/images.tsx +0 -27
@@ 1,27 0,0 @@
// export const collegeSvg = (
//   <img
//     src="/svg/college.svg"
//     alt="college icon"
//     title={"College"}
//   />
// );
// export const locationSvg = (
//   <img
//     src="/svg/location.svg"
//     alt="location icon"
//     title={"Location"}
//   />
// );
// export const clockSvg = (
//   <img
//     src="/svg/clock.svg"
//     alt="clock icon"
//     title={"Local Time to Me"}
//   />
// );

import ClockIcon from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/clock.tsx";
import College from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/building.tsx";
import MapPin from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/map-pin.tsx";

export { ClockIcon, College, MapPin };

M components/Header/Header.tsx => components/Header/Header.tsx +4 -4
@@ 12,10 12,10 @@ export default function Header(
      title: "current & past projects",
      href: "/projects/",
    },
    {
      title: "political notes",
      href: "/positions/",
    },
    //    {
    //      title: "political notes",
    //      href: "/positions/",
    //    },
  ];

  return (

M routes/_app.tsx => routes/_app.tsx +2 -2
@@ 15,10 15,10 @@ export default function App({ Component }: PageProps) {
        style={{
          color: "#363f47",
          backgroundColor: "#e9debb",
          fontSize: "calc(0.63rem + 0.2vw)",
          // fontSize: "calc(0.63rem + 0.2vw)",
          lineHeight: "calc(calc(0.63rem + 2.2vw) * .6)",
        }}
        className="font-mono"
        className="font-mono md:test-sm"
      >
        <Component />
      </body>