Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revamped Project Cards #9

Merged
merged 3 commits into from
Dec 22, 2023
Merged

Revamped Project Cards #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6bbb3da
Revamped Project Cards
Kevin-Kwan Dec 22, 2023
bdf8db1
Update skills page with better formatting
Kevin-Kwan Dec 22, 2023
6bc9ce0
Links now open in a new tab
Kevin-Kwan Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions components/ExperienceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
47 changes: 28 additions & 19 deletions components/ProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/TechLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions pages/experience.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
59 changes: 48 additions & 11 deletions pages/projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{' '}
Expand Down
27 changes: 20 additions & 7 deletions pages/skills.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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 ">
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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/"
Expand Down
Binary file added public/images/HTML5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.