Welcome to the source code for my personal web portfolio. This project is a complete rebuild of my previous Vite-based portfolio, now leveraging the power of Next.js 15 with React 19, TypeScript, and Tailwind CSS. It showcases my skills, projects, and professional background as a web developer with a focus on modern development practices, performance, and user experience.
Web Portfolio Link: https://rikuron-web-portfolio.vercel.app
- 🚀 Next.js 15 & App Router: Built with the latest Next.js features including App Router and Turbopack for lightning-fast development
- ⚛️ React 19: Utilizing the newest React features and concurrent rendering capabilities
- 🎨 Responsive Design: Fluid, mobile-first design that looks stunning on all devices
- 🌗 Dynamic Theming: Persistent dark/light mode toggle with smooth transitions and theme-aware components
- 🎬 Smooth Animations: Engaging user experience powered by Framer Motion with optimized performance
- 📧 Contact Integration: Functional contact form with EmailJS integration for direct communication
- 🛠️ Interactive Tech Stack: Auto-scrolling technology showcase with hover effects and smooth animations
- 📱 Progressive Enhancement: Optimized for performance with lazy loading and efficient rendering
- 🔧 Developer Experience: TypeScript for type safety, ESLint for code quality, and modern tooling
- ⚡ Performance Optimized: Built with Core Web Vitals in mind for excellent user experience
This portfolio is built with a focus on modern web development technologies:
- Next.js 15 - React framework with App Router and Turbopack
- React 19 - Latest React with concurrent features
- TypeScript 5 - Type-safe JavaScript development
- Tailwind CSS 4 - Utility-first CSS framework
- Framer Motion - Production-ready motion library
- React Icons - Comprehensive icon library
- Tech Stack Icons - Technology logo components
- EmailJS - Client-side email functionality for contact form
- Custom Hooks - Reusable logic for theme persistence and responsive behavior
Follow these steps to run the portfolio locally:
Ensure you have the following installed:
- Node.js (v18.x or later) - Download here
- npm or pnpm (recommended for better performance)
# Install/update npm globally
npm install npm@latest -g
# Or install pnpm (recommended)
npm install -g pnpm-
Clone the repository
git clone https://github.com/Rikuron/Web-Portfolio.git
-
Navigate to the Next.js project
cd Web-Portfolio/next-ts -
Install dependencies
# Using npm npm install # Or using pnpm (recommended) pnpm install
-
Start the development server
# Using npm with Turbopack (faster) npm run dev # Or using pnpm pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see the portfolio in action.
This project follows the standard Next.js App Router structure:
next-ts/
├── public/ # Static assets like fonts and images
│ ├── fonts/
│ ├── images/
│ ├── josh_lmao.ico # Site Icon / Favicon
├── src/
│ ├── app/
│ │ ├── components/ # Reusable client components (ThemeProvider, ProjectCard)
│ │ │ ├── ClientLayout.tsx # Client-side layout wrapper
│ │ │ ├── ProjectCard.tsx # Individual project display
│ │ │ └── ThemeProvider.tsx # Theme context
│ │ ├── hooks/ # Custom React hooks (usePersistentTheme, useHeaderHeight)
│ │ │ ├── useHeaderHeight.ts # Dynamic header height management
│ │ │ └── usePersistentTheme.ts # Theme persistence logic
│ │ ├── sections/ # Major UI sections (Header, Hero, Tech, Projects, Contact, Footer,)
│ │ ├── utils/ # Utility functions
│ │ │ ├── navigation.ts # Navigation helpers
│ │ │ ├── projectData.ts # Project information data
│ │ │ └── techStack.ts # Technology stack data
│ │ ├── globals.css # Global styles and theme variables
│ │ ├── layout.tsx # Root layout (Server Component)
│ │ └── page.tsx # Main page content (Server Component)
│ └── ...
├── eslint.config.mjs
├── next.config.ts
├── postcss.config.mjs
└── tsconfig.json
This portfolio is deployed on Vercel for optimal performance:
- Connect to Vercel: Link your GitHub repository
- Auto-deploy: Automatic deployments on push to main branch
- Environment Variables: Configure any necessary environment variables
- Custom Domain: Optional custom domain configuration
The contact form uses EmailJS for client-side email functionality:
- Setup EmailJS Account: Create account at EmailJS
- Configure Service: Set up email service and template
- Environment Variables: Add your EmailJS credentials
- Test Integration: Verify email delivery functionality
This project is open source and available under the MIT License.
Josh Eugenio
- LinkedIn: Josh Eugenio
- Email: josheugenio65@gmail.com
- Portfolio: https://rikuron-web-portfolio.vercel.app
Project Repository: https://github.com/Rikuron/Web-Portfolio