Skip to content

Commit

Permalink
Merge pull request #7 from Kevin-Kwan/work-experience-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kevin-Kwan
Kevin-Kwan authored Dec 21, 2023
2 parents 554ecf8 + 11fcf59 commit 53a97af
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 18 deletions.
67 changes: 67 additions & 0 deletions components/ExperienceCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import Image from 'next/image';

interface Link {
url: string;
displayText: string;
}

interface ExperienceCardProps {
companyName: string;
dateRange: string;
jobTitle: string;
logoUrl: string;
jobDescription: React.ReactNode;
links: Link[];
subCompanyDescription: string;
location?: string;
}

const ExperienceCard: React.FC<ExperienceCardProps> = ({
companyName,
dateRange,
jobTitle,
logoUrl,
jobDescription,
links = [],
subCompanyDescription,
location = 'Atlanta, GA',
}) => (
<div className="bg-white rounded-lg shadow-md p-4 mb-4 max-w-5xl mx-auto">
<div className="flex items-center">
<Image
src={logoUrl}
alt={companyName}
className="w-16 h-16 rounded-full mr-4"
width={1000}
height={1000}
/>
<div>
<h3 className="text-xl font-bold text-black">
{companyName}
{subCompanyDescription && (
<>
{' '}
<span className="text-gray-300">|</span>{' '}
<span className="text-gray-500">{subCompanyDescription}</span>
</>
)}
</h3>
<p className="text-sm text-gray-700">{location}</p>{' '}
<p className="text-sm text-gray-800">{dateRange}</p>
{links.map((link, index) => (
<React.Fragment key={index}>
<a href={link.url} className="text-sm text-blue-500 underline">
{link.displayText}
</a>
{index < links.length - 1 && <>&nbsp;&nbsp;&nbsp;</>}
</React.Fragment>
))}
</div>
</div>
<h4 className="text-lg font-bold mt-2 text-black">{jobTitle}</h4>
<div className="text-sm text-gray-700 mt-2">{jobDescription}</div>
</div>
);

export default ExperienceCard;
14 changes: 9 additions & 5 deletions components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,20 @@ const Footer = () => {
>
<div className="max-w-2xl mx-auto">
<p className="text-center ">
Custom Made by{' '}
<Link legacyBehavior href="/">
<a className="text-blue-500 hover:underline">Kevin Kwan</a>
<Link
legacyBehavior
href="https://github.com/Kevin-Kwan/portfolio-next"
>
<a className="text-blue-300 hover:underline">
Custom Made by Kevin Kwan
</a>
</Link>{' '}
using{' '}
<a
href="https://nextjs.org/"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
className="text-blue-300 hover:underline"
>
Next.js
</a>{' '}
Expand All @@ -28,7 +32,7 @@ const Footer = () => {
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
className="text-blue-300 hover:underline"
>
Tailwind CSS
</a>{' '}
Expand Down
7 changes: 6 additions & 1 deletion next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['i.redd.it', 'github.com'],
domains: [
'i.redd.it',
'github.com',
'careers.publicissapient.com',
'media.licdn.com',
],
},
};

Expand Down
194 changes: 182 additions & 12 deletions pages/experience.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Head from 'next/head';
import Layout from '../components/RootLayout';
import Link from 'next/link';
import ExperienceCard from '../components/ExperienceCard';

