A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS. This website serves as a professional showcase for a software developer specializing in PHP, Laravel, Next.js, and modern web technologies.

• Modern Stack: Built with Next.js 14, TypeScript, and Tailwind CSS
• Responsive Design: Fully responsive layout that works on all devices
• Dark/Light Mode: Theme toggle support with system preference detection
• SEO Optimized: Built-in metadata configuration for better search engine visibility
• Component Library: Leverages shadcn/ui components for a consistent design system
• Analytics: Integrated with Vercel Analytics for visitor tracking
• Accessibility: Designed with accessibility in mind

• Home: Feature showcase with hero section, featured projects, skills, latest blog posts
• About: Developer background and personal information
• Projects: Portfolio of development projects with detailed case studies
• Blog: Articles and technical content
• Contact: Functional contact form with email notification and contact information
• Uses: Information about tools and technologies used

• Next.js: React framework for production
• TypeScript: Type safety and better developer experience
• Tailwind CSS: Utility-first CSS framework
• Markdown: Blog content storage and rendering

• shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS
• Radix UI: Accessible and unstyled UI components
• Lucide React: Beautiful and consistent icon set

• React Hook Form: Form state management and validation
• Zod: TypeScript-first schema validation
• Nodemailer: Email functionality for contact form

• date-fns: Date utility library
• next-themes: Theme management
• Geist Font: Typography
• Recharts: Data visualization
• Vercel Analytics: Website analytics

• Node.js (v18 or higher)
• pnpm (v8 or higher)

# Clone the repository
git clone https://github.com/mavisland/website.git

# Navigate to the project directory
cd website

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your email credentials for the contact form

# Start the development server
pnpm dev

The application will be available at http://localhost:3000

The blog system uses markdown files stored in the data/blog directory. See the blog documentation for more information about creating and managing blog posts.

The contact form requires email configuration to work properly:

1. Edit your .env.local file to include email settings:

   EMAIL_HOST=your-smtp-server
   EMAIL_PORT=587
   EMAIL_SECURE=false
   [email protected]
   EMAIL_PASSWORD=your-email-password
   [email protected]
   [email protected]
   

2. Gmail users need to:

   • Use smtp.gmail.com as EMAIL_HOST
   • Create an app password at https://myaccount.google.com/apppasswords
   • Use that app password instead of your Gmail password

The contact form sends the submitted information to the specified email address.

# Create a production build
pnpm build

# Start the production server
pnpm start

├── app/                  # Next.js app directory (pages and routes)
├── components/           # Reusable UI components
│   ├── ui/               # shadcn/ui components
├── docs/                 # Documentation and setup guides
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and shared code
├── public/               # Static assets
├── styles/               # Global styles
└── types/                # TypeScript type definitions

1. Update personal information in app/layout.tsx metadata
2. Replace placeholder images in the public directory
3. Modify content in page components to reflect your personal information
4. Customize theme colors in components.json

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js
• Tailwind CSS
• shadcn/ui
• Vercel