পর্ব 2 — v0.dev দিয়ে ওয়েবসাইটের আকর্ষণীয় হিরো সেকশন ও নেভিগেশন বার ডিজাইন

গত পর্বে আমরা আমাদের পোর্টফোলিও ওয়েবসাইটের মূল ভিত্তিপ্রস্তর স্থাপন করেছি। আমাদের বিশেষ সিরিজ এআই দিয়ে কোডিং ছাড়া নিজের পোর্টফোলিও ওয়েবসাইট তৈরি-এর প্রথম ধাপে আমরা ক্লড (Claude) এআই ব্যবহার করে পোর্টফোলিওর একটি নিখুঁত লেআউট ও আকর্ষণীয় কন্টেন্ট তৈরি করেছিলাম।

আগের পর্বে যা করেছি তা যদি আপনি মিস করে থাকেন, তবে এখনই পর্ব 1 থেকে আপনার ওয়েবসাইটের কন্টেন্ট এবং পরিকল্পনাটি গুছিয়ে নিন। কারণ আজ আমরা সেই কন্টেন্ট ব্যবহার করে সরাসরি ডিজাইনে নেমে পড়ব। এই পর্বে আমরা ব্যবহার করব বর্তমান সময়ের অন্যতম সেরা এআই ইউজার ইন্টারফেস (UI) জেনারেটর v0.dev। আপনি যদি নিজের ক্যারিয়ার গড়ার জন্য বা পড়াশোনা চলাকালীন ফ্রিল্যান্সিং করার জন্য সেরা এআই টুলস খুঁজে থাকেন, তবে v0.dev আপনার তালিকায় এক নম্বরে থাকা উচিত। আজ আমরা এই অসাধারণ টুলটি দিয়ে আমাদের ওয়েবসাইটের প্রধান দুটি অংশ— নেভিগেশন বার এবং হিরো সেকশন ডিজাইন করব।

v0.dev কী এবং কেন এটি আপনার শেখা উচিত?

সহজ কথায়, v0.dev হলো Vercel দ্বারা তৈরি একটি জেনারেটিভ এআই সিস্টেম। এটি আপনার সাধারণ ইংরেজি প্রম্পট বা বিবরণ পড়ে চমৎকার ফ্রন্টএন্ড কোড এবং ইন্টারফেস তৈরি করে দেয়। এটি ব্যাকএন্ডে React, Tailwind CSS এবং Shadcn UI লাইব্রেরি ব্যবহার করে কাজ করে।

পোর্টফোলিও তৈরিতে কেন আমরা প্রথাগত কোডিং ছেড়ে v0.dev ব্যবহার করব, তার একটি দ্রুত তুলনা দেখে নেওয়া যাক:

v0.dev-এ অ্যাকাউন্ট খোলা এবং ইন্টারফেস পরিচিতি

প্রথমেই আমাদের v0.dev-এ একটি ফ্রি অ্যাকাউন্ট তৈরি করে নিতে হবে। নিচের ধাপগুলো অনুসরণ করুন:

1. আপনার ব্রাউজার থেকে v0.dev ওয়েবসাইটে যান।

2. স্ক্রিনের ডান কোণায় থাকা Sign Up বা Log In বাটনে ক্লিক করুন।

3. আপনার সুবিধাজনক মাধ্যম যেমন— Google অ্যাকাউন্ট বা GitHub অ্যাকাউন্টের মাধ্যমে সাইন-ইন সম্পন্ন করুন।

4. সাইন-ইন করার পর আপনার সামনে একটি চ্যাট বক্সের মতো ইন্টারফেস আসবে। এটিই হচ্ছে মূল এআই প্রম্পট এরিয়া।

এই ইন্টারফেসের মূলত তিনটি প্রধান অংশ রয়েছে:

• প্রম্পট ইনপুট (Prompt Input): যেখানে আপনি কেমন ডিজাইন চান তা বিস্তারিত লিখবেন।
• লাইভ প্রিভিউ (Live Preview): যেখানে আপনার এআই-জেনারেটেড ডিজাইনটি সরাসরি কেমন দেখাচ্ছে তা দেখতে পাবেন।
• কোড প্যানেল (Code Panel): যারা কোড বুঝতে পারেন, তাদের জন্য এখানে জেনারেট হওয়া রিঅ্যাক্ট ও টেইলউইন্ড কোড জমা থাকে। তবে আমাদের কোড নিয়ে মাথা ঘামানোর কোনো প্রয়োজন নেই!

একটি চমৎকার এবং মিনিমালিস্ট নেভিগেশন বার তৈরি করা

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

v0-এর চ্যাট বক্সে নিচের প্রম্পটটি কপি করে পেস্ট করুন:

Create a highly modern, minimal, and responsive navigation bar for a personal portfolio. On the left side, put a text logo 'John Doe' (use a bold, premium sans-serif font). In the middle, put navigation links: 'Home', 'About', 'Projects', and 'Contact'. On the far right, place a 'Hire Me' Call-to-Action button with a subtle gradient background and a dark/light mode toggle icon. The navbar should be sticky at the top, have a glassmorphism effect (backdrop blur with slight opacity), and have a smooth hamburger menu for mobile screens.

প্রম্পটটি লিখে এন্টার প্রেস করার পর v0 কয়েক সেকেন্ড সময় নেবে। আপনি স্ক্রিনে লাইভ দেখতে পাবেন কীভাবে এটি আপনার জন্য একের পর এক বাটন, লোগো এবং লিঙ্কগুলো সাজিয়ে একটি প্রিমিয়াম নেভিগেশন বার তৈরি করছে।

