https://github.com/moonman369/portfolio
This is ReactJS based portfolio web application
https://github.com/moonman369/portfolio
html-css-javascript javascript portfolio-website reactjs ui-design uiux webdev
Last synced: about 2 months ago
JSON representation
This is ReactJS based portfolio web application
- Host: GitHub
- URL: https://github.com/moonman369/portfolio
- Owner: moonman369
- License: gpl-3.0
- Created: 2022-12-27T19:02:55.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-08-19T06:40:22.000Z (3 months ago)
- Last Synced: 2025-08-23T21:54:55.698Z (3 months ago)
- Topics: html-css-javascript, javascript, portfolio-website, reactjs, ui-design, uiux, webdev
- Language: JavaScript
- Homepage: https://moonman.in
- Size: 17.2 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💻 Ayan Maiti | Developer Portfolio
## 📋 Overview
A modern, responsive developer portfolio website showcasing my skills, projects, and professional experience. The site features a sleek, dark-themed UI with Matrix-inspired interactive elements, dynamic GitHub and LeetCode stat integration, and a comprehensive display of my work in full-stack and blockchain development.
## ✨ Features
- **🎯 Interactive UI**: Sleek, responsive design with Matrix-inspired animations
- **📊 Live Stats Integration**: Real-time display of GitHub and LeetCode statistics
- **🚀 Project Showcase**: Comprehensive portfolio section featuring my latest work
- **📝 Skills & Experience**: Detailed breakdown of technical skills and competencies
- **📱 Fully Responsive**: Optimized for all device sizes with adaptive layouts
- **📬 Contact Form**: Integrated email contact functionality
- **📜 Resume/CV**: Direct download access to my latest CV
## 🛠️ Technologies Used
### Frontend
- React.js
- CSS3 with custom animations
- React Icons
- React Circular Progressbar
- React Notifications
- Email.js for contact form
### Backend/API Integration
- Node.js
- Express.js
- HTTP Proxy Middleware
- GitHub API (via Octokit)
- LeetCode API
- Geolocation API
### State Management & Utilities
- React Hooks
- React Cookies
- Axios for HTTP requests
## 🔍 Core Components
- **Header**: Main introduction with animated elements
- **About**: Personal background and quick statistics
- **Experience**: Detailed skills breakdown by category
- **Stats**: GitHub, LeetCode, and certification showcase
- **Portfolio**: Showcase of recent projects with live demos
- **Contact**: Multiple contact methods and form
## 🌐 API Integrations
- **GitHub API**: Fetches repositories, commits, PRs, and stars
- **LeetCode API**: Retrieves coding problem statistics
- **Geolocation API**: Detects user location for enhanced experience
## 🧩 Project Structure
```
/
├── public/ # Static files
├── src/ # Source files
│ ├── assets/ # Images and static resources
│ ├── components/ # UI components
│ │ ├── about/ # About section
│ │ ├── contact/ # Contact section
│ │ ├── experience/ # Experience section
│ │ ├── footer/ # Footer component
│ │ ├── header/ # Header & hero section
│ │ ├── matrix-rain/ # Matrix animation effect
│ │ ├── nav/ # Navigation component
│ │ ├── portfolio/ # Portfolio showcase
│ │ ├── stats/ # GitHub & LeetCode stats
│ │ └── testimonials/ # Testimonials section
│ ├── App.jsx # Main application component
│ ├── index.js # Application entry point
│ ├── index.css # Global styles
│ └── setupProxy.js # API proxy configuration
└── package.json # Project dependencies
```
## 🚀 Getting Started
### Prerequisites
- Node.js (v14+)
- npm or yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/moonman369/Portfolio.git
cd Portfolio
```
2. Install dependencies
```bash
npm install
# or
yarn install
```
3. Create a `.env` file in the root directory with your API keys:
```
REACT_APP_GITHUB_PAT=your_github_personal_access_token
REACT_APP_USERNAME=your_github_username
REACT_APP_API_KEY=your_geolocation_api_key
REACT_APP_PORTFOLIO_API_HOSTNAME=your_api_hostname
REACT_APP_PORTFOLIO_API_LEETCODE_ENDPOINT=your_leetcode_endpoint
REACT_APP_PORTFOLIO_API_GITHUB_ENDPOINT=your_github_endpoint
```
4. Start the development server
```bash
npm start
# or
yarn start
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser
### Building for Production
```bash
npm run build
# or
yarn build
```
## 📄 License
This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.
## 👨💻 About Me
I'm Ayan Maiti, a Software Engineer at Tata Consultancy Services with experience in full-stack web development and blockchain technologies. I specialize in React.js, Node.js, and Solidity development.
## 📬 Contact
- **Email**: [ayanofficial31012001@gmail.com](mailto:ayanofficial31012001@gmail.com)
- **GitHub**: [moonman369](https://github.com/moonman369)
- **LinkedIn**: [Ayan Maiti](https://www.linkedin.com/in/ayan-maiti-5b4332233/)
- **LeetCode**: [moonman369](https://leetcode.com/moonman369)
---
Designed & Developed with ❤️ by Ayan Maiti
© 2023-2025 All Rights Reserved