ci: deploy projects mobile first session

src/components/modules/ProjectCardMobileList.tsx

@@ -1,3 +1,4 @@
+import { projectMobiles } from '@src/data/projects';
 import { ProjectType } from '@src/types/projects';
 import Image from 'next/image';
 import NextImage from 'next/image';
@@ -11,37 +12,37 @@ const ProjectCardMobileList: React.FC<ProjectCardMobileListProps> = ({ project }
   const [isLoading, setLoading] = useState(true);
 
   return (
-    <div>
-      {project.img ? (
-        <Image
-          loading="lazy"
-          src={`/images/projects/${project.img}`}
-          width={100}
-          height={100}
-          sizes="30vw"
-          className={`
-        duration-700 ease-in-out group-hover:opacity-75 ${
+    <div className="w-full max-w-sm rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800">
+      <div className="grid gap-2 p-8">
+        <div>
+          <h3 className="text-lg font-semibold tracking-tight text-gray-800 dark:text-gray-100">
+            {project.name}
+          </h3>
+          <p className="text-sm tracking-tight text-gray-800 dark:text-gray-100">
+            {project.description}
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          {project.imgMobile?.map((img, index) => (
+            <div key={index}>
+              {/* <img className="h-auto max-w-full rounded-lg" src={`/images/projects/${img}`} alt="" /> */}
+              <Image
+                loading="lazy"
+                src={`/images/projects/mobile/${project.img}/${img}`}
+                width={100}
+                height={100}
+                sizes="30vw"
+                className={`
+        h-auto max-w-full rounded-lg duration-700 ease-in-out group-hover:opacity-75 ${
           isLoading ? 'scale-110 blur-2xl grayscale' : 'scale-100 blur-0 grayscale-0'
         })`}
-          onLoadingComplete={() => setLoading(false)}
-          style={{ width: '100%', height: 'auto' }}
-          alt={project.name}
-        />
-      ) : (
-        <img
-          src={`https://www.shutterstock.com/image-photo/word-disclosure-composed-wooden-letter-260nw-1316887508.jpg`}
-          loading="lazy"
-          alt={`no image`}
-          className="w-full rounded-lg"
-        />
-      )}
-      <div className="mt-3 space-y-2">
-        <h3 className="text-lg font-semibold text-gray-800 duration-150 group-hover:text-indigo-600">
-          {project.name}
-        </h3>
-        <p className="text-sm text-gray-600 duration-150 group-hover:text-gray-800">
-          {project.description}
-        </p>
+                onLoadingComplete={() => setLoading(false)}
+                style={{ width: '100%', height: 'auto' }}
+                alt={project.name}
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

src/components/modules/sections/ProjectSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { projectWebs } from '@src/data/projects';
+import { projectMobiles, projectWebs } from '@src/data/projects';
 import { Heading, Text } from '@src/components/design-system';
-import { ProjectCardWebList } from '@src/components/modules';
+import { ProjectCardMobileList, ProjectCardWebList } from '@src/components/modules';
 
 export default function ProjectSection() {
   return (
@@ -11,9 +11,10 @@ export default function ProjectSection() {
         <Text>This page contains a list of applications I have worked on.</Text>
         <section className="py-2">
           <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-            <p className="text-center font-semibold tracking-tight text-gray-800 dark:text-gray-100">
+            <h3 className="text-center font-bold tracking-tight text-gray-800 dark:text-gray-100">
               This is list my project web.
-            </p>
+            </h3>
+            <hr />
             <ul className="mt-16 grid list-none gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
               {projectWebs?.map((project, index) => (
                 <li className="group mx-auto w-full sm:max-w-sm" key={index}>
@@ -22,6 +23,21 @@ export default function ProjectSection() {
               ))}
             </ul>
           </div>
+          <hr />
+          <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+            <h2 className="text-center font-bold tracking-tight text-gray-800 dark:text-gray-100">
+              This is list my project mobile.
+            </h2>
+            <hr />
+            <ul className="mt-16 grid list-none gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+              {projectMobiles?.map((project, index) => (
+                <li className="group mx-auto w-full sm:max-w-sm" key={index}>
+                  <ProjectCardMobileList project={project} key={index} />
+                </li>
+              ))}
+            </ul>
+          </div>
+          <hr />
         </section>
       </div>
     </section>

src/data/projects.tsx

@@ -125,15 +125,21 @@ export const projectWebs: ProjectType[] = [
 
 export const projectMobiles: ProjectType[] = [
   {
-    name: 'Weeding Invitation of Anggit Febriyanto & Indri Febriyani',
-    description:
-      'Weeding Invitation Anggit Febriyanto & Indri Febriyani Using Gatsby JS, React JS, Supabase',
-    img: '17.png',
+    name: 'Kejaksaan dashboard mobile flutter',
+    description: 'dashboard mobile version using flutter',
+    img: 'kejagung',
+    imgMobile: ['1.png', '2.png', '3.png', '4.png'],
   },
   {
-    name: 'Weeding Invitation of Anggit Febriyanto & Indri Febriyani',
-    description:
-      'Weeding Invitation Anggit Febriyanto & Indri Febriyani Using Gatsby JS, React JS, Supabase',
-    img: '17.png',
+    name: 'Cesa (Cerdas Sosial Media)',
+    description: 'Aplikasi pendeteksi kecanduan gadget',
+    img: 'cesa',
+    imgMobile: ['1.png', '2.png', '3.png', '4.png'],
+  },
+  {
+    name: 'LMS (Learning management system)',
+    description: 'Aplikasi absensi terintegrasi Smartfren',
+    img: 'lms',
+    imgMobile: ['1.png', '2.png', '3.png', '4.png'],
   },
 ];

src/pages/_document.page.tsx

@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 export default function Document() {
   const googleSiteVerification = process.env.VERIFICATION_GOOGLE as string;
@@ -19,6 +20,10 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+        <Script
+          src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"
+          strategy="beforeInteractive"
+        />
       </body>
     </Html>
   );

src/types/projects.ts

@@ -3,4 +3,5 @@ export interface ProjectType {
   description: string;
   link?: string;
   img?: string;
+  imgMobile?: string[];
 }