Skip to content

Commit c25498e

Browse files
TbuskTbusk
authored
feat: various improvements (#21)
Closes #14 Changes: - Created and implemented new title component for easier section title management - Added coursework to education - Created and implemented pills component for easier management of lists of pill items from string arrays - Update styling of various components - Add keys to be used
2 parents cab189e + 8aa6692 commit c25498e

18 files changed

Lines changed: 221 additions & 162 deletions

‎src/components/common/SectionTitle.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
interface SectionTitleProps {
2+
title: string;
3+
id: string;
4+
}
5+
6+
export default function SectionTitle(props: SectionTitleProps) {
7+
return (
8+
<>
9+
<div className="text-3xl md:text-5xl py-1 md:py-4 px-2" id={props.id}>
10+
{props.title}
11+
</div>
12+
</>
13+
);
14+
}

‎src/components/common/pills/Pill.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
interface PillProps {
2+
name: string;
3+
index: number;
4+
}
5+
6+
export default function Pill(props: PillProps) {
7+
return (
8+
<li className="border py-0.5 px-4 rounded-2xl text-md text-center" key={props.index}>
9+
{props.name}
10+
</li>
11+
);
12+
}

‎src/components/common/pills/Pills.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Pill from "./Pill.tsx";
2+
3+
interface PillsProps {
4+
items: string[];
5+
}
6+
7+
export default function Pills(props: PillsProps) {
8+
return (
9+
<ul className="flex flex-row flex-wrap gap-2 px-2">
10+
{props.items.map((item, index) => (
11+
<Pill name={item} index={index} />
12+
))}
13+
</ul>
14+
);
15+
}

‎src/components/education/Education.tsx‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,45 @@
11
import EducationItem from "./EducationItem.tsx";
2+
import SectionTitle from "../common/SectionTitle.tsx";
23

34
export default function Education() {
45
return (
56
<>
67
<div className="flex flex-col pb-8">
7-
<div className="text-3xl md:text-5xl py-1 md:py-4 px-2 md:px-0" id="education">
8-
Education
9-
</div>
8+
9+
<SectionTitle title="Education" id="education"/>
1010

1111
<div className="flex flex-col gap-8 pt-2">
1212
<EducationItem
13-
name="BSc. - Digital Media Software Engineering"
13+
name="BSc. Digital Media Software Engineering"
1414
institution="Ferris State University"
15-
startDate="2022"
15+
startDate="May 2022"
1616
endDate="May 2026"
1717
gpa="4.0"
1818
link="https://ferris.edu"
19-
/>
20-
21-
<EducationItem
22-
name="AA - General Studies"
23-
institution="Kalamazoo Valley Community College"
24-
startDate="Sept 2016"
25-
endDate="May 2021"
26-
gpa="3.5"
27-
link="https://kvcc.edu"
19+
coursework={[
20+
"Project Management Fundamentals",
21+
"Computer Programming 1",
22+
"Computer Programming 2",
23+
"SENG Methodologies - Processes",
24+
"Software Requirements Management",
25+
"Intro to Database Design",
26+
"Software Configuration Management",
27+
"Software Data Structures",
28+
"Software Component Design",
29+
"Engineering Enterprise Software Applications",
30+
"Programming Languages",
31+
"Introduction to Machine Learning",
32+
"Programming Graphical Interfaces",
33+
"Software Quality Assurance",
34+
"Software Engineering Tools",
35+
"Software Design - Architecture",
36+
"Applied Machine Learning Software",
37+
"SENG Applied Internship",
38+
"Software Development Industry Certification",
39+
"Capstone in Software Engineering",
40+
"Intelligence and Data Warehousing",
41+
"Intro to Cloud Application Development"
42+
]}
2843
/>
2944

3045
<EducationItem

‎src/components/education/EducationItem.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
import Pills from "../common/pills/Pills.tsx";
2+
13
interface EducationItemProps {
24
name: string;
35
institution: string;
46
link: string;
57
startDate: string;
68
endDate: string;
79
gpa?: string;
10+
coursework?: string[];
811
}
912

1013
export default function EducationItem(props: EducationItemProps) {
@@ -14,17 +17,26 @@ export default function EducationItem(props: EducationItemProps) {
1417
<div className="text-lg pb-2 px-2">
1518
{props.startDate} - {props.endDate}
1619
</div>
20+
1721
<div className="text-2xl font-bold pb-2 px-2">
1822
{props.name}
1923
</div>
20-
<div className="text-lg pb-2 px-2">
24+
25+
<div className="text-lg pb-2 px-2">
2126
<a href={props.link} className="hover:underline">
22-
{props.institution}
27+
{props.gpa ? `${props.institution}, GPA: ${props.gpa}` : props.institution}
2328
</a>
2429
</div>
25-
<div className="text-md px-2">
26-
{props.gpa ? `GPA: ${props.gpa}` : ''}
27-
</div>
30+
31+
{props.coursework && props.coursework.length > 0 && (
32+
<>
33+
<div className="font-bold px-2 py-2 pb-4">
34+
Relevant Coursework
35+
</div>
36+
37+
<Pills items={props.coursework} />
38+
</>
39+
)}
2840
</div>
2941
</>
3042
);

‎src/components/experience/Experience.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import ExperienceItem from "./ExperienceItem.tsx";
2+
import SectionTitle from "../common/SectionTitle.tsx";
23

34
export default function Experience() {
45
return (
56
<>
6-
<div className="flex flex-col px-2 pb-8">
7-
<div className="text-3xl md:text-5xl py-1 md:py-4" id="experience">
8-
Experience
9-
</div>
7+
<div className="flex flex-col pb-8">
8+
9+
<SectionTitle title="Experience" id="experience"/>
1010

11-
<div className="flex flex-col gap-8 pt-2">
11+
<div className="flex flex-col gap-8 pt-2 px-2">
1212
<ExperienceItem
1313
company="Telic AI"
1414
jobTitle="Software Engineer"

‎src/components/experience/ExperienceItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export default function ExperienceItem(props: ExperienceItemProps) {
2929
</div>
3030

3131
<ul className="list-disc pl-4">
32-
{props.description.map((content) => (
33-
<li className="pl-2 py-1.5">
32+
{props.description.map((content, index) => (
33+
<li className="pl-2 py-1.5" key={index}>
3434
{content}
3535
</li>
3636
))}

‎src/components/header/HeaderListItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
interface HeaderListItemProps {
22
name: string;
33
id: string;
4+
index: number;
45
}
56

67
export default function HeaderListItem(props: HeaderListItemProps) {
78
return (
8-
<li className="hover:underline hover:scale-110 text-xl hidden sm:block">
9+
<li className="hover:underline hover:scale-110 text-xl hidden sm:block" key={props.index}>
910
<a href={`#${props.id}`}>
1011
{props.name}
1112
</a>

‎src/components/header/HeaderListItemMobile.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ interface HeaderListItemMobileProps {
66
id: string;
77
isOpen: boolean;
88
setIsOpen: Dispatch<SetStateAction<boolean>>;
9+
index: number;
910
}
1011

1112
export default function HeaderListItemMobile(props: HeaderListItemMobileProps) {
1213
return (
13-
<li className="hover:underline hover:scale-110 text-xl py-3 text-center">
14+
<li className="hover:underline hover:scale-110 text-xl py-3 text-center" key={props.index}>
1415
<a href={`#${props.id}`} onClick={() => props.setIsOpen(!props.isOpen)}>
1516
{props.name}
1617
</a>

‎src/components/header/NavbarContent.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ export default function NavbarContent() {
44
return (
55
<>
66
<ul className="gap-8 justify-center hidden md:flex py-8">
7-
<HeaderListItem name="Home" id="home" />
8-
<HeaderListItem name="Experience" id="experience" />
9-
<HeaderListItem name="Skills" id="skills" />
10-
<HeaderListItem name="Education" id="education" />
11-
<HeaderListItem name="Projects" id="projects" />
12-
<HeaderListItem name="Open Source" id="opensource" />
7+
<HeaderListItem name="Home" id="home" index={0}/>
8+
<HeaderListItem name="Experience" id="experience" index={1} />
9+
<HeaderListItem name="Skills" id="skills" index={2} />
10+
<HeaderListItem name="Education" id="education" index={3} />
11+
<HeaderListItem name="Projects" id="projects" index={4} />
12+
<HeaderListItem name="Open Source" id="opensource" index={5} />
1313
</ul>
1414
</>
1515
);

0 commit comments

Comments
 (0)