My personal website and digital portfolio showcasing my work focusing on SecOps, DevOps, and Cybersecurity. Also features some personal stuff I enjoy.
- Modern Stack: Next.js 16 with Turbopack, TypeScript, Tailwind CSS
- Privacy-First: AI training opt-out, minimal analytics, Creative Commons licensing
- Performance Optimized: Web Vitals monitoring, image optimization, SEO best practices
- Content Management: MDX-powered pages for dynamic content
- Spotify Integration: Real-time "now playing" display
- Responsive Design: Mobile-first approach with dark mode support
# Clone the repository
git clone https://github.com/rohitjmathew/rohitjmathew.space.git
cd rohitjmathew.space
# Install dependencies
npm install
# Create environment file
cp .env.example .env.local
# Start development server
npm run devOpen http://localhost:3000 to view the site.
- Framework: Next.js 16 with Turbopack
- Language: TypeScript
- Styling: Tailwind CSS
- Content: MDX for rich content pages
- Deployment: Vercel
- Analytics: Google Analytics with Web Vitals
- Music: Spotify API integration
Content on this site is licensed under CC BY-NC-SA 4.0:
- ✅ Share & Adapt: With attribution
- ❌ No Commercial Use: Personal/educational only
- 📝 Share-Alike: Derivatives must use same license
- 🤖 No AI Training: Explicitly excluded from LLM datasets
- AI Training Opt-out: Technical and legal barriers against LLM crawling
- Privacy-Conscious Analytics: Minimal data collection
- Security Headers: CSP, HSTS, and other protective measures
- Bot Protection: Selective crawling permissions
├── components/ # Reusable React components
├── data/ # MDX content files
├── layouts/ # Page layout templates
├── lib/ # Utility functions and API clients
├── pages/ # Next.js pages and API routes
├── public/ # Static assets and files
├── scripts/ # Build and utility scripts
└── styles/ # Global CSS and Tailwind config
Docker-only testing for 100% OS-independent results across all browsers and devices.
# Run all 200 tests (40 test cases × 5 browsers) in parallel
npm test
# Run visual regression tests only (Chrome)
npm run test:visual
# Update visual test screenshots
npm run test:visual:update
# View detailed HTML test report
npm run test:report- 200 Total Executions: 40 test cases across 5 browsers (Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari)
- Parallel Execution: 4 workers for faster results (~2.6 minutes total)
- OS Independent: Docker ensures consistent rendering on macOS, Windows, Linux
- CI/CD Ready: Automated testing in GitHub Actions
- Homepage: Core functionality, navigation, external links
- About Page: Content structure, responsive design, card layouts
- Resource Pages: MDX content rendering, consistent styling
- Navigation: Internal/external links, 404 handling
- Performance: Core Web Vitals, accessibility, SEO
- API Integration: Spotify API handling, graceful failures
- Cross-page Screenshots: All main pages
- Responsive Design: Mobile viewports and layouts
- Dark Mode: Theme switching consistency
- 404 Page: Error page styling
- Why Docker-only? Zero OS dependencies, consistent font rendering, no "works on my machine" issues
- How it works: Builds Next.js app in Ubuntu container → starts server → runs 200 tests in parallel → generates reports
- File Structure:
├── Dockerfile # Test environment setup ├── playwright.docker.config.ts # Test configuration ├── scripts/test-docker.sh # Test runner script └── tests/ # Test suites (40 test cases)
- Tests fail with timeout: Increase timeout in
playwright.docker.config.ts - Visual tests fail: Run
npm run test:visual:updateto regenerate screenshots - CI/CD issues: Check GitHub Actions logs for Docker build errors
Special thanks to Lee Robinson whose open-source website provided inspiration and foundational patterns for this project.
- Website: rohitjmathew.space
- Twitter: @iamrohitjmathew
- LinkedIn: rohitjmathew
- GitHub: rohitjmathew
Building in public • Sharing knowledge • Connecting with the tech community