export default function Experience() {
return (
Expand All @@ -9,20 +10,189 @@ export default function Experience() {
<title>Kevin Kwan | Work Experience</title>
</Head>
<main className="flex-1 p-4">
<div className="max-w-2xl mx-auto">
<p className="text-white text-2xl font-bold mb-4">
Placeholder title!
<div className="max-w-6xl mx-auto">
<p className="text-white text-2xl font-bold mb-4 text-center">
My Work Experience
</p>
<p className="text-white text-lg">
Sorry! My website is still under active development.
<br />
In the meantime, please feel free to check out{' '}
<Link href="/resume" className="text-blue-400 underline font-bold">
my Résumé
</Link>
.
<p className="text-white text-lg mb-4">
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
learned.
</p>
{/* probably make sections for each experience, maybe flex? */}
<ExperienceCard
companyName="Publicis Sapient"
subCompanyDescription="Digital Business Transformation & Consulting"
dateRange="June 2023 - August 2023"
jobTitle="Software Engineer Intern"
logoUrl="https://careers.publicissapient.com/content/dam/careers/events/Sapient_Event_green.png"
jobDescription={
<div>
<p style={{ marginBottom: '0.5rem' }}>
As part of a team, our project was to engineer an AI chatbot
application for the Travel & Hospitality Industry,
specifically designed for WhatsApp. The application was built
using Google VertexAI&aposs PaLM LLM, LangChain, MongoDB, and
APIs, with the aim of enhancing tourists&apos experiences by
providing engaging conversations, accurate and up-to-date
answers, live data, and recommendations for Atlanta&aposs
attractions (World of Coca-Cola, Zoo Atlanta, Georgia
Aquarium), hotels (like Marriott®), and restaurants.
</p>

<p style={{ marginBottom: '0.5rem' }}>
To bridge the gap between our frontend team and backend
resources, such as our MongoDB databases and AI chatbot
program, I architected RESTful APIs using Flask and Python.
This architecture enabled the team to generate and retrieve
responses effectively. In addition, I automated the CI/CD
(DevOps) pipeline through GitLab and Docker, and deployed our
frontend applications on Google Firebase Hosting and backend
applications on Google App Engine. This not only streamlined
the development process but also ensured seamless deployment
of our applications. I was able to improve the accuracy of the
bot&aposs responses up to 91% through rigorous testing and
validation.
</p>

<p style={{ marginBottom: '0.5rem' }}>
As a final touch, I assembled an interactive map website to
serve chatbot options and venue information to users,
providing them with a comprehensive and interactive tool to
enhance their travel experience.
</p>

<p>
Our efforts were met with great satisfaction from our client
and coaches. We even outperformed the team in Boston, as well
as all the other teams in the Atlanta office.{' '}
<strong>
This experience was a testament to the power of my
leadership, teamwork, rapid learning, and innovative
thinking and their potential to create impactful solutions.
</strong>
</p>
</div>
}
links={[
{
url: 'https://www.publicissapient.com/',
displayText: 'Company Website',
},
]}
/>
<ExperienceCard
companyName="Georgia Tech EcoCAR EV Challenge"
subCompanyDescription="VIP Program"
dateRange="January 2022 - May 2023"
jobTitle="Software Engineer (Connected and Automated Vehicles Team)"
logoUrl="https://media.licdn.com/dms/image/C560BAQH6vov8-U6y8g/company-logo_200_200/0/1661008559177?e=2147483647&v=beta&t=9bFW6vwhYP7GaORz81Ti2ZYcrY94yyrmZUW4rftU_jo"
jobDescription={
<div>
<p style={{ marginBottom: '0.5rem' }}>
I served as a Connected Autonomous Vehicles (CAVs) Software
Engineer for the Georgia Tech EcoCAR EV Challenge at the
Georgia Institute of Technology. As part of the
Vehicle-to-Everything (V2X) subteam, I utilized multiple data
streams from cameras and sensors to develop a state machine.
This machine was designed to enable the car to make
intelligent decisions in various traffic light scenarios, with
a focus on efficiency and user experience. For example, based
on the distance to the traffic light, the state machine would
determine whether the car should stop or continue driving,
which in turn would improve the car&aposs fuel efficiency and
the user&aposs experience.
</p>

<p style={{ marginBottom: '0.5rem' }}>
The EcoCAR Mobility Challenge is a prestigious 4-year
Collegiate Competition and a $1 million research program. It
is sponsored by esteemed organizations such as Argonne
National Labs, the U.S. Department of Energy, General Motors,
MathWorks, Intel, and more.
</p>

<p>
I am proud to have contributed to the{' '}
<a
href="https://coe.gatech.edu/news/2022/05/student-team-wins-department-energy-ecocar-mobility-challenge"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 underline"
>
Georgia Institute of Technology team&aposs victory in the
2022 EcoCAR Mobility Challenge, where we secured 1st place
</a>
{'. '}
<strong>
This experience not only honed my technical skills but also
reinforced my passion for software engineering and its
potential to create impactful and innovate solutions in the
field of autonomous vehicles.
</strong>
</p>
</div>
}
links={[
{
url: 'https://www.vip.gatech.edu/teams/vpu',
displayText: 'Program Website',
},
{
url: 'https://sites.gatech.edu/ecocar/',
displayText: 'Team Website',
},
{
url: 'https://avtcseries.org/about-the-ecocar-ev-challenge/',
displayText: 'Competition Website',
},
]}
/>
<ExperienceCard
companyName="NCR Voyix"
subCompanyDescription='Formerly "NCR Corporation"'
dateRange="July 2019 - August 2019"
jobTitle="Software Engineer Intern"
logoUrl="https://media.licdn.com/dms/image/D560BAQEHLtG-f8uOUQ/company-logo_200_200/0/1697490837284/ncrvoyix_logo?e=1710979200&v=beta&t=XhgUKoF_-1w4tBihIcFRqZ8xkCOWu5X1zBM3OuAn2Xg"
jobDescription={
<div>
<p style={{ marginBottom: '0.5rem' }}>
My primary task was to develop a machine learning program
using MATLAB, a language and environment that was completely
new to me. The project involved training and fine-tuning a
neural network using an architecture like AlexNet on a dataset
of images where each image was associated with a person&aposs
name. The goal was to use live footage from a computer webcam
to correctly identify people&aposs faces. This task was
essentially a classification problem, and it involved elements
of facial recognition.
</p>

<p>
Despite the complexity of the task and my unfamiliarity with
MATLAB, I was able to learn the basics of the language in just
a week. I heavily relied on documentation to aid in the
development of the program. My efforts paid off when my
supervisor expressed great admiration for the work I had
accomplished in such a short period of time and even offered
me position at the company. However, as I was still in high
school and wanted to prioritize my studies, I had to
respectfully decline the offer.{' '}
<strong>
{' '}
This experience was a testament to my ability to quickly
adapt to new technologies and deliver impressive results.
</strong>
</p>
</div>
}
links={[
{
url: 'https://www.ncr.com/',
displayText: 'Company Website',
},
]}
/>
</div>
</main>
</Layout>
Expand Down

0 comments on commit 53a97af

Please sign in to comment.