ক্যাটাগরি ট্রিগার :

6/recent/ticker-posts

Portfolio Website কি?

 


💼 Portfolio Website-এ যা থাকে:

✅ হোম (Hero Section)
✅ নিজের সম্পর্কে (About)
✅ কাজের তালিকা (Projects)
✅ স্কিলস
✅ যোগাযোগ ফর্ম (Contact Form)


✅ শুরু করি: Simple Tailwind Portfolio Website

আমরা Tailwind CSS দিয়ে শুরু করবো — সহজ, দ্রুত আর মোবাইল ফ্রেন্ডলি।

🔧 Live Example Layout:


<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>আমার পোর্টফোলিও</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-100 text-gray-800"> <!-- Hero Section --> <section class="bg-blue-600 text-white p-10 text-center"> <h1 class="text-4xl font-bold">হ্যালো, আমি জন ডো</h1> <p class="mt-2 text-lg">একজন ওয়েব ডেভেলপার</p> <a href="#contact" class="mt-4 inline-block bg-white text-blue-600 px-6 py-2 rounded shadow">যোগাযোগ করুন</a> </section> <!-- About Section --> <section class="p-10 text-center"> <h2 class="text-2xl font-bold mb-4">আমার সম্পর্কে</h2> <p class="max-w-xl mx-auto">আমি একজন ফ্রন্টএন্ড ডেভেলপার, HTML, CSS, Tailwind, JavaScript এবং React-এ দক্ষ। আমি সুন্দর ও রেসপন্সিভ ওয়েবসাইট বানাতে ভালোবাসি।</p> </section> <!-- Projects Section --> <section class="bg-white p-10"> <h2 class="text-2xl font-bold text-center mb-8">আমার প্রজেক্টসমূহ</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-200 p-4 rounded shadow"> <h3 class="font-semibold mb-2">প্রজেক্ট ১</h3> <p>এই প্রজেক্টে আমি একটি রেসপন্সিভ ল্যান্ডিং পেজ তৈরি করেছি।</p> </div> <div class="bg-gray-200 p-4 rounded shadow"> <h3 class="font-semibold mb-2">প্রজেক্ট ২</h3> <p>একটি কন্টাক্ট ফর্ম সহ একটি ওয়েবপেজ ডিজাইন করেছি।</p> </div> <div class="bg-gray-200 p-4 rounded shadow"> <h3 class="font-semibold mb-2">প্রজেক্ট ৩</h3> <p>HTML, CSS ও Tailwind ব্যবহার করে ব্যক্তিগত ব্লগ তৈরি করেছি।</p> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="p-10 bg-gray-100 text-center"> <h2 class="text-2xl font-bold mb-4">যোগাযোগ করুন</h2> <form class="max-w-md mx-auto space-y-4"> <input type="text" placeholder="আপনার নাম" class="w-full p-2 border rounded" required /> <input type="email" placeholder="ইমেইল" class="w-full p-2 border rounded" required /> <textarea placeholder="বার্তা লিখুন..." class="w-full p-2 border rounded" rows="4" required></textarea> <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">পাঠান</button> </form> </section> <!-- Footer --> <footer class="bg-blue-600 text-white text-center p-4 mt-10"> &copy; ২০২৫ - জন ডো. সকল অধিকার সংরক্ষিত। </footer> </body> </html>

🧠 এই প্রজেক্ট দিয়ে তুমি শিখবে:

অংশশেখার বিষয়
Hero Sectionপরিচিতি ও CTA বাটন
Aboutনিজের সম্পর্কে ছোট বিবরণ
Projectsগ্রিড লেআউট ও বক্স
Contact FormTailwind ফর্ম ডিজাইন
Footerসাইটের নিচের অংশ

আপনার প্রিয়জনের সাথে শেয়ার করুন

আপনার মন্তব্য পোস্ট করুন

0 Comments