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

6/recent/ticker-posts

Portfolio Website কি?

July 19, 2025

 


💼 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