পর্ব 5 — কন্টাক্ট ফর্ম এবং ডার্ক মোডের মতো ইন্টারেক্টিভ ফিচার যুক্ত করা

ডিজিটাল দুনিয়ায় একটি সাধারণ ওয়েবসাইটের চেয়ে একটি ইন্টারেক্টিভ বা জীবন্ত ওয়েবসাইট ভিজিটরদের বেশি আকর্ষণ করে। আমাদের ধারাবাহিক সিরিজ এআই দিয়ে কোডিং ছাড়া নিজের পোর্টফোলিও ওয়েবসাইট তৈরি-এর গত পর্বে আমরা চমৎকার একটি কাজ করেছি।

আগের পর্বে আমরা পর্ব 4-এ শিখেছিলাম কীভাবে Claude-এর সাহায্যে একাধিক সেকশনকে একত্রিত করে একটি পূর্ণাঙ্গ কাঠামো দাঁড় করানো যায়। এই নতুন দক্ষতাগুলো আমাদের পড়াশোনা ও ক্যারিয়ারের পোর্টফোলিওকে আরও সমৃদ্ধ করতে সাহায্য করবে। আজ এই ৫ম পর্বে আমরা আমাদের ওয়েবসাইটটিকে আরও এক ধাপ এগিয়ে নিয়ে যাব। আমরা কোনো কোডিং না জেনেই এতে যোগ করব ডার্ক মোড (Dark Mode) টগল এবং একটি সম্পূর্ণ কার্যকর কন্টাক্ট ফর্ম (Contact Form)।

ইন্টারেক্টিভ ফিচারের গুরুত্ব: ডার্ক মোড এবং কন্টাক্ট ফর্ম কেন প্রয়োজন?

একটি আধুনিক পোর্টফোলিওতে ইন্টারেক্টিভিটি বা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশনের সুযোগ থাকা অত্যন্ত জরুরি। এটি কেবল আপনার সাইটকে সুন্দরই করে না, বরং আপনার পেশাদারিত্বও ফুটিয়ে তোলে। নিচে স্ট্যাটিক ও ইন্টারেক্টিভ ফিচারের একটি তুলনামূলক চিত্র দেওয়া হলো:

আজকের বাজারে টিকে থাকতে হলে আপনার পোর্টফোলিওতে এই ফিচারগুলো থাকা মাস্ট। চলুন দেখি কীভাবে এআই-এর সাহায্যে এগুলো তৈরি করা যায়।

v0.dev এবং Claude দিয়ে ডার্ক মোড টগল তৈরি করার সহজ উপায়

ডার্ক মোড বর্তমানে প্রতিটি আধুনিক ওয়েবসাইটের একটি অন্যতম প্রধান ফিচার। এটি রাতে বা কম আলোতে ওয়েবসাইট ব্রাউজ করা সহজ করে। আমরা v0.dev ব্যবহার করে আমাদের নেভিগেশন বারে একটি সুন্দর ডার্ক মোড সুইচ বা বাটন তৈরি করব।

প্রথমে v0-তে গিয়ে নিচের মতো একটি প্রম্পট লিখুন:

create a responsive tailwind CSS navigation bar with a glassmorphism effect. On the right side, next to the menu items, add a modern sun/moon icon toggle button for Dark Mode/Light Mode. Ensure the toggle has a smooth transition effect.

এই প্রম্পটটি দেওয়ার পর v0.dev আপনাকে একটি আকর্ষণীয় নেভিগেশন বার তৈরি করে দেবে, যেখানে ডার্ক মোডের জন্য একটি সুন্দর বাটন থাকবে।

এরপর এই বাটনটিকে কার্যকর করতে আমরা সাহায্য নেব Claude AI-এর। ক্লাউডকে আমাদের পুরো ওয়েবসাইটের কোডটি দিয়ে বলব ডার্ক মোডের জাভাস্ক্রিপ্ট কোডটি যোগ করে দিতে।

একটি রেসপনসিভ কন্টাক্ট ফর্ম ডিজাইন করা

পোর্টফোলিও সাইটের মূল উদ্দেশ্য হলো নতুন ক্লায়েন্ট বা চাকরিদাতার সাথে যোগাযোগ স্থাপন করা। তাই একটি সহজ ও আকর্ষণীয় কন্টাক্ট ফর্ম থাকা আবশ্যক।

কন্টাক্ট ফর্মটি ডিজাইন করার জন্য আমরা ক্লাউডকে একটি প্রম্পট দেব। ক্লাউডে গিয়ে লিখুন:

Write a clean, modern, and responsive Contact Form section using Tailwind CSS. It should include fields for Name, Email, Subject, and Message. Add a 'Send Message' button with a nice hover animation. Keep the design minimal and align it with a dark/light theme switcher compatibility.

ক্লাউড আপনাকে একটি রেডিমেড কোড ব্লক দেবে। এই কোডটিতে সাধারণত ইনপুট ফিল্ডের বর্ডার ও শ্যাডো খুব সুন্দরভাবে ডিজাইন করা থাকে, যা দেখতে অত্যন্ত পেশাদার লাগে।

Web3Forms দিয়ে ইমেইল নোটিফিকেশন সেটআপ করা (কোডিং ছাড়া)

