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
44
public/data/educationData.json
Normal file
44
public/data/educationData.json
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
[
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Bachelor of Engineering - Computer Engineering",
|
||||
"organization": "University of Guelph",
|
||||
"logo": "/logos/uog.png",
|
||||
"location": "Guelph, ON",
|
||||
"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,
|
||||
"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": [],
|
||||
"skillsTitle": "Key Skills",
|
||||
"techStackTitle": "Core Areas"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "MASc Candidate - Computer Engineering",
|
||||
"organization": "University of Guelph",
|
||||
"logo": "/logos/uog.png",
|
||||
"location": "Guelph, ON",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
46
public/data/experienceData.json
Normal file
46
public/data/experienceData.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
[
|
||||
{
|
||||
"id": 3,
|
||||
"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,
|
||||
"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"
|
||||
]
|
||||
}
|
||||
]
|
||||
52
public/data/projectsData.json
Normal file
52
public/data/projectsData.json
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
[
|
||||
{
|
||||
"id": 1,
|
||||
"title": "PaperKeypad",
|
||||
"category": "Misc",
|
||||
"images": ["/projects/keypad0.jpg"],
|
||||
"description": "Ever need to use a keyboard, but you got only your phone and a printer, PaperKeypad is a keypad that is made of paper.",
|
||||
"technologies": ["Java", "JavaFX", "Android Studio"],
|
||||
"features": ["Mobile sensor manipulation", "Responsive design"],
|
||||
"githubLink": "https://github.com/betato/PaperKeypad"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "StonkBot",
|
||||
"category": "Misc",
|
||||
"images": ["/projects/stonkbot0.jpg"],
|
||||
"description": "The fear of losing money is common among first-time and seasoned investors alike. This inspired the creation of Stonk Bot, a fantasy trading platform that can be implemented in Discord.",
|
||||
"technologies": ["Python", "VS Code", "Matplotlib", "Financial Modeling Prep API", "Discord API"],
|
||||
"features": ["Buy shares", "Sell shares", "View stock information", "View personal portfolio", "View leaderboard"],
|
||||
"githubLink": "https://github.com/aidanbruneel/stonkbot",
|
||||
"liveLink": "https://discord.com/invite/tQNkk7v7R8"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Car Model Classification",
|
||||
"category": "Machine Learning",
|
||||
"images": ["/projects/carmodelclass0.png"],
|
||||
"description": "Developing a computer vision application to identify a vehicle model from a given image is an interesting and challenging problem to solve. Challenge of this problem is that different vehicle models can appear very similar and the same vehicle can look different and hard to identify depending on lighting conditions, angle and many other factors. In this project, I decided to train a Convolutional Neural Network(CNN) to generate a model that can identify a given vehicle model.",
|
||||
"technologies": ["Python", "Tensorflow", "CNN", "Deep learning", "ResNet", "EfficientNet", "Stanford Cars Dataset"],
|
||||
"githubLink": "https://github.com/mnisyif/carClassificationModel"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "Memory Allocation Simulations",
|
||||
"category": "Misc",
|
||||
"images": ["/projects/memallc0.png"],
|
||||
"description": "This implementation uses doubly linked list to simulate memory allocation given 4 different memory management algorithms",
|
||||
"technologies": ["C", "CMake", "Data structures"],
|
||||
"features": ["First fit", "Best fit", "Next fit", "Worst fit"],
|
||||
"githubLink": "https://github.com/mnisyif/MemoryAllocationAlgorithm/tree/main"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "Portfolio Website",
|
||||
"category": "Web Development",
|
||||
"images": ["/projects/memallc0.png"],
|
||||
"description": "This implementation uses doubly linked list to simulate memory allocation given 4 different memory management algorithms",
|
||||
"technologies": ["C", "CMake", "Data structures"],
|
||||
"features": ["First fit", "Best fit", "Next fit", "Worst fit"],
|
||||
"githubLink": "https://github.com/mnisyif/MemoryAllocationAlgorithm/tree/main"
|
||||
}
|
||||
]
|
||||
BIN
public/projects/carmodelclass0.png
Normal file
BIN
public/projects/carmodelclass0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
BIN
public/projects/keypad0.jpg
Normal file
BIN
public/projects/keypad0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
public/projects/memallc0.png
Normal file
BIN
public/projects/memallc0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/projects/portfolio0.png
Normal file
BIN
public/projects/portfolio0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
BIN
public/projects/stonkbot0.jpg
Normal file
BIN
public/projects/stonkbot0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
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 />
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
0.8.1
|
||||
0.8.2
|
||||
Loading…
Add table
Add a link
Reference in a new issue