পর্ব 1 — Claude দিয়ে পোর্টফোলিও ওয়েবসাইট পরিকল্পনা ও কন্টেন্ট তৈরি

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

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

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

১. পোর্টফোলিও ওয়েবসাইট কেন প্রয়োজন এবং আমাদের রোডম্যাপ

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

আমাদের এই সম্পূর্ণ প্রজেক্টের রোডম্যাপটি নিচে দেওয়া হলো:

• পর্ব ১ (আজকের পর্ব): Claude দিয়ে সাইট প্ল্যানিং ও কন্টেন্ট রাইটিং।
• পর্ব ২: v0 এআই দিয়ে চমৎকার UI/UX ডিজাইন ও লেআউট তৈরি।
• পর্ব ৩: জেনারেট করা কোড কাস্টমাইজেশন ও নিজের কন্টেন্ট বসানো।
• পর্ব ৪: পোর্টফোলিওতে প্রজেক্ট গ্যালারি ও কন্টাক্ট ফর্ম যুক্ত করা।
• পর্ব ৫: গিটহাব (GitHub) ব্যবহার করে কোড ম্যানেজমেন্ট।
• পর্ব ৬: Netlify বা Vercel-এ সম্পূর্ণ ফ্রিতে ওয়েবসাইট লাইভ হোস্টিং।
• পর্ব ৭: পোর্টফোলিও অপটিমাইজেশন এবং এসইও (SEO) টিপস।

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

২. Claude AI কী এবং এটি কেন আমাদের প্রধান প্ল্যানিং পার্টনার

পোর্টফোলিও ওয়েবসাইটের লেআউট এবং কন্টেন্ট তৈরির জন্য আমরা বেছে নিয়েছি Anthropic-এর তৈরি Claude এআই-কে। বাজারে অনেক ধরণের এআই টুল রয়েছে, যেমন ChatGPT বা Gemini। কিন্তু সৃজনশীল লেখালেখি, কোডিংয়ের পরিকল্পনা এবং একদম মানুষের মতো স্বাভাবিক ভাষায় কথা বলার ক্ষেত্রে Claude বর্তমানে অনন্য।

আমাদের কাজের সুবিধার্থে আমরা বর্তমান সময়ের সেরা এআই টুলস তালিকা থেকে Claude-কে বেছে নিয়েছি এর দারুণ কনটেক্সট বোঝার ক্ষমতার জন্য।

নিচে একটি তুলনামূলক টেবিল দেওয়া হলো যা আপনাকে বুঝতে সাহায্য করবে কেন আমরা এই কাজের জন্য Claude-কে বেছে নিলাম:

এখন আমরা সরাসরি চলে যাবো আমাদের হ্যান্ডস-অন প্রজেক্টে। ব্রাউজারে Claude ওপেন করে একটি ফ্রি অ্যাকাউন্ট তৈরি করে নিন।

৩. ওয়েবসাইটের স্ট্রাকচার ও লেআউট নির্ধারণ (প্রম্পটসহ)

একটি আদর্শ ওয়ান-পেজ (One-Page) পোর্টফোলিও ওয়েবসাইটে সাধারণত ৫টি মূল সেকশন থাকে। এগুলো হলো:

1. Hero Section: যেখানে আপনার সংক্ষিপ্ত পরিচিতি এবং একটি মূল স্লোগান থাকবে।

2. About Me: আপনার ব্যাকগ্রাউন্ড, পড়াশোনা এবং কাজের অভিজ্ঞতা।

3. My Services/Skills: আপনি কী কী কাজ পারেন বা কী সেবা দেন।

4. Portfolio/Projects: আপনার করা সেরা কাজের বা প্রজেক্টের গ্যালারি।

5. Contact Me: আপনার সাথে যোগাযোগের মাধ্যম বা ফর্ম।

এই লেআউটটি আমাদের পোর্টফোলিওর জন্য কাস্টমাইজ করতে Claude-কে একটি সুনির্দিষ্ট প্রম্পট দেবো।

আপনার জন্য প্রম্পট টেমপ্লেট:

