"Simplicity is the ultimate sophistication."
A digital playground where tech meets art. Interactive 3D elements, AI-powered conversation, and immersive design create an experience beyond the typical portfolio.
| 🌌 3D Magic | 🤖 AI Guide | ✨ Visual Flair |
| Interactive Three.js models that bring projects to life | Smart chatbot companion for seamless navigation | Holographic textures and effects for visual impact |
🔍 More Goodies
- 📱 Fully Responsive — Perfect on every device
- 🖥️ Project Showcase — Dynamic filtering system
- 🚀 Lightning Fast — Optimized performance
- 🎨 Smooth Transitions — Seamless navigation flow
Built with:
- ⚛️ React + Vite — Speed and flexibility
- 🎨 Tailwind — Elegant, responsive design
- 🌐 Three.js — Immersive 3D experiences
- 🧠 Custom AI — Smart interaction layer
- Node.js (v14+)
- npm/yarn
-
Clone it
git clone https://github.com/nadun/portfolio.git cd portfolio -
Install it
npm install
-
Run it
npm run dev
-
Visit
http://localhost:5173
src/
├── assets/ # Visual treasures
├── components/ # UI building blocks
├── sections/ # Main content areas
├── data/ # Content configuration
├── utils/ # Helper functions
└── App.jsx # Main component
- The app is built entirely with React functional components for modularity and reusability.
- Main hierarchy:
App.jsx(root, wraps everything in context)Navbar(top navigation)Hero(landing section, intro, 3D model, chatbot)Projects(project cards, search/filter, popup details)Contact(contact form with validation & captcha)Footer(site footer)- Shared components:
BackToTop,LoadingSpinner,Model3DSection, etc.
- useState: Local state for UI (e.g., form data, loading, toggles).
- useEffect: Side effects (e.g., data preloading, event listeners, animations).
- useRef: DOM refs (e.g., scroll targets, section refs, timers).
- useReducer: Complex state (e.g., chatbot message management).
- useMemo/useCallback: Memoization for performance (e.g., dynamic lists, handlers).
- Custom hooks:
useAppLoading: Manages global loading state and progress.useSectionObserver: Tracks which section is active for dynamic backgrounds.useShaderBackground: Handles animated background color transitions.useColorScheme(context): Provides theme and color scheme switching.
- Add Projects — Update
ProjectData.json - Swap Models — Replace assets in
src/assets/ - Change Colors — Modify
tailwind.config.js - Edit Sections — Customize in
src/sections/
Nadun - inbox.nadun@gmail.com
Portfolio: https://www.nadun.me
+-----------------+ | CRAFTED WITH | | ❤️ Nuu | +-----------------+