AI Chat UI Clone

A modern ChatGPT-inspired chat interface built with HTML, CSS, and JavaScript for learning, experimentation, and portfolio purposes.

This project recreates the look and feel of a modern AI chat application. It is inspired by ChatGPT's interface and is not affiliated with or endorsed by OpenAI.

✨ Features

• Responsive desktop, tablet, and mobile layouts
• Collapsible sidebar
• Sticky top navigation
• Auto-growing textarea
• Markdown rendering (Marked.js)
• Syntax highlighting (Highlight.js)
• Portfolio knowledge base powered by Markdown
• Modular JavaScript architecture

---

🎥 Demo

Recording1.mp4

---

📸 Main Interface

🖥️ Desktop

📱 Mobile

---

📁 Project Structure

/
┣ assets
┃ ┣ img
┃ ┃ ┣ hero.png
┃ ┃ ┣ photo_2026-08-03_15-25-15.jpg
┃ ┃ ┣ photo_2026-08-03_15-25-37.jpg
┃ ┃ ┣ photo_2026-08-03_15-25-59.jpg
┃ ┃ ┗ photo_2026-08-03_15-31-07.jpg
┃ ┗ md
┃ ┃ ┣ education.md
┃ ┃ ┣ error.md
┃ ┃ ┣ experience.md
┃ ┃ ┣ goals.md
┃ ┃ ┣ interests.md
┃ ┃ ┣ photos.md
┃ ┃ ┣ projects.md
┃ ┃ ┣ skills.md
┃ ┃ ┣ socials.md
┃ ┃ ┗ who-is-abin-santhosh.md
┣ css
┃ ┣ animations.css
┃ ┣ chat.css
┃ ┣ input.css
┃ ┣ responsive.css
┃ ┣ sidebar.css
┃ ┣ style.css
┃ ┗ topbar.css
┣ js
┃ ┣ app.js
┃ ┣ chat.js
┃ ┣ codeblock.js
┃ ┣ knowledge-base.js
┃ ┣ markdown-loader.js
┃ ┣ markdown.js
┃ ┣ sidebar.js
┃ ┗ textarea.js
┣ favicon.ico
┣ index.html
┣ og-image.png
┗ README.md

🧠 Knowledge Base

Markdown files in assets/markdown/ are dynamically loaded through knowledge-base.js and markdown-loader.js, making portfolio content easy to maintain without changing application logic.

👨‍💻 Author

Abin Santhosh (MJTech46)

• GitHub: https://github.com/MJTech46
• Website: https://www.mj46.in