A modern, responsive portfolio website built with Next.js 16, React 19, and Tailwind CSS 4. Features smooth animations, dark mode support, and a clean monospace design aesthetic.
Live Demo: https://tyloo.fr
- Responsive Design — Mobile-first approach with seamless adaptation across all devices
- Dark/Light Mode — System preference detection with manual toggle
- Smooth Animations — Powered by Motion (Framer Motion) for fluid transitions
- Interactive Hero — Animated grid background with rotating typewriter text effect
- Experience Timeline — Visual career journey with detailed role descriptions
- Project Showcase — Grid layout with project cards, tech badges, and live links
- Active Section Tracking — Smart navbar highlighting based on scroll position
- SEO Optimized — Full metadata, Open Graph, and Twitter card support
- Analytics Ready — Vercel Analytics integration included
| Category | Technologies |
|---|---|
| Framework | Next.js 16, React 19, TypeScript |
| Styling | Tailwind CSS 4, CSS Custom Properties (OKLch) |
| Animation | Motion, Tailwind CSS Animate |
| UI Components | Radix UI, Shadcn/UI patterns |
| Icons | Lucide React, React Icons |
| Theme | next-themes |
| Code Quality | Biome (linting & formatting) |
| Analytics | Vercel Analytics |
- Node.js 18+
- pnpm (recommended) or npm/yarn
# Clone the repository
git clone https://github.com/tyloo/tyloo.fr.git
cd tyloo.fr
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 to view the site.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run Biome linter |
pnpm format |
Format code with Biome |
pnpm type-check |
Run TypeScript type checking |
tyloo.fr/
├── app/
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Main page sections
│ └── globals.css # Global styles & theme variables
├── components/
│ ├── hero.tsx # Hero section with animations
│ ├── about.tsx # About section
│ ├── experience.tsx # Career timeline
│ ├── projects.tsx # Project showcase grid
│ ├── navbar.tsx # Navigation with scroll tracking
│ ├── footer.tsx # Footer component
│ └── ui/ # Reusable UI components
├── lib/
│ ├── projects.ts # Project data
│ ├── experiences.ts # Experience data
│ ├── socials.ts # Social links
│ └── utils.ts # Utility functions
└── public/
├── projects/ # Project images
└── ... # Favicons, OG images, resume
To use this portfolio as a template for your own site:
- Update personal info in
app/layout.tsx(metadata, title, description) - Replace content in
lib/experiences.tsandlib/projects.ts - Swap images in
public/directory (profile photo, project screenshots, resume) - Modify colors in
app/globals.css(CSS custom properties) - Update social links in
lib/socials.ts
# Build the production bundle
pnpm build
# Start the production server
pnpm startThe build output can be deployed to any Node.js hosting platform or exported as static files.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Julien 'Tyloo' Bonvarlet
- Website: tyloo.fr
- GitHub: @tyloo
- LinkedIn: julien-bonvarlet