diff --git a/script.js b/script.js index 00c8b1f..036f995 100644 --- a/script.js +++ b/script.js @@ -1,258 +1,258 @@ -// Theme toggle functionality -const storageKey = 'theme-preference'; - -const theme = { - value: getColorPreference(), -}; - -function getColorPreference() { - if (localStorage.getItem(storageKey)) { - return localStorage.getItem(storageKey); - } else { - return window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light'; - } -} - -function setPreference() { - localStorage.setItem(storageKey, theme.value); - reflectPreference(); -} - -function reflectPreference() { - document.firstElementChild.setAttribute('data-theme', theme.value); - document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value); -} - -function onClick() { - theme.value = theme.value === 'light' - ? 'dark' - : 'light'; - - setPreference(); -} - -// Content for different sections -const content = { - projects: ` -
-

Projects

-
-
- Faktible -

Faktible

-

A web application simplifying the process of quoting hardware

-
-
- Adoplastic -

Adoplastic

-

A real-world company website including quote functionality for booking

-
-
- Xyz -

Xyz

-

A real-world company website including quote functionality for booking

-
-
-
- `, - experience: ` -
-

Experience

-
-
-
-

Front-end Developer @ Never8

- Feb 2022 - July 2023 -

Maintained and developed new features for a React.js project. Worked on improving the user interface and experience, implementing responsive designs, and optimizing performance.

-
-
-
-
-

Front-end Developer @ EDteam

- June 2021 - Feb 2022 -

Developed and maintained web apps using Next.js and TypeScript. Collaborated with the design team to implement user-friendly interfaces and ensure cross-browser compatibility.

-
-
-
-
- `, - education: ` -
-

Education

-
-
-
-

Self-Taught Developer

- 2019 - Present -

Focused on web technologies, particularly in JavaScript frameworks. Completed numerous online courses and personal projects to hone skills in front-end development.

-
-
-
-
- `, - skills: ` -
-

Skills

-
-

Frontend Skills

- -
-
-

Technical Skills

- -
-
-

Soft Skills

- -
-
- `, - contact: ` -
-

Contact Me

-
- - - -
-
- Schedule a Meeting -
-
- `, -}; - -// Project data -const projectData = { - project1: { - title: 'Faktible', - image: 'assets/images/projects/faktible.jpg', - description: 'A web application simplifying the process of quoting hardware. It streamlines the quoting process, making it easier for businesses to provide accurate and timely quotes to their customers.', - technologies: ['React', 'Node.js', 'PostgreSQL'], - liveLink: '#', - repoLink: '#', - }, - project2: { - title: 'Adoplastic', - image: 'assets/images/projects/adoplastic.jpg', - description: 'A real-world company website including quote functionality for booking. This project showcases the ability to create a professional, functional website that meets specific business needs.', - technologies: ['Next.js', 'Tailwind CSS'], - liveLink: '#', - repoLink: '#', - }, - project3: { - title: 'Xyz', - image: 'assets/images/projects/adoplastic.jpg', - description: 'Another real-world company website with advanced features. This project demonstrates the ability to handle complex requirements and deliver a polished end product.', - technologies: ['React', 'Redux', 'Node.js'], - liveLink: '#', - repoLink: '#', - }, -}; - -// Function to open project modal -function openProjectModal(projectId) { - const projectDetails = projectData[projectId]; - if (projectDetails) { - document.getElementById('modal-content').innerHTML = ` -

${projectDetails.title}

- ${projectDetails.title} -

${projectDetails.description}

-

Technologies Used:

- - View Live - View Repository - `; - document.getElementById('project-modal').classList.add('active'); - document.getElementById('modal-overlay').classList.add('active'); - document.body.classList.add('modal-active'); - } -} - -// Function to close project modal -function closeProjectModal() { - document.getElementById('project-modal').classList.remove('active'); - document.getElementById('modal-overlay').classList.remove('active'); - document.body.classList.remove('modal-active'); -} - -// Set theme early to avoid page flashes -reflectPreference(); - -window.onload = () => { - // Set theme on load for screen readers - reflectPreference(); - - // Theme toggle event listener - document.querySelector('#theme-toggle').addEventListener('click', onClick); - - // Navigation menu event listeners - document.querySelectorAll('.menu-item').forEach((item) => { - item.addEventListener('click', function (e) { - e.preventDefault(); - document.querySelectorAll('.menu-item').forEach((el) => el.classList.remove('active')); - this.classList.add('active'); - const section = this.getAttribute('data-section'); - document.getElementById('main-content').innerHTML = content[section]; - // Do not scroll to top - }); - }); - - // Initially load "Projects" section - document.getElementById('main-content').innerHTML = content['projects']; - - // Project modal functionality - document.addEventListener('click', function (e) { - if (e.target && (e.target.matches('.project-card') || e.target.closest('.project-card'))) { - const projectCard = e.target.closest('.project-card'); - const projectId = projectCard.getAttribute('data-project-id'); - openProjectModal(projectId); - } - - if (e.target && (e.target.matches('.close-button') || e.target.matches('.modal-overlay'))) { - closeProjectModal(); - } - - // Close modal if click outside modal-content - if (e.target.matches('.modal') && !e.target.closest('.modal-content')) { - closeProjectModal(); - } - }); - - // Close modal on 'Esc' key press - document.addEventListener('keydown', function (e) { - if (e.key === 'Escape' && document.body.classList.contains('modal-active')) { - closeProjectModal(); - } - }); -}; - -// Sync with system changes -window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', ({matches:isDark}) => { - theme.value = isDark ? 'dark' : 'light'; - setPreference(); - }); +// Theme toggle functionality +const storageKey = 'theme-preference'; + +const theme = { + value: getColorPreference(), +}; + +function getColorPreference() { + if (localStorage.getItem(storageKey)) { + return localStorage.getItem(storageKey); + } else { + return window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; + } +} + +function setPreference() { + localStorage.setItem(storageKey, theme.value); + reflectPreference(); +} + +function reflectPreference() { + document.firstElementChild.setAttribute('data-theme', theme.value); + document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value); +} + +function onClick() { + theme.value = theme.value === 'light' + ? 'dark' + : 'light'; + + setPreference(); +} + +// Content for different sections +const content = { + projects: ` +
+

