This HTML, CSS, and JavaScript code creates a simple portfolio website for showcasing personal information, projects, and contact details.
- The HTML file starts with the
<!DOCTYPE html>declaration, indicating an HTML5 document. - It contains two navigation bars, one for desktop view and one for mobile (hamburger) view.
- Sections are defined for profile, about, experience, projects, and contact information.
- Each section includes relevant content and links.
- The styling is split into two CSS files:
styles.cssandmediaqueries.css. styles.csscontains general styles for the portfolio layout.mediaqueries.cssincludes styles for responsive design, adjusting layout and styling for different screen sizes.
- The
toggleMenu()function toggles the visibility of the mobile navigation menu when the hamburger icon is clicked. - Event listeners are added to the hamburger icon to trigger the
toggleMenu()function. - The script also includes functionality to hide and reveal the desktop navigation bar based on scroll direction.
- Navigation Bars: There are two navigation bars, one for desktop view (
desktop-nav) and one for mobile view (hamburger-nav). They contain links to different sections of the portfolio. - Profile Section: This section includes a profile picture, name, profession, social media links, and buttons to download CV and view contact information.
- About Section: Provides information about the individual's background, education, and a brief description.
- Experience Section: Lists the individual's experience in front-end and back-end technologies, along with proficiency levels.
- Projects Section: Displays recent projects with images, titles, and buttons linking to their GitHub repositories and live demos.
- Contact Section: Includes contact information, such as email and LinkedIn profile links.
- Script for Navigation Bar: The JavaScript code adds functionality to toggle the mobile menu and hide/show the desktop navigation bar based on scroll direction.
This simple portfolio effectively showcases personal information, experience, projects, and contact details in a clean and organized manner.
Inspiration from the [How to Become a Developer YouTube channel](https://www.youtube.com/@howtobecomeadeveloper) 🫶
