পর্ব 3 — v0 দিয়ে প্রজেক্ট শোকেস ও সার্ভিস সেকশন তৈরি

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

কেন পোর্টফোলিওতে প্রজেক্ট শোকেস এবং সার্ভিস সেকশন জরুরি?

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

আসুন একটি সাধারণ টেবিলের মাধ্যমে দেখে নেওয়া যাক একটি সাধারণ বনাম একটি চমৎকার এআই-অপ্টিমাইজড সার্ভিস ও প্রজেক্ট সেকশনের মধ্যে পার্থক্য কী:

v0.dev দিয়ে প্রজেক্ট শোকেস তৈরির প্রথম ধাপ

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

v0-এর চ্যাটবক্সে গিয়ে আমাদের একটি নির্দিষ্ট প্রম্পট দিতে হবে। নিচে একটি চমৎকার প্রম্পট টেমপ্লেট দেওয়া হলো যা আপনি সরাসরি কপি করে ব্যবহার করতে পারেন:

Create a modern 'My Projects' or 'Portfolio Showcase' section. It should have a clean grid layout (3 columns on desktop, 1 column on mobile). Each project card should include: a placeholder image with a subtle zoom-in hover effect, tags/badges for technologies used (e.g., React, Tailwind CSS, Figma), a project title, a short description, and a link to view the live project or code. Add a tab-based filtering system at the top (e.g., 'All', 'Web Design', 'App Development') to filter projects dynamically. Use a dark mode friendly, sleek UI matching my previous hero section.

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

প্রজেক্ট কার্ডগুলোকে আকর্ষণীয় ও ইন্টারঅ্যাক্টিভ করা

v0 আপনাকে যে প্রাথমিক কোডটি দেবে, তা দেখতে ইতিমধ্যেই সুন্দর হবে। তবে এটিকে আরও আকর্ষণীয় করতে আমরা কিছু ইন্টারঅ্যাকশন যোগ করব। যেমন, যখন কেউ কোনো প্রজেক্ট কার্ডের ওপর মাউস কার্সার রাখবে (Hover), তখন যেন কার্ডটি কিছুটা ওপরে উঠে আসে এবং একটি হালকা শ্যাডো বা গলো তৈরি হয়।

এর জন্য v0 কে এই ফলো-আপ প্রম্পটটি দিন:

Make the project cards more interactive. Add a smooth transition effect so that when hovered, the card lifts up slightly (using Tailwind's hover:-translate-y-2) and shows a subtle neon glow effect. Also, ensure the technology badges have slightly different background colors based on the category (e.g., blue for frontend, green for backend).

এই প্রম্পটের ফলে কার্ডগুলো দেখতে অনেক বেশি ডাইনামিক এবং প্রিমিয়াম লাগবে। কোডিং না জেনেই আপনি চমৎকার সব অ্যানিমেশন যুক্ত করতে পারছেন!

সার্ভিস সেকশন ডিজাইন: আপনার দক্ষতাকে প্রফেশনাল রূপ দিন

প্রজেক্ট দেখানোর পর আপনার কাজ হলো আপনি কী কী সার্ভিস বা সেবা প্রদান করেন তা চমৎকারভাবে উপস্থাপন করা। সার্ভিস সেকশনটি এমন হতে হবে যাতে ক্লায়েন্ট এক নজরেই বুঝতে পারেন তিনি আপনাকে দিয়ে কী কাজ করাতে পারবেন।

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

Create a 'Services I Offer' section. It should have a 3 or 4-column layout. Each service card should feature a clean Lucide icon at the top (e.g., code, pencil, layout, globe), a clear title (e.g., Web Development, UI/UX Design), a bulleted or short description of what is included, and a subtle 'Get a Quote' text link. The background should be slightly different from the main section background to create depth. Use professional typography and spacing.

v0 এই প্রম্পটের ভিত্তিতে আইকনসহ একটি আকর্ষণীয় সার্ভিস গ্রিড বানিয়ে দেবে। এখানে ব্যবহৃত Lucide Icons গুলো খুব আধুনিক এবং যেকোনো পোর্টফোলিওর সৌন্দর্য বাড়িয়ে দেয়।

হিরো সেকশনের সাথে নতুন সেকশনগুলোর সমন্বয় করা

আমরা আগের পর্বে যে হিরো সেকশন তৈরি করেছিলাম, তার ঠিক নিচেই আমাদের এই প্রজেক্ট এবং সার্ভিস সেকশন দুটি বসাতে হবে। v0-এ আপনি একই প্রজেক্ট চ্যাটের ভেতরেই নতুন সেকশনগুলো জেনারেট করতে পারেন অথবা আলাদাভাবে জেনারেট করে পরে জোড়া দিতে পারেন।

সবচেয়ে সহজ উপায় হলো, v0 কে বলা আপনার আগের কোডটির সাথে এই নতুন সেকশনগুলো মার্জ করে দিতে। যেমন:

Merge this new Projects and Services section with the Hero section and Navigation bar we built earlier. Ensure the global styling, color palette (e.g., primary colors, background dark/light mode), and fonts remain consistent across the entire page. Make sure the transition between sections is seamless with proper vertical padding (py-16 or py-20).

v0 আপনার পুরো কোডটিকে রি-রাইট করে একটি সম্পূর্ণ পেজে রূপান্তর করবে, যেখানে নেভিগেশন, হিরো সেকশন, সার্ভিস সেকশন এবং প্রজেক্ট শোকেস পরপর সাজানো থাকবে।

মোবাইল ফ্রেন্ডলি ও রেসপন্সিভনেস নিশ্চিত করা

একটি ওয়েবসাইট ডেস্কটপে সুন্দর লাগলেও মোবাইলে যদি ভেঙে যায়, তবে তার কোনো মূল্য নেই। v0 সাধারণত ডিফল্টভাবেই রেসপন্সিভ কোড তৈরি করে। তবে আমাদের এটি ম্যানুয়ালি নিশ্চিত করে নিতে হবে।

v0-এর আউটপুট উইন্ডোর ওপরে Desktop, Tablet এবং Mobile ভিউ দেখার অপশন আছে। মোবাইল আইকনে ক্লিক করে লেআউটটি পরীক্ষা করুন। যদি কোনো সমস্যা চোখে পড়ে, তবে v0 কে এভাবে বলুন:

The project cards are overlapping on mobile screens. Please fix the responsive breakpoints. Make sure on small screens (mobile) the layout falls back to a single column with proper side margins, and on tablets it is a 2-column layout.

এটি বলার সাথে সাথে v0 আপনার টেইলউইন্ড ক্লাসের `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` এর মতো রেসপন্সিভ গ্রিড ক্লাসগুলো ঠিক করে দেবে।

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

অভিনন্দন! আপনার পোর্টফোলিও ওয়েবসাইটের মূল আকর্ষণ অর্থাৎ প্রজেক্ট এবং সার্ভিস সেকশন এখন সম্পূর্ণ প্রস্তুত। পরের পর্বে (পর্ব ৪) আমরা আমাদের পোর্টফোলিওতে একটি চমৎকার 'About Me' সেকশন এবং একটি কার্যকর 'Contact Form' যোগ করব, যাতে ক্লায়েন্টরা সরাসরি আপনার সাথে যোগাযোগ করতে পারেন। চোখ রাখুন আমাদের পরবর্তী টিউটোরিয়ালে!