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
-
A web application simplifying the process of quoting hardware
-
-
-
-
Adoplastic
-
A real-world company website including quote functionality for booking
-
-
-
-
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
-
- - JavaScript
- - React.js
- - Next.js
- - HTML5
- - CSS3
-
-
-
-
Technical Skills
-
- - TypeScript
- - Node.js
- - TailwindCSS
- - Git
- - RESTful APIs
-
-
-
-
Soft Skills
-
- - Teamwork
- - Problem-solving
- - Communication
- - Time Management
- - Adaptability
-
-
-
- `,
- contact: `
-
- `,
-};
-
-// 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.description}
- Technologies Used:
-
- ${projectDetails.technologies.map((tech) => `- ${tech}
`).join('')}
-
- 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
+
A web application simplifying the process of quoting hardware
+
+
+
+
Adoplastic
+
A real-world company website including quote functionality for booking
+
+
+
+
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
+
+ - JavaScript
+ - React.js
+ - Next.js
+ - HTML5
+ - CSS3
+
+
+
+
Technical Skills
+
+ - TypeScript
+ - Node.js
+ - TailwindCSS
+ - Git
+ - RESTful APIs
+
+
+
+
Soft Skills
+
+ - Teamwork
+ - Problem-solving
+ - Communication
+ - Time Management
+ - Adaptability
+
+
+
+ `,
+ contact: `
+
+ `,
+};
+
+// 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.description}
+ Technologies Used:
+
+ ${projectDetails.technologies.map((tech) => `- ${tech}
`).join('')}
+
+ 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();
+ });