Skip to content

Latest commit

 

History

History
90 lines (66 loc) · 2.69 KB

README.md

File metadata and controls

90 lines (66 loc) · 2.69 KB
Raw

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.