A hyper-modern, high-performance portfolio website built with a focus on visual depth, premium interactivity, and technical storytelling. Designed to reflect a background in resilient infrastructure and strategic technology.
A fully functional terminal emulator that allows users to explore the portfolio via CLI.
- Commands:
whoami,neofetch,skills,projects,matrix,hack, and more. - Functionality: Supports Tab-autocomplete, command history (Up/Down arrows), and section-specific navigation (e.g.,
goto projects). - PWA Ready: Built-in system diagnostics and offline state handling.
A Spotlight-style command palette triggered globally by keyboard shortcuts.
- Quick Navigation: Instant jumps to Home, About, Experience, or Blog.
- Categorized Actions: Filterable list of categorized commands (Navigation, Actions, System).
- Audio Feedback: Context-aware mechanical sound effects for a tactile experience.
A sophisticated tab-based component for switching between different professional personas.
- GSAP Driven: Utilizes GreenSock's powerful animation engine for smooth transitions between cards.
- Glassmorphism: High-depth card designs with backdrop-blur effects and magnetic hover interactions.
A grid of projects presented with high-impact visual depth.
- Smart Filtering: Category-aware project filtering with fluid re-layout animations.
- Horizontal Peek: Optimized for mobile with horizontal scroll hints (iOS style) and cinema-grade gradients.
Built focused on mobile ergonomics, not just as a responsive afterthought.
- Mobile Dock: A bottom-anchored navigation bar mirroring the premium feel of native mobile apps.
- Optimized Performance: Disabled CPU-heavy animations (like text scrambling) on mobile to ensure 60fps scrolling.
- Safe Area Support: Full support for notches, dynamic islands, and home indicators.
A static Markdown discovery system that renders articles dynamically.
- Zero Configuration: Reads from a structured JSON index to discover new
.mdfiles in thearticles/directory. - High Readability: Focuses on typography and clean spacing for a distraction-free reading experience.
| Category | Technologies |
|---|---|
| Core | HTML5, CSS3 (Vanilla), JavaScript (ES2024) |
| Animations | GSAP (GreenSock Animation Platform) + ScrollTrigger |
| Scrolling | Lenis (Smooth Scroll Engine) |
| PWA | Service Workers, Web App Manifest, Cache Storage API |
| Style | Dark Mode (Matrix/Apple inspired), CSS Grid, Flexbox, Variable Tokens |
| Deployment | GitHub Pages Optimized |
- Clone the repository:
git clone https://github.com/vineetkishore01/Portfolio.git
- Launch a local server:
Since it's a static site with local file fetching (for the blog), use an HTTP server:
npx serve . # or python3 -m http.server 8000
- Open in browser:
Navigate to
localhost:8000or the port provided.
Cmd/Ctrl + K: Open Command PaletteEsc: Close Modals / Command PaletteF: Toggle "Flashlight" Mode (experimental)Tab: Auto-complete commands in the Terminal
- Versioning: Controlled via
?v=Xparams for rapid iterative deployment caching. - Style Overdrive: Specific
mobile-design.cssarchitecture to enforce performance and visual rules on small screens. - SEO/OpenGraph: Full structured data (JSON-LD) and meta tags for optimized recruiter visibility.
Created with precision and passion by Vineet Kishore.