Merge pull request #9 from Kevin-Kwan/projects-page

Kevin-Kwan · Dec 22, 2023 · 06d8fcd · 06d8fcd
2 parents 8358f15 + 6bc9ce0
commit 06d8fcd
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 42 deletions.
diff --git a/components/ExperienceCard.tsx b/components/ExperienceCard.tsx
@@ -49,9 +49,16 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({
         </h3>
         <p className="text-sm text-gray-700">{location}</p>{' '}
         <p className="text-sm text-gray-800">{dateRange}</p>
-        {links.map((link) => (
+        {links.map((link, index) => (
           <React.Fragment key={link.url}>
-            <a href={link.url} className="text-sm text-blue-500 underline">
+            <a
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`text-sm text-blue-500 underline ${
+                index !== 0 ? 'ml-3' : ''
+              }`}
+            >
               {link.displayText}
             </a>
           </React.Fragment>

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -1,34 +1,43 @@
 import React from 'react';
-import Image from 'next/image';
+import Link from 'next/link';
+import { FaGithub, FaGlobe } from 'react-icons/fa';
 
 interface ProjectCardProps {
   name: string;
-  date: string;
-  imageSrc: string;
-  onClick: () => void;
+  description: string;
+  githubLink: string;
+  demoLink?: string;
 }
 
 const ProjectCard: React.FC<ProjectCardProps> = ({
   name,
-  date,
-  imageSrc,
-  onClick,
+  description,
+  githubLink,
+  demoLink,
 }) => {
   return (
     <div className="w-full md:w-1/2 lg:w-1/4 p-2 md:p-4">
-      <div className="bg-white rounded-lg shadow-lg overflow-hidden cursor-pointer hover:bg-blue-200 transform transition-transform hover:scale-110">
-        <div className="relative h-48">
-          <Image
-            layout="fill"
-            objectFit="cover"
-            className="absolute"
-            src={imageSrc}
-            alt="Project Image"
-          />
+      <div className="bg-zinc-900 rounded-lg shadow-lg overflow-hidden h-full flex flex-col justify-between">
+        <div>
+          <h2 className="text-lg font-bold p-4 text-zinc-200">{name}</h2>
+          <hr />
+          <div className="p-4 text-zinc-200 text-sm">{description}</div>
         </div>
-        <div className="p-2.5 md:p-2.5 flex justify-between items-center">
-          <h3 className="text-md font-medium text-gray-900">{name}</h3>
-          <p className="text-sm font-medium text-gray-500">{date}</p>
+        <div className="p-4 flex justify-between">
+          <Link href={githubLink} rel="noopener noreferrer" target="_blank">
+            <div className="bg-slate-400 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded inline-flex items-center">
+              <FaGithub className="mr-2" />
+              <span>GitHub</span>
+            </div>
+          </Link>
+          {demoLink && (
+            <Link href={demoLink} rel="noopener noreferrer" target="_blank">
+              <div className="bg-slate-400 hover:bg-green-700 text-black font-bold py-2 px-4 rounded inline-flex items-center">
+                <FaGlobe className="mr-2" />
+                <span>Demo</span>
+              </div>
+            </Link>
+          )}
         </div>
       </div>
     </div>

diff --git a/components/TechLogo.tsx b/components/TechLogo.tsx
@@ -19,7 +19,7 @@ const TechLogo: React.FC<TechLogoProps> = ({
 }) => {
   return (
     <div className="flex flex-col items-center justify-center">
-      <Link href={href} passHref>
+      <Link href={href} passHref rel="noopener noreferrer" target="_blank">
         <Image src={src} alt={alt} width={width} height={height} />
       </Link>
     </div>

diff --git a/pages/experience.tsx b/pages/experience.tsx
@@ -10,10 +10,10 @@ export default function Experience() {
       </Head>
       <main className="flex-1 p-4">
         <div className="max-w-6xl mx-auto">
-          <p className="text-white text-3xl font-bold mb-4 text-center">
+          <p className="text-white text-3xl font-bold mb-2 text-center">
             My Work Experience
           </p>
-          <p className="text-white text-lg mb-4">
+          <p className="text-white text-lg mb-2">
             Here, you&apos;ll find a list of software engineering positions
             I&apos;ve held, the companies I&apos;ve worked for, the projects
             that I worked on, some of the responsibilities I had, and what I

diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -10,40 +10,77 @@ export default function Projects() {
         <title>Kevin Kwan | My Projects</title>
       </Head>
       <main className="flex-1 p-4">
-        <p className="text-3xl font-bold mb-4 text-center ">Ongoing Projects</p>
+        <p className="text-3xl font-bold mb-2 text-center ">Ongoing Projects</p>
         <div className="flex flex-wrap -mx-2">
           <ProjectCard
             name="Project 1"
-            date="2022-Present"
-            imageSrc="https://i.redd.it/vo9vm1fcqrp71.jpg"
-            onClick={() => {}}
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
           />
           <ProjectCard
             name="Project 2"
-            date="2022-2023"
-            imageSrc="https://i.redd.it/vo9vm1fcqrp71.jpg"
-            onClick={() => {}}
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
           />
           <ProjectCard
             name="Project 3"
-            date="June 2023 - August 2023"
-            imageSrc="https://i.redd.it/vo9vm1fcqrp71.jpg"
-            onClick={() => {}}
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
           />
           <ProjectCard
             name="Project 4"
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
+          />
+
+          {/* <ProjectCard
+            name="AI WhatsApp ChatBot for Travel/Hospitality (Internship)"
             date="August 2023 - December 2023"
             imageSrc="https://i.redd.it/vo9vm1fcqrp71.jpg"
             onClick={() => {}}
+          /> */}
+        </div>
+        <p className="text-3xl font-bold mb-2 text-center ">
+          Completed Projects
+        </p>
+        <div className="flex flex-wrap -mx-2">
+          <ProjectCard
+            name="Project 1"
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
           />
+          <ProjectCard
+            name="Project 2"
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
+          />
+          <ProjectCard
+            name="Project 3"
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
+          />
+          <ProjectCard
+            name="Project 4"
+            description="Description"
+            githubLink="https://github.com"
+            demoLink="https://github.com"
+          />
+
           {/* <ProjectCard
             name="AI WhatsApp ChatBot for Travel/Hospitality (Internship)"
             date="August 2023 - December 2023"
             imageSrc="https://i.redd.it/vo9vm1fcqrp71.jpg"
             onClick={() => {}}
           /> */}
         </div>
-        <p className="text-lg text-white">
+        <p className="text-lg text-white text-center">
           Sorry! My website is still under active development.
           <br />
           In the meantime, please feel free to check out{' '}

diff --git a/pages/skills.tsx b/pages/skills.tsx
@@ -1,7 +1,5 @@
 import Head from 'next/head';
 import Layout from '../components/RootLayout';
-import Link from 'next/link';
-import Image from 'next/image';
 import TechLogo from '../components/TechLogo';
 
 export default function Skills() {
@@ -12,7 +10,7 @@ export default function Skills() {
       </Head>
       <main className="flex-1 p-4">
         <div className="max-w-4xl mx-auto ">
-          <p className="text-3xl font-bold mb-4 text-white text-center">
+          <p className="text-3xl font-bold mb-2 text-white text-center">
             My Skills
           </p>
           <p className="text-1xl text-white ">
@@ -22,7 +20,12 @@ export default function Skills() {
             work. My experience spans across various domains, whether it&apos;s
             front-end or back-end development, databases, or deployment.
           </p>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-8 bg-blue-100 rounded-lg p-4">
+          <div
+            className="grid grid-flow-row-dense gap-4 mt-4 bg-blue-100 rounded-lg p-4"
+            style={{
+              gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+            }}
+          >
             <TechLogo
               href="https://git-scm.com/"
               src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/1280px-Git-logo.svg.png"
@@ -48,6 +51,11 @@ export default function Skills() {
               src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Unity_2021.svg/1200px-Unity_2021.svg.png"
               alt="Unity"
             />
+            <TechLogo
+              href="https://nodejs.org/"
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/590px-Node.js_logo.svg.png"
+              alt="Node.js"
+            />
             <TechLogo
               href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
               src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/600px-JavaScript-logo.png"
@@ -59,9 +67,14 @@ export default function Skills() {
               alt="TypeScript"
             />
             <TechLogo
-              href="https://nodejs.org/"
-              src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/590px-Node.js_logo.svg.png"
-              alt="Node.js"
+              href="https://developer.mozilla.org/en-US/docs/Web/HTML"
+              src="/images/HTML5.png"
+              alt="HTML"
+            />
+            <TechLogo
+              href="https://developer.mozilla.org/en-US/docs/Web/CSS"
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/600px-CSS3_logo_and_wordmark.svg.png"
+              alt="CSS"
             />
             <TechLogo
               href="https://www.mongodb.com/"

diff --git a/public/images/HTML5.png b/public/images/HTML5.png