Profile Card Component

View Live Demo

🌟 Overview

Welcome to the Profile Card Component project! This sleek, interactive Next.js application showcases a modern profile card with dynamic content and eye-catching animations. Perfect for developers looking to spice up their portfolio or create engaging user profiles.

🌐 Live Demo

Experience the Profile Card Component in action! Visit our live demo to see all the features and animations:

View Live Demo

Feel free to interact with the component and explore its responsive design. This demo showcases the power and flexibility of the Profile Card Component in a real-world setting.

✨ Features

• Interactive 3D Tilt Effect: Engage users with a responsive card that reacts to mouse movement.
• Dynamic GitHub Stats: Display real-time GitHub statistics.
• Experience Visualizer: Showcase professional experience with animated progress bars.
• Terminal Animation: Add a tech-savvy touch with a simulated terminal output.
• Responsive Design: Looks great on devices of all sizes.

🧩 Components

The Profile Card is composed of several modular components:

1. ProfileCard: The main wrapper component.
2. TotalExperience: Visualizes years of experience in different fields.
3. GitHubStats: Fetches and displays GitHub user statistics.
4. TerminalAnimation: Simulates a terminal with typing animation.
5. Details: Additional information about the profile.

🛠️ Technologies Used

This project is built with modern web technologies to ensure high performance, scalability, and developer-friendly experience:

• React: A JavaScript library for building user interfaces

  • Enables the creation of reusable UI components
  • Provides a robust ecosystem and community support

• Next.js: The React Framework for Production

  • Offers server-side rendering and static site generation
  • Provides built-in routing and API routes
  • Enables easy deployment and scaling

• Tailwind CSS: A utility-first CSS framework

  • Allows for rapid UI development with pre-built classes
  • Highly customizable and optimized for production builds
  • Integrates seamlessly with React and Next.js projects

• Framer Motion: A production-ready motion library for React

  • Powers smooth animations and interactive UI elements
  • Provides a simple API for complex motion design
  • Enhances user experience with fluid transitions and gestures

🚀 Getting Started

This project is built with Next.js, offering a smooth development experience and optimal performance.

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository:

   https:

   git clone https://github.com/thenickygee/profile-card.git
   cd profile-card-component

   ssh:

   git clone [email protected]:thenickygee/profile-card.git
   cd profile-card-component

2. Install Dependancies (npm i) or:

   npm install
   npm install @fortawesome/fontawesome-svg-core
   npm install @fortawesome/free-brands-svg-icons
   npm install @fortawesome/free-regular-svg-icons
   npm install @fortawesome/free-solid-svg-icons
   npm install @fortawesome/react-fontawesome
   npm install @radix-ui/react-hover-card
   npm install  clsx
   npm install framer-motion
   npm install lucide-react
   npm install  next
   npm install  qss
   npm install   react
   npm install   react-dom
   npm install  react-syntax-highlighter
   npm install  tailwind-merge
   

3. Run Development Environemnt

   npm run dev

4. View site 'http://localhost:3000'