feat: resume template

tools-nodejs/vighnesh153-astro/constants.ts

@@ -9,5 +9,7 @@ export const firebaseCollections = {
 const dayInMillis = 24 * 3600 * 1000;
 
 export const cacheTtlMillis = {
-  privateContent: 7 * dayInMillis,
+  // max allowed expiration is 7 days in firebase. So, keeping it 6 here so
+  // that we can have 1 day buffer
+  privateContent: 6 * dayInMillis,
 };

tools-nodejs/vighnesh153-astro/firebase-seed/auth_export/accounts.json

@@ -1 +1 @@
-{"kind":"identitytoolkit#DownloadAccountResponse","users":[{"localId":"ekAHm4gvpTBjoSmvINUnt638btaM","createdAt":"1734187406426","lastLoginAt":"1735374852879","displayName":"Vighnesh Raut","photoUrl":"https://i.imgur.com/npqtdBu.png","providerUserInfo":[{"providerId":"google.com","rawId":"5762999240917570257694699278672391745578","federatedId":"5762999240917570257694699278672391745578","displayName":"Vighnesh Raut","photoUrl":"https://i.imgur.com/npqtdBu.png","email":"vighnesh.raut13@gmail.com","screenName":"vighnesh153"}],"validSince":"1735458340","email":"vighnesh.raut13@gmail.com","emailVerified":true,"disabled":false,"lastRefreshAt":"2024-12-29T07:47:05.667Z"},{"localId":"iWtBCmoWRTXg6UTQCV7ncLJPxcNO","createdAt":"1734882413806","lastLoginAt":"1734882416118","displayName":"Pikachu","photoUrl":"https://i.imgur.com/npqtdBu.png","providerUserInfo":[{"providerId":"google.com","rawId":"7759237076568892792428913761032108656749","federatedId":"7759237076568892792428913761032108656749","displayName":"Pikachu","photoUrl":"https://i.imgur.com/npqtdBu.png","email":"pikachu@pokemon.com","screenName":"Pikachu"}],"validSince":"1735458340","email":"pikachu@pokemon.com","emailVerified":true,"disabled":false}]}
+{"kind":"identitytoolkit#DownloadAccountResponse","users":[{"localId":"ekAHm4gvpTBjoSmvINUnt638btaM","createdAt":"1734187406426","lastLoginAt":"1735716923977","displayName":"Vighnesh Raut","photoUrl":"https://i.imgur.com/npqtdBu.png","providerUserInfo":[{"providerId":"google.com","rawId":"5762999240917570257694699278672391745578","federatedId":"5762999240917570257694699278672391745578","displayName":"Vighnesh Raut","photoUrl":"https://i.imgur.com/npqtdBu.png","email":"vighnesh.raut13@gmail.com","screenName":"vighnesh153"}],"validSince":"1735716838","email":"vighnesh.raut13@gmail.com","emailVerified":true,"disabled":false,"lastRefreshAt":"2025-01-01T07:35:23.977Z"},{"localId":"iWtBCmoWRTXg6UTQCV7ncLJPxcNO","createdAt":"1734882413806","lastLoginAt":"1734882416118","displayName":"Pikachu","photoUrl":"https://i.imgur.com/npqtdBu.png","providerUserInfo":[{"providerId":"google.com","rawId":"7759237076568892792428913761032108656749","federatedId":"7759237076568892792428913761032108656749","displayName":"Pikachu","photoUrl":"https://i.imgur.com/npqtdBu.png","email":"pikachu@pokemon.com","screenName":"Pikachu"}],"validSince":"1735716838","email":"pikachu@pokemon.com","emailVerified":true,"disabled":false}]}

tools-nodejs/vighnesh153-astro/website/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@nanostores/solid": "^0.5.0",
     "@std/assert": "npm:@jsr/std__assert@^1.0.10",
+    "@std/random": "npm:@jsr/std__random@^0.1.0",
     "@vighnesh153/api": "npm:@jsr/vighnesh153__api@^0.1.4",
     "@vighnesh153/drawing-app": "0.4.9",
     "@vighnesh153/simple-code-to-html": "0.4.8",

tools-nodejs/vighnesh153-astro/website/src/components/resume/ResumeContainer.tsx

@@ -1,13 +1,65 @@
-import type { JSX } from "solid-js";
+import { createSignal, type JSX, onMount } from "solid-js";
+
+import { myPersonalizedEmail } from "@/utils";
+import { ResumeLink } from "./ResumeLink";
+
+const monthFormatter = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+});
+const ordinalSuffixes = new Map([
+  ["one", "st"],
+  ["two", "nd"],
+  ["few", "rd"],
+  ["other", "th"],
+]);
+const ordinalFormatter = new Intl.PluralRules("en-US", { type: "ordinal" });
 
 export function ResumeContainer(): JSX.Element {
+  const [date, setDate] = createSignal(new Date());
+
+  const formattedDate = () => {
+    const day = date().getDay();
+    const ordinal = ordinalSuffixes.get(ordinalFormatter.select(day));
+    const month = monthFormatter.format(date());
+    const year = date().getFullYear();
+
+    return `${day}${ordinal} ${month} ${year}`;
+  };
+
+  onMount(() => {
+    setDate(new Date());
+  });
+
   return (
-    <div class="w-full h-full bg-primary">
-      <h1>Vighnesh Raut</h1>
-      <p>Pikachu!</p>
-      <a href="https://vighnesh153.dev" class="underline text-[blue]">
-        My website
-      </a>
+    <div class="w-full h-full bg-[#f5e5e5] text-secondary flex flex-col">
+      {/* Header */}
+      <p class="pt-5 ml-auto pr-14 w-fit text-xs text-[#aaa] font-extralight">
+        Snapshot Taken on {formattedDate()}
+      </p>
+      <h1 class="mt-2 text-center text-5xl">Vighnesh Raut</h1>
+      <p class="mt-2 text-sm text-center">
+        Email:{" "}
+        <ResumeLink
+          href={`mailto:${myPersonalizedEmail}`}
+          text={myPersonalizedEmail}
+        />
+      </p>
+      <p class="mt-0 text-center text-sm">
+        <ResumeLink
+          href="https://vighnesh153.dev"
+          text="vighnesh153.dev"
+        />
+      </p>
+      <hr class="mt-2 border-[#999]" />
+
+      <div class="flex-grow flex [&>div]:pt-2 ">
+        <div class="resume-column-1 border-2 border-primary basis-1/3">
+          hello
+        </div>
+        <div class="resume-column-2 border-2 border-primary flex-grow">
+          hello
+        </div>
+      </div>
     </div>
   );
 }

