About This Website

This website was fully custom-built to showcase my professional skills, projects, and certifications — every visual, layout, and detail was intentionally crafted to reflect both technical knowledge and creative personality.

All design elements, including section titles, icons, and banners, were designed from scratch. I created and refined every image, wrote every piece of text, and styled the site layout using HTML and CSS with responsive design in mind. The site is divided into key areas like Projects, Skills, and Certificates to provide a comprehensive yet navigable portfolio experience.

Rather than relying on templates, I built this project from the ground up to serve as a living demonstration of my front-end understanding and project branding skills. Each component — from custom headers to color themes — is the result of hands-on experimentation and learning.

🎨 What I Built From Scratch

• 🖼️ Full Custom Design: Designed every section header, project banner, and visual component from scratch using HTML, CSS, and image editing tools.
• 🌸 Personal Branding: Selected a consistent salmon/pink theme and stylized layout to match my professional identity across the site.
• 📱 Responsive Layout: Ensured the site adapts across desktop and mobile devices with Bootstrap-based components and flexible styling.
• 💻 Hand-Built Structure: Coded all sections — About, Skills, Projects, Certificates, and Contact — with no templates, creating a clean, readable format.
• 🎨 Creative Assets: Illustrated or modified key icons, added a custom pixel portrait, and embedded visual cues to guide users through the dashboard experience.
• 🧠 Storytelling Integration: Combined UX design with data analytics storytelling to make technical work approachable and visually engaging.

---

📊 Project Overview: Personal Portfolio Website

🔍 Purpose of the Project:

To create a custom-coded, mobile-responsive portfolio website that showcases my data analytics, HR technology projects, certifications, and creative brand. I wanted a platform that visually reflects my personal style while presenting my skills professionally.

🛠️ Tools & Technologies Used:

• HTML/CSS: Hand-coded each section using semantic HTML and responsive CSS
• Bootstrap: Used Bootstrap grid and utility classes for layout, alignment, and mobile responsiveness
• Custom Assets: Created original icons, banners, and pixel art to personalize the site

💡 Key Features Built:

• Designed section headers and cards from scratch, maintaining a consistent salmon-pink aesthetic
• Integrated certificate groupings with themed header images for visual storytelling
• Built responsive layouts across pages including Projects, Skills, Contact, and Certificates

🧠 Skill Highlights:

• HTML structuring and component nesting without templates
• CSS styling with attention to brand, contrast, and UI/UX design
• Bootstrap layout logic for responsiveness and alignment

🚧 Challenges Overcome:

• Resolved styling inconsistencies between pages and matched backgrounds and card colors across sections
• Adjusted image ratios inside cards for consistent mobile and desktop display
• Refined button alignment and layout issues for certificate and project sections

🔁 What I’d Do Differently Next Time:

• Use CSS variables and utility classes to simplify theme management
• Add accessibility features such as higher contrast modes and ARIA labels
• Convert the site into a React or Vue.js app for scalability and easier updates