শুধু কন্টাক্ট ফর্ম ডিজাইন করলেই হবে না, কেউ ফর্মে মেসেজ পাঠালে তা যেন সরাসরি আপনার পার্সোনাল ইমেইলে চলে আসে, সেই ব্যবস্থাও করতে হবে। সাধারণত এর জন্য ব্যাকএন্ড কোডিং বা ডাটাবেজের প্রয়োজন হয়। কিন্তু আমরা কোনো কোডিং ছাড়াই সম্পূর্ণ ফ্রিতে Web3Forms ব্যবহার করে এটি করব।

ধাপ ১: প্রথমে Web3Forms ওয়েবসাইটে যান।

ধাপ ২: আপনার সচল ইমেইল এড্রেসটি দিয়ে "Create Access Key" বাটনে ক্লিক করুন।

ধাপ ৩: আপনার ইমেইলে একটি ইউনিক অ্যাক্সেস কী (Access Key) পাঠানো হবে। সেটি কপি করে রাখুন।

ধাপ ৪: এবার আপনার কন্টাক্ট ফর্মের HTML কোডে গিয়ে `<form>` ট্যাগটি খুঁজুন এবং তা নিচের মতো করে আপডেট করুন:

```html

<form action="https://api.web3forms.com/submit" method="POST">

<!-- আপনার অ্যাক্সেস কী এখানে বসান -->

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

<!-- ইনপুট ফিল্ডসমূহ -->

<input type="text" name="name" required placeholder="আপনার নাম">

<input type="email" name="email" required placeholder="আপনার ইমেইল">

<textarea name="message" required placeholder="আপনার বার্তা"></textarea>

<button type="submit">মেসেজ পাঠান</button>

</form>

```

ব্যস! এখন যে কেউ আপনার ফর্মে মেসেজ পাঠালে তা সরাসরি আপনার ইমেইলে চলে যাবে। এর জন্য আপনাকে কোনো সার্ভার বা পিএইচপি কোড লিখতে হলো না। এই ট্রিকসগুলো ব্যবহার করে আপনি সেরা এআই টুলস ব্যবহারকারী অন্যান্য পেশাদারদের মতো দ্রুত কাজ শেষ করতে পারবেন।

আপনার কোডে ইন্টারেক্টিভ ফিচারগুলো যুক্ত করার বাস্তব ডেমো

এখন আমাদের ডার্ক মোডের জাভাস্ক্রিপ্ট কোডটি মূল ফাইলে যোগ করার পালা। ক্লাউড আমাদের যে স্ক্রিপ্টটি দেবে, সেটি দেখতে সাধারণত এইরকম হবে:

```javascript

const themeToggleBtn = document.getElementById('theme-toggle');

const htmlElement = document.documentElement;

// আগে থেকে সেভ করা থিম আছে কিনা চেক করা

if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

htmlElement.classList.add('dark');

} else {

htmlElement.classList.remove('dark');

}

// বাটন ক্লিকে থিম পরিবর্তন করা

themeToggleBtn.addEventListener('click', () => {

if (htmlElement.classList.contains('dark')) {

htmlElement.classList.remove('dark');

localStorage.setItem('theme', 'light');

} else {

htmlElement.classList.add('dark');

localStorage.setItem('theme', 'dark');

}

});

```

এই কোডটি আপনার HTML ফাইলের একদম নিচে `</body>` ট্যাগের ঠিক আগে `<script>` ট্যাগের ভেতর বসিয়ে দিন। এটি নিশ্চিত করবে যে ব্যবহারকারী একবার ডার্ক মোড সিলেক্ট করলে পেজ রিফ্রেশ করলেও সেটি ডার্ক মোডেই থাকবে।

এআই প্রম্পট দিয়ে বাটন অ্যানিমেশন এবং হোভার ইফেক্ট যোগ করা

আমাদের ওয়েবসাইটটিকে আরও জীবন্ত করতে আমরা বাটনে কিছু ছোট ছোট অ্যানিমেশন যোগ করতে পারি। যেমন, বাটনের ওপর মাউস নিলে সেটি একটু বড় হবে বা হালকা উজ্জ্বল হবে। Tailwind CSS দিয়ে এটি করা খুবই সহজ।

যেমন, আপনার বাটনের ক্লাসগুলোতে `transition-all duration-300 hover:scale-105 hover:shadow-lg` যোগ করলেই চমৎকার একটি ইফেক্ট তৈরি হয়ে যাবে। আপনি চাইলে এআই-কে বলতে পারেন:

Optimize my contact form submit button with Tailwind CSS animations so that it scales up slightly on hover and has a smooth glowing shadow effect.

এআই আপনাকে সঠিক ক্লাসগুলো জেনারেট করে দেবে, যা আপনার সাইটের লুক অ্যান্ড ফিল পুরোপুরি বদলে দেবে।

পরের পর্বে যা আসছে

আমাদের কন্টাক্ট ফর্ম এবং ডার্ক মোড তৈরি হয়ে গেল! পরের অর্থাৎ ৬ষ্ঠ পর্বে আমরা শিখব কীভাবে আমাদের তৈরি করা এই সুন্দর পোর্টফোলিও ওয়েবসাইটটি সম্পূর্ণ ফ্রিতে গিটহাব (GitHub) এবং নেটলিফাই (Netlify) ব্যবহার করে লাইভ হোস্ট করা যায়। আপনার নিজের একটি কাস্টম ডোমেইন কীভাবে যুক্ত করবেন, তাও আমরা দেখাব। চোখ রাখুন পরবর্তী পর্বে!