Social Media Profile Link Aggregator Card

WHO

For: Professionals and developers who want a centralized landing page for their social media presence
Use Case: Portfolio/personal branding hub that directs visitors to LinkedIn, GitHub, Twitter, Instagram, and other social platforms
Setting: Web-based, works on desktop and mobile devices

WHAT

• Static profile card displaying user information (name, title, location)
• Interactive buttons linking to 5 social platforms (GitHub, Frontend Mentor, LinkedIn, Twitter, Instagram)
• Dark theme UI with profile photo and consistent card layout
• Built with React + TypeScript (based on your workspace)

WHY

Why it matters:

• Increases social media discoverability and professional network growth
• Provides a single landing page (link-in-bio alternative) for all professional links
• Improves user engagement by reducing friction to finding social profiles
• Demonstrates frontend development skills (attracts employers/clients viewing your portfolio)
• Supports personal branding strategy as a QA/Frontend Engineer

SOLUTION

APPROACH

• Component-Based Architecture: Create a reusable ProfileCard component that displays user data (name, title, location) and dynamically renders social media buttons
• Responsive Design: Build mobile-first with React flexbox/grid to adapt across device sizes
• Data-Driven: Store profile and social links in a configuration object for easy updates

HOW IT WORKS

• User Data Object: Contains name, title, location, photo URL, and social links array
• ProfileCard Component: Renders header section (photo + info) and buttons grid
• SocialButton Component: Maps over social links, creates clickable buttons with icons/labels
• Styling: CSS with hover effects, transitions, and dark theme variables
• Deployment: Hosted on Vercel for instant updates and link tracking (as shown in image URL)

Add presentation slides to showcase your solution

RESULTS

Add KPIs to showcase your impact

Additional Details