tools-nodejs/vighnesh153-astro/website/src/components/resume/ResumeLink.tsx

@@ -0,0 +1,10 @@
+import type { JSX } from "solid-js";
+
+export type ResumeLinkProps = {
+  href: string;
+  text: string;
+};
+
+export function ResumeLink(props: ResumeLinkProps): JSX.Element {
+  return <a class="text-[royalblue]" href={props.href}>{props.text}</a>;
+}

tools-nodejs/vighnesh153-astro/website/src/pages/resume/index.astro

@@ -7,10 +7,10 @@ import { Button } from "@/components/buttons/Button.tsx";
 
 <ContentLayout>
   <div class="mt-32">
-    <div class="flex justify-end">
-      <Button variant="primary" id="btn-download-resume">Download</Button>
-    </div>
-    <div class="mt-6 flex justify-center">
+    <div class="w-full flex items-center flex-col gap-6">
+      <div class="">
+        <Button variant="primary" id="btn-download-resume">Download</Button>
+      </div>
       <div id="resume-container">
         <ResumeContainer />
       </div>

tools-nodejs/vighnesh153-astro/website/src/store/private_content.ts

@@ -1,5 +1,6 @@
+import { shuffle } from "@std/random";
 import ls from "localstorage-slim";
-import { milliseconds, not } from "@vighnesh153/tools";
+import { not } from "@vighnesh153/tools";
 
 import { invokeFirebaseFunction } from "@/utils/firebase_config";
 
@@ -85,7 +86,9 @@ function parsePrivateContent(
 
   const parsed = PrivateContent.safeParse(maybePrivateContent);
   if (parsed.success) {
-    return parsed.data;
+    return {
+      data: shuffle(parsed.data.data),
+    };
   }
   console.log("Failed to parse as private content:", maybePrivateContent);
   console.log("Parsing error:", parsed.error);

tools-nodejs/vighnesh153-astro/website/src/utils/content/emails.ts

@@ -1,3 +1,3 @@
-export const myPersonalizedEmail = "me@vighnesh153.dev";
+export const myPersonalizedEmail = "pikachu@vighnesh153.dev";
 export const myGmailEmail = "vighnesh.raut13@gmail.com";
 export const myGoogleEmail = "rvighnesh@google.com";