📸 Instagram Clone

🎨 Instagram-Inspired Frontend UI

A frontend Instagram UI clone built using HTML and CSS.

The project recreates the visual style of Instagram's authentication screens and demonstrates frontend fundamentals such as page layout, styling, forms, images and responsive UI design.

---

🌐 Project Overview

This project was created as a frontend practice project to understand how modern social-media interfaces can be structured and styled.

                 📸 INSTAGRAM UI
                       │
              ┌────────┴────────┐
              │                 │
              ▼                 ▼
         🔐 LOGIN            📝 SIGNUP
              │                 │
              └────────┬────────┘
                       │
                       ▼
                  User Interface

---

✨ Features

• 📸 Instagram-inspired UI
• 🔐 Login page
• 📝 Signup page
• 🎨 Custom CSS styling
• 🖼️ Image assets
• 📱 Responsive frontend layout
• 🔗 Navigation between pages
• 🌐 Static website deployment

This is a frontend UI project and does not implement Instagram's real authentication or backend services.

---

🖥️ Pages

🔐 Login

The login interface includes:

• Username / email input
• Password input
• Login button
• Social login-style UI
• Registration navigation

---

📝 Signup

The signup interface includes:

• User information fields
• Registration UI
• Login navigation
• Instagram-inspired styling

---

🛠️ Tech Stack

Frontend

• HTML5
• CSS3

Design

• CSS layouts
• Forms
• Responsive styling
• Image assets

Deployment

• GitHub Pages

---

📁 Project Structure

insta-clone/
│
├── IG.jpeg
├── getMicrosoft.png
├── insta-loginpage.png
├── insta-signuppage.png
├── instaLogo.png
├── playStore.png
│
├── login.html
├── signup.html
│
├── signup.css
├── style.css
│
└── README.md

---

🚀 Run Locally

1. Clone Repository

git clone https://github.com/Nandhasv05/insta-clone.git

2. Navigate to Project

cd insta-clone

3. Open the Application

Open:

login.html

in your browser.

You can also use VS Code Live Server for development.

---

🌐 Deployment

The project has been deployed using GitHub Pages.

GitHub Repository
       │
       ▼
GitHub Pages
       │
       ▼
Static Website

---

🎨 UI Design

The project focuses on recreating common Instagram authentication UI elements:

┌─────────────────────────┐
│       Instagram         │
│                         │
│  ┌───────────────────┐  │
│  │ Username / Email  │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ Password          │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │      Log In       │  │
│  └───────────────────┘  │
│                         │
│      OR                 │
│                         │
│   Create New Account    │
└─────────────────────────┘

---

🎓 What I Learned

This project helped strengthen my understanding of:

• HTML semantic structure
• CSS layouts
• Forms
• CSS positioning
• Flexbox
• Responsive design
• Image assets
• Page navigation
• Git and GitHub
• Static website deployment

---

🚀 Future Improvements

• Rebuild using React
• Add TypeScript
• Add responsive mobile UI
• Add real authentication
• Add Node.js backend
• Add MySQL/PostgreSQL database
• Add user profiles
• Add posts
• Add likes and comments
• Add follow/unfollow
• Add stories
• Add messaging
• Add image upload
• Add JWT authentication

---

🔄 Modern Full-Stack Version

The current project is a static frontend. A future version could be developed as:

             React / Next.js
                    │
                    ▼
              TypeScript
                    │
                    ▼
             Node.js API
                    │
                    ▼
              PostgreSQL
                    │
          ┌─────────┴─────────┐
          ▼                   ▼
      Cloudinary            Redis
       Images               Cache

---

👨‍💻 Developer

Nandhakumar S V

Full Stack Developer

Current Stack

Frontend
├── React
├── Next.js
├── React Native
├── TypeScript
└── JavaScript

Backend
├── Node.js
├── Express.js
├── PHP
└── REST APIs

Database
├── MySQL
└── PostgreSQL

Cloud / DevOps
├── AWS
├── Docker
├── Nginx
└── CI/CD

---

🌐 Portfolio

https://nandhakumarsvdev.netlify.app/

---

💼 Freelance Development

BuildNexDev

Custom websites, web applications, mobile applications and business software solutions.

🌐 https://buildnexdev.in/

---

🔗 Connect With Me

---

📸 Frontend UI Practice Project

Built with HTML + CSS

⭐ If you like this project, consider giving it a star!