-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from Kevin-Kwan/education
Successfully added basic Education Page
- Loading branch information
Showing
6 changed files
with
184 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from 'react'; | ||
| import Image from 'next/image'; | ||
|
|
||
| interface Link { | ||
| url: string; | ||
| displayText: string; | ||
| } | ||
|
|
||
| interface EducationCardProps { | ||
| schoolName: string; | ||
| dateRange: string; | ||
| credential: string; | ||
| logoUrl: string; | ||
| eduDescription?: React.ReactNode; | ||
| gpa?: string; | ||
| links: Link[]; | ||
| subschoolDescription: string; | ||
| location?: string; | ||
| } | ||
|
|
||
| const EducationCard: React.FC<EducationCardProps> = ({ | ||
| schoolName, | ||
| dateRange, | ||
| credential, | ||
| logoUrl, | ||
| eduDescription, | ||
| gpa, | ||
| links = [], | ||
| subschoolDescription, | ||
| location = 'Atlanta, GA', | ||
| }) => ( | ||
| <div className="bg-white rounded-lg shadow-md p-4 mb-4 max-w-6xl mx-auto"> | ||
| <div className="flex items-center"> | ||
| <Image | ||
| src={logoUrl} | ||
| alt={schoolName} | ||
| className="w-20 h-20 mr-4 object-contain" | ||
| width={1000} | ||
| height={1000} | ||
| /> | ||
| <div> | ||
| <h3 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-black"> | ||
| {schoolName} | ||
| {subschoolDescription && ( | ||
| <> | ||
| {' '} | ||
| <span className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-300"> | ||
| | | ||
| </span>{' '} | ||
| <span className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-500"> | ||
| {subschoolDescription} | ||
| </span> | ||
| </> | ||
| )} | ||
| </h3> | ||
| <p className="text-xs sm:text-sm md:text-base lg:text-lg text-gray-700"> | ||
| {location} | ||
| </p>{' '} | ||
| <p className="text-xs sm:text-sm md:text-base lg:text-lg text-gray-800"> | ||
| {dateRange} | ||
| </p> | ||
| {links.map((link, index) => ( | ||
| <React.Fragment key={link.url}> | ||
| <a | ||
| href={link.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className={`text-xs sm:text-sm md:text-base lg:text-lg text-blue-500 underline ${ | ||
| index !== 0 ? 'ml-3' : '' | ||
| }`} | ||
| > | ||
| {link.displayText} | ||
| </a> | ||
| </React.Fragment> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <h4 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-black"> | ||
| {credential} | ||
| </h4> | ||
| <div className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-800"> | ||
| {eduDescription} | ||
| </div> | ||
| <div className="text-sm sm:text-base md:text-lg lg:text-xl text-gray-800"> | ||
| <b> GPA: </b> {gpa} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default EducationCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import Head from 'next/head'; | ||
| import Layout from '../components/RootLayout'; | ||
| import EducationCard from '../components/EducationCard'; | ||
|
|
||
| export default function Education() { | ||
| return ( | ||
| <Layout> | ||
| <Head> | ||
| <title>Kevin Kwan | Education</title> | ||
| </Head> | ||
| <main className="flex-1 p-4"> | ||
| <div className="max-w-4xl mx-auto"> | ||
| <p className="sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl font-bold mb-2 text-white text-center"> | ||
| My Education | ||
| </p> | ||
| <p className="text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-1xl text-white mb-2 text-center"> | ||
| Here, you'll find a list of my educational experiences, | ||
| associations, activities/societies, and awards/achievements. | ||
| </p> | ||
| <EducationCard | ||
| schoolName="Georgia Institute of Technology" | ||
| subschoolDescription="College of Computing" | ||
| dateRange="August 2021 - Expected May 2024" | ||
| credential="Bachelor of Science in Computer Science" | ||
| logoUrl="https://brand.gatech.edu/sites/default/files/inline-images/GTVertical_RGB.png" | ||
| links={[ | ||
| { | ||
| url: 'https://www.gatech.edu/', | ||
| displayText: 'University Website', | ||
| }, | ||
| { | ||
| url: 'https://www.cc.gatech.edu/', | ||
| displayText: 'College Website', | ||
| }, | ||
| ]} | ||
| eduDescription={ | ||
| <p> | ||
| <b>Threads:</b> Intelligence and Media | ||
| </p> | ||
| } | ||
| gpa="3.9" | ||
| /> | ||
| <EducationCard | ||
| schoolName="Gwinnett Technical College" | ||
| subschoolDescription="Dual Enrollment Program" | ||
| dateRange="May 2020 - June 2021" | ||
| credential="PC Repair and Network Technician Certificate" | ||
| location="Lawrenceville, GA" | ||
| logoUrl="https://gwinnetttech.edu/wp-content/uploads/2023/10/gtclogo_studentservices.jpg" | ||
| links={[ | ||
| { | ||
| url: 'https://gwinnetttech.edu', | ||
| displayText: 'College Website', | ||
| }, | ||
| ]} | ||
| gpa="4.0" | ||
| /> | ||
| <EducationCard | ||
| schoolName="Gwinnett School of Mathematics, Science, and Technology" | ||
| subschoolDescription="High School" | ||
| dateRange="August 2017 - May 2021" | ||
| credential="High School Diploma with Honors" | ||
| location="Lawrenceville, GA" | ||
| logoUrl="https://upload.wikimedia.org/wikipedia/en/6/6f/Seal_of_GSMST.png" | ||
| links={[ | ||
| { | ||
| url: 'https://www.gcpsk12.org/GSMST', | ||
| displayText: 'School Website', | ||
| }, | ||
| ]} | ||
| gpa="4.211" | ||
| /> | ||
| </div> | ||
| </main> | ||
| </Layout> | ||
| ); | ||
| } |