-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
make the javascript vite in the modualized format
- Loading branch information
1 parent
03e61a6
commit 394881a
Showing
10 changed files
with
561 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = ` | ||
| <h2>Skills</h2> | ||
| <h6>"${skillsQuote.text}"-- ${skillsQuote.author}</h6> | ||
| <div class="skills_wrapper"> | ||
| <div class="row"> | ||
| ${generateSkillItems()} | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| function generateSkillItems() { | ||
| return skillsData.map(skill => ` | ||
| <div class="col-md-3"> | ||
| <div class="skills_icon delay-03s animated wow zoomIn"> | ||
| ${skill.img ? `<img src="${skill.img}" alt="${skill.alt}" />` : '<span></span>'} | ||
| </div> | ||
| <div class="skills_block"> | ||
| <h3 class="animated fadeInUp wow">${skill.title}</h3> | ||
| <p class="animated fadeInDown wow">${skill.date}</p> | ||
| </div> | ||
| </div> | ||
| `).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(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = ` | ||
| <h2>Work Experience</h2> | ||
| <p>"${quote.text}" — ${quote.author}</p> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| function generateTimelineItem(item, side) { | ||
| return ` | ||
| <div class="${side === 'right' ? 'col-sm-offset-6' : ''} col-sm-6 timeline-item"> | ||
| <div class="row"> | ||
| <div class="${side === 'right' ? 'col-sm-offset-1' : ''} col-sm-11"> | ||
| <div class="timeline-panel ${side === 'right' ? 'debits' : 'credits'}"> | ||
| <ul class="timeline-panel-ul"> | ||
| <li><span class="importo">${item.title}</span></li> | ||
| <li><span class="causale"> | ||
| <img src="/img/diamond.gif"> | ||
| <a href="${item.companyUrl}">${item.company}| ${item.location}</a> | ||
| </span> | ||
| </li> | ||
| <li><p><small class="text-muted">${item.period}</small></p></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| 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 = ` | ||
| <div class="timeline-badge timeline-filter-movement"> | ||
| <img src="/img/year.png" style="margin: 0 0 80px; position: relative"> | ||
| </div> | ||
| `; | ||
| timeline.appendChild(yearImageSection); | ||
|
|
||
| let side = 'left'; | ||
| experienceItems.forEach(yearGroup => { | ||
| const yearSection = document.createElement('div'); | ||
| yearSection.className = 'row timeline-movement'; | ||
|
|
||
| yearSection.innerHTML = ` | ||
| <div class="timeline-badge"> | ||
| <span class="timeline-balloon-date-day"></span> | ||
| <span class="timeline-balloon-date-month">${yearGroup.year}</span> | ||
| </div> | ||
| `; | ||
|
|
||
| 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 = ` | ||
| <div class="container"> | ||
| <div class="heading text-center" style="margin: 0 0 20px"> | ||
| <h2>Work Experience</h2> | ||
| <p>placeholder</p> | ||
| </div> | ||
| <div id="timeline"> | ||
| <!-- Timeline items will be generated here --> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| // Generate content | ||
| generateTimelineHeader(); | ||
| generateTimeline(); | ||
| } |
Oops, something went wrong.