A beautiful, responsive web app showcasing 7 live projects — built with Claude UI colors.
🌐 Live Demo → tukaramhankare.github.io/master-package
Built with purpose, shipped with craft.
Tukaram Hankare · Farmer · Coder · Web Developer / Designer · Solapur, Maharashtra, India
- Overview
- Live Projects
- Features
- Design System
- File Structure
- Getting Started
- Responsive Breakpoints
- JavaScript Features
- Color Palette
- Browser Support
- Author
- License
Jarvis Studio is a fully client-side, zero-dependency project showcase grid app built using the exact Claude UI color palette (#D97757 orange, #FAF9F6 warm cream, and the full Claude surface/border/text token system). It showcases 7 live web projects built for Indian farming communities, developers, students, and enthusiasts.
🔗 Live at: tukaramhankare.github.io/master-package
No frameworks. No build tools. No npm. No CDN (except Google Fonts).
Just 3 files — drop them in a folder and openindex.html.
| # | Project | Category | Description | Link |
|---|---|---|---|---|
| 1 | ForgeHub ⭐ | 🔧 Tool | Turn .html source files into GitHub-ready repo structures |
forgehublive.wordpress.com |
| 2 | Backpack Emulator | 🔧 Tool | Browser-based file manager with virtual filesystem & live preview | backpackemulator.wordpress.com |
| 3 | Markdown Premium | 📝 Editor | Premium markdown editor with live preview & multi-format export | markdownpremium.wordpress.com |
| 4 | KisaanBill | 🌿 Farm | Tractor rental invoice builder for Indian farmers — PDF/XLSX/DOCX export | kisaanbill.wordpress.com |
| 5 | KisaanBook | 🌿 Farm | Farm budget & crop lifecycle tracker with Chart.js dashboards | kisaanbook.wordpress.com |
| 6 | CryptoPadel Elite | 💰 Finance | Crypto asset tracking meets padel sports analytics dashboard | cryptopadelite.wordpress.com |
| 7 | EduTrack | 🎓 Education | Student progress & learning habit tracker — offline-ready PWA | edutrack.carrd.co |
- Claude UI color tokens — exact palette used throughout (
--claude-orange,--claude-bg,--claude-surface, etc.) - Animated ambient background blobs — soft radial gradients that drift gently
- Card mouse-glow effect — radial spotlight follows your cursor inside each card
- Subtle 3D card tilt — perspective transform on hover (desktop only)
- Shine sweep animation — glossy highlight slides across cards on hover
- Category accent strips — orange top border for featured, green for farm cards
- Staggered card reveal — sequential fade-up animation on page load
- Toggle button in the header
- Persists to
localStorageacross sessions - Respects OS-level
prefers-color-schemeautomatically - Smooth transitions on all color properties
- Filter by: All · Tools · Farm · Edu & Finance
- Live project count badge updates on filter
- Cards re-animate with staggered delay when filter changes
- Keyboard shortcuts:
1234to switch filters instantly
- Desktop — 3-column grid, featured card spans 2 columns
- Tablet landscape — 2-column grid
- Tablet portrait — 2-column grid, compact header
- Mobile — 1-column, fixed bottom nav bar for thumb-friendly filtering
- Typography scales fluidly with
clamp()
- Zero JavaScript frameworks
- Zero npm dependencies
- Zero CDN dependencies (except Google Fonts)
- Single
requestAnimationFrameloop for counters IntersectionObserverfor scroll reveal (progressive enhancement)- CSS-only animations where possible
| Role | Font | Weight |
|---|---|---|
| Display / Headings | Syne | 700, 800 |
| Body / UI | DM Sans | 300, 400, 500 |
| Token | Light | Dark | Usage |
|---|---|---|---|
--bg |
#FAF9F6 |
#141210 |
Page background |
--surface |
#F5F3EE |
#1E1B18 |
Card background |
--surface-2 |
#EDEAE3 |
#272320 |
Pills, badges |
--border |
#E2DDD6 |
#353028 |
All borders |
--text |
#1A1714 |
#F0EDE8 |
Primary text |
--text-muted |
#7A7168 |
#7A7168 |
Secondary text |
--accent |
#D97757 |
#D97757 |
Orange (Claude) |
| Category | Background | Text (Light) | Text (Dark) |
|---|---|---|---|
| Tool | rgba(217,119,87,0.12) |
#C0614A |
#E8957A |
| Farm | rgba(74,148,82,0.12) |
#2E7D36 |
#5AB864 |
| Education | rgba(66,120,190,0.12) |
#2558A8 |
#6BA4E8 |
| Finance | rgba(140,100,200,0.12) |
#6B3FA8 |
#A87AE0 |
jarvis-studio/
│
├── index.html # Semantic HTML structure, all 7 project cards
├── style.css # Full design system, CSS variables, responsive grid
├── app.js # Filter, dark mode, glow, tilt, counters, ripple
│
└── README.md # This file
That's it. Three files. No
node_modules. Nopackage.json. No build step.
# Clone the repo
git clone https://github.com/tukaramhankare/master-package.git
# Navigate to folder
cd master-package
# Open in browser
open index.html
# or on Windows:
start index.html# Python 3
python -m http.server 8000
# Node.js (npx, no install needed)
npx serve .
# Then open: http://localhost:8000- Push to GitHub
- Go to Settings → Pages
- Set Source to
mainbranch,/ (root) - Your showcase is live at
https://tukaramhankare.github.io/master-package/
| Breakpoint | Layout | Notes |
|---|---|---|
> 1024px |
3-column grid | Featured card = 2 columns |
≤ 1024px |
2-column grid | Featured card = 2 columns |
≤ 768px |
2-column grid | Compact header, hidden sub-brand |
≤ 580px |
1-column grid | Bottom nav bar replaces header nav |
≤ 380px |
1-column grid | Extra compact typography |
| Feature | Description |
|---|---|
| Theme Toggle | Light ↔ Dark, saved to localStorage, respects prefers-color-scheme |
| Category Filter | Filters cards by data-category, updates count, re-triggers animations |
| Keyboard Shortcuts | 1 All · 2 Tools · 3 Farm · 4 Edu & Fin |
| Mouse Glow | Per-card --mouse-x / --mouse-y CSS variables driving a radial spotlight |
| 3D Card Tilt | perspective(800px) rotateX/Y on mousemove, resets on mouseleave |
| Scroll Reveal | IntersectionObserver triggers card fade-in as they enter viewport |
| Counter Animation | Hero stat numbers animate from 0 on page load with ease-out cubic |
| Ripple Effect | Click ripple on "Visit Project" buttons — pure DOM, no library |
| Dynamic Year | Footer copyright year updates automatically |
| Browser | Support |
|---|---|
| Chrome / Edge 88+ | ✅ Full |
| Firefox 85+ | ✅ Full |
| Safari 14+ | ✅ Full |
| Samsung Internet 13+ | ✅ Full |
| Opera 74+ | ✅ Full |
backdrop-filter(glass header) degrades gracefully in unsupported browsers — solid background shown instead.
Tukaram Hankare Farmer · Coder · Web Developer / Designer
📍 Solapur, Maharashtra, India 🎓 M.Sc. — Solapur University
Apache License 2.0
Copyright (c) 2026 Tukaram Hankare
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
Made with ❤️ in Solapur, Maharashtra 🇮🇳
Built with purpose, shipped with craft.