🚀 Modern Portfolio Website

Welcome to your modernized portfolio! This project includes a beautiful frontend with modern UI/UX, smooth animations, and a fully functional backend for form submissions.

📁 Project Structure

portfolio/
├── portfolio.html          # Home/About page
├── projects.html          # Projects showcase page
├── qurey.html             # Contact form page
├── style.css              # Modern styles with animations
├── server.py              # Flask backend server
├── requirements.txt       # Python dependencies
├── form_submissions.json  # Stored form submissions (auto-created)
└── images/
    ├── me.jpeg           # Profile picture
    ├── rebot.png         # Project screenshot
    └── Resume.pdf        # Resume file

🎨 Features

Frontend

✨ Modern UI/UX Design

• Clean, professional layout with gradient backgrounds
• Responsive grid layouts that work on all devices
• Professional color scheme (indigo & purple gradients)
• Smooth transitions and hover effects

🎬 Smooth Animations

• Fade-in animations on page load
• Slide-up animations for content sections
• Pulse animation on profile image
• Hover effects on cards and buttons
• Button elevation on click

📱 Responsive Design

• Mobile-first approach
• Tablet optimized
• Desktop enhanced layout
• Breakpoints at 768px and 480px

Backend

🔧 Form Submission Handler

• POST endpoint to receive form data
• Email validation
• Required field validation
• Stores submissions in JSON file
• CORS enabled for frontend communication

📊 Admin Features

• View all submissions: GET /api/submissions
• View single submission: GET /api/submissions/<id>
• Delete submission: DELETE /api/submissions/<id>

🚀 Getting Started

Prerequisites

• Python 3.8 or higher
• Modern web browser
• Text editor or IDE

Installation & Setup

Step 1: Install Python Dependencies

Open PowerShell in your project directory and run:

pip install -r requirements.txt

Step 2: Start the Backend Server

In PowerShell, run:

python server.py

You should see:

==================================================
Portfolio Website Backend Server
==================================================
Server starting on http://localhost:5000
Contact form endpoint: http://localhost:5000/api/submit-query
View submissions: http://localhost:5000/api/submissions
==================================================

Step 3: Open the Website

1. Open your browser
2. Navigate to: file:///C:/Users/godwi/html exercise/portfolio.html
3. (Or open portfolio.html directly)

Note: Keep the Python server running in the background while using the website for form submissions to work.

📋 Page Guide

1. Home Page (portfolio.html)

• Hero section with profile image
• About me with three key areas
• Skills grid showing frontend, backend, database, and tools
• Call-to-action section

2. Projects Page (projects.html)

• Project showcase with cards
• Live demo and code links
• Technology stack display
• Resume download link

3. Contact Page (qurey.html)

• Contact information section
• Modern contact form with validation
• Form fields:
  • Name (required)
  • Email (required)
  • Age (optional)
  • Address (optional)
  • Department (optional)
  • Message (required)
• Success/error feedback

🛠️ How the Form Works

1. User fills out the form on the contact page
2. JavaScript validates required fields
3. Data is sent to the backend server via HTTP POST
4. Server validates email format and required fields
5. Submission is stored in form_submissions.json
6. User receives success or error message

Viewing Submissions

Open your browser and go to:

http://localhost:5000/api/submissions

This shows all submitted forms in JSON format.

🎨 Customization

Change Colors

Edit the CSS variables at the top of style.css:

:root {
    --primary-color: #6366f1;      /* Change this */
    --secondary-color: #8b5cf6;    /* And this */
    --accent-color: #ec4899;       /* And this */
    /* ... */
}

Modify Content

Edit the HTML files directly to update:

• Your name and title
• About section content
• Skills list
• Project information
• Contact information

Update Profile Image

1. Place your image in the images/ folder
2. Update the src attribute in HTML files:

<img src="images/your-image.jpg" alt="description">

📱 Browser Compatibility

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari, Chrome Mobile)

⚙️ Advanced Setup (Optional)

Database Integration (MongoDB/MySQL)

To use a real database instead of JSON:

1. Install database driver: pip install pymongo or pip install mysql-connector-python
2. Modify server.py to connect to your database
3. Update submission storage logic

Email Notifications

To send email when form is submitted:

1. Install email library: pip install python-dotenv
2. Add to server.py:

import smtplib
from email.mime.text import MIMEText

# Configure in server.py to send emails

Deployment

Deploy Frontend:

• Upload HTML, CSS, and images to Netlify or GitHub Pages

Deploy Backend:

• Use Render, Heroku, or Railway
• Set environment variables for database credentials

🐛 Troubleshooting

Problem: "Connection refused" when submitting form

• Solution: Make sure server.py is running on port 5000

Problem: CORS error in browser console

• Solution: Backend CORS is enabled, verify server is running

Problem: Form submissions not saving

• Solution: Check write permissions in the project directory

Problem: Styling looks broken

• Solution: Clear browser cache (Ctrl+Shift+Delete) and reload

📝 API Documentation

Submit Query (Contact Form)

POST http://localhost:5000/api/submit-query
Content-Type: application/json

{
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hello!",
    "age": "25",
    "address": "123 Main St",
    "department": "CSE"
}

Response:
{
    "success": true,
    "message": "Your message has been received!",
    "submission_id": 1
}

Get All Submissions

GET http://localhost:5000/api/submissions

Response:
{
    "success": true,
    "total": 5,
    "submissions": [...]
}

📚 Resources

• CSS Animations
• Flask Documentation
• Responsive Web Design

💡 Future Improvements

• Dark mode toggle
• Multi-language support
• Blog section
• Project filtering
• Real-time notifications
• User authentication
• Admin dashboard
• Email notifications on form submission

📧 Support

If you encounter any issues or have questions, refer to the server logs in PowerShell for debugging information.

---

Happy coding! 🚀✨