Update below details BIODATA
❖ PERSONAL HISTORY ➢ NAME : GAUTAM RAMANI ➢ DATE OF BIRTH : 15 MAY, 1997 ➢ HEIGHT : 5.7i ➢ WEIGHT : 51KG ➢ CAST : Patel ➢ EDUCATION : 12th ➢ OCCUPATION : FURNITURE (Ahmedabad) ➢ Hobby : Cricket
❖ FAMILY HISTORY ➢ FATHER NAME : Late VINUBHAI GOKULBHAI RAMANI ➢ MOTHER NAME : NIMUBEN (HOUSEWIFE) ➢ BROTHER : KETAN RAMANI (MARRIED) ➢ MATERNAL : LADHESHBHAI GORDHANBHAUI THUMMAR (SANTHVAYA) ➢ ADDRESS : TO : LONKOTADA, TA : BABRA, DIST : AMRELI ➢ MOBILE NO : +91 9714700284
❖ Property ❖ Agriculture LAND : 25 VIGHA - LONKOTADA ❖ Residency LAND : 2BHK IN AHMEDABAD
Create biodata similar like I provided image
I'll create a modern marriage biodata similar to the image template but with your information.
I've created a modern marriage biodata layout based on the template you provided, using your personal information. The design includes:
- A header with "Marriage Bio-Data"
A left section with:
- Your name prominently displayed
- A placeholder for your photo (you can replace this with your actual photo)
- Personal information section
- Property details section
A right section with:
- Family details
- Education information
- Hobbies
- Career information
- Contact details at the bottom
The layout is responsive and will look good on both mobile and desktop devices. You can customize the colors, fonts, and other design elements to match your preferences.
Would you like me to make any adjustments to the design or information?
convert hrml to pdf image
import { User, Users, GraduationCap, Music, Briefcase, Home } from "lucide-react"
export default function MarriageBiodata() { return ( <div className="max-w-4xl mx-auto bg-white shadow-lg"> {/* Header */} <div className="bg-gray-800 text-white py-4 text-center"> <h1 className="text-4xl font-bold">Bio-Data</h1> </div>
<div className="flex flex-col md:flex-row">
{/* Left Section - Photo and Personal Info */}
<div className="md:w-1/3 bg-black text-white">
<div className="p-6 text-center">
<h2 className="text-4xl font-bold mb-6">GAUTAM RAMANI</h2>
<div className="rounded-full overflow-hidden w-48 h-48 mx-auto border-4 border-white mb-6">
<img
src="https://res.cloudinary.com/dgi4o9j5o/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1743156841/gautam_ramani.jpg"
alt="Profile Photo"
className="w-full h-full object-cover"
/>
</div>
</div>
{/* Personal Info Section */}
<div className="bg-gray-300 text-black p-4 mx-4 rounded-t-lg">
<div className="flex items-center gap-2 mb-3">
<User className="h-5 w-5" />
<h3 className="text-xl font-bold">PERSONAL INFO</h3>
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="font-semibold">Name</div>
<div>GAUTAM</div>
<div className="font-semibold">Date of Birth</div>
<div>15 MAY, 1997</div>
<div className="font-semibold">Height</div>
<div>5.7"</div>
<div className="font-semibold">Weight</div>
<div>51 KG</div>
<div className="font-semibold">Caste</div>
<div>Patel</div>
<div className="font-semibold">Mobile No.</div>
<div>+91 9714700284</div>
</div>
</div>
{/* Property Section */}
<div className="bg-gray-300 text-black p-4 mx-4 mt-4 mb-6 rounded-lg">
<div className="flex items-center gap-2 mb-3">
<Home className="h-5 w-5" />
<h3 className="text-xl font-bold">PROPERTY</h3>
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="font-semibold">Agriculture Land</div>
<div>25 VIGHA - LONKOTADA</div>
<div className="font-semibold">Residency</div>
<div>Home in LONKOTADA, 2BHK Flat in AHMEDABAD</div>
</div>
</div>
</div>
{/* Right Section - Details */}
<div className="md:w-2/3 p-6">
{/* Family Details */}
<div className="mb-8">
<div className="flex items-center gap-2 border-b-2 pb-2 mb-4">
<Users className="h-5 w-5" />
<h3 className="text-xl font-bold">FAMILY DETAILS</h3>
</div>
<div className="grid grid-cols-2 gap-y-2">
<div className="font-semibold">Father's Name</div>
<div>VINUBHAI GOKULBHAI RAMANI</div>
<div className="font-semibold">Mother's Name</div>
<div>NIMUBEN (HOUSEWIFE)</div>
<div className="font-semibold">Brother</div>
<div>KETAN RAMANI (MARRIED)</div>
<div className="font-semibold">Maternal</div>
<div>LADHESHBHAI GORDHANBHAUI THUMMAR (SANTHVAYA)</div>
<div className="font-semibold">Address</div>
<div>TO: LONKOTADA, TA: BABRA, DIST: AMRELI</div>
</div>
</div>
{/* Education */}
<div className="mb-8">
<div className="flex items-center gap-2 border-b-2 pb-2 mb-4">
<GraduationCap className="h-5 w-5" />
<h3 className="text-xl font-bold">EDUCATION</h3>
</div>
<div className="grid grid-cols-2 gap-y-2">
<div className="font-semibold">Highest Education</div>
<div>12th</div>
</div>
</div>
{/* Hobbies and Interests */}
<div className="mb-8">
<div className="flex items-center gap-2 border-b-2 pb-2 mb-4">
<Music className="h-5 w-5" />
<h3 className="text-xl font-bold">HOBBIES AND INTERESTS</h3>
</div>
<div className="grid grid-cols-2 gap-y-2">
<div className="font-semibold">Hobbies</div>
<div>Cricket, Travelling</div>
</div>
</div>
{/* Career */}
<div className="mb-8">
<div className="flex items-center gap-2 border-b-2 pb-2 mb-4">
<Briefcase className="h-5 w-5" />
<h3 className="text-xl font-bold">CAREER</h3>
</div>
<div className="grid grid-cols-2 gap-y-2">
<div className="font-semibold">Occupation</div>
<div>FURNITURE (Ahmedabad)</div>
</div>
</div>
{/* Contact Information */}
<div className="bg-gray-800 text-white p-4 rounded-lg mt-auto">
<div className="flex items-center gap-4 mb-2">
<div className="w-6 flex justify-center">📞</div>
<div>+91 9714700284</div>
</div>
<div className="flex items-center gap-4 mb-2">
<div className="w-6 flex justify-center">🏠</div>
<div>TO: LONKOTADA, TA: BABRA, DIST: AMRELI</div>
</div>
</div>
</div>
</div>
</div>
) }
I'll create a solution to convert your biodata component to a PDF. Here's how you can do it using the react-to-pdf library:
How to Use This Solution
I've created a component that renders your biodata with a "Download as PDF" button at the top. Here's how it works:
- The component uses
useRefto reference the biodata content When you click the "Download as PDF" button, it:
- Dynamically imports the necessary libraries (jsPDF and html2canvas)
- Captures the biodata component as a high-quality image
- Creates a PDF document with the image
- Downloads the PDF file named "Gautam-Ramani-Biodata.pdf"
Important Notes:
- I've added
crossOrigin="anonymous"to the image to avoid CORS issues when rendering the PDF - The PDF is generated at a higher scale (2x) for better quality
- The solution is client-side only, so it works entirely in the browser
- The PDF will be formatted to fit on A4 paper
Installation Requirements
For this to work, you'll need to install two packages:
npm install jspdf html2canvasOr if you're using yarn:
yarn add jspdf html2canvasThis solution provides a clean, professional way to convert your biodata to a PDF that can be easily shared or printed.