Digital Business Card Generator Used AI
Create beautiful, customizable digital business cards right in your browser—and export them as PNG, JPEG, or standalone HTML. Perfect for events, portfolios, or gifting yourself a professional identity. (Using React.JS - but still learning it)
Followers
Moaz Mohamed
Whoops! Looks like they don't have a project yet. Maybe ask them to start one?
Ship Your Project
Get ready!
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Timeline
Updated README to not mention that we can export as PDF.
Time to ship!
Fixed the issue of icons not being displayed in jpg and png exports. Removed PDF export because I can't fix it in PDF export.
Time to ship the project!!
Added Home page (attached), added universal header and footer
Added export prop in Card component (only show export options if export is true, to enable it to be used as a preview in the home page)
Refactored complete index.css and gen.css
Check it out for yourself
Downloaded all svgs to all importing them as React components.
Added option to upload profile image - max 1MB (stores it in base64 encoded format in localStorage)
Used html2canvas and html2pdf.js to export them.
Enhanced styles.
What about the bug? The fact that icons went missing in pdf/jpg/png. I couldn't fix that. But html is 100% looking same as it looks on the website. Might try working on pdf/jpg/png later.
Building export as pdf, png, jpeg and html. Also, nevermind the styling of the page, I'll update it later.
I don't know why icons aren't showing up in the exports (neither of the 4)
Tried locally saving svgs (all bottom icons are svg)
Tried importing them as react component (vite-plugin-svgr)
Tried css fill: #fff
Even tried hardcoding fill into the svg file
None worked.
Added more inputs to generator form for social media links and email.
Also updated Card.jsx to fetch data from localStorage
Created card generation form in Gen.jsx, and moved card to Card.jsx
Also added tagline in the card (just after title)
Wrote basic CSS styles for form.
Stored user data into localStorage.
Converting into a business card generator.
Changes Made:
1. Reduced size of card
2. Added props to Header component
Updated svg icons to white coloured icons, added styles to make it look sleek and modern.
Completed digital business card, just little bit of CSS is to be tweaked to make it look awesome.
Complete the ReactFacts static page website by adding fonts and styles using css and Google Fonts. Started off to work on Digital Business Card.
Started to learn react, once I complete the first section, I will make a digital business card, for now I made a very simple static webpage as I started to learn React.js from Scrimba.
