Kavengi Lilian- Portfolio Website A clean, responsive personal portfolio website built with pure HTML and CSS.
π Live Demo View Live Website http://127.0.0.1:5500/home.html
π― About the Project This portfolio website serves as a professional showcase for Kavengi Lilian, a frontend developer with a background in Business Information Technology. The site demonstrates clean coding practices, responsive design principles, and modern web development techniques using only vanilla HTML and CSS.
Why This Project? Demonstrates core web development skills without relying on frameworks Showcases responsive design that works across all devices Provides a professional online presence for career opportunities Serves as a template for other developers creating their portfolios
β¨ Features π± Fully Responsive Design - Works seamlessly on desktop, tablet, and mobile π¨ Modern UI/UX - Clean, professional design with smooth animations β‘ Fast Loading - Optimized vanilla code without heavy frameworks π§ Contact Integration - Direct WhatsApp messaging functionality π CV Download - Easy access to downloadable resume π Project Showcases - Live links to deployed projects π― Smooth Navigation - Anchor-based single-page navigation π Cross-browser Compatible - Works across all modern browsers
π Technologies Used HTML5 - Semantic markup and structure CSS3 - Styling, animations, and responsive design GitHub Pages - Free hosting and deployment
π Project Structure portfolio/ βββ index.html # Main HTML file βββ styles.css # Main stylesheet βββ assets/ # Images and documents β βββ kavengi lilian.png # Profile picture β βββ Copy of kavengi lilian Resume.pdf # Downloadable CV βββ README.md # Project documentation
π Installation & Setup For Viewing Simply visit the live website or open index.html in any modern web browser.
For Development Open the project in your preferred code editor Make changes to HTML, CSS, or add JavaScript functionality Refresh the browser to see changes Use browser developer tools for debugging
Key Files to Modify index.html - Update content, add new sections, modify structure styles.css - Change colors, fonts, layout, add animations assets/ - Replace images, update CV document
π Sections Overview
π Hero Section Purpose: First impression with name and role Features: Call-to-action button, clean typography Customization: Update name, title, and CTA text
π€ About Section Purpose: Personal introduction and skills showcase Features: Profile image, bio, skills tags Customization: Replace image, update bio, modify skills
π Education Section Purpose: Academic background and training Features: Timeline layout, downloadable CV Customization: Add/remove education items, update CV link
π‘ Interests Section Purpose: Showcase passions and motivations Features: Icon-based cards, hover effects Customization: Update interests, change icons, modify descriptions
π Projects Section Purpose: Display portfolio work with live links Features: Project cards, technology tags, external links Customization: Add new projects, update links, modify descriptions
π§ Contact Section Purpose: Enable visitors to get in touch Features: WhatsApp integration, contact form layout Customization: Update WhatsApp number, modify contact methods
π Deployment GitHub Pages (Current Method) Push to GitHub
git add . git commit -m "Update portfolio" git push origin main
Netlify: Drag and drop the folder or connect GitHub repo Vercel: Import GitHub repository π Contact Kavengi Lilian
WhatsApp: +254 114 443 016 GitHub: @kavengililian Portfolio: liliankavengi/Portfolio π Acknowledgments Multuimedia University Of Kenya - Business Information Technology GitHub Pages - For free hosting Built with β€οΈ and lots of β by Kavengi Lilian
Built with β€οΈ and lots of β by Kavengi Lilian