/Draggable-Profile-Card

A draggable profile card component built with React and Next.js. This minimalistic profile card features smooth animations, responsive design, and integration of social media links. Users can easily customize profile details and styles. The component includes global styles with CSS resets to ensure consistency across various screen sizes.

Primary LanguageJavaScript

Draggable Profile Card

This is a minimalistic profile card component with draggable functionality built using React and Next.js. The profile card features animations for smooth transitions when dragged across the page. It includes a profile picture, name, occupation, brief description, and contact information, along with social media links represented by small circular icons.

Live Site: thesagor.com

Live Site Vercel: ryanL.vercel.app

Features

  • Draggable profile card with smooth animations.
  • Minimalist design with profile details aligned on the left side.
  • Responsive design for adaptability across various screen sizes.
  • Integration of social media links as small circular icons.
  • Global styles with CSS resets to ensure consistent look and feel.
  • Disabled right-click context menu and text selection within the profile card.

Project Structure

project-directory/
├── components/
│   ├── ProfileCard.js
│   └── SocialMediaIcons.js
├── pages/
│   ├── index.js
│   └── _app.js
├── public/
│   ├── favicon.ico
│   └── profile-picture.jpg
├── styles/
│   ├── ProfileCard.module.css
│   ├── SocialMediaIcons.module.css
│   └── globals.css
├── package.json
├── next.config.js
└── README.md

Installation

  1. Clone the repository:
git clone https://github.com/MdSagorMunshi/draggable-profile-card.git
cd draggable-profile-card
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev

Open http://localhost:3000 with your browser to see the result.

Usage

Components

  • ProfileCard.js: The main profile card component.
  • SocialMediaIcons.js: Component for rendering social media icons.

Styles

  • ProfileCard.module.css: Styles specific to the profile card component.
  • SocialMediaIcons.module.css: Styles specific to the social media icons component.
  • globals.css: Minimal global styles and CSS resets.

Pages

  • index.js: The main page that renders the profile card.
  • _app.js: Custom App component for initializing pages and importing global styles.

Public Assets

  • favicon.ico: Favicon for the application.
  • profile-picture.jpg: Profile picture.

Customization

  • To change the profile details, edit the ProfileCard.js component.
  • To add or modify social media links, update the SocialMediaIcons.js component.
  • Customize styles in the respective CSS modules (ProfileCard.module.css and SocialMediaIcons.module.css).

License

This project is licensed under the MIT License.