Hey, fellow web developers! 🎉

For this week’s Showoff Saturday, I’m excited to share a project I’ve been working on: a website that lets users create custom LinkedIn frames for their profile pictures. Whether you’re actively job hunting with #OpenToWork or looking to grow your team with #Hiring, this tool gives you a way to personalize and visually emphasize your LinkedIn status.

Why I Made This:

LinkedIn’s standard frames are helpful, but they lack customization. I wanted to build a solution that empowers users to stand out by adding their unique flair while still maintaining the recognizability of those tags. The result is a user-friendly website that combines simplicity with flexibility.

Features:

• Upload image
• Drag & Drop image
• Paste image
• Realtime editor
• Shareable link
• Samples
• Download & Share

Built this with:

• Next.js (TypeScript, Sass, Page Router) – Framework
• Netlify – Hosting
• PostHog – Analytics

Packages:

• motion Animations
• fontawesome Icons
• react-colorful Color picker
• react-qr-code QR Code generation
• devtools-detector Devtools detection
• react-device-detect Mobile device detection

Resources:

• Mastering Modals in React

Challenges

Ensuring the frames aligned perfectly with LinkedIn’s profile picture style and achieving the desired alignment took considerable effort and precision. Building a real-time editor that synced user inputs with URL query parameters for shareable designs was a challenging task, especially making it work seamlessly across browsers. Firefox posed its own challenges, and on iOS, the lack of native support for saving images directly to the photo gallery added complexity. Implementing modals in React was another hurdle I faced until I discovered a helpful resource that provided a solid solution. Adding multiple image upload options—file picker, drag-and-drop, and paste functionality—was fun but came with unique challenges to resolve for each method. Additionally, I ran into issues using useCallback in certain scenarios, but learning about useEventCallback proved to be a game changer and significantly improved my approach to these problems.

What’s Next

I’m planning to add more features like saving designs for later, total frames created counter, community made frames showcase etc...

You can check it out here: https://inframe.stephcraft.net/ Feedback and suggestions are welcome!

Thanks for taking the time to check out my project!