ডিজাইনটি তৈরি হলে মোবাইল, ট্যাবলেট ও ডেস্কটপ আইকনে ক্লিক করে দেখে নিন এটি সব স্ক্রিনে ঠিকঠাক দেখাচ্ছে কিনা। যদি কোনো পরিবর্তন করতে চান (যেমন লোগোর নাম পরিবর্তন করে নিজের নাম দিতে চান), তবে চ্যাট বক্সে লিখুন:

Change the logo text to 'Sabbir Ahmed' and make the 'Hire Me' button background hover effect emerald green.

এআই নিমেষেই আপনার অনুরোধ অনুযায়ী ডিজাইন আপডেট করে দেবে।

ওয়েবসাইটের মূল আকর্ষণ: হিরো সেকশন ডিজাইন

হিরো সেকশন (Hero Section) হলো ওয়েবসাইটের প্রধান ব্যানার বা প্রথম অংশ যা ভিজিটররা সাইটে ঢোকার পরই দেখতে পান। এখানে থাকবে আপনার চমৎকার একটি হেডলাইন, আপনার সংক্ষিপ্ত পরিচয় এবং একটি কল-টু-অ্যাকশন বাটন।

আমাদের প্রথম পর্বে ক্লড দিয়ে তৈরি করা কন্টেন্টটি মনে আছে তো? এবার সেই কন্টেন্ট ব্যবহার করে আমরা হিরো সেকশন ডিজাইন করব। v0-এর প্রম্পট বক্সে লিখুন:

Design an eye-catching, modern hero section for a professional Web Developer portfolio. Use a two-column layout for desktop. On the left: a small badge saying 'Available for Freelance Projects', followed by a bold headline 'Hi, I’m Sabbir Ahmed. I build high-performance web applications that drive business growth.' Below that, write a short bio: 'Specializing in React, Next.js, and modern UI/UX designs.' Add two buttons side-by-side: a primary button 'View My Work' (glowing effect) and a secondary button 'Get in Touch'. On the right: an elegant abstract geometric 3D illustration or a placeholder for a high-quality developer avatar with a soft glowing background radial gradient. The overall theme should be dark, premium, using dark slate and deep indigo accents.

আপনার প্রম্পটটি সাবমিট করার সাথে সাথেই v0 তার ম্যাজিক দেখানো শুরু করবে। এটি একটি দুর্দান্ত ডার্ক থিমের হিরো সেকশন তৈরি করবে যেখানে চমৎকার গ্রাডিয়েন্ট ইফেক্ট, সুন্দর বাটন লেআউট এবং আকর্ষণীয় টাইপোগ্রাফি থাকবে।

নেভিগেশন বার ও হিরো সেকশন একসাথে যুক্ত করা

আলাদা আলাদাভাবে দুটি সেকশন তৈরি করার পর, এখন আমাদের কাজ হলো এই দুটিকে চমৎকারভাবে জুড়ে দিয়ে আমাদের ওয়েবসাইটের সম্পূর্ণ উপরের অংশ বা 'Above the Fold' রেডি করা।

v0-এর চ্যাট উইন্ডোতে এবার নিচের প্রম্পটটি লিখুন:

Combine the previously generated navigation bar and the hero section into a single, cohesive landing page top-fold. Ensure that the glassmorphism navbar sits perfectly fixed at the top, and the hero section starts right below it with seamless background integration. Make sure the typography, padding, and dark mode colors are consistent across both sections.

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

ডিজাইন নিখুঁত করার কিছু দরকারি প্রম্পট টিপস

v0.dev-এর সেরা আউটপুট পাওয়ার মূল চাবিকাঠি হলো ভালো প্রম্পট দেওয়া। আপনি যদি ডিজাইনে কোনো নির্দিষ্ট পরিবর্তন আনতে চান, তবে নিচের উদাহরণগুলোর মতো করে ইনস্ট্রাকশন দিতে পারেন:

• ফন্ট পরিবর্তন করতে: "Change the font of the headlines to Playfair Display and body text to Inter."
• রঙের স্কিম পরিবর্তন করতে: "Change the primary accent color from indigo to deep orange (amber-500)."
• অ্যানিমেশন যোগ করতে: "Add a subtle hover zoom animation to the profile placeholder and CTA buttons."

ডিজাইনটি ফাইনাল হয়ে গেলে, স্ক্রিনের উপরের ডান কোণায় থাকা Share বা Code বাটনে ক্লিক করে আপনার ডিজাইনটি সংরক্ষণ করে রাখুন। পরবর্তী পর্বগুলোতে আমরা এই জেনারেট করা ইন্টারফেসটিকে ফাইনাল ওয়েবসাইটে রূপান্তর করব।

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

আজকে আমরা এআই-এর ম্যাজিক ব্যবহার করে খুব সহজেই আমাদের পোর্টফোলিওর প্রথম দুটি অত্যন্ত গুরুত্বপূর্ণ অংশ ডিজাইন করে ফেললাম। আগামী পর্বে (পর্ব ৩) আমরা ডিজাইন করব আপনার দক্ষতা প্রকাশের প্রধান দুটি স্তম্ভ— 'আমার সম্পর্কে' (About Me) এবং 'প্রজেক্ট শোরুম' (Projects Showcase) সেকশন। যেখানে আপনি আপনার করা কাজের তালিকা ও দক্ষতা সুন্দর গ্রিড লেআউটে সাজিয়ে রাখতে পারবেন। চোখ রাখুন আমাদের এই সিরিজে!