Remove bg-image, consolidate components

Author: ramonmeza

next.config.mjs

@@ -2,7 +2,8 @@
 const nextConfig = {
     output: "export",
     reactStrictMode: true,
-    // assetPrefix: "./"
+    assetPrefix: "./",
+    images: { unoptimized: true },
 };
 
 export default nextConfig;

public/img/avatar.jpg

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+export default function ArtworkCard({ href, imgSrc, title, description }) {
+    return (
+        <div className="relative">
+            <a href={href} target="_blank">
+                <Image src={imgSrc} alt="" width={400} height={400} className="block w-full h-auto" />
+                <div className="absolute top-0 bottom-0 left-0 right-0 h-full w-full opacity-0 hover:opacity-100 transition duration-500 ease-in-out bg-gradient-to-t from-gray-900/50 to-gray-900/25 overflow-scroll">
+                    <div className="p-4 text-white">
+                        <div className="text-xl mb-4">
+                            {title}
+                        </div>
+                        <div>
+                            {description}
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+    );
+};

public/img/avatar.jpg.old

@@ -1,7 +1,9 @@
+import Image from "next/image";
+
 export default function Banner({ avatar, alt, title, subtitle }) {
     return (
         <div className="md:flex md:items-start md:gap-4 md:items-center md:justify-center">
-            <img src={avatar} alt={alt} className="mx-auto md:mx-0 size-64 rounded-full object-cover" />
+            <Image src={avatar} alt={alt} width={1024} height={1024} className="mx-auto md:mx-0 size-64 rounded-full object-cover" />
             <div className="space-x-4">
                 <h1 className="text-center text-5xl md:text-7xl font-medium text-gray-900">{title}</h1>
                 <p className="text-center italic text-lg md:text-2xl text-gray-700">

public/img/banner.jpg

@@ -1,6 +1,6 @@
 export default function Footer() {
     return (
-        <div className="p-10 min-w-full text-center text-gray-100 bg-banner">
+        <div className="p-10 min-w-full text-center text-gray-100">
             &copy;2024 Ramon Meza
         </div>
     );

src/app/components/artworkCard.js

@@ -0,0 +1,7 @@
+export default function Grid({ children }) {
+    return (
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {children}
+        </div>
+    )
+};

src/app/components/banner.js

@@ -0,0 +1,10 @@
+export default function RepoCard({ href, title, description }) {
+    return (
+        <a href={href} className="group block rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500" target="_blank">
+            <div className="flex items-center">
+                <h3 className="text-slate-900 group-hover:text-white text-sm font-semibold">{title}</h3>
+            </div>
+            <p className="text-slate-500 group-hover:text-white text-sm">{description}</p>
+        </a>
+    );
+};

src/app/components/footer.js

@@ -3,16 +3,16 @@
 import React, { useEffect, useState } from "react";
 
 // custom components
+import ArtworkCard from "./components/artworkCard";
 import Banner from "./components/banner";
 import Collapsible from "./components/collapsible";
 import Error from "./components/error";
 import Footer from "./components/footer";
+import Grid from "./components/grid";
 import Loading from "./components/loading";
-import Repositories from "./components/respositories";
+import RepoCard from "./components/repoCard";
 import RepoStats from "./components/repoStats";
 
-
-
 // page
 export default function Page() {
     const [isLoading, setIsLoading] = useState(true);
@@ -57,21 +57,13 @@ export default function Page() {
 
     const artworkCards = artwork.map((art) => {
         return (
-            <div className="relative" key={art.id}>
-                <a href={art.permalink} target="_blank">
-                    <img src={art.cover.thumb_url} alt="" className="block w-full h-auto" />
-                    <div className="absolute top-0 bottom-0 left-0 right-0 h-full w-full opacity-0 hover:opacity-100 transition duration-500 ease-in-out bg-gradient-to-t from-gray-900/50 to-gray-900/25 overflow-scroll">
-                        <div className="p-4 text-white">
-                            <div className="text-xl mb-4">
-                                {art.title}
-                            </div>
-                            <div>
-                                {art.description}
-                            </div>
-                        </div>
-                    </div>
-                </a>
-            </div>
+            <ArtworkCard key={art.id} href={art.permalink} imgSrc={art.cover.thumb_url} title={art.title} description={art.description} />
+        );
+    });
+
+    const repoCards = repos.map((repo) => {
+        return (
+            <RepoCard key={repo.id} href={repo.html_url} title={repo.name} description={repo.description} />
         );
     });
 
@@ -93,15 +85,17 @@ export default function Page() {
                             </div>
                         </Collapsible>
                         <Collapsible open title="Artwork">
-                            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                            <Grid>
                                 {artworkCards}
-                            </div>
+                            </Grid>
                         </Collapsible>
                         <Collapsible title="Repository Statistics">
                             <RepoStats bytesOfCode={bytesOfCode} repos={repos} />
                         </Collapsible>
                         <Collapsible title="All Repositories">
-                            <Repositories repos={repos} />
+                            <Grid>
+                                {repoCards}
+                            </Grid>
                         </Collapsible>
                     </div>
                 </main>

src/app/components/grid.js

@@ -12,7 +12,6 @@ module.exports = {
         'height': 'height',
       },
       backgroundImage: {
-        "banner": "url('../../public/img/banner.jpg')",
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",