Dev Ninja Portfolio

• 

  Portfolio Home Page, Hacking-inspired with animated glow, bold headings, and illuminated navigation for instant user engagement.

• 

  Intro About Me with Gradient backgrounds and floating particles, introduction to my story, tech stack.

• 

  Showcase of Projects, floating digital elements display real-world apps with glowing tech icons and smooth hover effects.

• 

  Animated Skills Dashboard, Neon-glow typography and interactive domain tags highlight my expertise with dynamic color transitions.

• 

  Cyberpunk sytle Contact Form, with holographic outlines, animated scanning line, and neon contact methods.

Inspiration

I wanted to build a portfolio that goes beyond a simple static site, a portfolio alive with interactive animations and real-time effects that reflect my technical skills and personality. The idea was inspired by cyberpunk aesthetics and the thrill of coding engaging user interfaces.

What it does

Dev Ninja Portfolio showcases my projects and skills with visually striking matrix rain effects, glitch text, animated radar and scanning lines, and a cyberpunk-style contact form. It offers interactive elements that respond to user behavior like mouse movement and hover animations, making the experience dynamic and memorable.

How we built it

The project was built with Next.js new App Directory structure, React hooks, and Framer Motion for animations. Canvas was used for the matrix rain effect while maintaining SSR compatibility by controlling DOM access with useEffect. The styling is handled by Tailwind CSS, giving a clean responsive design.

Challenges we ran into

At first all was going alright till 70% of completion of project then a major error came regarding animations, and for resolving all it, literally have taken 6 days to resolve that problem. Handling animations and window-specific DOM APIs caused issues during server-side rendering, which was resolved by moving effects inside client-only hooks. Balancing smooth, performant animations without janking was tricky, requiring optimization of canvas drawing and animation timing for both mobile and pc. Deploying with Vercel required mastering git workflows and build configurations.

Accomplishments that we're proud of

We successfully created a portfolio that is both visually compelling and performant across devices. Complex animations like matrix rain and glitch text were implemented seamlessly with React hooks. The project also features a cyberpunk-themed, interactive contact form with animated inputs and hover effects.

What we learned

We gained deeper insights into Next.js modern architecture, React hooks best practices, and integrating canvas animations in React. We also learned the nuances of deploying React apps to Vercel and handling common pitfalls like SSR issues and ESLint warnings. The power of Tailwind CSS in rapid UI development was evident throughout.

What's next for Dev Ninja Portfolio

We plan to extend the portfolio by adding blog support with rich content blocks and adding my programing lectures platform to it, implementing light/dark mode toggling, and integrating analytics for user behavior insights. We also aim to explore 3D effects and WebGL integration for deeper immersion and build modular components for easier future maintenance.

Built With

• framer-motion
• github
• next.js
• react
• tailwind
• typescript
• vercel