🧠 About the Project
🚀 Inspiration
The idea came from my passion for cybersecurity and Kali Linux—tools I use daily as a red teamer and ethical hacker. Traditional portfolios always felt static and predictable, so I wanted to build something that truly reflects my hacker identity. I decided to reimagine the developer portfolio as a Kali Linux desktop environment, where visitors can interact, explore, and experience my work the same way I navigate real penetration testing systems.
🛠️ How I Built It
I built the project using Next.js 15 with React 18 and TypeScript, styled it with Tailwind CSS, and integrated dynamic visuals using the Canvas API.
Key components include:
- Interactive Terminal with 15+ working commands like
nmap,neofetch, andwhoami - Dynamic Boot Screen mimicking real Kali Linux startup logs
- File Manager displaying all my cybersecurity projects
- Draggable Windows and Taskbar UI built using React state management and custom hooks
- Matrix Rain and Glitch Effects rendered via Canvas for a cinematic hacker aesthetic
💡 What I Learned
- Deep understanding of Next.js App Router, server-side rendering (SSR), and client hydration
- Building fully interactive UIs that replicate OS behavior within a browser
- Optimizing performance using lazy loading, code splitting, and hardware acceleration
- Applying real-world security principles (CSP, XSS sanitization, CSRF protection) to a web project
- Designing a PWA (Progressive Web App) for offline usability
⚙️ Challenges Faced
- Balancing realism and usability: Ensuring it looked like Kali Linux but still felt like a clean, functional portfolio
- Performance optimization: Heavy animations initially caused FPS drops on mobile
- Terminal logic: Creating an interactive shell required handling command parsing, history navigation, and async outputs
- Window management: Implementing drag, resize, minimize, and layering behavior dynamically in React
- Maintaining authenticity while keeping the UX smooth and professional
✨ Final Reflection
This project is more than a portfolio—it’s a digital identity that blends my cybersecurity expertise, creativity, and full-stack development skills. It stands as a unique demonstration of technical execution, design innovation, and hacker culture—everything that defines who I am as a cybersecurity professional.
Built with ❤️ by Madhav Shah | HackWidMaddy
Built With
- animations
- api
- app
- architecture
- backend
- canvas
- codebase
- component-based
- contact
- csp
- css
- custom
- data
- deployment
- display
- dynamic
- effects
- emailjs
- enhanced
- environment
- form
- framer
- framework
- frontend
- functionality
- github
- glitch
- handling
- helmet.js
- hosting
- integration
- live
- matrix
- motion
- next.js
- node.js
- offline
- optimization
- performance
- platform
- professional
- progressive
- pwa
- rain
- react
- react-based
- real-time
- repositories
- scalable
- secure
- security
- smooth
- ssr
- stats
- styling
- support
- tailwind
- transitions
- type-safe
- typescript
- ui
- utility-first
- vercel
- web
- window
- xss
Log in or sign up for Devpost to join the conversation.