some changes

Author: Highfire1

next.config.ts

@@ -2,6 +2,12 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "export",
+  // disabled because:
+  // a) i dislike the optimized links that next.js generates
+  // b) it doesn't work with github pages
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

src/app/about/page.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import Header from "@/components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/clouds/purple.webp'
 import Interact from "./interact";
 
 
@@ -15,7 +14,12 @@ export default function page() {
             <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-4 flex-col py-2">
                 <Header />
 
-                <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunset" priority/>
+                <div className="relative h-52 w-full">
+                    <Image
+                        src="/clouds/purple.webp" fill={true}
+                        className="object-cover" alt="picture of sunset" priority
+                    />
+                </div>
 
 
                 <Interact />

src/app/blog/page.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import Header from "@/components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/clouds/sunset.webp'
 
 import { posts } from "@/app/blog/posts"
 
@@ -15,7 +14,12 @@ export default function page() {
             <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-4 flex-col py-2">
                 <Header />
 
-                <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunset" priority />
+                <div className="relative h-52 w-full">
+                    <Image
+                        src="/clouds/sunset.webp" fill={true}
+                        className="object-cover" alt="picture of sunset" priority
+                    />
+                </div>
 
 
 
@@ -32,20 +36,20 @@ export default function page() {
                     <div className="w-full border-2 border-gray-800 rounded p-2" >
                         <h1 className="font-bold pb-2">Writings:</h1>
                         <div className="flex flex-col gap-4">
-                        {posts.map((post, index) => (
-                            <div key={index} className="p-2 border rounded">
-                                <a href={`/blog/${post.url}`}>
-                                    <h2 className="text-xl font-bold">{post.title}</h2>
-                                    <p className="text-sm">{new Date(post.published).toLocaleDateString('en-US', {
-                                        year: 'numeric',
-                                        month: 'long',
-                                        day: 'numeric'
-                                    })}</p>
-                                    <p className="text-sm">{post.teaser}</p>
-                                </a>
-                                {/* <p dangerouslySetInnerHTML={{ __html: post.post }} /> */}
-                            </div>
-                        ))}
+                            {posts.map((post, index) => (
+                                <div key={index} className="p-2 border rounded">
+                                    <a href={`/blog/${post.url}`}>
+                                        <h2 className="text-xl font-bold">{post.title}</h2>
+                                        <p className="text-sm">{new Date(post.published).toLocaleDateString('en-US', {
+                                            year: 'numeric',
+                                            month: 'long',
+                                            day: 'numeric'
+                                        })}</p>
+                                        <p className="text-sm">{post.teaser}</p>
+                                    </a>
+                                    {/* <p dangerouslySetInnerHTML={{ __html: post.post }} /> */}
+                                </div>
+                            ))}
                         </div>
                     </div>
 

src/app/page.tsx

@@ -5,7 +5,6 @@ import { ProjectList } from "@/components/project-list";
 import Header from "../components/header"
 import Footer from "@/components/footer";
 
-import HeroImage from '@/../public/clouds/sunrise.webp'
 import Image from "next/image";
 
 export default function Home() {
@@ -15,7 +14,12 @@ export default function Home() {
       <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-4 flex-col py-2">
         <Header />
 
-        <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunrise" priority />
+        <div className="relative h-52 w-full">
+          <Image 
+            src="/clouds/sunrise.webp" fill={true}
+            className="object-cover" alt="picture of sunrise" priority
+          />
+        </div>
 
 
         <div className="flex gap-4 w-full">
@@ -48,9 +52,9 @@ export default function Home() {
 
             <div className="border-2 border-gray-800 rounded p-2">
               <h3 className="font-bold">Quick Facts:</h3>
-                <p>📍Vancouver, Canada</p>
-                <p>🏫Studying Data Science @ Simon Fraser Univ.</p>
-                <p>🖥️Windows 11 {"<"}3</p>
+              <p>📍Vancouver, Canada</p>
+              <p>🏫Studying Data Science @ Simon Fraser Univ.</p>
+              <p>🖥️Windows 11 {"<"}3</p>
             </div>
 
             <div className="border-2 border-gray-800 rounded p-2">

src/components/background.tsx

@@ -21,7 +21,7 @@ const CanvasBackground = () => {
         resizeCanvas();
 
         // Create stars
-        const stars = Array(200).fill(null).map(() => ({
+        const stars = Array(50).fill(null).map(() => ({
             x: Math.random() * canvas.width,
             y: Math.random() * canvas.height,
             size: Math.random() * 2,