cleanup of light mode and other stylistic issues

Author: Highfire1

next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "export",
+  images: {
+    unoptimized: true
+  }
   /* config options here */
 };
 

src/app/blog/page.tsx

@@ -12,7 +12,7 @@ export default function page() {
     return (
         <div className="flex flex-col items-center w-full min-w-[200px]">
 
-            <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-5 flex-col py-4">
+            <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" />
@@ -23,14 +23,15 @@ export default function page() {
 
 
                     <div className="w-full border-2 border-gray-800 rounded p-2">
-                        <div className="p-2">
-                            <p>You have reached my blog.</p>
+                        <div className="">
+                            <p className="font-bold">You have reached my blog.</p>
                             <p>I hope to post here more in the future.</p>
                         </div>
                     </div>
 
-                    <div className="w-full border-2 border-gray-800 rounded p-4 flex flex-col gap-4" >
-                        <h1>Writings:</h1>
+                    <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}`}>
@@ -45,6 +46,7 @@ export default function page() {
                                 {/* <p dangerouslySetInnerHTML={{ __html: post.post }} /> */}
                             </div>
                         ))}
+                        </div>
                     </div>
 
 

src/app/page.tsx

@@ -12,7 +12,7 @@ export default function Home() {
   return (
     <div className="flex flex-col items-center w-full min-w-[200px]">
 
-      <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-5 flex-col py-4">
+      <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 />

src/components/footer.tsx

@@ -5,15 +5,15 @@ const Footer = () => {
         <footer className="flex flex-col items-center justify-center">
 
             {/* show links if sidebar is hidden because we are on mobile */}
-            <div className="flex gap-2 sm:hidden">
+            <div className="sm:hidden flex">
 
-                <Link href="https://www.linkedin.com/in/andersontseng/" className="text-gray-500 hover:text-gray-900">Linkedin</Link>
+                <Link href="https://www.linkedin.com/in/andersontseng/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Linkedin</Link>
 
-                <Link href="https://www.instagram.com/anderson_wootdidoo/" className="text-gray-500 hover:text-gray-900">Instagram</Link>
+                <Link href="https://www.instagram.com/anderson_wootdidoo/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Instagram</Link>
 
-                <Link href="https://github.com/highfire1" className="text-gray-500 hover:text-gray-900">Github</Link>
+                <Link href="https://github.com/highfire1" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Github</Link>
 
-                <Link href="https://devpost.com/Highfire1" className="text-gray-500 hover:text-gray-900">Devpost</Link>
+                <Link href="https://devpost.com/Highfire1" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Devpost</Link>
             </div>
 
             <p>(c) 2022-2025 Anderson Tseng.</p>

src/components/header.tsx

@@ -11,11 +11,11 @@ const Header = () => {
                     </Link>
                 </div>
 
-                <div className="flex sm:gap-6 gap-2 justify-end grow max-[99px]:w-full">
-                    <Link href="/" className="text-gray-500 hover:text-gray-900">
+                <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
+                    <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
                         Home
                     </Link>
-                    <Link href="/blog" className="text-gray-500 hover:text-gray-900">
+                    <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
                         Blog
                     </Link>
                     {/* <Link href="/contact" className="text-gray-500 hover:text-gray-900">

src/components/project-list.tsx

@@ -58,7 +58,7 @@ export function ProjectList() {
             <ProjectSummary
             key={project.title}
             {...project}
-            className='border-2 border-white rounded'
+            className='border-2 dark:border-white border-black rounded'
             />
             ))}
         </div>

src/components/project-summary.tsx

@@ -37,7 +37,7 @@ const ProjectSummary: React.FC<ProjectSummaryProps> = ({
                     fill
                     className="object-cover rounded"
                 />
-                <div className="absolute inset-0 bg-black opacity-80"></div>
+                <div className="absolute inset-0 dark:bg-black bg-white opacity-80"></div>
                 <div className="relative z-10 p-2">
                     <h2 className="text-lg font-bold">{title}</h2>
                     <p className="text-sm">{dateWorked}</p>