FE-React-Portfolio

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 🌐
• Introduction 🤔
• Features ✨
• Requirements 🏁
• Build Process 🏭
• Usage 💻
• Project Structure 🏗
• Key Dependencies 🔑
• Testing 🧪
• License 📜
• Contributing 🤝
• 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:

  yarn build:prod

• Production preview:

  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 🏗

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:

yarn test

License 📜

This project is licensed under the MIT 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
• Repository: GitHub