Projects

+
+
+ Faktible +

Faktible

+

A web application simplifying the process of quoting hardware

+
+
+ Adoplastic +

Adoplastic

+

A real-world company website including quote functionality for booking

+
+
+ Xyz +

Xyz

+

A real-world company website including quote functionality for booking

+
+
+
+ `, + experience: ` +
+

Experience

+
+
+
+

Front-end Developer @ Never8

+ Feb 2022 - July 2023 +

Maintained and developed new features for a React.js project. Worked on improving the user interface and experience, implementing responsive designs, and optimizing performance.

+
+
+
+
+

Front-end Developer @ EDteam

+ June 2021 - Feb 2022 +

Developed and maintained web apps using Next.js and TypeScript. Collaborated with the design team to implement user-friendly interfaces and ensure cross-browser compatibility.

+
+
+
+
+ `, + education: ` +
+

Education

+
+
+
+

Self-Taught Developer

+ 2019 - Present +

Focused on web technologies, particularly in JavaScript frameworks. Completed numerous online courses and personal projects to hone skills in front-end development.

+
+
+
+
+ `, + skills: ` +
+

Skills

+
+

Frontend Skills

+ +
+
+

Technical Skills

+ +
+
+

Soft Skills

+ +
+
+ `, + contact: ` +
+

Contact Me

+
+ + + +
+
+ Schedule a Meeting +
+
+ `, +}; + +// Project data +const projectData = { + project1: { + title: 'Faktible', + image: 'assets/images/projects/faktible.jpg', + description: 'A web application simplifying the process of quoting hardware. It streamlines the quoting process, making it easier for businesses to provide accurate and timely quotes to their customers.', + technologies: ['React', 'Node.js', 'PostgreSQL'], + liveLink: '#', + repoLink: '#', + }, + project2: { + title: 'Adoplastic', + image: 'assets/images/projects/adoplastic.jpg', + description: 'A real-world company website including quote functionality for booking. This project showcases the ability to create a professional, functional website that meets specific business needs.', + technologies: ['Next.js', 'Tailwind CSS'], + liveLink: '#', + repoLink: '#', + }, + project3: { + title: 'Xyz', + image: 'assets/images/projects/adoplastic.jpg', + description: 'Another real-world company website with advanced features. This project demonstrates the ability to handle complex requirements and deliver a polished end product.', + technologies: ['React', 'Redux', 'Node.js'], + liveLink: '#', + repoLink: '#', + }, +}; + +// Function to open project modal +function openProjectModal(projectId) { + const projectDetails = projectData[projectId]; + if (projectDetails) { + document.getElementById('modal-content').innerHTML = ` +

${projectDetails.title}

+ ${projectDetails.title} +

${projectDetails.description}

+

Technologies Used:

+ + View Live + View Repository + `; + document.getElementById('project-modal').classList.add('active'); + document.getElementById('modal-overlay').classList.add('active'); + document.body.classList.add('modal-active'); + } +} + +// Function to close project modal +function closeProjectModal() { + document.getElementById('project-modal').classList.remove('active'); + document.getElementById('modal-overlay').classList.remove('active'); + document.body.classList.remove('modal-active'); +} + +// Set theme early to avoid page flashes +reflectPreference(); + +window.onload = () => { + // Set theme on load for screen readers + reflectPreference(); + + // Theme toggle event listener + document.querySelector('#theme-toggle').addEventListener('click', onClick); + + // Navigation menu event listeners + document.querySelectorAll('.menu-item').forEach((item) => { + item.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelectorAll('.menu-item').forEach((el) => el.classList.remove('active')); + this.classList.add('active'); + const section = this.getAttribute('data-section'); + document.getElementById('main-content').innerHTML = content[section]; + // Do not scroll to top + }); + }); + + // Initially load "Projects" section + document.getElementById('main-content').innerHTML = content['projects']; + + // Project modal functionality + document.addEventListener('click', function (e) { + if (e.target && (e.target.matches('.project-card') || e.target.closest('.project-card'))) { + const projectCard = e.target.closest('.project-card'); + const projectId = projectCard.getAttribute('data-project-id'); + openProjectModal(projectId); + } + + if (e.target && (e.target.matches('.close-button') || e.target.matches('.modal-overlay'))) { + closeProjectModal(); + } + + // Close modal if click outside modal-content + if (e.target.matches('.modal') && !e.target.closest('.modal-content')) { + closeProjectModal(); + } + }); + + // Close modal on 'Esc' key press + document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && document.body.classList.contains('modal-active')) { + closeProjectModal(); + } + }); +}; + +// Sync with system changes +window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', ({matches:isDark}) => { + theme.value = isDark ? 'dark' : 'light'; + setPreference(); + });