"আমি একজন [আপনার পেশা, যেমন: গ্রাফিক ডিজাইনার/ওয়েব ডেভেলপার]। আমি কোনো কোডিং না জেনে নিজের জন্য একটি আধুনিক ওয়ান-পেজ পোর্টফোলিও ওয়েবসাইট তৈরি করতে চাই। দয়া করে আমার এই ওয়েবসাইটের জন্য একটি চমৎকার এবং ইউজার-ফ্রেন্ডলি স্ট্রাকচার তৈরি করে দাও। প্রতিটি সেকশনে কী কী উপাদান থাকবে তা সংক্ষেপে বুঝিয়ে বলো।"

Claude-এর সম্ভাব্য আউটপুট:

Claude আপনাকে চমৎকার একটি লেআউট বানিয়ে দেবে। যেমন, হিরো সেকশনে একটি বোল্ড হেডলাইন, আপনার একটি ছবি এবং একটি 'Hire Me' বাটন রাখার পরামর্শ দেবে। প্রজেক্ট সেকশনে ৩টি কার্ড গ্রিড লেআউট ব্যবহারের পরামর্শ দেবে। এই ব্লু-প্রিন্টটি একটি নোটপ্যাডে সেভ করে রাখুন।

৪. আকর্ষণীয় কন্টেন্ট তৈরি করার ম্যাজিক প্রম্পট

এবার আমাদের ওয়েবসাইটের প্রতিটি সেকশনের জন্য আসল টেক্সট বা কন্টেন্ট জেনারেট করতে হবে। আমরা সাধারণত নিজের সম্পর্কে লিখতে গিয়ে খেই হারিয়ে ফেলি। Claude আমাদের হয়ে এই কাজটি খুব পেশাদার উপায়ে করে দেবে।

আমরা হিরো সেকশন এবং ‘About Me’ সেকশনের জন্য একটি চমৎকার প্রম্পট ব্যবহার করব।

হিরো সেকশনের প্রম্পট:

"আমি একজন ফ্রিল্যান্স ইউআই/ইউএক্স ডিজাইনার। আমার টার্গেট অডিয়েন্স হলো গ্লোবাল ক্লায়েন্টরা। আমার পোর্টফোলিও ওয়েবসাইটের Hero Section-এর জন্য ৩টি আলাদা এবং আকর্ষণীয় হেডলাইন (Headline) ও সাব-হেডলাইন (Sub-headline) লিখে দাও। লেখাগুলো যেন আত্মবিশ্বাসী এবং প্রফেশনাল শোনায়।"

Claude আপনাকে ৩টি ভ্যারিয়েশন দেবে। যেমন:

ভ্যারিয়েশন ১:

হেডলাইন: "ডিজিটাল অভিজ্ঞতা তৈরি করি যা আপনার ব্যবসার প্রবৃদ্ধি বাড়ায়।"

সাব-হেডলাইন: "আমি একজন ইউআই/ইউএক্স ডিজাইনার। সুন্দর এবং কার্যকরী ইন্টারফেস তৈরির মাধ্যমে আমি আপনার আইডিয়াকে বাস্তবে রূপ দিই।"

আপনার পছন্দমতো যেকোনো একটি ভ্যারিয়েশন বেছে নিন। একইভাবে ‘About Me’ সেকশনের জন্য আপনার সংক্ষিপ্ত জীবনবৃত্তান্ত Claude-কে ইনপুট দিয়ে একটি চমৎকার স্টোরিটেলিং ফরম্যাটে লেখা তৈরি করে নিন।

৫. প্রজেক্ট সেকশনের জন্য কেস স্টাডি বা কাজের বিবরণী তৈরি

একটি পোর্টফোলিও ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ অংশ হলো আপনার প্রজেক্ট বা কাজের গ্যালারি। ক্লায়েন্ট আপনার কাজের তালিকা দেখতে চায়। প্রতিটি প্রজেক্টের জন্য একটি ছোট শিরোনাম এবং ২-৩ লাইনের বিবরণী প্রয়োজন।

আসুন Claude-কে দিয়ে একটি প্রজেক্টের বিবরণ লিখিয়ে নিই।

