React Tailwindcss Portfolio screenshot

React Tailwindcss Portfolio

Author Avatar Theme by Realstoman
Updated: 7 Apr 2023
268 Stars

A simple React app that uses Context API, custom Hooks, Tailwind CSS & Framer Motion.

Categories

Overview

The React & TailwindCSS Portfolio is a simple portfolio starter theme built with React and Tailwind CSS. It offers a responsive design, dark mode, and various features such as projects filtering, smooth scrolling, counter, dynamic forms, and more. The theme also includes unit testing and utilizes Framer Motion for transitions and animations. It is built with React v18 and React Router v6, with Tailwind CSS v3 for styling. The state management is handled using Context API. Contributions to the project are welcome, and the theme is licensed under MIT.

Features

  • React v18 with React Router v6: Utilizes the latest version of React and React Router for building dynamic single-page applications.
  • Tailwind CSS v3: Uses the latest version of Tailwind CSS, a utility-first CSS framework, for styling the components.
  • Context API For State Management: Implements the Context API for managing the application’s state efficiently.
  • Custom Hooks: Provides custom hooks to enhance the functionality and reusability of the components.
  • Unit Testing: Includes unit tests to ensure the reliability and stability of the application.
  • Framer Motion transitions & animations: Utilizes Framer Motion library for creating smooth transitions and animations.
  • Reusable components: Offers a set of reusable components to simplify the development process.
  • Dark mode: Provides a dark mode feature for a visually appealing experience.

Installation

To set up the React & TailwindCSS Portfolio theme, follow these steps:

  1. Make sure you have Node JS installed. If not, download it from nodejs.org and install it.
  2. Clone the repo:
    git clone [github-repo-url]
    
    Replace [github-repo-url] with the actual URL of the repository.
  3. Open the project folder.
  4. Install packages and dependencies:
    npm install
    
    If you don’t have Yarn installed, you can install it globally using npm:
    npm install -g yarn
    
  5. Start a local dev server at http://localhost:3000:
    npm start
    
  6. Run tests:
    npm test
    

Please note that it is recommended to run npm install after pulling new changes from the repository. The project repository will also be regularly updated with new sections and tasks.

Summary

The React & TailwindCSS Portfolio is a versatile theme built with React and Tailwind CSS. It offers a range of features including dark mode, projects filtering, smooth scroll, and dynamic forms. With its reusable components and efficient state management using Context API, this theme provides a solid foundation for creating stylish and functional portfolios. The theme is well-documented and allows for easy installation and customization. Contributions to the project are encouraged, and it is licensed under MIT.