https://github.com/5h1ngy/fe-react-portfolio
A modern React-based portfolio showcasing projects, skills, and achievements with support for Storybook and Chakra UI.
https://github.com/5h1ngy/fe-react-portfolio
chakra-ui developer-portfolio frontend modern-design portfolio react react-components storybook typescript vite
Last synced: 6 months ago
JSON representation
A modern React-based portfolio showcasing projects, skills, and achievements with support for Storybook and Chakra UI.
- Host: GitHub
- URL: https://github.com/5h1ngy/fe-react-portfolio
- Owner: 5h1ngy
- License: mit
- Created: 2025-03-08T15:10:55.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T04:12:44.000Z (7 months ago)
- Last Synced: 2025-04-01T05:23:03.164Z (7 months ago)
- Topics: chakra-ui, developer-portfolio, frontend, modern-design, portfolio, react, react-components, storybook, typescript, vite
- Language: TypeScript
- Homepage: https://5h1ngy.github.io/fe-react-portfolio
- Size: 122 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **FE-React-Portfolio**
[](./LICENSE)
[](#)
A modern portfolio application built using **React**, **TypeScript**, and **Chakra-UI**, showcasing modular design, theming capabilities, and reusable components. Designed for scalability and optimal developer experience.
## **Table of Contents 🧭**
- [URLs 🌐](#urls-)
- [Introduction 🤔](#introduction-)
- [Features ✨](#features-)
- [Requirements 🏁](#requirements-)
- [Build Process 🏭](#build-process-)
- [Usage 💻](#usage-)
- [Project Structure 🏗](#project-structure-)
- [Key Dependencies 🔑](#key-dependencies-)
- [Testing 🧪](#testing-)
- [License 📜](#license-)
- [Contributing 🤝](#contributing-)
- [Contact 📫](#contact-)
## **URLs 🌐**
| Key | Value |
|------|----------------------------------------------------------------|
| Site | [https://5h1ngy.github.io/fe-react-portfolio/home](#) |
## **Introduction 🤔**
**FE-React-Portfolio** is a modular, themeable portfolio application designed to showcase projects, skills, and professional information. It leverages modern frontend technologies and integrates seamlessly with libraries such as **GSAP** for animations and **Redux Toolkit** for state management.
## **Features ✨**
- **Responsive design** with light/dark themes.
- **Interactive project showcase** with animations (powered by GSAP).
- **Modular component-based** structure for reusability.
- **Built-in Markdown rendering** for project descriptions.
- **Type-safe** development using **TypeScript**.
- **State management** with **Redux Toolkit**.
## **Requirements 🏁**
- **Node.js**: `>= 20.18.0`
- **Yarn**: `>= 4.5.1`
## **Build Process 🏭**
- **Production build**:
```bash
yarn build:prod
```
- **Production preview**:
```bash
yarn preview:prod
```
## **Usage 💻**
- **Project Showcase**: Interactive cards displaying project details, links, and thumbnails.
- **Markdown Support**: Render project descriptions dynamically using Markdown.
- **Dark Mode**: Built-in light/dark theme toggling via Chakra UI.
- **Animations**: Smooth page transitions and interactive elements with GSAP.
> **Note**: Since this is a frontend application, please see your preferred deployment guide or host to run the compiled project in a production environment.
## **Project Structure 🏗**
```plaintext
src/
├── assets/ # Static assets (images, icons, etc.)
├── components/ # Reusable components
├── hocs/ # Higher-order components
├── pages/ # Page-level components (Home, About, etc.)
├── services/ # API calls, data fetching, etc.
├── store/ # Redux state slices and async thunks
├── styles/ # Global styles or theming config
├── utils/ # Helper functions and utilities
├── App.tsx # Main app entry point
└── main.tsx # Application bootstrap file
```
## **Key Dependencies 🔑**
- **React** (v19.x)
- **TypeScript** (v5.x)
- **Chakra-UI** (v3.x)
- **Redux Toolkit** (v2.x)
- **GSAP** (v3.x)
## **Testing 🧪**
Run your **unit tests** with:
```bash
yarn test
```
## **License 📜**
This project is licensed under the [MIT License](./LICENSE).
## **Contributing 🤝**
1. **Fork** the repository or open a new branch in your local clone.
2. Make your changes in the dedicated folder or file.
3. Open a **pull request** describing your changes.
## **Contact 📫**
- **Author**: [5h1ngy](https://github.com/5h1ngy)
- **Repository**: [GitHub](https://github.com/5h1ngy/fe-react-portfolio)