This project is a responsive portfolio website for Lucky Nakola, a Lead UI Designer and Web Developer based in Nairobi, Kenya. The website showcases Lucky's skills, services, portfolio, and contact information, designed to attract potential clients and collaborators. The project was developed as part of a group assignment for the PLP Web Development course.
We aimed to create a modern, visually appealing, and responsive portfolio website that meets the following requirements:
Header: A sticky navigation bar with links, a "Hire Me" button, and icons for search and theme toggle. Hero Section: A full-width section with a background image, animated "playing words" text (Web Designer, Software Developer, Freelancer), and call-to-action buttons. About Section: A biography section with Lucky's details, contact information, and social media links. Services Section: Cards highlighting services offered (Web Development, App Development, Photography). Skills Section: Progress bars showcasing expertise in UI/UX Design, Branding, and more. Portfolio Section: A gallery of work samples. Companies Section: Animated logos of partnered companies. Footer: Contact information, social media links, and copyright notice. Extra Features: A "Back to Top" button with smooth scrolling.
HTML5: For semantic structure. CSS3: For styling, including animations (playing words, scrolling logos) and responsiveness. Bootstrap 5: For responsive layout and components (e.g., cards, grid system). Font Awesome 6.7.2: For icons (search, social media, back to top). JavaScript: For the "Back to Top" button functionality. Google Fonts: For typography (Barlow and Open Sans).
Icons Not Displaying: Initially, Font Awesome icons didn’t load due to CDN issues. We resolved this by downloading Font Awesome 6.7.2 and hosting it locally. Responsiveness: Ensured the website looks great on all devices using Bootstrap’s grid system and custom media queries. Animations: Implemented the "playing words" animation using CSS keyframes and the scrolling logos animation with CSS transforms.
Link to Live Demo (Replace with your GitHub Pages or hosting link after deployment) Group Members Lucky Nakola (Team Lead, UI/UX Design, Frontend Development)
Clone the repository:git clone Navigate to the project directory:cd REPLICATE Open index.html in a browser, or use a local server (e.g., VS Code Live Server) for the best experience.
Implement a light/dark mode toggle. Add a contact form in the footer. Integrate a blog section with dynamic content.
This project is licensed under the MIT License. See the LICENSE.txt file for details.