SamCux Portfolio Website

A modern, responsive portfolio website built with Next.js 14, TypeScript, and Framer Motion. Features smooth animations, dark mode support, and an intuitive user interface.

🚀 Features

• Modern Tech Stack: Built with Next.js 14, TypeScript, and Tailwind CSS
• Responsive Design: Fully responsive layout that works on all devices
• Dark Mode: Seamless dark/light theme switching with next-themes
• Smooth Animations: Sophisticated animations using Framer Motion
• Interactive UI:
  • Magnetic links
  • Custom cursor effects
  • Sparkle animations
  • Gradient backgrounds
  • Spring physics transitions
• Contact Form: Integrated with Web3Forms for easy contact
• Performance Optimized: Fast loading times and optimized assets
• Type-Safe: Full TypeScript support for robust code
• Accessibility: Built with accessibility in mind

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• Animation: Framer Motion
• Form Handling: @web3forms/react
• Icons: Lucide React
• Notifications: Sonner
• Theme: next-themes
• Development:
  • ESLint
  • PostCSS
  • Sharp (Image optimization)

🚦 Getting Started

1. Clone the repository

   git clone https://github.com/samcuxx/portfolio.git

2. Install dependencies

   npm install

3. Set up environment variables

   # Create a .env.local file and add:
   NEXT_PUBLIC_WEB3FORMS_KEY=your_web3forms_key

4. Run the development server

   npm run dev

5. Build for production

   npm run build

🎨 Project Structure

• /app: Next.js app router pages
• /components: Reusable React components
• /contexts: React context providers
• /hooks: Custom React hooks
• /public: Static assets
• /styles: Global styles and Tailwind config
• /data: Static data and content

🎯 Key Components

• Theme Toggle: Custom animated dark/light mode switch
• Magnetic Links: Interactive link animations
• Contact Form: Form with validation and submission handling
• Project Grid: Responsive grid with filtering and animations
• Custom Cursor: Enhanced cursor interactions
• Footer: Animated social links and navigation

📱 Responsive Design

The website is fully responsive with breakpoints for:

• Mobile devices
• Tablets
• Desktops
• Large screens

🎬 Animations

• Scroll-based reveals
• Hover interactions
• Page transitions
• Loading states
• Micro-interactions

🔑 Environment Variables

Required environment variables:

NEXT_PUBLIC_WEB3FORMS_KEY=your_key

📝 License

This project is open source and available under the MIT License.

🤝 Contact

For any inquiries or feedback, please reach out through the contact form on the website.

---

Built with ❤️ by Samuel Cux