🏠 Portfolio Website — Home Page 📌 Overview
This is the Home Page of my multipage portfolio website. It introduces me as a Software Engineer, showcases my flagship project, and provides quick navigation to other sections of the site.
The page is designed to be clean, responsive, and interactive with animations to engage visitors.
✨ Features
Header Navigation with hover effects (links change color on cursor hover).
Hero Section with an animated typing effect that cycles through multiple professional roles.
Call-to-Action Buttons (View My Work, Contact Me) with hover transitions.
Featured Project (FinTrack – AI-Powered Finance App).
Services Preview with three main offerings:
Web Development
Backend Systems
AI & Automation
Testimonials for credibility.
Footer with copyright and social media links.
JavaScript Interactivity:
Header background color changes on scroll.
Typing animation effect in the hero section.
🛠️ Technologies Used
HTML5 for structure
CSS3 for styling & transitions
JavaScript (ES6) for dynamic interactions
📂 File Structure portfolio-home/ │── index.html # Home page structure │── styles.css # Styles for layout, nav, hero, etc. │── script.js # JS logic (scroll + typing effect) └── assets/ # Images (hero illustration, icons, etc.)
📸 Screens (Key Sections)
Header: Logo + navigation bar
Hero: Animated text typing out roles
Featured Project: Highlight of FinTrack app
Services Preview: Quick overview of offerings
Testimonials: Quotes for trust
Footer: Social links and copyright
🚀 How It Works JavaScript Features
Header Scroll Effect
On scroll past 50px, the header background darkens for better readability.
Typing Animation
Cycles through a list of roles (Software Engineer, Full-Stack Developer, AI Enthusiast, etc.).
Types letters one by one, pauses, deletes, and moves to the next phrase.
Includes a blinking cursor effect.
CSS Transitions
Buttons: Smooth background + lift-up animation on hover.
Nav Links: Color and background change on hover for interactivity.
📱 Responsiveness (Next Step)
Currently, the page looks great on desktop. Upcoming improvements:
Add mobile-friendly navigation (hamburger menu).
Adjust layouts for smaller screens using media queries.