Replace Education and Experience with InfoSection
This commit is contained in:
parent
93d886f7a4
commit
027889648a
4 changed files with 0 additions and 353 deletions
|
|
@ -1,78 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styles from './Education.module.css';
|
|
||||||
|
|
||||||
const educationData = [
|
|
||||||
{
|
|
||||||
degree: "BACHELOR OF COMPUTER ENGINEERING",
|
|
||||||
institution: "University of Guelph",
|
|
||||||
duration: "2018 - 2023",
|
|
||||||
description: "As a graduate in Computer Engineering, my expertise encompasses a wide range of skills essential for modern computing systems. This includes circuit design and development, hardware integration, and system-level design integration. I am well-versed in the science and tools required for designing, constructing, implementing, and maintaining both software and hardware components in computing systems.",
|
|
||||||
courses: [
|
|
||||||
"Data Structures and Algorithms",
|
|
||||||
"Computer Networks",
|
|
||||||
"Operating Systems",
|
|
||||||
"Digital Systems Design",
|
|
||||||
"Embedded Systems Programming",
|
|
||||||
"Modeling Complex Systems"
|
|
||||||
],
|
|
||||||
achievements: [
|
|
||||||
"Dean's Honor List for 2 consecutive years",
|
|
||||||
"Engineering Design Winnder: Portable UTI Diagnosis",
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// Add more education entries if needed
|
|
||||||
{
|
|
||||||
degree: "MASTERS OF COMPUTER ENGINEERING",
|
|
||||||
institution: "University of Guelph",
|
|
||||||
duration: "2023 - 2024",
|
|
||||||
description: "",
|
|
||||||
courses: [
|
|
||||||
"Software Architecture in AI systems",
|
|
||||||
"Machien Vision",
|
|
||||||
"Deep Learning",
|
|
||||||
"Artificial Intelligence",
|
|
||||||
],
|
|
||||||
achievements: [
|
|
||||||
"Published on 'Boosting Edge-to-Cloud Data Transmission Efficiency with Semantic Transcoding' in IEEE CCECE 2024 Conferece",
|
|
||||||
]
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function Education() {
|
|
||||||
return (
|
|
||||||
<section className={styles.education}>
|
|
||||||
<h2 className={styles.sectionTitle}>Education</h2>
|
|
||||||
{educationData.map((edu, index) => (
|
|
||||||
<div key={index} className={styles.entry}>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<h3 className={styles.degree}>{edu.degree}</h3>
|
|
||||||
<p className={styles.institution}>
|
|
||||||
{edu.institution} <span className={styles.duration}>| {edu.duration}</span>
|
|
||||||
</p>
|
|
||||||
<p className={styles.description}>{edu.description}</p>
|
|
||||||
<div className={styles.additionalInfo}>
|
|
||||||
<div className={styles.courses}>
|
|
||||||
<h4>Relevant Courses</h4>
|
|
||||||
<ul>
|
|
||||||
{edu.courses.map((course, i) => (
|
|
||||||
<li key={i}>{course}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className={styles.achievements}>
|
|
||||||
<h4>Achievements</h4>
|
|
||||||
<ul>
|
|
||||||
{edu.achievements.map((achievement, i) => (
|
|
||||||
<li key={i}>{achievement}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Education;
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
:root {
|
|
||||||
--accent-color: #FF6B00; /* Change this to your preferred accent color */
|
|
||||||
}
|
|
||||||
|
|
||||||
.education {
|
|
||||||
padding: 50px 10%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 2px;
|
|
||||||
height: 100%; /* This will make the line extend the full height of the entry */
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.degree {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.institution {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.additionalInfo {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.courses, .achievements {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.courses h4, .achievements h4 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.courses ul, .achievements ul {
|
|
||||||
padding-left: 20px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.courses li, .achievements li {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.education {
|
|
||||||
padding: 30px 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.additionalInfo {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.courses, .achievements {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import styles from "./Experience.module.css";
|
|
||||||
|
|
||||||
const experienceData = [
|
|
||||||
{
|
|
||||||
title: "SOFTWARE DEVELOPMENT ENGINEER",
|
|
||||||
company: "Amazon",
|
|
||||||
logo: "/amazon.png",
|
|
||||||
location: "Vancouver, BC",
|
|
||||||
duration: "June 2022 - September 2022",
|
|
||||||
description:
|
|
||||||
"Conducted a thorough investigation, proposing solutions to streamline the resolution of manual conflicts for on-call teams. I then designed and developed a comprehensive full-stack solution to automate their workflow, which I presented to upper management as the ideal dashboard solution for on-call operations. To ensure its effectiveness, I conducted rigorous end-to-end testing and maintained the feature for ongoing success.",
|
|
||||||
skills: ["Full-stack development", "Workflow automation", "End-to-end testing", "Project management"],
|
|
||||||
techStack: ["React", "Node.js", "AWS Lambda", "DynamoDB", "Jest"],
|
|
||||||
},
|
|
||||||
// Add more experiences as needed
|
|
||||||
];
|
|
||||||
|
|
||||||
function Experience() {
|
|
||||||
return (
|
|
||||||
<section className={styles.experience}>
|
|
||||||
<h2 className={styles.sectionTitle}>Experience</h2>
|
|
||||||
{experienceData.map((exp, index) => (
|
|
||||||
<div key={index} className={styles.entry}>
|
|
||||||
<div className={styles.logoContainer}>
|
|
||||||
<img src={exp.logo} alt={`${exp.company} logo`} className={styles.logo} />
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<h3 className={styles.title}>{exp.title}</h3>
|
|
||||||
<p className={styles.companyInfo}>
|
|
||||||
{exp.company} | {exp.location} | {exp.duration}
|
|
||||||
</p>
|
|
||||||
<p className={styles.description}>{exp.description}</p>
|
|
||||||
<div className={styles.additionalInfo}>
|
|
||||||
<div className={styles.infoSection}>
|
|
||||||
<h4>Skills Gained:</h4>
|
|
||||||
<ul>
|
|
||||||
{exp.skills.map((skill, i) => (
|
|
||||||
<li key={i}>{skill}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className={styles.infoSection}>
|
|
||||||
<h4>Tech Stack:</h4>
|
|
||||||
<ul>
|
|
||||||
{exp.techStack.map((tech, i) => (
|
|
||||||
<li key={i}>{tech}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Experience;
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
:root {
|
|
||||||
--accent-color: #ff6b00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experience {
|
|
||||||
padding: 50px 10%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
padding-left: 20px;
|
|
||||||
border-left: 2px solid var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logoContainer {
|
|
||||||
flex: 0 0 80px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--accent-color);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.companyInfo {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.additionalInfo {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoSection {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoSection h4 {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoSection ul {
|
|
||||||
padding-left: 20px;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoSection li {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.experience {
|
|
||||||
padding: 30px 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logoContainer {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.additionalInfo {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue