creative front-end developer & designer

Project Highlights:

❖ Crafted a visually compelling personal portfolio that highlights the engineer's skills, work experience, and projects..

❖ Organized the project into main directories: assets, components, constants, containers, and wrappers, promoting a clean and efficient codebase.

❖ The site is divided into five main sections: Header, About, Skills, Work, and Footer.

◦ Header: Presents a concise introduction, including the engineer's name, role, and key areas of expertise..

◦ About: Offers a snapshot of the engineer's experience, utilizing Framer Motion for engaging animations and hover effects.

◦ Skills: Showcases the engineer's capabilities, using Framer Motion for animations and React Tooltip for in-depth information on each skill.

◦ Features interactive filters for each company, with Framer Motion animations and project file download links.

◦ Footer: Facilitates direct communication, allowing users to get in touch with the engineer via a message form.

Project Description

The Organic Cosmetics Shop is a robust and efficient e-commerce platform designed with meticulous attention to performance, scalability, and user experience.

Feature Highlights:

• ❖ User Authentication: Implemented secure and seamless authentication using Firebase, supporting Google and Email/Password sign-in methods.
• ❖ Product Browsing: Developed a clean and intuitive UI for effortless navigation and product discovery, utilizing responsive design practices for cross-device compatibility.
• ❖ Shopping Cart Management: Integrated a dynamic shopping cart with real-time add, remove, and review functionalities, enhancing user interaction and experience.
• ❖ Secure Checkout Process: Incorporated Stripe for a secure and straightforward transaction process, safeguarding user financial data effectively.
• ❖ Responsive Design: Applied responsive design principles to ensure the platform’s usability and aesthetic consistency across various devices and screen sizes.

Technological Stack:

This project is built with a modern tech stack including TypeScript for static typing, Styled Components for component-level styling, Redux for state management, and Firebase for backend services.

Codebase Insights:

The codebase is structured for readability and maintainability, with a modular architecture that segregates functionality clearly, aiding in efficient development and debugging processes. Each feature is meticulously implemented with attention to detail, ensuring a balance between performance and functionality.

Project Description:

❖ GeekMonk encapsulates an array of functionalities including secure user authentication, live user tracking, intuitive project management, an engaging commenting system, efficient project filtration, amongst other features.

❖ Prioritizing security, GeekMonk employs guarded routes ensuring exclusive access to authenticated users for certain pages, preserving the integrity of user data.

❖ Leveraging Firebase's Realtime Database, GeekMonk enhances user engagement by presenting a real-time roster of online users, fostering a sense of community within the app.

❖ Empowering users with sophisticated project management, the application enables project initiation, task allocation to peers, and deadline setting. It also facilitates marking projects as completed, streamlining workflows.

❖ With an integrated commenting system, GeekMonk promotes user interaction. It exhibits the timestamp of each comment, made feasible by date-fns, contributing to the transparency of project discussions.

Project Description:

Users should be able to:

❖ View the optimal layout for each of the website's pages depending on their device's screen size

❖ See hover states for all interactive elements on the page

❖ View each page and be able to toggle between the tabs to see new information

Project Description

❖ Building a responsive website.

❖ Creating utility classes.

❖ Creating SVG sprites for social icons.

❖ Using CSS grid for the layout.

❖ Creating a slider/carousel.

Project Description

❖ Built using React (Custom Hooks, Context), Firebase & Styled Components.

❖ Consists of four pages: sign in, sign up, browse, and the homepage.

❖ Utilized protected routes with auth listeners.

❖ Data handling is managed through Firebase Firestore with the help of a custom hook.

❖ Implemented live search functionality using Fuse.js.

❖ Authentication is integrated across all pages using Firebase services.

❖ Constructed components using compound components and styled them using styled-components.