GitHub-Themed Interactive Portfolio Documentation By Omm Prakash Roul

#react #tailwindcss #css #webdev

📌 Overview-

A fully responsive, interactive portfolio inspired by GitHub's UI, featuring:
Terminal emulator with real commands (help, cd, ls, whoami)
Real-time weather widget (OpenWeatherMap API + Geolocation)
Project showcase with modals and GitHub links
Testimonials carousel (auto-scrolling)
Dark/light theme toggle
SEO optimized with meta tags
Built with React (CDN), TailwindCSS, and vanilla JavaScript in a single HTML file.

🛠 Tech Stack-

Frontend- React (CDN), Babel (standalone), TailwindCSS
Styling- CSS3, Animations (@keyframes), FontAwesome, Devicon
APIs- OpenWeatherMap, Formspree (contact form)
Hosting- Vercel (compatible with GitHub Pages)

📂 File Structure-
index.html

│

├─── Styles (embedded)

│ ├── GitHub-like theme (dark/light)

│ ├── Animations (glitch, pulse, float, etc.)

│ └── Responsive breakpoints (mobile-first)

│

├─── Scripts (embedded)

│ ├── Terminal command handler

│ ├── Weather widget (geolocation + API)

│ ├── Modal system for projects

│ └── Contact form (Formspree)

│

├─── Assets (external)

│ ├── Devicon (skill icons)

│ ├── FontAwesome (UI icons)

│ └── Profile/testimonial images

│

└─── SEO & Meta Tags

├── Open Graph (og:title, og:image)

└── Description/keywords for search engines

⚙️ Core Features

Terminal Emulator (setupTerminal()) Commands:

help → Lists available commands
cd [section] → Scrolls to about, projects, etc.
ls → Lists sections
whoami → Displays basic info
Features:
Typewriter effect for initial messages
Blinking cursor
Input history

Weather Widget (WeatherWidget()) Tech: OpenWeatherMap API + Geolocation

Features:

Real-time temperature, humidity, wind speed
Animated weather icons (sun, rain, clouds)
Falls back to IP-based location if geolocation is blocked
Mobile/desktop responsive layout

Project Showcase (ProjectCard()) Structure:

Flip animation (3D card effect)
Modal popup with details (tech stack, GitHub link, live demo)
Projects Included:
Movie Web App (React + TMDB API)
ATM Simulation (Java Swing + MySQL)
Spotify Clone (HTML/CSS/JS)

Testimonials Carousel (TestimonialSection()) Features:

Auto-scrolling infinite loop
Star ratings (1-5)
Hover animations

Contact Form (ContactForm()) Tech: Formspree (no backend needed)

-Features:

Validation (name, email, message)
Success/error toasts
Copy email button

*🎨 Design System-
Themes
Dark (Default)

GitHub-like (--github-bg: #0d1117, --github-text: #c9d1d9)
Light Mode
Toggleable via JS (document.documentElement.setAttribute)

*Animations-
glitch-text- RGB split effect for headings
float- Gentle up/down motion (skills icons)
pulse- Subtle scaling (buttons)
border-glow- Blue glow on interactive elements

*Responsive Breakpoints
-Mobile (<640px): Collapsible menu, simplified weather widget
-Tablet (768px): 2-column project grid
-Desktop (1024px+): Full layout with terminal + hero section

*🚀 Deployment
-Vercel / GitHub Pages
-Upload index.html and assets.

-Ensure all CDN links (React, Tailwind) are stable.

-Configure Formspree endpoint in ContactForm().

🔧 Potential Improvements
Performance-