-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinfo
More file actions
135 lines (98 loc) · 5.87 KB
/
Copy pathinfo
File metadata and controls
135 lines (98 loc) · 5.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
# 🚀 Ankit Sahoo - Professional Portfolio
[](https://reactjs.org/)
[](https://flask.palletsprojects.com/)
[](https://www.mongodb.com/)
[](https://www.python.org/)
[](https://nodejs.org/)
## 🌟 Introduction
Welcome to my professional portfolio repository. This project is a modern, interactive web application designed to showcase my skills, projects, and professional journey as a **Full Stack Enthusiast** and **Computer Science Student**.
Built with a robust **Flask** backend and a dynamic **React** frontend, this portfolio features advanced animations, a custom chatbot, and global connectivity visualizations.
---
## 📸 Visuals & Previews
Here is a glimpse into the visual identity of the portfolio:
| Profile Preview |
| :------------------------------------------------------------------------------------: |
| <img src="frontend/public/images/profile/photo1.jpg" alt="Profile Photo" width="300"/> |
_(More visual assets available in `frontend/public/images/`)_
---
## 🛠️ Project Structure
A high-level overview of the repository structure to help you navigate:
```bash
📂 -nkit_portfolio26/
├── 📂 backend_auth/ # 🤖 Backend logic, Authentication & Chatbot services
│ ├── chatbot.py # Main Flask server entry point
│ └── check_contacts.py # View contact submissions utility
├── 📂 database_architecture/ # 🗄️ Database connections and schema models
│ ├── connection.py # MongoDB Atlas connection
│ ├── models.py # Data models (Contact, Projects, etc.)
│ └── portfolio_service.py # Business logic for contact forms
├── 📂 frontend/ # ⚛️ React Frontend Application
│ ├── 📂 public/ # Static assets (Images, Icons)
│ └── 📂 src/ # Source code
│ ├── 📂 components/ # Reusable UI components
│ ├── 📂 data/ # Static data files (globe.json)
│ └── 📜 App.js
├── 📂 docs/ # 📄 Project documentation
├── 📜 .env # 🔐 Environment variables (GitIgnored)
└── 📜 requirements.txt # 🐍 Python dependencies
```
---
## 🚀 Key Features
- **Interactive UI/UX**: Powered by **Framer Motion** for smooth transitions and **Three.js** (via Solar System) for 3D visualizations.
- **Immersive Visuals**: Features a unique **Aurora Background** and optimized **Gravity Stars** physics engine.
- **Smooth Experience**: Integrated **Lenis Smooth Scroll** with intelligent modal handling for lag-free interactions.
- **Premium Project Grid**: A scalable, glassmorphic grid layout designed to showcase multiple projects with unique 3D tilt effects.
- **Solar System Skills**: Interactive 3D skill visualization with orbiting technology icons.
- **AI Chatbot**: Integrated conversational agent located in `backend_auth`.
- **Secure Contact Form**: Protected by **Cloudflare Turnstile**, saves to MongoDB.
- **Visitor Tracking**: Analytics implementation for monitoring traffic.
- **Responsive Design**: Fully optimized for mobile, tablet, and desktop viewing.
---
## ⚡ Getting Started
Follow these steps to set up the project locally.
### Prerequisites
- **Python** (3.8+)
- **Node.js** (16+) & **npm**
- **MongoDB Atlas** URI
### 1. Backend Setup
1. Navigate to the root directory.
2. Create a `.env` file with the following:
```env
MONGODB_CONNECTION_STRING=your_mongodb_string
JWT_SECRET=your_jwt_secret
ADMIN_USERNAME=admin
ADMIN_PASSWORD=password
# Cloudflare Turnstile (for contact form security)
REACT_APP_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key
```
3. Install dependencies and run:
```bash
python -m venv venv
# Windows:
.\venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
pip install -r requirements.txt
python backend_auth/chatbot.py
```
_Server runs on `http://localhost:5000`_
### 2. Frontend Setup
1. Open a new terminal and navigate to `frontend/`:
```bash
cd frontend
npm install
npm start
```
_Client runs on `http://localhost:3000`_
---
## 🌐 Connect with Me
I am always open to discussing new projects, creative ideas, or opportunities to be part of your visions.
| Platform | Link |
| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
| **LinkedIn** | [](https://linkedin.com/in/ankit-sahoo94) |
| **Twitter / X** | [](https://x.com/@AnkitSahoo94) |
| **Instagram** | [](https://instagram.com/ankitsahoo94) |
| **GitHub** | [](https://github.com/) |
---
_Made with ❤️ by Ankit Sahoo_