Personal website for Arjun Vinod, a Firmware Engineer based in Silicon Valley.
🔗 Live Site: https://arjunvinod.com
This repository hosts a personal portfolio website built with vanilla HTML, CSS, and JavaScript. The site features:
- Modern Minimalist Design: Clean, professional aesthetic with navy/teal accent colors
- Professional Profile: Experience and education displayed in an elegant vertical timeline
- Reading List: Curated collection of books spanning macroeconomics, financial systems, psychology, philosophy, and personal growth
- Theme Toggle: Light/dark mode with system preference detection and persistent user choice
- Responsive Design: Mobile-friendly layout with CSS custom properties for consistent theming
Main landing page featuring:
- Concise professional introduction
- Modern vertical timeline with connecting lines and animated dots
- Work experience at Astera Labs, Qualcomm Atheros, and GreenSight Agronomics
- Educational background from Syracuse University and KCG College of Technology
- Social media links and contact information
Reading list with:
- Dynamic book cover loading from Open Library API with ISBN fallbacks
- "Currently Reading" badge for in-progress books
- Theme-aware placeholder generation for missing covers
- Book descriptions and Amazon/ThriftBooks links
The site uses a modern minimalist design language:
- Color Palette: Navy blue (#0f4c75) primary with teal (#14b8a6) accents
- Typography: Inter (Google Fonts) with JetBrains Mono for monospace, system font stack as fallback
- Icons: Inline SVGs for social links and UI elements
- Timeline: Vertical timeline with gradient connecting lines and glowing dots
- Cards: Subtle shadows with hover animations and gradient accent bars
- Accessibility: High contrast colors in both light and dark modes
- No Build Process: Pure HTML/CSS/JavaScript - no frameworks or bundlers required
- Accessibility: ARIA labels, skip links, semantic HTML, keyboard navigation
- Performance: Lazy loading, preconnect hints, optimized asset loading
- SEO: Meta tags, Open Graph, Twitter Cards, canonical URLs
- PWA Ready: Web manifest and favicon set with multiple sizes for all platforms
.
├── index.html # Main page
├── books.html # Reading list
├── 404.html # Custom 404 page
├── sitemap.xml # Sitemap for SEO
├── site.webmanifest # PWA manifest
├── css/
│ └── styles.css # Shared styles and theme system
├── js/
│ ├── books.js # Book cover loading and ISBN fallback logic
│ ├── menu.js # Mobile menu dropdown logic
│ └── theme.js # Theme toggle and persistence
├── images/
│ ├── favicon.ico
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── apple-touch-icon.png
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ └── og-image.png
├── package.json # Dev dependencies (linting, Lighthouse)
├── .htmlhintrc # HTMLHint configuration
├── .stylelintrc.json # Stylelint configuration
└── lighthouserc.js # Lighthouse CI configuration
Start a local web server:
python3 -m http.server 4000Then visit http://localhost:4000
npm run lint # HTMLHint + Stylelint (HTML & CSS)
npm run lint:html # HTMLHint only
npm run lint:css # Stylelint only
npm run lighthouse # Lighthouse CI (requires local server on port 4000)- HTML5 with semantic markup
- CSS3 with custom properties (CSS variables) for theming
- Vanilla JavaScript (ES6+)
- Inter and JetBrains Mono via Google Fonts
- Open Library Covers API for book images
- HTMLHint, Stylelint, and Lighthouse CI for quality assurance
The site implements a comprehensive theme toggle:
- Auto-detects system preference on first visit
- Persists user selection in
localStorage - Emits custom
themeChangedevent for reactive components - CSS custom properties enable instant theme switching
- Email: arjun@arjunvinod.com
- LinkedIn: linkedin.com/in/avinod
- GitHub: github.com/arjun7965
- X (Twitter): twitter.com/arjun7965
© 2026 Arjun Vinod. All rights reserved.