A JS-first portfolio dashboard built to showcase 6 real-world AI projects completed during the Nest-Agent AI & Automation Internship — 2026.
╔══════════════════════════════════════════════════════════════════╗
║ ║
║ 🏢 Nest-Agent · AI & Automation Internship · 2026 ║
║ ───────────────────────────────────────────────── ║
║ 📁 6 Projects · 🛠️ 15+ Tools · ✅ Verified ║
║ ║
╚══════════════════════════════════════════════════════════════════╝
This portfolio was built with one clear goal — to professionally showcase everything built during the Nest-Agent AI & Automation Internship.
Over the course of the internship, 6 real-world AI projects were completed — from basic chatbots to autonomous multi-tool agents and RAG systems. Rather than sharing a plain GitHub profile or a simple list of links, this dashboard presents each project in a polished, interactive format worthy of a professional portfolio.
💡 Built to impress. Built to show off. Built to prove that the internship produced real, working AI systems.
The project is also a technical statement in itself — the entire UI is generated by JavaScript. HTML holds only the skeleton, CSS holds only the base variables and everything else — all structure, all styles, all data, all animations — lives in a single script.js file.
| # | 🚀 Project | 🛠️ Tech Stack | 📁 Repo |
|---|---|---|---|
01 |
Basic AI Chatbot — Multi-turn dialogue with context memory | NodeJs · React · Gemini API · ExpressJS | → View |
02 |
Email Automation — Gmail API with OAuth 2.0 scheduling | Python · Gmail API · OAuth 2.0 | → View |
03 |
Resume Scanner AI — CV vs JD scoring with NLP | Python · NLP · OpenAI · PyPDF2 | → View |
04 |
WhatsApp Automation — Bulk messaging & scheduled replies | Python · Twilio · pywhatkit | → View |
05 |
⭐ Multi-Tool AI Agent — Autonomous agent with tools | LangChain · Python · OpenAI | → View |
06 |
⭐ RAG Knowledge System — Document Q&A with embeddings | LangChain · ChromaDB · FAISS | → View |
⭐ = Featured Projects — Most complex & technically impressive builds
Most portfolios dump everything into HTML and CSS. This one flips that approach — JavaScript is the engine, HTML is just the ignition key.
┌─────────────┬──────────────┬──────────────────────────────────────┐
│ File │ Lines │ Responsibility │
├─────────────┼──────────────┼──────────────────────────────────────┤
│ index.html │ ~80 lines │ Canvas + #app mount point only │
│ style.css │ ~50 lines │ CSS variables + reset + scrollbar │
│ script.js │ 900+ lines │ EVERYTHING else │
└─────────────┴──────────────┴──────────────────────────────────────┘
script.js
│
├── 📊 DATA LAYER
│ ├── OWNER → Name, links, tagline, social URLs
│ ├── STATS → Counter values (6 projects, 3 months, etc.)
│ ├── PROJECTS[] → All 6 projects (title, desc, techs, links, icons)
│ └── ICON → All SVG icons as JS strings
│
├── 🎨 STYLE LAYER
│ └── injectStyles() → Entire CSS injected as a JS template string
│
├── 🏗️ HTML BUILDER LAYER
│ ├── buildNavbar() → Sticky nav with theme toggle
│ ├── buildHero() → Hero section with title + tags + CTA
│ ├── buildStats() → Animated counter strip
│ ├── buildProjectCard() → Individual project card DOM element
│ ├── buildProjects() → Full project grid
│ ├── buildContact() → Contact section with links
│ └── buildFooter() → Footer bar
│
├── ⚡ INTERACTION LAYER
│ ├── initCanvas() → Neural network particle animation
│ ├── initCursor() → Custom cursor glow effect
│ ├── initTheme() → Dark / Light mode toggle
│ ├── initCounters() → Animated number counters
│ ├── initScrollReveal() → Cards animate in on scroll
│ ├── initTilt() → 3D perspective tilt on hover
│ ├── initActiveNav() → Active nav link highlight on scroll
│ ├── initNavbarScroll() → Navbar border opacity on scroll
│ └── initParticleBurst() → Click particle explosion effect
│
└── BOOT
└── boot() → Calls all 13 functions in sequence
| 🎨 Visual Effects | ⚡ Interactions | 📐 Architecture |
|---|---|---|
| Neural network canvas animation | Dark / Light theme toggle | Zero dependencies |
| Custom cursor glow effect | 3D tilt effect on hover | JS-generated HTML & CSS |
| Scroll-triggered card reveals | Click particle burst | All data in one place |
| Animated stat counters | Active nav link highlighting | Fully responsive layout |
| Featured project badges | Live status indicators | No build tools required |
ai-internship-portfolio/
│
├── 📁 .github/
│ └── 📁 workflows/
│ └── 📄 deploy.yml
│
├── 📄 index.html ← 80 lines · mount point only
├── 🎨 style.css ← 50 lines · CSS variables + reset
├── ⚡ script.js ← 900+ lines · entire app lives here
│
├── 📄 README.md
├── 📄 LICENSE
├── 📄 .gitignore
├── 📄 robots.txt
├── 📄 sitemap.xml
└── 📄 CNAME
No build tools. No npm. No dependencies. Just open it.
# 1. Clone the repository
git clone https://github.com/YasirAwan4831/ai-internship-portfolio.git
# 2. Navigate into the folder
cd ai-internship-portfolio
# 3. Open in browser — that's it!
open index.html💡 Or simply drag
index.htmlinto any browser — it works instantly.
╔══════════════════════════════════════════════════════╗
║ ║
║ 🏢 Company → Nest-Agent ║
║ ⏱️ Duration → 1 Month ║
║ 📁 Projects → 6 Real-World AI Projects ║
║ 🛠️ Technologies → 15+ Tools & Libraries ║
║ ✅ Status → Completed & Verified ║
║ ║
╚══════════════════════════════════════════════════════╝
| Category | 🛠️ Tools & Libraries |
|---|---|
| Dashboard | Vanilla JavaScript (ES6+), HTML5, CSS3 |
| Animation | Canvas API, Web Animations API, IntersectionObserver |
| AI Projects | Python, OpenAI API, LangChain, Flask |
| NLP | NLTK, SpaCy, Scikit-learn, PyPDF2 |
| Vector DB | ChromaDB, FAISS |
| Automation | Gmail API, Twilio, pywhatkit |
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ⚡ JS-First Architecture → HTML & CSS kept to minimum │
│ 📦 All Data in One Place → Edit one object to update │
│ 🚫 Zero Dependencies → No npm, no frameworks │
│ 💼 Professional Quality → Built for hiring managers │
│ 🎯 Internship-Grade Work → Real systems, real results │
│ │
└─────────────────────────────────────────────────────────────────┘
- JS-first architecture — HTML and CSS are kept to the absolute minimum; JavaScript does all the work
- All data in one place — Adding or updating a project means editing one object in
script.js - Zero dependencies — No frameworks, no npm, no build step — pure browser technology
- Professional presentation — Each project card links to its repo, live demo, LinkedIn post and article
- Internship-grade quality — Built to be shown to hiring managers, mentors and the AI/tech community
| Platform | 🔗 Link |
|---|---|
| 🌐 Portfolio | yasirawaninfo.vercel.app |
| linkedin.com/in/yasirawan4831 | |
| youtube.com/@YasirTech-t1d | |
| 🐙 GitHub | github.com/YasirAwan4831 |
| 🐦 X (Twitter) | x.com/yasirawan4831 |
| instagram.com/yasirawan4831 | |
| 🔗 Linktree | yasirawan4831.github.io/futuristic-links-dashboard |
| my3154831409@gmail.com |
This project is licensed under a Proprietary License — see the LICENSE file for details.
Developed with ❤️ by Muhammad Yasir
Nest-Agent AI & Automation Internship · 2026
⭐ Star this repo if you found it useful! ⭐