Profile Card Generator

• 

  Home page

• 

  Profile Generation

Inspiration

The Profile Card Generator was inspired by a viral tweet from with a design shared by @nocheerleader. This was her side project when she was taking a break from the hackathon, and one person's break is another one's project. The goal was to recreate and expand upon the concept of a dynamic, visually engaging digital identity that users could easily customize and share. We aimed to capture the essence of a modern, sleek, and interactive personal brand representation.

What it does

The Profile Card Generator is a web application that allows users to create personalized, interactive digital profile cards. Users can input their name, title, and social media handle, and upload a profile image. The application provides a real-time, live preview of the card, showcasing dynamic tilt, shine, and glare effects that respond to mouse movement. Once customized, users can export their unique card in several formats: a high-quality static PNG image, an animated GIF preview perfect for social media, or a fully interactive HTML file that retains all the dynamic effects. It also includes a direct sharing option for X (Twitter).

How we built it

The application is built using React with TypeScript for a robust and scalable frontend. Tailwind CSS was chosen for rapid and efficient styling, allowing for highly customizable and responsive designs. Vite serves as the build tool, providing a fast development experience. Deployed via netlify.

Challenges we ran into

One of the primary challenges was accurately capturing the complex CSS effects, such as backdrop-filter, gradients, and image masks, using html2canvas. Ensuring these visual nuances were faithfully reproduced in the exported PNGs and GIF frames required careful configuration and sometimes workarounds.

Generating high-quality, performant animated GIFs was another significant hurdle. Balancing the number of frames, resolution, and quality settings to achieve a smooth animation without resulting in excessively large file sizes or long generation times proved tricky. We also encountered issues with the GIF output being unexpectedly cropped, which required adjustments to the capture area and simulated interaction.

Managing the performance of the live preview, especially with the real-time mouse-tracking effects, demanded optimization to ensure a fluid user experience without lag. Additionally, handling user-uploaded images, including potential CORS issues for external URLs and ensuring they rendered correctly across different capture methods, presented its own set of complexities.

Accomplishments that we're proud of

We are particularly proud of successfully implementing the dynamic, interactive visual effects (tilt, shine, glare) that make the profile card truly stand out.

But more than that was just how much this highlighted the strength of the online community. We started with a random idea from someone on the internet and turned it into a full project. Got more people involved and got feedback. It just showcases how awesome the internet really is.

What we learned

We also learned about optimizing performance for highly interactive web applications, managing state effectively in React, and handling various aspects of file input and data manipulation in the browser environment. The debugging process for the GIF generation issues provided practical experience in isolating and resolving complex rendering problems.

What's next for Profile Card Generator

For the future, we plan to expand the customization options, allowing users to choose from different card layouts, font styles, color palettes, and perhaps even add more interactive elements or social media links. We aim to explore further optimizations for GIF generation to improve quality and reduce file size. Integrating a backend could enable features like user accounts, saving created cards, or building a public gallery. We also envision adding more sharing options for other social media platforms and potentially developing a feature to generate a unique shareable URL that hosts the interactive HTML card directly, making sharing even more effortless.

Built With

• css
• netlify
• react
• supabase
• tailwind
• typescript