Hey! 👋 This is my personal portfolio — not the boring kind with a stock photo and a generic "I'm passionate about technology" tagline. This is the real me: a dev who likes building things that look good, feel smooth, and don't make people want to close the tab.
Built it to show off projects, say a bit about who I am, and maybe score some cool opportunities. No corporate fluff. Just vibes and working code. ✌️
- 🏎️ 94+ Lighthouse Score — Google approves.
- 📦 ~123KB bundle (gzipped) — Lightweight like a ninja.
- 🎯 Lazy loading everything — Your data plan is safe with me.
- 🧈 60fps animations — Jank is a crime here.
src/
├── pages/ # The main "rooms" of the site
│ ├── Home.tsx # Grand entrance, hero vibes
│ ├── About.tsx # The lore, the backstory
│ ├── Projects.tsx # Trophy room (biggest file, most love)
│ ├── Blog.tsx # Brain dumps via Hashnode API
│ ├── Contact.tsx # Slide into my DMs (professionally)
│ └── NotFound.tsx # 404 — you got lost, buddy
│
├── components/ # Reusable building blocks
│ ├── Navbar.tsx # Navigation (responsive, animated)
│ ├── Footer.tsx # The bottom (still important)
│ ├── SEO.tsx # Meta tags so Google loves me
│ ├── LoadingSpinner.tsx # Pretty spinner while things load
│ ├── CursorEffect.tsx # Custom cursor magic ✨
│ ├── BackgroundEffect.tsx # That cool animated background
│ ├── Skeleton.tsx # Skeleton screens while loading
│ ├── ErrorBoundary.tsx # Catches crashes gracefully
│ ├── ExitIntentPopup.tsx # Tries to keep you here 😂
│ ├── ResumeDownload.tsx # One-click CV grab
│ ├── BlogCard.tsx # Blog post cards
│ ├── Breadcrumb.tsx # So you know where you are
│ ├── FAQSchema.tsx # Structured data for SEO nerds
│ └── ScrollToTop.tsx # Elevator button for the page
│
├── hooks/ # Custom React hooks
│ └── useViewTransition.ts # View Transition API wrapper
│
├── utils/ # Utility functions & helpers
│ ├── hashnode.ts # Hashnode GraphQL API calls
│ └── performance.ts # ScrollOptimizer & performance utils
│
├── styles/ # Global styles & tokens
├── assets/ # Static assets (images, icons etc.)
├── App.tsx # Root component, routing + page transitions
└── index.tsx # Entry point, where it all begins
| Tech | What it does |
|---|---|
| React 19 | Bleeding edge. Living dangerously. |
| TypeScript | Because undefined is not a function is not a vibe. |
| Vite 6 | Build tool so fast it's almost cheating. |
| Styled Components v6 | CSS-in-JS. Judge me. I love it. |
| Framer Motion 12 | Makes everything go whoosh and spin. |
| React Router v7 | Handles all the URL magic. |
| React Helmet Async | SEO meta tags on every page. |
| Hashnode API | Pulls blog posts from my Hashnode blog. |
Want to poke around? Let's go.
Prerequisites: Node.js v18+ and a mild sense of adventure.
# 1. Steal the code (legally)
git clone https://github.com/Mrtracker-new/RNR.git
# 2. Step inside
cd RNR
# 3. Feed the node_modules monster
npm install
# 4. Light it up 🔥
npm run devHit http://localhost:5173 and witness it yourself.
npm run build # Production build (TypeScript check + Vite)
npm run preview # Preview the production build locallyCopy .env.example to .env and fill in your values:
cp .env.example .envThe blog page needs a Hashnode publication host to fetch posts. Check .env.example for all available variables.
- 🌍 Portfolio: rolan-rnr.netlify.app
- 📦 GitHub: @Mrtracker-new
- 📧 Email: rolanlobo901@gmail.com
- 📝 Blog: Hashnode
- 📍 Location: India 🇮🇳
If you made it this far, you're awesome. ⭐ Star the repo if you liked it!
Made with ❤️, ☕, and an unhealthy number of console.logs — by Rolan