✨ v1.0.0-alpha to staging

Author: EightBitByte

README.md

@@ -1,4 +1,4 @@
-> portfolio-next
+> portfolio-next v1.0.0-alpha
 
 Rebuilding [my website](https://jacobmoy.com) in Next.js to do some more 
 cool stuff!
@@ -10,7 +10,7 @@ cool stuff!
     - [ ] Design new mobile-friendly tag filter
   - [ ] Blog post
 - [ ] Move theme and achievements to a hamburger menu button in toolbar for mobile 
-- [ ] Add CI/CD for staging
+- [X] Add CI/CD for staging
 
 #### Strech/Misc.
 - [ ] Add hobbies/niche projects
@@ -22,3 +22,6 @@ cool stuff!
 
 ### KNOWN BUGS
 - [ ] Footnote hyperlinks aren't working (thanks remark-gfm)
+- [ ] Achievements hide content in the drawer and are unclickable in drawer
+- [ ] The light mode theme box does not appear correctly in dark mode drawer
+- [ ] Sometimes secret achievements count towards "Completionist" achievement

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
     "@types/mdx": "^2.0.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -29,7 +30,8 @@
     "rehype-unwrap-images": "^1.0.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.6",

pnpm-lock.yaml

@@ -32,14 +32,14 @@ export default async function Page({ params }: {
   const components = getMDXComponents({});
 
   return (
-    <main className="max-w-3xl m-auto">
+    <main className="md:max-w-3xl w-full px-8 m-auto">
       <BlogPostTracker postId={idx}/>
       <h1
-        className={`${post.title.length <= 20 ? "text-4xl" : "text-3xl"} font-bold dark:text-zinc-300`}
+        className={`${post.title.length <= 20 ? "text-4xl" : "text-3xl"} font-bold text-foreground`}
       >
         {post.title}
       </h1>
-      <h2 className="text-xl mb-2 dark:text-zinc-400">
+      <h2 className="text-xl mb-2 text-foreground/60">
         {post.date} • {post.author}
       </h2>
       <MDXRemote
@@ -55,7 +55,7 @@ export default async function Page({ params }: {
       {(prev || next) && (
         <BlogFooter prevSlug={prev?.slug} nextSlug={next?.slug} />
       )}
-      <p className="mb-2 text-zinc-500 dark:text-zinc-400">
+      <p className="mb-2 text-foreground/60">
         jacobmoy.com • {new Date().getFullYear()}
       </p>
     </main>

src/app/blog/posts/[slug]/page.tsx

@@ -49,20 +49,21 @@ into Google Calendar. After formatting it, it looked like this:
 <img
   src="/ai-schedule-screenshot.webp"
   className="m-auto rounded-lg"
+  alt="A screenshot of a Google Calendar schedule created by an AI."
 />
 
 # Putting the Schedule into Practice
 On one of the days I did not have class, I decided to follow along with it.
 
-<iframe 
-  width="560" 
-  height="315" 
-  src="https://www.youtube.com/embed/9jv_4zpgoe4" 
-  title="YouTube video player" 
-  referrerPolicy="norel" 
-  allowFullScreen
-  className="m-auto my-4 rounded-lg"
-/>
+<div className="relative my-4 h-0 pb-[56.25%] max-w-full">
+  <iframe
+    className="absolute left-0 top-0 h-full w-full rounded-lg"
+    src="https://www.youtube.com/embed/9jv_4zpgoe4"
+    title="YouTube video player"
+    allowFullScreen
+    referrerPolicy="no-referrer"
+  />
+</div>
 
 # Conclusions
 `tl;dr`: I really enjoyed the schedule it made for me. I never felt like I was 

src/app/content/ai-schedule.mdx

@@ -25,6 +25,7 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-selected: var(--selected);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -137,6 +138,7 @@ body {
   --rarity-epic: var(--color-purple-700);
   --rarity-legendary: var(--color-yellow-600);
   --flavor: var(--color-yellow-600);
+  --selected: var(--color-green-600)
 }
 
 .dark {
@@ -172,6 +174,7 @@ body {
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.552 0.016 285.938);
   --divider: #8f8f8f;
+  --selected: var(--color-green-700);
 }
 
 .latte, .mocha {
@@ -185,6 +188,7 @@ body {
   --popover-foreground: var(--color-ctp-text);
   --normal-bg: var(--color-ctp-base);
   --normal-border: var(--color-surface0);
+  --muted: var(--color-ctp-surface0)
 }
 
 .mocha {
@@ -194,6 +198,7 @@ body {
   --rarity-epic: var(--color-ctp-mauve-800);
   --rarity-legendary: var(--color-ctp-peach-800);
   --flavor: var(--color-ctp-blue-500);
+  --selected: var(--color-ctp-blue-500);
 }
 
 .latte {
@@ -203,6 +208,7 @@ body {
   --rarity-epic: var(--color-ctp-mauve-300);
   --rarity-legendary: var(--color-ctp-yellow-300);
   --flavor: var(--color-ctp-rosewater-500);
+  --selected: var(--color-ctp-rosewater-500);
 }
 
 .habamax {
@@ -238,6 +244,9 @@ body {
   --rarity-epic: var(--color-habamax-fuschia);
   --rarity-legendary: var(--color-habamax-yellow);
   --flavor: var(--color-habamax-blue);
+  --selected: var(--color-habamax-blue);
+
+  --muted: #313131;
 }
 
 @layer base {

src/app/globals.css

@@ -38,9 +38,11 @@ export default function RootLayout({
         >
           <ShopProvider>
           <AchievementsProvider numPosts={posts.getNumPosts()}>
-            <Toolbar />
-            <ThemeToggle />
-            <AchievementButton/>
+            <Toolbar/>
+            <div className="hidden md:block">
+              <ThemeToggle />
+              <AchievementButton/>
+            </div>
             <main className="flex flex-col flex-grow">
               {children}
             </main>

src/app/layout.tsx

@@ -15,6 +15,6 @@ export function ToasterProvider() {
   const sonnerTheme = theme === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
 
   return (
-    <Toaster theme={sonnerTheme as "light" | "dark" | "system"} richColors />
+    <Toaster theme={sonnerTheme as "light" | "dark" | "system"} richColors closeButton/>
   );
 }

src/components/toaster-provider.tsx

@@ -1,18 +1,33 @@
 import type { AchievementInfo } from "@/utils/achievement-handler";
-import { BadgeCent } from "lucide-react";
+import { BadgeCent, X } from "lucide-react";
 import { AchievementIcon } from "./achievement";
 import { cn } from "@/utils/utils";
+import { Button } from "./button";
+import { toast } from "sonner";
 
 interface AchievementUnlockToastProps {
   info: AchievementInfo;
+  id: string | number;
 }
 
 
 export default function AchievementUnlockToast({ 
-  info 
+  info,
+  id,
 } : AchievementUnlockToastProps) {
   return (
-    <div className="flex flex-row gap-2 w-full items-center">
+    <div 
+      className="flex flex-row gap-2 max-w-full min-w-fit items-center 
+                 bg-background border border-border p-4 rounded-md
+                 md:w-lg" 
+      style={{ fontFamily: 'var(--font-karla)' }}>
+      <Button 
+        className="absolute top-2 right-2" 
+        variant="outline"
+        size="icon"
+        onClick={() => {toast.dismiss(id)}}>
+        <X/>
+      </Button>
       <div className={cn(
         `w-12 h-12 rounded-md flex items-center justify-center flex-shrink-0`,
         info.rarity === "COMMON" && `bg-rarity-common`,

src/components/ui/achievement-unlock-toast.tsx

@@ -31,7 +31,7 @@ export default function Achievement({
     <div className="w-full">
       <div className="grid grid-cols-[1fr_7fr] w-full">
         <div className={cn(
-          "w-12 h-12 rounded-md flex items-center justify-center",
+          "w-10 h-10 md:w-12 md:h-12 rounded-md flex items-center justify-center",
           !unlocked && "",
           unlocked && info.rarity === "COMMON" && `bg-rarity-common`,
           unlocked && info.rarity === "UNCOMMON" && `bg-rarity-uncommon`,