A terminal-inspired portfolio website built with Next.js 16, React 19, and Tailwind CSS v4. It features a custom 3D skill globe, an interactive particle background that repels away from your mouse cursor, a zero-knowledge password auditor, and a functional command-line interface with 5 hidden CTF flags to find.
The website includes an interactive command line emulator. You can run normal Linux commands (ls, cd, pwd, cat, ping, clear), but it also hosts a built-in capture-the-flag mini-game. There are 5 hidden flags scattered across the files and tools.
Try finding them by running these commands:
- flag: Initial command checking.
- sudo: Attempting to escalate privileges.
- nmap localhost: Scanning local ports.
- exploit: Simulating a penetration testing framework.
- .secret: Discovering hidden files in the directory root.
- Script execution: Change directory into
~/toolsand run Python or Bash scripts:python hash_cracker.pysh payload_gen.shpython nmap_scanner.py
A custom 2D particle system runs behind the entire site. It renders about 150 floating particles connected by proximity-based lines. The physics engine tracks your mouse coordinates, causing nearby nodes to push away from your cursor in real time. It scales particle density dynamically depending on high-DPR screens to keep animations locked at a smooth 60fps.
A functional utility built to demonstrate secure client-side cryptographic handling. It verifies password strength and checks if a password has been compromised in any known data breaches:
- Hashing: Computes a SHA-1 hash of the input password entirely client-side.
- K-Anonymity: It queries
/api/check-passwordusing only the first 5 characters of the SHA-1 hash. - Matching: The API returns a list of suffix hashes matching that prefix from Have I Been Pwned. The site matches the rest of the hash locally.
- Result: No raw passwords ever leave your machine, preventing credential leakage.
A rotating 3D skill globe built using React Three Fiber and Three.js. It places interactive skill icons mathematically using a Fibonacci distribution across the surface of an icosahedron geometry. The sphere rotates automatically, scaling and highlighting individual skill tags when you hover over them.
- Framework: Next.js 16.2 (using App Router and Turbopack)
- Library: React 19.2
- Styling: Tailwind CSS v4.2 (using PostCSS configuration)
- 3D Engine: Three.js / React Three Fiber / Drei / Maath
- Animations: GSAP (entrance timelines), Framer Motion (layout states)
- Typography: Satoshi (Fontshare sans-serif), JetBrains Mono, Cedarville Cursive
- Smooth Scrolling: Lenis Scroll
- Contact Service: Resend API integration
- State/Cache: Upstash Redis (for password checks or rate limiting)
Portfolio/
├── app/
│ ├── api/ # Backend endpoints
│ │ ├── check-password/ # K-anonymity breach lookup
│ │ └── contact/ # Contact email via Resend
│ ├── contact/ # Contact page route
│ ├── experience/ # Experience timeline page
│ ├── projects/ # Project showcase page
│ ├── skills/ # Tech skills page
│ ├── globals.css # Custom styles, transitions, and keyframes
│ ├── layout.tsx # Main layout layout wrapper with fonts and analytics
│ ├── page.tsx # Home entry point
│ ├── robots.ts # SEO robots config
│ └── sitemap.ts # SEO sitemap generator
├── components/ # 21 custom UI components
│ ├── PortfolioContent.tsx # Combines all page sections
│ ├── StarBackground.tsx # Interactive particle network canvas
│ ├── Hero.tsx # Splash header and typing animation
│ ├── HeroGlobe.tsx # 3D interactive Fibonacci sphere
│ ├── HeroSkillsCircle.tsx # Floating orbital skills selector
│ ├── SplashScreen.tsx # Boot loader screen with scanline overlay
│ ├── Terminal.tsx # CLI terminal emulator and CTF host
│ ├── PasswordAnalyzer.tsx # Client-side hash auditor UI
│ ├── Konami.tsx # Key sequence detector
│ └── ... # About, Experience, Navbar, Footer
├── lib/
│ └── motion.ts # Shared animation configurations
├── providers/
│ └── lenis-provider.tsx # Lenis smooth scrolling provider
├── public/
│ ├── certificates/ # Certification badges
│ ├── icons/ # Tech stack vector graphics
│ ├── videos/ # Particle backgrounds for cards
│ ├── resume.pdf # Downloadable CV
│ └── favicon.svg # Custom vector favicon
├── tailwind.config.js # Accent colors and utility classes
├── vercel.json # Security headers and Vercel routing rules
└── tsconfig.json # TypeScript configuration
Ensure you have Node.js 18 or higher installed on your system.
-
Clone the repository:
git clone https://github.com/0xRafuSec/rafu-portfolio.git cd rafu-portfolio -
Configure environment variables: Create a
.env.localfile in the root folder and add your Resend API token:RESEND_API_KEY=your_resend_api_key
-
Install dependencies:
npm install
-
Launch development server: Starts the Next.js Turbopack compiler.
npm run dev
Open
http://localhost:3000to view the site. -
Build for production:
npm run build npm run start
The layout uses custom colors configured inside tailwind.config.js:
- cyber-green (
#00ff9d): Primary neon accent, terminal lines, successful statuses. - cyber-green-dark (
#00a365): Soft text alternative for light backgrounds. - cyber-blue (
#00e1ff): Secondary interactive actions, informational fields. - cyber-blue-dark (
#0096aa): Soft text alternative for the secondary color. - cyber-black (
#050505): Base terminal background.
- Live URL: rafucybersec.vercel.app
- GitHub profile: RafuCyberSec
- LinkedIn network: Muhammad Rafay Ali
- Secure Email: muhammad.rafayali@outlook.com
Built with 💛 by Muhammad Rafay Ali