Home Screen

Implemented basic cards for skybox previews, and
uploaded existing database of images.

Author: Jacobdeanr

app/page.tsx

@@ -1,6 +1,6 @@
 import fs   from 'fs';
 import path from 'path';
-import Image from 'next/image';
+import SkyboxCard from './ui/skyboxcard';
 
 function getSkyboxSlugs(): string[] {
   const skyboxesDir = path.join(process.cwd(), 'public', 'skyboxes');
@@ -11,29 +11,39 @@ function getSkyboxSlugs(): string[] {
     .filter((name) =>
       fs.statSync(path.join(skyboxesDir, name)).isDirectory()
     );
-}
+  }
 
-export default function Home() {
-  const slugs = getSkyboxSlugs();
+  export default function Home() {
+    const slugs = getSkyboxSlugs();
 
-  return (
-    <main>
-      <div className='Header'>
-        <h1>
-          Jacob Robbins' Skyboxes
+    return (
+      <main>
+        <header
+          className="
+            flex items-center justify-center
+            bg-neutral-900
+            shadow-md shadow-black/40
+            h-20
+            mb-4
+          "
+        >
+        <h1 className="text-2xl sm:text-4xl font-bold text-neutral-100 tracking-wide">
+          Jacob Robbins&rsquo; Skybox Textures
         </h1>
-      </div>
-      <div className="grid">
-      {slugs.map((slug) => (
-        <Image
-          key={slug}
-          src={`/Source_Skyboxes_NextJS/skyboxes/${slug}/images/thumb.webp`}
-          alt={`${slug} thumbnail`}
-          width={400}
-          height={225}
-        />
-      ))}
-      </div>
-    </main>
-  );
-}
+      </header>
+
+      <section
+        className="
+          grid gap-4
+          grid-cols-[repeat(auto-fill,minmax(24rem,1fr))]
+          px-4 sm:px-6 lg:px-8     /* side padding that expands with breakpoints */
+        "
+      >
+        {slugs.map((slug) => (
+          <SkyboxCard key={slug} slug={slug} />
+        ))}
+      </section>
+
+      </main>
+    );
+  }

app/ui/skyboxcard.tsx

@@ -0,0 +1,52 @@
+import Image from 'next/image';
+import Link  from 'next/link';
+
+type Props = {
+    slug: string;
+  };
+
+  export default function SkyboxCard({ slug }: Props) {
+    const imgBase   = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
+    const details   = `/${slug}`;
+
+    //placeholder
+    const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+  
+    return (
+    <Link href={details}>
+        <article
+            className="
+            flex flex-col items-center
+            bg-neutral-800
+            ring-1 ring-neutral-700/60
+            shadow-lg shadow-black/40
+            p-2
+            m-0.5
+            tranform hover:scale-105
+            transition duration-150
+            
+        ">
+            <div className='w-full text-center font-bold'>
+                <h2 className="text-lg font-semibold text-left">{slug}</h2>
+            </div>
+            
+            <div className="relative w-full aspect-[16/9] overflow-hidden m-2">
+                <Image
+                    src={`${imgBase}/thumbnail.webp`}
+                    alt={`${slug} preview`}
+                    fill
+                    sizes="(min-width:1280px) 16rem,
+                    (min-width:1024px) 22vw,
+                    (min-width:640px) 45vw,
+                    100vw"
+                    className="object-cover"
+                    unoptimized
+                />
+            </div>  
+            <div className='w-full h-auto'>
+                <h3 className="text-sm">{description}</h3>
+            </div>
+        </article>
+    </Link>
+    );
+  }