My Portfolio
This project was part of my Microverse journey. I had to work on what would be my personal portfolio. The goal was to be able to parse a Figma design to create a beautiful UI using Flexbox, Grid CSS, images and backgrounds, while sticking to the best practices (Linter, Github Flow, Professional c...
Overview
Creating a personal portfolio is an essential step for anyone looking to showcase their work and skills, and this project does just that in an impressive manner. Developed as part of a journey through Microverse, it demonstrates a commitment to best practices while employing modern web development techniques. The project focuses on translating a Figma design into a responsive UI, highlighting the use of Flexbox and Grid CSS, which is reflected in the polished final product. Each step was deliberately broken down into manageable pieces, ensuring a structured approach to development.
This portfolio is not only visually appealing but also functional, featuring robust elements like a contact form and mobile responsiveness. The decision to utilize GitHub for version control and deployment exemplifies a professional touch, making it a standout project that potential employers and clients will find intriguing.
Features
-
Responsive Design: The portfolio adapts seamlessly to both mobile and desktop screens, ensuring an optimal user experience on any device.
-
Structured Development Process: The project was divided into 10 branches, each representing different development phases, allowing for clear tracking of progress.
-
Accessibility Focus: Efforts were made to enhance accessibility, ensuring the site is user-friendly for everyone.
-
Client-side Form Validation: The contact form includes validations to enhance user experience and prevent submission errors.
-
Local Storage Utilization: Users can save their input in the contact form, making it convenient if they need to return later to complete their submission.
-
Interactive Mobile Menu: A JavaScript-driven mobile menu enhances navigation on smaller screens.
-
Deployment on GitHub Pages: The project is hosted on GitHub Pages, making it easily accessible to visitors and showcasing the author’s skills in web deployment.
-
Collaborative Development: The project included pair programming sessions, demonstrating the collaborative nature of modern web development and the author's willingness to learn from peers.
- HTML
HTML templates are pre-designed and pre-built web pages that can be customized and used as a basis for building websites. They often include common elements such as headers, footers, menus, and content sections, and can be easily edited using HTML and CSS to fit specific branding and content needs.
- Portfolio
A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.