// Theme toggle functionality
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('light-theme');
themeToggle.textContent = document.body.classList.contains('light-theme') ? '☀️' : '🌙';
});This script implements a theme toggle feature, allowing users to switch between a dark theme (default) and a light theme.
-
Select the Theme Toggle Button
The button is identified using itsid="themeToggle". -
Event Listener for Button Click
When the button is clicked:- It toggles the
light-themeclass on the<body>element. - If the class exists, it switches to the light theme; otherwise, the dark theme is applied.
- It toggles the
-
Dynamic Button Text
- If the theme is light, the button shows the
☀️icon. - If the theme is dark, the button shows the
🌙icon.
- If the theme is light, the button shows the
This feature enhances usability by allowing users to customize the visual style of the website.
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll(".home-section");
const handleScroll = () => {
sections.forEach((section) => {
const rect = section.getBoundingClientRect();
if (rect.top >= 0 && rect.top <= window.innerHeight) {
section.classList.add("animate");
}
});
};
// Listen for scroll events
window.addEventListener("scroll", handleScroll);
// Run on initial page load
handleScroll();
});This script applies a scroll animation to sections of the page, making them appear or animate as they enter the viewport.
-
Detect Sections
The script selects all elements with the.home-sectionclass. -
Scroll Event Listener
It listens for thescrollevent on the window. -
Animation Logic
- When the page is scrolled, the script checks each section's position using the
getBoundingClientRect()method. - If the section's top edge is visible within the viewport (
rect.top >= 0andrect.top <= window.innerHeight), it adds the.animateclass to that section.
- When the page is scrolled, the script checks each section's position using the
-
Initial Execution
ThehandleScrollfunction is called when the page is loaded to immediately handle any sections that are already visible.
The purpose of this script is to enhance the user experience by adding smooth animations to sections as they come into view during scrolling.
The Index Page serves as the landing page of the portfolio website, providing visitors with a welcoming introduction and a summary of the owner's expertise and professional focus. Below is an overview of its functionality and content:
-
Header Navigation:
- Contains a clickable logo that redirects to the homepage.
- Includes links to major sections of the site: Projects, Work, Documentation, and Contact.
- Social media icons for quick access to platforms such as Instagram, Discord, Telegram, and YouTube.
- A theme toggle button (🌙/☀️) to switch between light and dark modes.
-
Welcome Section:
- A warm introduction with the headline "Welcome to My Portfolio".
- A brief description of the owner's academic background and professional focus in backend development.
- A call-to-action button ("Learn More") to encourage users to explore further.
-
About Me Section:
- A detailed paragraph highlighting the owner's journey as a second-year IT student.
- Focus on backend development, programming expertise, and hands-on experience in building APIs, databases, and secure systems.
- A narrative of continuous learning and adapting to evolving technology to make a meaningful impact.
- Responsive Layout: Ensures compatibility across devices and screen sizes.
- Visual Styling:
- A modern dark-themed design with a toggle for light mode.
- Subtle animations and accent lines for section headers to enhance user engagement.
The Index Page aims to create a professional first impression and guide visitors to explore other sections of the portfolio website.
The Projects Page showcases key Python-based projects developed by the portfolio owner. Each project is highlighted with a title, a description, and an image to provide visual and textual context.
-
Project Showcase:
- Each project is displayed as a distinct section with a project title and detailed description.
- Accompanied by relevant visuals (e.g., images or icons) to enhance engagement and provide a clear understanding of the project.
-
Highlighted Projects:
- WOLT and GLOVO Parser:
- Provides seamless API integration for restaurant-related applications.
- Retrieves restaurant information, menus, and other essential data via API requests.
- Google Maps Parser:
- Fetches images and reviews of locations using the Google Maps API.
- Designed to improve user experience in applications relying on location-based data.
- WOLT and GLOVO Parser:
-
Visual Appeal:
- Eye-catching section headers (e.g., "My Projects") styled with custom colors and underlines for emphasis.
- A modern dark theme with hexagonal patterns in the background.
- Clear and professional fonts to improve readability.
-
Responsive Design:
- Adjusts seamlessly across various devices and screen sizes for optimal viewing.
The Projects Page serves to inform visitors about the owner's expertise and contributions in Python development. It demonstrates their ability to create impactful tools for real-world applications and provides insight into their technical capabilities.
The Work Page highlights key professional contributions and projects undertaken by the portfolio owner. It is designed to showcase detailed descriptions, visual elements, and relevant information about impactful work experiences.
-
Project Highlight:
- Dinao:
- A mobile application aimed at providing users with an intuitive platform to explore restaurants and venues in Belgrade and Novi Sad.
- The application includes:
- Search Filters: Discover places based on user preferences.
- Detailed Menus: View menus with images for an enhanced dining experience.
- User Reviews: Access authentic feedback from other users.
- Available on the App Store for iOS devices.
- Dinao:
-
Visual Representation:
- Features a clean and professional banner showcasing the Dinao logo.
- Includes screenshots of the app interface for better understanding.
- A QR code is provided for easy access to the application download page.
-
Modern Layout:
- A bold title, "My Work," styled with a custom underline for emphasis.
- A dark hexagonal background for a modern and sleek aesthetic.
- Strategic use of colors (e.g., orange accents) to draw attention to key details.
-
Responsive Design:
- Optimized for various devices, ensuring seamless user experience across screens.
This page serves to showcase the portfolio owner's professional achievements and technical capabilities. By highlighting real-world applications such as Dinao, it demonstrates the ability to contribute meaningfully to impactful projects while offering value to users.
The Documentation Page provides comprehensive information about the project's logic, functionality, and JavaScript implementations. It serves as a centralized hub for developers and contributors to explore the project's structure and understand its core elements.
-
GitHub Integration:
- A visually prominent GitHub logo linking to the repository.
- A call-to-action button: "View this work on GitHub", allowing users to easily access the repository.
-
Description Section:
- Highlights the availability of:
- Detailed explanations of JavaScript scripts.
- Source files and logic descriptions.
- Ensures developers and contributors can gain valuable insights into the project's structure.
- Highlights the availability of:
-
Minimalistic Layout:
- Focus on essential information with clear visuals.
- A bold "Documentation" header styled with an orange underline for emphasis.
-
Interactive and Responsive:
- Ensures compatibility across devices and screen sizes.
- Provides a clean and distraction-free interface.
This page is designed to:
- Assist developers and collaborators in understanding the project's functionality.
- Provide easy access to the repository for further exploration and contributions.
- Enhance the overall accessibility and transparency of the project's codebase.
The Contact Page provides visitors with a straightforward way to reach out to the portfolio owner. It combines a clean layout with both contact details and an interactive contact form.
-
Contact Information:
- Displayed in a visually distinct card, the following details are available:
- Email:
example@example.com - Phone:
+123 456 7890 - Address:
123 Main Street, City, Country
- Email:
- Displayed in a visually distinct card, the following details are available:
-
Interactive Contact Form:
- Fields included:
- Name: To identify the sender.
- Email: To allow replies or further communication.
- Message: To capture the query or feedback.
- Styled for clarity and ease of use.
- Fields included:
-
Consistent Theme:
- Dark hexagonal background aligned with the overall site design.
- Orange accents for headings and focus areas.
-
Responsive Layout:
- Designed to adapt seamlessly to all devices.
- Clear and user-friendly interaction points.
-
Call-to-Action:
- A prominent "Send Message" button encourages users to submit their inquiries.
The Contact Page aims to:
- Establish a direct communication channel between the portfolio owner and visitors.
- Provide a professional impression through a well-organized and accessible design.
- Encourage potential collaborations or feedback by offering multiple ways to connect.