Portfolio Website
Summary
The Portfolio Website serves as a dynamic digital showcase for skills, experience, and diverse projects. Designed with a focus on accessibility and streamlined navigation, the site adapts seamlessly to both mobile and desktop platforms. It offers themes in both dark mode and light mode to suit user preferences. The website is structured into three main sections: Home, Projects, and Contact. The Projects page acts as a comprehensive catalog of work, featuring each project with a title, summary, feature list, and the languages and libraries used. Each project also includes its own carousel gallery for a detailed visual presentation. The Contact page features a form integrated with an API, ensuring efficient and direct email communication.
Features
>
Responsive Design: Optimized for various screen sizes, ensuring accessibility on multiple devices.
>
Semantic HTML Tags: Utilizes semantic HTML tags to enhance accessibility and SEO performance.
>
Dual Themes: Offers both dark and light modes, allowing users to choose their preferred theme.
>
Enhanced Visual Galleries: Features carousel galleries that provide dynamic visual insights into skills and projects, enriching the user's understanding.
>
API-Driven Contact Form: An interactive contact form integrated with an API, automating and streamlining the email communication process.
>
Detailed Project Listings: Structured listings of all completed projects, each with comprehensive details such as titles, summaries, languages used, and libraries, enhancing user comprehension.
Languages
>
JavaScript
>
TypeScript
>
HTML
>
CSS
Resources
>
ReactJS
>
NextJS
>
MUI (material-ui)
>
EmailJS
CSH (Computer Shop Hub)
Summary
The Computer Shop Hub (CSH) is a comprehensive CRUD web application designed to streamline the management of client devices in a computer shop. It provides seamless integration between frontend and backend systems, ensuring efficient tracking and maintenance of client devices and service requests. The core functionality of CSH revolves around two main sections: Clients and Job Cards. In the Clients section, you can manage and view client details, with the capability to add, edit, and delete information as needed. The Job Cards section allows you to track incoming devices, log their issues, monitor their status throughout the repair or service process, and add labour and material costs. In addition to these core features, CSH includes an Admin page where you can view detailed statistics on revenue for materials and labour. This page also allows for easy management of the job card database, including options to back up, delete, or restore data as needed.
Features
>
Dockerized Infrastructure: Utilizing Docker, CSH is compartmentalized into three distinct containers, ensuring scalability, isolation, and efficient resource management.
>
Database: Powered by MySQL, it offers a reliable and performant relational data storage solution.
>
Frontend: Hosted on Nginx, the frontend is built with React, offering a responsive and interactive user experience.
>
Backend: Django serves as the robust backend framework, facilitating data processing and business logic.
>
Dual Themes: Includes both dark and light modes, allowing users to choose according to their preference.
>
Responsive Design: Designed for modern usability, CSH features reactive scaling, ensuring a seamless experience on both desktop and mobile devices.
>
Advanced List Functionality: Both the Clients and Job Cards sections come with advanced filtering, sorting, and searching capabilities, allowing staff to quickly locate and manage entries.
Languages
>
JavaScript
>
TypeScript
>
HTML
>
CSS
>
Python
>
SQL
>
Docker-compile
Resources
>
Docker
>
MySQL
>
ReactJS
>
NextJS
>
MUI (material-ui)
>
Django
Frontend Google Clone
Summary
The Frontend Google Clone project is an exercise in replicating the visual design of Google's homepage. Created using ReactJS and Material-UI (MUI), the project aims for visual fidelity to the original design. It focuses solely on frontend elements and does not replicate any of Google's search functionality or backend systems.
Features
>
Built with ReactJS: Utilizes ReactJS for its component-based architecture, enhancing maintainability and scalability.
>
Visual Fidelity: Reproduces key design elements of Google's homepage for an authentic visual experience.
>
Material-UI Integration: The project employs MUI to align with contemporary design principles.
>
Static Design: Prioritizes the frontend and does not include any backend functionality, serving as a showcase of frontend development skills.
Languages
>
JavaScript
>
HTML
>
CSS
Resources
>
ReactJS
>
MUI (material-ui)
An API-connected website
Summary
The API-Connected website project is a single-page website that focuses on facilitating straightforward and reliable email correspondence through a contact form. Built with the intent of offering a seamless user experience, the project employs the EmailJS service to manage the email sending process via API, thereby bypassing the need for a server-side backend for this specific functionality.
Features
>
API Integration: Utilizes EmailJS to send emails directly from the webpage through an API, eliminating the need for separate backend logic for this purpose.
>
User-Friendly Interface: Features a clean and simple form layout, making it easy for users to enter their details and send messages.
>
Email Validation: Implements basic validation checks on the email input to ensure that the user enters a valid email address.
>
Security Measures: Although the project primarily focuses on frontend features, it incorporates security measures such as API key protection.
Languages
>
JavaScript
>
HTML
>
CSS
Resources
>
ReactJS
>
MUI (material-ui)
>
EmailJS
A 'perfect score' website
Summary
The 'Perfect Score' Website project aims to achieve the pinnacle of web performance and user experience by scoring 100 in all categories of the Chrome Lighthouse test. Designed with meticulous attention to best practices in performance, accessibility, SEO, and more, the website provides an exceptional user experience. It features dual themes and a responsive design to ensure visual and functional consistency across a wide range of devices
Features
>
Lighthouse Perfect Score: The website attains a 100 score in all Chrome Lighthouse test categories, representing a high standard in performance, accessibility, and SEO.
>
Dark and Light Modes: Offers users the flexibility to toggle between dark and light themes, optimizing visual comfort based on lighting conditions and personal preference.
>
Responsive Design: Automatically adjusts to different screen sizes, providing a seamless user experience whether accessed via desktop, or mobile.
>
Static Design: Prioritizes the frontend and does not include any backend functionality, serving as a showcase of frontend development skills.
Languages
>
JavaScript
>
HTML
>
CSS
Resources
>
ReactJS
>
MUI (material-ui)
>
React-Router-Dom
>
React-Spring