পর্ব 4 — Claude-এর সাহায্যে একাধিক সেকশন একত্রিত করা ও কাস্টমাইজেশন

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

আগের পর্বে যা করেছি: গত পর্বে অর্থাৎ পর্ব 3-এ আমরা v0.dev ব্যবহার করে আমাদের প্রজেক্ট শোকেস এবং সার্ভিস সেকশন ডিজাইন করেছিলাম। তারও আগে পর্ব 1-এ আমরা ওয়েবসাইটের প্ল্যানিং করেছি এবং পর্ব 2-এ হিরো সেকশন তৈরি করেছি।

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

কেন আমাদের একাধিক সেকশন একত্রিত করতে হবে?

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

একত্রিত করার মূল কারণগুলো হলো:

• স্মুথ স্ক্রোলিং: নেভিগেশন বারের 'About' বা 'Projects' বাটনে ক্লিক করলে পেজ স্ক্রোল করে যেন ঠিক সেই জায়গায় যায়।
• ডিজাইনের সামঞ্জস্য: সব সেকশনের ফন্ট, কালার স্কিম এবং প্যাডিং যেন একই রকম থাকে।
• সহজ হোস্টিং: একটি মাত্র HTML ফাইল থাকলে তা যেকোনো ফ্রি প্ল্যাটফর্মে খুব সহজে লাইভ করে ফেলা যায়।

v0 থেকে কোড সংগ্রহ করার পদ্ধতি

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

1. প্রথমে v0.dev-এ গিয়ে আপনার আগের প্রজেক্টগুলো ওপেন করুন।

2. ডানদিকের প্যানেলে Code ট্যাবে ক্লিক করুন।

3. সেখানে সাধারণত React বা HTML কোড দেখা যাবে। আমাদের কাজের সুবিধার জন্য আমরা HTML with Tailwind অপশনটি বেছে নেব (যদি v0-তে সরাসরি HTML অপশন না পান, তবে React কোডটিই কপি করুন, Claude-কে বললে সে নিজেই ওটাকে HTML-এ রূপান্তর করে দেবে)।

4. কোডটি কপি করে একটি নোটপ্যাড বা টেক্সট এডিটরে আলাদা আলাদা করে সেভ করে রাখুন (যেমন: hero.txt, projects.txt, services.txt)।

Claude-কে দিয়ে কোড একত্রিত করার প্রম্পট গাইড

এখন আমরা Claude ব্যবহার করে কোডগুলো জোড়া লাগাব। ক্লড এই কাজের জন্য অত্যন্ত চমৎকার কারণ এটি বড় কোড ব্লক নিখুঁতভাবে প্রসেস করতে পারে। তাছাড়া আপনি ব্যাকআপ হিসেবে ChatGPT ব্যবহার করতে পারেন, তবে কোডিংয়ের ক্ষেত্রে ক্লডের আউটপুট তুলনামূলক বেশি নির্ভুল হয়।

নিচের প্রম্পটটি কপি করে ক্লডকে দিন:

আমি আমার পোর্টফোলিও ওয়েবসাইটের জন্য v0.dev থেকে কয়েকটি সেকশনের কোড তৈরি করেছি। আমি চাই তুমি এই সেকশনগুলোকে একটি মাত্র একক `index.html` ফাইলে একত্রিত করে দাও।

এখানে Tailwind CSS CDN ব্যবহার করবে যাতে স্টাইলগুলো ঠিকঠাক কাজ করে। নেভিগেশন বারের লিংকগুলোতে আইডি (ID) যুক্ত করে দেবে যেন ক্লিক করলে স্মুথ স্ক্রোলিং (smooth scrolling) হয়।

নিচে আমার সেকশনগুলোর কোড দেওয়া হলো:

[এখানে আপনার Hero Section-এর কোড পেস্ট করুন]

[এখানে আপনার Projects Section-এর কোড পেস্ট করুন]

[এখানে আপনার Contact/Footer Section-এর কোড পেস্ট করুন]

এই প্রম্পটটি দেওয়ার পর Claude আপনাকে একটি মাত্র সম্পূর্ণ HTML ফাইল জেনারেট করে দেবে। ক্লডের 'Artifacts' ফিচার চালু থাকলে আপনি ডানপাশেই ওয়েবসাইটটির একটি লাইভ ইন্টারঅ্যাক্টিভ প্রিভিউ দেখতে পাবেন।

কোড কাস্টমাইজেশন: টেক্সট, কালার ও ফন্ট পরিবর্তন

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

যেমন, আপনার যদি কালার থিম পরিবর্তন করতে ইচ্ছে হয়, তবে ক্লডকে এভাবে বলুন:

আমার ওয়েবসাইটের প্রাইমারি কালার নীল (Blue) থেকে পরিবর্তন করে রয়্যাল ব্লু (Royal Blue) এবং অ্যাকসেন্ট কালার পার্পল (Purple) করে দাও। পুরো ওয়েবসাইটে Google Fonts থেকে 'Poppins' ফন্টটি ব্যবহার করো।

