insta-clone
📸 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.
```text id=”1w7f3c” 📸 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
<p align="center">
<img src="https://skillicons.dev/icons?i=html,css,git,github" />
</p>
### Frontend
* HTML5
* CSS3
### Design
* CSS layouts
* Forms
* Responsive styling
* Image assets
### Deployment
* GitHub Pages
---
# 📁 Project Structure
```text id="f8c2k6"
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
```bash id=”r6n4p2” git clone https://github.com/Nandhasv05/insta-clone.git
## 2. Navigate to Project
```bash id="c7m3x8"
cd insta-clone
3. Open the Application
Open:
```text id=”2w8f5k” login.html
in your browser.
You can also use **VS Code Live Server** for development.
---
# 🌐 Deployment
The project has been deployed using **GitHub Pages**.
```text id="v9x4m1"
GitHub Repository
│
▼
GitHub Pages
│
▼
Static Website
🎨 UI Design
The project focuses on recreating common Instagram authentication UI elements:
```text id=”7k2p5n” ┌─────────────────────────┐ │ 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:
```text id="s4j8w2"
React / Next.js
│
▼
TypeScript
│
▼
Node.js API
│
▼
PostgreSQL
│
┌─────────┴─────────┐
▼ ▼
Cloudinary Redis
Images Cache
👨💻 Developer
Nandhakumar S V
Full Stack Developer
Current Stack
```text id=”p6x3m8” 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