প্রম্পট উদাহরণ:

"আমি সম্প্রতি একটি ই-কমার্স অ্যাপের রিডিজাইন প্রজেক্ট শেষ করেছি। এই প্রজেক্টে আমি ইউজার রিসার্চ করেছি এবং নতুন চেকআউট ফ্লো তৈরি করেছি, যার ফলে কার্ট Abandonment রেট ২০% কমেছে। এই প্রজেক্টের জন্য আমার পোর্টফোলিওতে ব্যবহার করার মতো একটি প্রজেক্ট টাইটেল, সংক্ষিপ্ত চ্যালেঞ্জ এবং অর্জিত ফলাফলসহ একটি ৩ লাইনের প্রজেক্ট কেস স্টাডি লিখে দাও।"

Claude-এর আউটপুট:

প্রজেক্ট টাইটেল: ই-কমার্স চেকআউট অপটিমাইজেশন (UX Case Study)

চ্যালেঞ্জ: জটিল পেমেন্ট সিস্টেমের কারণে ব্যবহারকারীরা কেনাকাটা না করেই সাইট ছেড়ে চলে যাচ্ছিল।

সমাধান ও ফলাফল: ইউজার জার্নি সহজ করার মাধ্যমে একটি নতুন ৩-ধাপের চেকআউট ফ্লো ডিজাইন করা হয়েছে, যা কার্ট abandonment রেট ২০% কমিয়ে এনেছে।

এভাবে আপনার করা অন্তত ৩টি সেরা কাজের বিবরণী Claude থেকে তৈরি করে গুছিয়ে রাখুন।

৬. পরবর্তী ধাপের প্রস্তুতি: কন্টেন্ট গুছিয়ে রাখা

অভিনন্দন! আপনি আপনার পোর্টফোলিও ওয়েবসাইটের সম্পূর্ণ কন্টেন্ট এবং স্ট্রাকচার তৈরি করে ফেলেছেন। এবার এটিকে কোডে রূপান্তর করার পালা। তবে তার আগে একটি অত্যন্ত গুরুত্বপূর্ণ কাজ করতে হবে।

Claude যে টেক্সটগুলো জেনারেট করেছে, সেগুলো একটি Google Doc বা Notion পেইজে সাজিয়ে রাখুন। নিচের ফরম্যাটে ফাইলটি সাজাতে পারেন:

• ১. হিরো সেকশন কন্টেন্ট: (হেডলাইন, সাব-হেডলাইন এবং বাটন টেক্সট যেমন- "আমার কাজ দেখুন")
• ২. আমার সম্পর্কে (About Me): (আপনার প্রফেশনাল বায়ো এবং স্কিল লিস্ট)
• ৩. আমার সেবাসমূহ (Services): (আপনি যে সার্ভিসগুলো দেন এবং তার ছোট বিবরণ)
• ৪. প্রজেক্টসমূহ: (৩টি প্রজেক্টের টাইটেল, ছবি বসানোর জায়গা এবং বিবরণ)
• ৫. কন্টাক্ট সেকশন: (আপনার ইমেইল, সোশ্যাল মিডিয়া লিংক এবং কন্টাক্ট ফর্মের লেখা)

এই ফাইলটি আমাদের পরবর্তী পর্বে ডিজাইনিং ও ডেভেলপমেন্টের সময় সরাসরি কপি-পেস্ট করতে সাহায্য করবে।

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

আমাদের পোর্টফোলিওর কন্টেন্ট এখন সম্পূর্ণ রেডি। পরের পর্বে আমরা এই কন্টেন্টগুলোকে একটি চমৎকার ভিজ্যুয়াল ডিজাইন বা ইউজার ইন্টারফেসে রূপান্তর করব। পর্ব ২-এ আমরা ব্যবহার করব Vercel-এর তৈরি বিখ্যাত নো-কোড এআই টুল v0। আমরা কোনো কোড না লিখে শুধুমাত্র প্রম্পট দিয়ে আমাদের পোর্টফোলিওর লাইভ UI ডিজাইন তৈরি করা শিখব। চোখ রাখুন আগামী পর্বে!