এছাড়াও আপনি নিচের বিষয়গুলো কাস্টমাইজ করতে পারেন:

• ইমেজ সোর্স: ব্যানারের ডামি ইমেজগুলোর জায়গায় আপনার নিজের ছবি বা Unsplash থেকে সুন্দর ছবির লিংক বসাতে ক্লডকে বলুন।
• সোশ্যাল মিডিয়া লিংক: আপনার ফেসবুক, লিঙ্কডইন বা গিটহাব প্রোফাইলের লিংকগুলো ফুটারে যুক্ত করতে ক্লডকে ইনপুট দিন।

ফর্ম সাবমিশন ও ইন্টারেক্টিভ ফিচার যুক্ত করা

একটি পেশাদার পোর্টফোলিওতে একটি কার্যকর যোগাযোগ ফর্ম (Contact Form) থাকা জরুরি। ক্লডকে দিয়ে আপনি সহজেই এই ফর্মে ফাংশনালিটি যুক্ত করতে পারেন। আমরা ফর্ম ডেটা ফ্রিতে পাওয়ার জন্য কিছু জনপ্রিয় টুল ব্যবহার করতে পারি। নিচে এদের একটি সংক্ষিপ্ত তুলনা দেওয়া হলো:

ক্লডকে দিয়ে আপনার ফর্মে Web3Forms যুক্ত করার জন্য এই প্রম্পটটি দিতে পারেন:

আমার কন্টাক্ট ফর্মে Web3Forms-এর ফ্রি এপিআই (API) যুক্ত করে দাও যাতে ভিজিটররা মেসেজ পাঠালে তা সরাসরি আমার ইমেইলে চলে আসে।

মোবাইল রেসপন্সিভনেস ও বাগ ফিক্সিং

কখনও কখনও সেকশনগুলো একত্রিত করার পর মোবাইলে মেনু ওপেন না হওয়া বা কোনো এলিমেন্ট ভেঙে যাওয়ার মতো সমস্যা দেখা দিতে পারে। ভয় পাওয়ার কিছু নেই, এখানেও আমাদের উদ্ধার করবে এআই।

মোবাইল মেনু ঠিক করার উপায়:

সাধারণত মোবাইলে ৩টি লাইনের মেনু (Hamburger Menu) থাকে। এটিতে ক্লিক করলে যেন মেনুটি খোলে, সেজন্য সামান্য জাভাস্ক্রিপ্ট কোডের প্রয়োজন হয়। আপনি ক্লডকে জাস্ট এই প্রম্পটটি দিন:

আমার ওয়েবসাইটের মোবাইল স্ক্রিনে নেভিগেশন মেনুটি কাজ করছে না। হ্যামবার্গার আইকনে ক্লিক করলে যেন মেনু ওপেন এবং ক্লোজ হয়, তার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট কোডটি index.html ফাইলে যুক্ত করে পুরো কোডটি আবার দাও।

ক্লড সেকেন্ডের মধ্যে জাভাস্ক্রিপ্ট কোডটি লিখে আপনার মেনু সচল করে দেবে।

কীভাবে আপনার ফাইনাল কোডটি সেভ করবেন?

ক্লড যখন আপনাকে সম্পূর্ণ ত্রুটিহীন কোডটি দেবে, তখন সেটি আপনার কম্পিউটারে সেভ করার পালা:

1. ক্লডের কোড বক্সের ডানদিকের Copy বাটন বা আইকনে ক্লিক করুন।

2. আপনার কম্পিউটারে VS Code অথবা সাধারণ Notepad ওপেন করুন।

3. একটি নতুন ফাইল তৈরি করে নাম দিন `index.html` এবং কোডটি পেস্ট করুন।

4. ফাইলটি সেভ করুন।

5. এখন ফাইলটির ওপর ডাবল-ক্লিক করলেই আপনার ব্রাউজারে সম্পূর্ণ ওয়েবসাইটটি অফলাইনে চালু হয়ে যাবে!

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

অভিনন্দন! আপনার পোর্টফোলিও ওয়েবসাইটের ডিজাইন এবং সব সেকশন একত্রিত করার কাজ শেষ। কিন্তু এটি এখনও কেবল আপনার কম্পিউটারেই দেখা যাচ্ছে। পরের পর্বে (পর্ব ৫) আমরা শিখব কীভাবে এই `index.html` ফাইলটি সম্পূর্ণ ফ্রিতে GitHub এবং Netlify/Vercel ব্যবহার করে ইন্টারনেটে লাইভ হোস্ট করা যায়, যাতে বিশ্বের যেকোনো প্রান্ত থেকে যে কেউ আপনার ওয়েবসাইটটি দেখতে পারে!