Portfolio App - Advanced React Course by Meta
Description This portfolio app was developed as part of the Advanced React Course by Meta to showcase my skills and projects using React. The app includes various sections such as a header with external and internal links, a landing section with a bio, a project showcase, and a contact form.
Features Header External links to social media accounts are functional and take users to the respective platforms.
Internal links smoothly scroll to their corresponding sections.
Landing Section Displays an avatar, name, and a short bio.
Project Section Projects are displayed in a 2x2 grid using card widgets.
Each project card includes a title, description, and links to the live demo and source code.
Contact Me Form A fully functional contact form with required business logic (e.g., validation, submission handling).
Header Animation The header is hidden/shown based on scroll direction with a smooth transition animation.
Technologies Used React: Front-end library for building user interfaces. Chakra UI: Component library for styling and responsive design. React Testing Library: For testing React components. Jest: JavaScript testing framework. React Router: For handling internal navigation and smooth scrolling. Formik: For form handling and validation. Framer Motion: For animations (e.g., header hide/show on scroll).
Installation To run this project locally, follow these steps:
- git clone https://github.com/your-username/your-repo-name.git
- cd your-repo-name
- npm install
- npm start
- Visit http://localhost:3000 to view the app.
Usage Header: Click on external links to visit social media profiles or internal links to navigate to different sections of the page. Projects: Explore the projects displayed in the 2x2 grid. Click on the links to view live demos or source code. Contact Me: Fill out the form to send a message.