v0.8.2 Add projects images to public directory, Move data from App.jsx to public directory.
This commit is contained in:
parent
addb8cef92
commit
f6342abfaa
10 changed files with 172 additions and 150 deletions
178
src/App.jsx
178
src/App.jsx
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import Header from "./components/header/Header";
|
||||
import Footer from "./components/footer/Footer";
|
||||
|
|
@ -10,155 +10,35 @@ import AboutMe from "./components/aboutMe/AboutMe";
|
|||
|
||||
import styles from "./App.module.css";
|
||||
|
||||
// Temp data
|
||||
const educationData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Bachelor of Engineering - Computer Engineering",
|
||||
organization: "University of Guelph",
|
||||
logo: "/logos/uog.png", // Add the actual path to the university logo
|
||||
location: "Guelph, ON", // Add the location if available
|
||||
duration: "2019 - 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.",
|
||||
achievements: ["Dean's Honor List for 2 consecutive years", "Engineering Design Winner: Portable UTI Diagnosis"],
|
||||
skills: ["Circuit design and development", "Hardware integration", "System-level design integration", "Software and hardware component maintenance"],
|
||||
techStack: ["Data Structures and Algorithms", "Computer Networks", "Operating Systems", "Digital Systems Design", "Embedded Systems Programming", "Modeling Complex Systems"],
|
||||
skillsTitle: "Key Skills",
|
||||
techStackTitle: "Relevant Courses",
|
||||
},
|
||||
{
|
||||
id: 2, // This will be displayed after the Masters degree
|
||||
title: "Bachelor of Computer Science",
|
||||
organization: "University of Guelph",
|
||||
logo: "/logos/uog.png",
|
||||
location: "Guelph, ON",
|
||||
duration: "2020 - 2023",
|
||||
description:
|
||||
"As a graduate in Computer Science, the journey emphasizes mathematical principles, systems development, programming, and in-depth algorithm design and analysis. With a curriculum that spans topics like databases, data structures, and full-stack development. Additionally, my educational background covers essential aspects such as cybersecurity, networking, and other crucial disciplines.",
|
||||
skills: ["Mathematical principles", "Systems development", "Programming", "Algorithm design and analysis", "Full-stack development", "Networking"],
|
||||
techStack: ["Databases", "Data Structures", "Algorithms", "Web Development", "Computer Networks"],
|
||||
achievements: [
|
||||
// Add any specific achievements, awards, or notable projects here
|
||||
],
|
||||
skillsTitle: "Key Skills",
|
||||
techStackTitle: "Core Areas",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "MASc Candidate - Computer Engineering",
|
||||
organization: "University of Guelph",
|
||||
logo: "/logos/uog.png", // Add the actual path to the university logo
|
||||
location: "Guelph, ON", // Add the location if available
|
||||
duration: "2023 - 2024",
|
||||
description: "Pursuing advanced studies in Computer Engineering with a focus on AI systems and machine learning applications.",
|
||||
achievements: ["Published on 'Boosting Edge-to-Cloud Data Transmission Efficiency with Semantic Transcoding' in IEEE CCECE 2024 Conference"],
|
||||
skills: ["Advanced AI systems design", "Machine learning model development", "Computer vision techniques", "Deep learning architectures"],
|
||||
techStack: ["Software Architecture in AI systems", "Machine Vision", "Deep Learning", "Artificial Intelligence"],
|
||||
skillsTitle: "Key Skills",
|
||||
techStackTitle: "Relevant Courses",
|
||||
},
|
||||
];
|
||||
|
||||
const experienceData = [
|
||||
{
|
||||
id: 3, // Newest entry
|
||||
title: "Graduate Researcher",
|
||||
organization: "University of Guelph",
|
||||
logo: "/logos/uog.png",
|
||||
location: "Guelph, Ontario",
|
||||
duration: "Jan 2024 - Dec 2024",
|
||||
description:
|
||||
"Conducted research on transformer-based models for semantic data transmission in end-to-end (E2E) communications, developing and training models using PyTorch to enhance data transmission efficiency and reliability.",
|
||||
skills: ["Transformer-based models", "Semantic data transmission", "E2E communications", "PyTorch", "Research publication"],
|
||||
techStack: ["PyTorch", "E2E communication protocols", "Data transmission algorithms"],
|
||||
achievements: ["Published findings in CCECE 2024, presenting results that showed an improvement in data transmission latencies"],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Software Developer",
|
||||
organization: "University of Guelph - Robotics Institute",
|
||||
logo: "/logos/uog.png",
|
||||
location: "Guelph, Ontario",
|
||||
duration: "Oct 2022 - Oct 2023",
|
||||
description: "Developed ROS2 modules for an Assistive Robotic Feeding System, managed a React Native mobile app, and deployed analytics applications using AWS services.",
|
||||
skills: ["ROS2 development", "Mobile app development", "Cloud deployment", "Database management", "IoT integration"],
|
||||
techStack: ["C++", "Python", "React Native", "AWS (EC2, S3)", "PostgreSQL", "BLE"],
|
||||
achievements: [
|
||||
"Developed ROS2 modules for an Assistive Robotic Feeding System for Elderly Individuals",
|
||||
"Improved BLE reliability in React Native mobile app",
|
||||
"Successfully deployed analytics application on AWS",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1, // Oldest entry
|
||||
title: "Information Technology Analyst",
|
||||
organization: "Kitchener Downtown Community Health Centre - SRHC",
|
||||
logo: "/logos/srhc.png",
|
||||
location: "Kitchener, Ontario",
|
||||
duration: "Jul 2020 - Oct 2020",
|
||||
description:
|
||||
"Managed IT infrastructure upgrades, streamlined communication systems, and maintained electronic medical record systems, resulting in significant cost savings and improved patient care efficiency.",
|
||||
skills: ["IT infrastructure management", "Budget optimization", "Healthcare IT systems", "Process improvement"],
|
||||
techStack: ["OSCAR McMaster EMR", "TELUS healthcare infrastructure", "Firewall solutions"],
|
||||
achievements: [
|
||||
"Saved 45% of a $10,000 budget for equipment upgrades",
|
||||
"Reduced patient waiting times by 30% through streamlined communication",
|
||||
"Successfully migrated to new TELUS healthcare infrastructure",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const projectsData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Project 1",
|
||||
category: "Web Development",
|
||||
images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"],
|
||||
description: "A brief description of Project 1.",
|
||||
technologies: ["React", "Node.js", "MongoDB"],
|
||||
features: ["User authentication", "Real-time data updates", "Responsive design"],
|
||||
githubLink: "https://github.com/yourusername/project1",
|
||||
liveLink: "https://project1-demo.com",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Project 1",
|
||||
category: "Machine Learning",
|
||||
images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"],
|
||||
description: "A brief description of Project 1.",
|
||||
technologies: ["React", "Node.js", "MongoDB"],
|
||||
features: ["User authentication", "Real-time data updates", "Responsive design"],
|
||||
githubLink: "https://github.com/yourusername/project1",
|
||||
liveLink: "https://project1-demo.com",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Project 1",
|
||||
category: "Embedded Systems",
|
||||
images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"],
|
||||
description: "A brief description of Project 1.",
|
||||
technologies: ["React", "Node.js", "MongoDB"],
|
||||
features: ["User authentication", "Real-time data updates", "Responsive design"],
|
||||
githubLink: "https://github.com/yourusername/project1",
|
||||
liveLink: "https://project1-demo.com",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Project 1",
|
||||
category: "Web Development",
|
||||
images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"],
|
||||
description: "A brief description of Project 1.",
|
||||
technologies: ["React", "Node.js", "MongoDB"],
|
||||
features: ["User authentication", "Real-time data updates", "Responsive design"],
|
||||
githubLink: "https://github.com/yourusername/project1",
|
||||
liveLink: "https://project1-demo.com",
|
||||
},
|
||||
|
||||
// Add more projects...
|
||||
];
|
||||
|
||||
function App() {
|
||||
const [educationData, setEducationData] = useState([]);
|
||||
const [experienceData, setExperienceData] = useState([]);
|
||||
const [projectsData, setProjectsData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEducationData = async () => {
|
||||
const response = await fetch("/data/educationData.json");
|
||||
const data = await response.json();
|
||||
setEducationData(data);
|
||||
};
|
||||
|
||||
const fetchExperienceData = async () => {
|
||||
const response = await fetch("/data/experienceData.json");
|
||||
const data = await response.json();
|
||||
setExperienceData(data);
|
||||
};
|
||||
|
||||
const fetchProjectsData = async () => {
|
||||
const response = await fetch("/data/projectsData.json");
|
||||
const data = await response.json();
|
||||
setProjectsData(data);
|
||||
};
|
||||
|
||||
fetchEducationData();
|
||||
fetchExperienceData();
|
||||
fetchProjectsData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.app}>
|
||||
<Header />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue