diff --git a/index.html b/index.html index b2fda10..bd54413 100644 --- a/index.html +++ b/index.html @@ -207,9 +207,7 @@

Majoring in Honours Bachelor of Computer Science with AI Specialization
-
- -
+
@@ -217,59 +215,14 @@

Majoring in Honours Bachelor of Computer Science with AI Specialization
- -
-
-

Work Experience

-

placeholder

-
-
- -
-
+
- -
- -
-

Projects

-
-
- - -
- -
-
-
    - - -
-
- - -
- - -
- -
- - -
- -
-
-
-
- -
@@ -295,9 +248,8 @@

GitHub

- - - + + diff --git a/src/sections/experience-items.js b/public/js/sections/experience-items.js similarity index 100% rename from src/sections/experience-items.js rename to public/js/sections/experience-items.js diff --git a/src/sections/portfolio-items.js b/public/js/sections/portfolio-items.js similarity index 100% rename from src/sections/portfolio-items.js rename to public/js/sections/portfolio-items.js diff --git a/public/js/sections/skills-items.js b/public/js/sections/skills-items.js new file mode 100644 index 0000000..476ade8 --- /dev/null +++ b/public/js/sections/skills-items.js @@ -0,0 +1,83 @@ +const skillsData = [ + { + img: 'img/aws-practitioner.png', + alt: 'AWS-CloudPractitioner-2021', + title: 'AWS Certified Practitioner', + date: '2 January 2021' + }, + { + img: 'img/aws-developer.png', + alt: 'AWS-Developer', + title: 'AWS Certified Developer', + date: '29 August 2021' + }, + { + img: 'img/aws-devops-prof.png', + alt: 'AWS-SysOps', + title: 'AWS Certified DevOps Engineer - Professional', + date: '23 August 2024' + }, + { + img: '', + alt: '', + title: '?', + date: '' + } + ]; + + const skillsQuote = { + text: "The greatest scientific discovery was the discovery of ignorance.", + author: "Yuval Noah Harari, Homo Deus: A History of Tomorrow" + }; + + function generateSkillsSection() { + const section = document.getElementById('skills'); + if (!section) return; + + const container = section.querySelector('.container'); + container.innerHTML = ` + +

Skills

+
"${skillsQuote.text}"-- ${skillsQuote.author}
+
+
+ ${generateSkillItems()} +
+
+ `; + } + + function generateSkillItems() { + return skillsData.map(skill => ` +
+
+ ${skill.img ? `${skill.alt}` : ''} +
+
+

${skill.title}

+

${skill.date}

+
+
+ `).join(''); + } + + function setSkillsBackground() { + const skillsSection = document.getElementById('skills'); + if (skillsSection) { + skillsSection.style.cssText = ` + padding: 20px 0px; + background: url("../img/spacexRocket.jpeg") no-repeat center; + background-size: cover; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + position: center; + `; + } + } + + document.addEventListener('DOMContentLoaded', () => { + generateSkillsSection(); + setSkillsBackground(); + }); \ No newline at end of file diff --git a/src/components/experience.js b/src/components/experience.js new file mode 100644 index 0000000..80e42e1 --- /dev/null +++ b/src/components/experience.js @@ -0,0 +1,168 @@ +export const experienceItems = [ + { + year: '2024', + positions: [ + { + title: 'Software Developer Intern - DevOps (Hybrid)', + company: 'Open Text Corporation', + location: 'Ottawa, ON, Canada', + companyUrl: 'https://www.opentext.com/', + period: 'Sep.3 ~ Dec.20, 2024 (4 months)', + }, + { + title: 'Cloud Engineer Intern (Remote)', + company: 'Sun Life Financial', + location: 'Toronto, ON, Canada', + companyUrl: 'https://www.sunlife.ca/en/', + period: 'May.6~ Aug.30, 2024 (4 months)', + } + ] + }, + { + year: '2023', + positions: [ + { + title: 'Site Reliability Engineer Intern (Remote)', + company: 'OANDA (Canada) Corporation', + location: 'Toronto, ON, Canada', + companyUrl: 'https://oanda.com/ca-en/', + period: 'Jan.9 ~ Apr.21, 2023 (4 Months)', + } + ] + }, + { + year: '2022', + positions: [ + { + title: 'Site Reliability Engineer Intern (Hybrid)', + company: 'Carta Maple Technologies Inc.', + location: 'Waterloo, ON, Canada', + companyUrl: 'https://carta.com/', + period: 'May.2 ~ Aug.26, 2022 (4 Months)', + } + ] + }, + { + year: '2021', + positions: [ + { + title: 'Software Development Co-op Student (Remote)', + company: 'VirtaMove Corp.', + location: 'Ottawa, ON, Canada', + companyUrl: 'https://www.virtamove.com/about-us', + period: 'May.6 ~ Aug.27, 2021 (4 Months)', + } + ] + } +]; +export const quotes = [ + { + text: "Knowledge = Experience x Sensitivity", + author: "Yuval Noah Harari" + } +]; + +function generateRandomQuote() { + return quotes[0]; // Using first quote for consistency +} + +export function generateTimelineHeader() { + const quote = generateRandomQuote(); + const header = document.querySelector('#experience .heading'); + if (header) { + header.innerHTML = ` +

Work Experience

+

"${quote.text}" — ${quote.author}

+ `; + } +} + +function generateTimelineItem(item, side) { + return ` +
+
+
+
+ +
+
+
+
+ `; +} + +export function generateTimeline() { + const timeline = document.getElementById('timeline'); + if (!timeline) { + console.error('Timeline element not found'); + return; + } + + // Add timeline year image at top + const yearImageSection = document.createElement('div'); + yearImageSection.className = 'row timeline-movement timeline-movement-top'; + yearImageSection.innerHTML = ` +
+ +
+ `; + timeline.appendChild(yearImageSection); + + let side = 'left'; + experienceItems.forEach(yearGroup => { + const yearSection = document.createElement('div'); + yearSection.className = 'row timeline-movement'; + + yearSection.innerHTML = ` +
+ + ${yearGroup.year} +
+ `; + + yearGroup.positions.forEach(position => { + yearSection.innerHTML += generateTimelineItem(position, side); + side = side === 'left' ? 'right' : 'left'; + }); + + timeline.appendChild(yearSection); + }); +} + +export function initExperience() { + let section = document.getElementById('experience'); + + // Create section if it doesn't exist + if (!section) { + section = document.createElement('section'); + section.id = 'experience'; + section.className = 'experience'; + section.style.cssText = 'background: #f2f2f2; padding: 30px 0;'; + document.body.appendChild(section); + } + + // Create container structure + section.innerHTML = ` +
+
+

Work Experience

+

placeholder

+
+
+ +
+
+ `; + + // Generate content + generateTimelineHeader(); + generateTimeline(); +} \ No newline at end of file diff --git a/src/components/portfolio.js b/src/components/portfolio.js new file mode 100644 index 0000000..461bff7 --- /dev/null +++ b/src/components/portfolio.js @@ -0,0 +1,168 @@ +export const portfolioItems = [ + { + category: 'CV', + title: 'K-Means Algorithm for Unsupervised Learning', + image: '/img/bunny.bmp', + link: '/vids/K-means_V1.mp4', + description: 'Enhancing image understanding through the extraction of meaningful patterns from data, improving visual comprehension.' + } +]; + +export const portfolioFilters = [ + {id: 'all', label: 'All', filter: '*'}, + {id: 'nengo', label: 'Neuroscience', filter: '.Nengo'}, + {id: 'rl', label: 'Reinforcement Learning', filter: '.RL'}, + {id: 'cv', label: 'Computer Vision', filter: '.CV'}, + {id: 'swe', label: 'Software Developments', filter: '.SWE'}, + {id: 'aws', label: 'AWS', filter: '.AWS'} +]; + +export const portfolioQuotes = [ + { + text: "Necessity is the mother of invention", + author: "Plato" + }, + { + text: "Knowledge = Experience x Sensitivity", + author: "Yuval Noah Harari" + } +]; + +function generateTitleSection() { + return ` +
+
+

Projects

+
+
+
+ `; +} + +function generateFiltersSection() { + return ` +
+
+ +
+
+ `; +} + +function generatePortfolioWrapper() { + return ` +
+
+ `; +} + +function generateProjectContainer() { + return ` +
+
+
+
+ `; +} + +export function generatePortfolioSection() { + let section = document.getElementById('Portfolio'); + + if (!section) { + section = document.createElement('section'); + section.id = 'Portfolio'; + section.className = 'content'; + document.body.appendChild(section); + } + + section.innerHTML = ` + ${generateTitleSection()} +
+ ${generateFiltersSection()} + ${generatePortfolioWrapper()} +
+ ${generateProjectContainer()} + `; +} + +export function initializePortfolio() { + generatePortfolioSection(); + populateFilters(); + populatePortfolioItems(); + displayQuote(); + initializeIsotope(); +} + +function populateFilters() { + const filterList = document.querySelector('#filters ul.clearfix'); + if (!filterList) return; + + portfolioFilters.forEach(filter => { + const li = document.createElement('li'); + li.innerHTML = ` + +
${filter.label}
+ + `; + filterList.appendChild(li); + }); +} + +function populatePortfolioItems() { + const wrapper = document.getElementById('portfolio_wrapper'); + if (!wrapper) return; + + portfolioItems.forEach(item => { + const figure = document.createElement('figure'); + figure.className = `portfolio-item one-four ${item.category} isotope-item effect-oscar`; + + figure.innerHTML = ` + +
+ Portfolio +
+
+
+

${item.title}

+

${item.description}

+
+
+ + `; + + wrapper.appendChild(figure); + }); +} + +function displayQuote() { + const quote = portfolioQuotes[Math.floor(Math.random() * portfolioQuotes.length)]; + const quoteElement = document.querySelector('#Portfolio .section-title h6'); + if (quoteElement) { + quoteElement.textContent = `"${quote.text}" — ${quote.author}`; + } +} + +function initializeIsotope() { + const container = document.querySelector('#portfolio_wrapper'); + if (!container) return; + + const filterButtons = document.querySelectorAll('#filters a'); + filterButtons.forEach(button => { + button.addEventListener('click', (e) => { + e.preventDefault(); + filterButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + const filterValue = button.getAttribute('data-filter'); + $(container).isotope({ filter: filterValue }); + }); + }); + + // Initialize Isotope + $(container).isotope({ + layoutMode: 'fitRows', + animationEngine: 'best-available' + }); +} \ No newline at end of file diff --git a/src/components/skills.js b/src/components/skills.js new file mode 100644 index 0000000..f27294f --- /dev/null +++ b/src/components/skills.js @@ -0,0 +1,107 @@ +export const skillsData = [ + { + img: '/img/aws-practitioner.png', + alt: 'AWS-CloudPractitioner-2021', + title: 'AWS Certified Practitioner', + date: '2 January 2021' + }, + { + img: '/img/aws-developer.png', + alt: 'AWS-Developer', + title: 'AWS Certified Developer', + date: '29 August 2021' + }, + { + img: '/img/aws-devops-prof.png', + alt: 'AWS-SysOps', + title: 'AWS Certified DevOps Engineer - Professional', + date: '23 August 2024' + } +]; + +export const skillsQuote = { + text: "The greatest scientific discovery was the discovery of ignorance.", + author: "Yuval Noah Harari, Homo Deus: A History of Tomorrow" +}; + +export function generateSkillsSection() { + let section = document.getElementById('skills'); + + // Create section if it doesn't exist + if (!section) { + section = document.createElement('section'); + section.id = 'skills'; + document.body.appendChild(section); + } + + // Create or get container + let container = section.querySelector('.container'); + if (!container) { + container = document.createElement('div'); + container.className = 'container'; + section.appendChild(container); + } + + container.innerHTML = ` +
+

Skills

+
"${skillsQuote.text}"-- ${skillsQuote.author}
+
+
+
+ ${generateSkillItems()} +
+
+ `; +} + +function generateSkillItems() { + const total = skillsData.length; + const rows = []; + + for (let i = 0; i < total; i += 4) { + const rowItems = skillsData.slice(i, i + 4); + rows.push(generateSkillRow(rowItems)); + } + + return rows.join(''); +} + +function generateSkillRow(rowItems) { + const itemCount = rowItems.length; + const colWidth = itemCount === 1 ? 12 : + itemCount === 2 ? 6 : + itemCount === 3 ? 4 : 3; + + return ` +
+ ${rowItems.map(skill => ` +
+
+ ${skill.img ? `${skill.alt}` : ''} +
+
+

${skill.title}

+

${skill.date}

+
+
+ `).join('')} +
+ `; +} + +export function setSkillsBackground() { + const skillsSection = document.getElementById('skills'); + if (skillsSection) { + skillsSection.style.cssText = ` + padding: 20px 0px; + background: url("/img/spacexRocket.jpeg") no-repeat center; + background-size: cover; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + position: center; + `; + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..297ac4e --- /dev/null +++ b/src/main.js @@ -0,0 +1,12 @@ +import { generateSkillsSection, setSkillsBackground } from './components/skills.js'; +import { initExperience } from './components/experience.js'; +import { initializePortfolio } from './components/portfolio.js'; + +function initializeAll() { + generateSkillsSection(); + setSkillsBackground(); + initExperience(); + initializePortfolio(); +} + +document.addEventListener('DOMContentLoaded', initializeAll); \ No newline at end of file diff --git a/src/sections/skills-items.js b/src/sections/skills-items.js deleted file mode 100644 index 85771f0..0000000 --- a/src/sections/skills-items.js +++ /dev/null @@ -1,125 +0,0 @@ -const skillsData = [ - { - img: 'img/aws-practitioner.png', - alt: 'AWS-CloudPractitioner-2021', - title: 'AWS Certified Practitioner', - date: '2 January 2021' - }, - { - img: 'img/aws-developer.png', - alt: 'AWS-Developer', - title: 'AWS Certified Developer', - date: '29 August 2021' - }, - { - img: 'img/aws-devops-prof.png', - alt: 'AWS-SysOps', - title: 'AWS Certified DevOps Engineer - Professional', - date: '23 August 2024' - }, - -]; - -const skillsQuote = { - text: "The greatest scientific discovery was the discovery of ignorance.", - author: "Yuval Noah Harari, Homo Deus: A History of Tomorrow" -}; - -function generateSkillsSection() { - const section = document.getElementById('skills'); - if (!section) return; - - const container = section.querySelector('.container'); - container.innerHTML = ` -

Skills

-
"${skillsQuote.text}"-- ${skillsQuote.author}
-
-
- ${generateSkillItems()} -
-
- `; -} - -function generateRow(rowItems) { - const itemCount = rowItems.length; - const colWidth = itemCount === 1 ? 12 : - itemCount === 2 ? 6 : - itemCount === 3 ? 4 : 3; - - return ` -
- ${rowItems.map(skill => ` -
-
-
- ${skill.img ? `${skill.alt}` : ''} -
-
-

${skill.title}

-

${skill.date}

-
-
-
- `).join('')} -
- `; -} -function generateSkillItems() { - const total = skillsData.length; - const rows = []; - - // Split into rows of 4 - for (let i = 0; i < total; i += 4) { - const rowItems = skillsData.slice(i, i + 4); - const rowHtml = generateRow(rowItems); - rows.push(rowHtml); - } - - return rows.join(''); - } - - function generateRow(rowItems) { - const itemCount = rowItems.length; - const colWidth = itemCount === 1 ? 12 : - itemCount === 2 ? 6 : - itemCount === 3 ? 4 : 3; - - return ` -
- ${rowItems.map(skill => ` -
-
-
- ${skill.img ? `${skill.alt}` : ''} -
-
-

${skill.title}

-

${skill.date}

-
-
-
- `).join('')} -
- `; - } -function setSkillsBackground() { - const skillsSection = document.getElementById('skills'); - if (skillsSection) { - skillsSection.style.cssText = ` - padding: 20px 0px; - background: url("../img/spacexRocket.jpeg") no-repeat center; - background-size: cover; - height: auto; - display: block; - margin-left: auto; - margin-right: auto; - position: center; - `; - } -} - -document.addEventListener('DOMContentLoaded', () => { - generateSkillsSection(); - setSkillsBackground(); -}); \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 294e410..d6634fe 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,19 @@ -export default { - base: '/awesomefalcon1.github.io/', - build: { - outDir: 'dist', - sourcemap: true - } -} \ No newline at end of file +import { defineConfig } from 'vite' + +export default defineConfig({ + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + rollupOptions: { + input: { + main: '/index.html' + } + } + }, + resolve: { + alias: { + '@': '/src' + } + } +}) \ No newline at end of file