Previously, we created a responsive portfolio website using HTML and CSS, giving it a clean structure and visually appealing design. Now, we’ll enhance it further by adding JavaScript to introduce interactivity and improve user experience. Features like dark mode, typing animation, a scroll-to-top button, and a mobile menu toggle will make the portfolio dynamic and engaging. Let’s explore how JavaScript can bring your static website to life.
Portfolio Source Code
Let's start by setting up the HTML structure for our portfolio website (as previously mentioned)
filename: index.html
Defines the structure of the portfolio with sections: Home, About, Projects, and Contact.
Includes a navigation bar for smooth scrolling to different sections on the same page.
Links external CSS (style.css) for styling and JavaScript (index.js) for interactivity.
Provides a simple layout with headings, paragraphs, and list elements to showcase information.
filename: styles.css
Resets default styles and applies consistent font, colors, and spacing across the page.
Styles the header, navigation, sections, and footer for a clean, modern look.
Adds hover effects for links and visual enhancements like shadows and rounded corners.
Ensures responsive design with centered content and mobile-friendly layouts.
filename: script.js
Output:
Dark Mode Toggle: Adds a floating button that lets users switch between light and dark themes dynamically, improving accessibility and user comfort.
Typing Animation: Creates a typing effect for the main title ("Web Developer and Designer") to make the page more visually engaging.
Interactive Peer Reviews: Allows users to click on peer review text and view it in a styled popup modal for better readability and user interaction.
Scroll Features & Dynamic Year: Adds a "Scroll to Top" button for smooth navigation and automatically updates the footer with the current year.
Now your portfolio website isn’t just a static structure — it’s visually appealing and professional too. With the help of CSS, you’ve brought your content to life using colors, spacing, fonts, and layout enhancements.
But don’t stop here — take your design skills further by experimenting:
Customize the look with unique color schemes and gradients.
Try different font families and sizes to match your personal style.
Add hover effects, transitions, and animations for an engaging user experience.
Organize your styles using external CSS for cleaner, scalable code.
