Projects

app/components/home/about-me.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { User } from "lucide-react";
 import ContentDisplay from "../layouts/content-display";
+import Button from "../ui/button";
 ContentDisplay;
+import { ScrollText } from "lucide-react";
 
 const AboutMe = () => {
   return (
@@ -10,6 +12,11 @@ const AboutMe = () => {
       symbol={<User />}
       name="About Me"
       description="Introduction"
+      button={
+        <Button size="sm" href="/resume" rightIcon={<ScrollText />}>
+          Resume
+        </Button>
+      }
     >
       <div className="text-sm text-gray-11 px-4 py-4">
         <p className="overflow-auto">

app/components/home/contents.tsx

@@ -5,7 +5,7 @@ import CodeFourArena from "./code-four-arena";
 import SpeedRun from "./speedrun";
 import Running from "./running/running";
 
-const Contents = () => {
+export default function Contents() {
   return (
     <div className="grid grid-cols-2 gap-4 min-[560px]:grid-cols-4 min-[960px]:grid-cols-6">
       <AboutMe />
@@ -15,6 +15,4 @@ const Contents = () => {
       <Running />
     </div>
   );
-};
-
-export default Contents;
+}

app/components/home/my-socials.tsx

@@ -3,7 +3,7 @@ import ContentDisplay from "../layouts/content-display";
 import { Hand, Mail } from "lucide-react";
 import Button from "../ui/button";
 
-const MySocials = () => {
+export default function MySocials() {
   return (
     <ContentDisplay
       className="w-full min-[960px]:w-64 col-span-2"
@@ -28,6 +28,4 @@ const MySocials = () => {
       </div>
     </ContentDisplay>
   );
-};
-
-export default MySocials;
+}

app/components/home/speedrun.tsx

@@ -7,16 +7,11 @@ const SpeedRun = () => {
   return (
     <ContentDisplayMinimal
       className="col-span-2 w-full min-[960px]:col-span-3"
-      name="Buidl Guidl"
-      description="Decentralized Applications I built"
+      name="Projects"
+      description="Apps I've built"
       symbol={<Hammer />}
       button={
-        <Button
-          size="sm"
-          rightIcon={<ExternalLink />}
-          href="https://app.buidlguidl.com/builders/0x4c2B577D992d16973b57b1757e996dC0d0a07F74"
-          newTab
-        >
+        <Button size="sm" rightIcon={<ExternalLink />} href="/projects">
           View
         </Button>
       }

app/layout.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
     default: "Kent Miguel | Home",
     template: "Kent | %s",
   },
-  description: "Kent Miguel Personal Website",
+  description: "Kent Miguel's Personal Website",
 };
 
 export default function RootLayout({

app/projects/components/contents.tsx

@@ -0,0 +1,10 @@
+import Project from "./project";
+import React from "react";
+
+export default function Contents() {
+  return (
+    <div className="grid grid-cols-2 gap-4 min-[560px]:grid-cols-4 min-[960px]:grid-cols-6">
+      <Project />
+    </div>
+  );
+}

app/projects/components/project.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React from "react";
+import ContentDisplay from "@components/layouts/content-display";
+import {
+  KanbanSquare,
+  Twitter,
+  Github,
+  Vote,
+  UserCircle2,
+  CircleDollarSign,
+  Swords,
+  ExternalLink,
+} from "lucide-react";
+import Button from "@components/ui/button/index";
+import type { ReactNode } from "react";
+
+type ProjectProps = {
+  id: number;
+  symbol: ReactNode;
+  name: string;
+  description: string;
+  buttonRef: string;
+  buttonIcon?: ReactNode;
+  buttonTitle?: string;
+  body: string;
+};
+
+const data: ProjectProps[] = [
+  {
+    id: 1,
+    symbol: <UserCircle2 />,
+    name: "Personal Website",
+    description: "",
+    buttonRef: "https://github.com/kmiguel10/www",
+    body: "My personal website that showcases my profile",
+  },
+  {
+    id: 2,
+    symbol: <Twitter />,
+    name: "Blue Bird",
+    description: "",
+    buttonRef: "https://github.com/kmiguel10/blue-bird",
+    body: "A twitter clone built with Next.js with Tailwind CSS, and supabase",
+  },
+  {
+    id: 3,
+    symbol: <KanbanSquare />,
+    name: "Issue Tracker",
+    description: "",
+    buttonRef: "http://google.com",
+    body: "A a full-stack App with Next.js, Tailwind, Radix UI, and Prisma",
+  },
+  {
+    id: 4,
+    symbol: <Vote />,
+    name: "DApp Voting",
+    description: "",
+    buttonRef:
+      "https://github.com/kmiguel10/decentralized-ranked-choice-voting",
+    body: "A Decentralized Ranked-Choice Voting System built with Solidity and Hardhat",
+  },
+  {
+    id: 5,
+    symbol: <CircleDollarSign />,
+    name: "DApp Bounty",
+    description: "",
+    buttonRef: "https://github.com/kmiguel10/bounty-dapp",
+    body: "Post bounties with definition along with a prize amount and claim bounties",
+  },
+
+  {
+    id: 6,
+    symbol: <Swords />,
+    name: "Buidl Guidl",
+    description: "",
+    buttonRef:
+      "https://app.buidlguidl.com/builders/0x4c2B577D992d16973b57b1757e996dC0d0a07F74",
+    buttonIcon: <ExternalLink />,
+    buttonTitle: "View",
+    body: "Decentralized Applications built with Scaffold-Eth",
+  },
+];
+
+export default function Project() {
+  return data.map((d) => (
+    <ContentDisplay
+      key={d.id}
+      className="w-full min-[960px]:w-64 col-span-2"
+      symbol={d.symbol}
+      name={d.name}
+      description={d.description}
+      button={
+        <Button
+          size="sm"
+          href={d.buttonRef}
+          rightIcon={d.buttonIcon ? d.buttonIcon : <Github />}
+          newTab
+        >
+          {d.buttonTitle ? d.buttonTitle : "Repo"}
+        </Button>
+      }
+    >
+      <div className="text-sm text-gray-11 p-4">
+        <p className="overflow-auto ">{d.body}</p>
+      </div>
+    </ContentDisplay>
+  ));
+}

app/projects/page.tsx

@@ -6,6 +6,7 @@ import InProgressImage from "../../public/aboutme-option3.webp";
 import Image from "next/image";
 import { ChevronLeft } from "lucide-react";
 import Button from "@components/ui/button/index";
+import Contents from "./components/contents";
 
 export const metadata = {
   title: "Projects",
@@ -15,23 +16,8 @@ export default function AboutMe() {
   return (
     <Base pageSlug="/projects">
       <ContainerLayout className="flex flex-col space-y-4">
-        <h1 className="text-3xl font-semibold tracking-tight text-gray-12 md:text-4xl">
-          Projects
-        </h1>
-        <div className="text-gray-11">Work in progress.</div>
-        <Image
-          className="rounded-2xl border border-gray-6"
-          src={InProgressImage}
-          alt="image"
-        />
-        <Button
-          variant="secondary"
-          intent="primary"
-          href="/"
-          leftIcon={<ChevronLeft />}
-        >
-          Return home
-        </Button>
+        <ProfileHeader />
+        <Contents />
       </ContainerLayout>
     </Base>
   );

app/resume/components/resume-content.tsx

@@ -18,11 +18,16 @@ const ResumeContent = () => {
               <div className="font-medium ">
                 Full Stack Developer , Smart Contract Security Engineer
               </div>
+              <span className="hidden md:block mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
+                July 2022 - Present
+              </span>
+            </div>
+            <div className="space-x-2 md:hidden">
               <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
                 July 2022 - Present
               </span>
             </div>
-            <div className="hidden space-x-2 md:flex">
+            <div className="space-x-2 md:flex">
               <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
                 Part-time
               </span>
@@ -49,6 +54,11 @@ const ResumeContent = () => {
           <div className="collapse-title text-md">
             <div className="flex w-full items-center md:flex-row md:justify-between">
               <div className="font-medium ">Deloitte</div>
+              <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small hidden md:block">
+                November 2020 - July 2022
+              </span>
+            </div>
+            <div className="space-x-2 md:hidden">
               <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
                 November 2020 - July 2022
               </span>
@@ -57,6 +67,7 @@ const ResumeContent = () => {
               Solution Specialist - Full Stack Developer
             </span>
           </div>
+
           <div className="collapse-content">
             <ul className="list-disc px-4">
               <li>
@@ -86,6 +97,11 @@ const ResumeContent = () => {
               <div className="font-medium ">
                 Propulsion Technologies Internation
               </div>
+              <span className="hidden md:block mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
+                July 2018 - June 2020
+              </span>
+            </div>
+            <div className="space-x-2 md:hidden">
               <span className="mt-0.5 text-sm text-gray-11 md:mt-1 md:text-small">
                 July 2018 - June 2020
               </span>

app/resume/components/skills.tsx

@@ -8,17 +8,18 @@ const Skills = () => {
       className="col-span-2 w-full min-[560px]:col-span-4"
       symbol={<Wand2 />}
       name="Skills"
-      description="Tech Stack I usually use"
+      description="Tech Stack I use"
     >
       <div className="text-sm text-gray-11 px-4 py-4">
         <ul className="list-disc px-4 overflow-auto">
           <li>
-            Coding Languages : Solidity, Web3, Typescript, JavaScript (Next.js,
-            Vue.js, React.js, Next.js) , Java
+            Coding Languages : Solidity, JavaScript, Typescript (Next.js,
+            Vue.js, React.js) , Java
           </li>
           <li>
             Tools: Foundry, Metamask, Hardhat, Moralis, IPFS, Fleek, Truffle,
-            Mocha, Ethereum, GitHub, Power BI
+            Tailwind CSS, Supabase, PostGreSql, MongoDB, Vercel, Mocha, GitHub,
+            Power BI
           </li>
         </ul>
       </div>

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;