Welcome to the portfolio website of Josh Rouwhorst, a Senior Software Engineer and Web Developer passionate about creating modern, performant web applications.
This portfolio showcases my professional work, projects, and technical expertise through a clean, responsive design. Built with cutting-edge web technologies to demonstrate modern development practices and attention to detail.
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Google Fonts - Young Serif & Geist font families
- React Context - State management for scroll detection
- Responsive Design - Optimized for all device sizes
- Adaptive Text - Text color adapts to background brightness using CSS blend modes
- Compound Components - Flexible, reusable component architecture
- Scroll Detection - Dynamic navigation styling based on scroll position
- Performance Optimized - Font optimization and efficient rendering
- TypeScript - Full type safety throughout the application
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/joshrouwhorst/portfolio-2025.git
cd portfolio-2025- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 to view the site.
src/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles & Tailwind config
│ ├── layout.tsx # Root layout with font configuration
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── Hero.tsx # Hero section
│ ├── Nav.tsx # Navigation with adaptive styling
│ ├── Project.tsx # Compound component for projects
│ └── ...
├── hooks/ # Custom React hooks
├── providers/ # Context providers
└── config.ts # Site configuration
The navigation bar dynamically adjusts its styling based on scroll position and uses CSS blend modes to ensure text remains readable over varying backgrounds.
The Project component uses a compound pattern allowing flexible composition:
<Project>
<Project.Title>My Project</Project.Title>
<Project.Description>Project details...</Project.Description>
<Project.Link href="/demo">View Demo</Project.Link>
</Project>Uses Next.js font optimization with Google Fonts (Young Serif and Geist) for improved performance and visual consistency.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
This project uses Tailwind CSS v4 with the new @theme directive for custom design tokens. The configuration is inline within globals.css for simplified setup.
Josh Rouwhorst
Senior Software Engineer & Web Developer
Portfolio • LinkedIn • GitHub