My Portfolio Website
Designed and developed a fully custom personal portfolio website to showcase my skills, projects, and certifications as a QA Engineer. Built from scratch using HTML5, CSS3, JavaScript, and Tailwind CSS, the portfolio features a dark minimal aesthetic with smooth animations, custom cursor, interactive project cards, and a responsive layout. Every section was carefully crafted to reflect a professional and modern identity.
Module-by-Module Breakdown
Animated landing section featuring name, role, and a dynamic typing effect. Sets the visual tone of the portfolio with a bold dark aesthetic.
Personal introduction section highlighting background, goals, and passion for QA engineering with a clean card layout.
Visual display of technical skills grouped by category — QA tools, programming languages, and frameworks — using styled tags and icons.
Interactive grid of project cards with hover effects, tech stack tags, and links to detailed project pages.
Dedicated section showcasing earned certifications with card-based layout, issuer info, and links to detail pages.
Individual pages for each project featuring module breakdowns, task lists, what I learned, screenshot galleries, and tech stack sidebars.
Dedicated pages per certification with skill coverage, issuer details, key learnings grid, and related certifications section.
Interactive image gallery with main viewer, thumbnail navigation, and prev/next controls for browsing project screenshots.
Animated purple ring cursor that grows on hover over interactive elements, replacing the default browser cursor across all pages.
Fixed navbar with smooth scroll links and a fixed right-side social bar with GitHub, LinkedIn, and email icons.
Fully responsive layout adapting to mobile, tablet, and desktop viewports using Tailwind CSS utility classes and media queries.
Contact section and call-to-action areas with direct email link, encouraging visitors to reach out for freelance or job opportunities.
My Tasks
Designed the overall layout, color scheme, and visual identity of the portfolio from scratch.
Built the full HTML structure across multiple pages including index, project pages, and certification pages.
Styled all components using CSS custom properties and Tailwind CSS utility classes for consistency.
Implemented smooth hover animations, card transitions, and micro-interactions using pure CSS.
Developed the custom animated cursor with grow effect on interactive elements using JavaScript.
Built the interactive screenshot gallery with thumbnail navigation, main viewer, and arrow controls.
Created reusable design patterns (section labels, cards, tags, badges) applied consistently across all pages.
Implemented the fixed navbar with backdrop blur and the right-side social bar with icon links.
Ensured full responsiveness across mobile, tablet, and desktop breakpoints.
Wrote and structured all content — project descriptions, task lists, skill takeaways, and certification details.
Integrated Lucide icons and Google Fonts (Syne + DM Mono) to enhance visual quality and typography.
Tested and validated all pages across browsers for layout consistency and interaction correctness.
What I Learned
UI/UX Design Thinking
Developed an eye for layout, spacing, and visual hierarchy to create interfaces that are both beautiful and functional.
Advanced CSS Techniques
Mastered CSS custom properties, pseudo-elements, transform animations, and sticky positioning for polished interfaces.
Tailwind CSS
Gained practical experience with Tailwind's utility-first approach to rapidly build responsive, consistent layouts.
JavaScript DOM Manipulation
Improved skills in dynamic DOM interactions — custom cursor logic, gallery state management, and event handling.
Responsive Web Design
Learned how to build layouts that adapt gracefully across all screen sizes using media queries and flexible units.
Design Systems & Consistency
Understood the importance of reusable design tokens — colors, spacing, typography — for maintaining a coherent visual system.
Personal Branding
Learned how to present professional work, structure a portfolio narrative, and communicate skills effectively to employers.
Multi-Page Architecture
Gained experience building a multi-page static website with consistent navigation and shared design patterns.
Project Screenshots
Interested in working together?
I'm available for freelance projects and full-time opportunities.
Hire Me