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