modern-portfolio21

🤖 Introduction

Welcome to a portfolio that blends modern web technologies: Next.js for seamless user interfaces, Three.js for engaging 3D visuals, Framer Motion for fluid animations, and TailwindCSS for stylish and responsive designs.

⚙️ Tech Stack

• Next.js: For server-side rendering and static site generation.
• Three.js: To bring 3D graphics and interactive elements.
• Framer Motion: For smooth and sophisticated animations.
• Tailwind CSS: To style the portfolio with a utility-first approach.

🔋 Features

• Dynamic Hero Section: Featuring a captivating introduction with an animated background.
• Modern Layout: Utilizing advanced CSS techniques for a sleek presentation.
• Interactive 3D Elements: Including 3D models and animations that engage users.
• Animated Testimonials: Showcasing feedback with eye-catching animations.
• Professional Work Display: Highlighting experience and achievements prominently.
• Creative Canvas Effects: Implementing HTML5 canvas for unique visual effects.
• Responsive Design: Ensuring a seamless experience across all devices.

🤸 Quick Start

To get started with the project locally:

Prerequisites

Make sure you have these installed:

• Git
• Node.js
• npm

Clone the Repository

git clone https://github.com/shoaib-fateh/modern-portfolio21.git
cd portfolio

Install Dependencies

npm install

Run the Project

npm run dev

Open http://localhost:3000 to view the live project.

🕸️ Code Snippets

export const navItems = [
  { name: "About", link: "#about" },
  { name: "Projects", link: "#projects" },
  { name: "Testimonials", link: "#testimonials" },
  { name: "Contact", link: "#contact" },
];


</details>

<details>
<summary><code>tailwind.config.ts</code></summary>

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./data/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        // Custom colors
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // Custom animations
      },
    },
  },
  plugins: [],
};

export default config;