Skip to content

Gitzak/react-portfolio-app-design

Repository files navigation

react-portfolio-app-design

React Web Developer Portfolio Website

Welcome this portfolio website! This project showcases work as a web developer and is built using React with several modern libraries to enhance its functionality, animations, and user experience.

Project Overview

This is a simple yet dynamic portfolio website that provides a visually appealing and interactive experience for visitors. Below is a brief description of the core libraries and tools I used in this project.

Built With

  • React: The entire website is built using React, a powerful JavaScript library for building user interfaces.
  • Vite: The development environment leverages Vite, a fast build tool that helps with a quicker and smoother development experience.

Key Libraries and Their Usage

Framer Motion

I used Framer Motion to add smooth animations and interactions to the website. It provides easy-to-use hooks for animating components, making the website feel more dynamic and engaging.

React-Anchor-Link-Smooth-Scroll

This library helped in implementing smooth scrolling between different sections of the website. It provides an easy way to add anchor links that create a seamless navigation experience for users.

React-Hook-Form

I utilized React-Hook-Form for the contact form to handle form state and validation in a simple, performant way. This helped ensure that form submission and validation are intuitive for both users and developers.

Keen-Slider

Keen-Slider is used to create responsive carousels in the project. It provided an efficient and lightweight way to display slideshows of images or projects in a sleek, modern way.

Project Structure

  • Components: The reusable UI components (e.g., buttons, loaders, social media icons) are stored in the components folder.
  • Sections: Each page section (e.g., About, Projects, Contact) is kept in the sections folder, making the codebase modular and easier to manage.
  • Hooks: I used a custom hook stored in the hooks folder to simplify and reuse common logic.

Getting Started

To get started with this project, you'll need to have Node.js and npm installed on your machine.

Clone the repository:

git clone [https://github.com/Gitzak/react-portfolio-app-design.git](https://github.com/Gitzak/react-portfolio-app-design.git)

Navigate to the project folder and install dependencies:

cd your-portfolio
npm install

Run the development server:

npm run dev

**Available Scripts**

  • npm run dev: Starts the development server using Vite.

  • npm run build: Builds the project for production.

  • npm run preview: Previews the production build.

**Contact**

If you have any questions or suggestions, feel free to contact me.

**License**

This project is open source and available under the MIT License.