Portfolio Website using HTML, CSS, & JavaScript with Hosting

Set up the project with index.html, styles.css, and script.js, link Dura and Poppins from Google fonts, and apply reset styles for a fixed dark background with a gradient overlay.

Create animated mouse circle and dot that follow the cursor with HTML, CSS, and JavaScript; apply fixed positioning, transform centering, keyframe animations, show on move, and hide on leave.

Create and customize the landing section with animated circles, a central designer image, a top-left logo, and left–right text blocks using flexbox and grid, with sticky headings.

Animate circles on landing page with javascript in response to mouse movement. Use left, top, and translate with querySelectorAll and forEach to move circles and the image in opposite directions.

Create and customize the main button with hover effects, including a yellow circle expansion and a three-line arrow, plus a spinning 'projects' label.

Apply a hover ripple to the main button using JavaScript and CSS, calculating the cursor position inside the button, creating and animating ripple elements, and resetting on mouse leave.

Create an animated about me section with a hidden until hover heading and text built via JavaScript, then center and style the main button with a ripple effect.

Create a responsive projects gallery with show more/less, hover to scroll and click to expand, loading on the fly images with hover skew effects.

Explore creating and customizing interactive project cards, loading a dynamic full-screen image on click, with animated overlays, lazy image handling, and a close button while fixing hover gaps.

Add a show more feature for the portfolio projects by hiding the last four items and toggling a show more / show less button with a rotating arrow.

Add a show more feature for projects with fade effects and staggered reveals using setTimeout and opacity transitions, plus smooth scrolling into view. Refactor with show and hide functions.

Create and customize a six-service section in a portfolio site, with interactive reveal of service texts, fade effects, and responsive leftward movement via CSS and JavaScript.

Create and customize a contact form for a portfolio site using HTML, CSS, and JavaScript, featuring name, email, and subject inputs, a textarea, a dynamic heading, styling, and form behavior.

Create a five-icon social media slideshow with fade transitions, interval-driven cycling, and brightness effects using HTML, CSS, and JavaScript for a portfolio site.

Create and customize navigation by building a menu icon that transforms into two lines, reveals navigation items on click or scroll, and enables smooth section navigation.

Create a circular, scroll-responsive progress bar for a portfolio website, with hover interactions and project-aware behavior, using HTML, CSS, and JavaScript.

Attach a click handler to the progress bar to scroll through sections and rotate the arrow at the bottom. Compute section positions and use scrollTo for dynamic navigation.

Learn to enhance the portfolio site's progress bar by integrating the image wrapper, page height, and scroll position, while handling clicks and project open and close to ensure smooth scrolling.

Refactor the progress bar logic by extracting the scroll handler, removing and reattaching event listeners on project open/close, and lifting variables for cleaner, more reliable behavior during resize.

Learn to create sticky elements that follow the cursor on hover over the menu icon and progress bar, using element from point, position tracking, translate transforms, and a reusable function.

Introduces a mouse circle transform effect that morphs the cursor into the shape of hovered elements (projects, navigation, services, inputs) using bounding rect and borders, with hover and reset behavior.

Learn to make a portfolio website responsive using CSS media queries, defining breakpoints at 1500, 1350, and 1150 pixels to adjust circles, text, images, margins, and navigation for smaller screens.

Make a portfolio website responsive across breakpoints by using media queries at 900px, 700px, 550px, and 400px, adjusting navigation, typography, input fields, and layout for hosting.