পার্ট ৩: Portfolio Website Tech Stack: পোর্টফোলিও ওয়েবসাইট সেটআপ গাইড

পিডিএফ রেজিউমে (PDF Resume) আর Behance লিঙ্ক পাঠিয়ে যদি ভাবেন ২০২৬ সালে এসে আপনি গ্লোবাল মার্কেট থেকে টপ-টায়ার ক্লায়েন্ট পাবেন, তবে আপনি চরম ভুলের মধ্যে আছেন।

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

আজকে আমরা আলোচনা করব ডিজাইনারদের পোর্টফোলিও সাইটের জন্য বেস্ট নো-কোড টেক স্ট্যাক (Webflow vs Framer vs Custom) এবং স্পিড ও ইন্টারেকশন সেটআপ নিয়ে।

১. লুপ হোল: জঘন্য লোডিং স্পিড ও কোড ট্র্যাপ

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

এক বড় ক্লায়েন্টকে পিচ করার পর সে আমাকে ফিডব্যাক দিয়েছিল: "তোমার সাইটের লোডিং স্পিড এত স্লো যে আমার ব্রাউজার হ্যাং করছিল।"

সেদিন আমি বুঝেছিলাম—ইউজার বা ক্লায়েন্ট সাইটে ঢোকার সাথে সাথেই যদি লোডিং স্পিড স্লো দেখে, সে সাথে সাথে বাউন্স করে চলে যাবে। আপনার ডিজাইনের দক্ষতা দেখার সুযোগই সে পাবে না। নো-কোড টুলসের সাহায্যে ডেভেলপার ছাড়াই এখন ফাস্ট-লোডিং রেসপন্সিভ সাইট তৈরি করা সম্ভব।

২. Framer বনাম Webflow (Tech Stack Comparison)

পোর্টফোলিও সাইটের জন্য বর্তমানে ২টি প্রিমিয়াম নো-কোড টুলস বেস্ট:

• Framer (ডিজাইনারদের জন্য বেস্ট): এর ক্যানভাস অবিকল ফিগমার মতো। ফিগমা থেকে ডিরেক্ট কপি-পেস্ট করে এলিমেন্ট আনা যায়। অ্যানিমেশন এবং রেসপন্সিভ গ্রিড হ্যান্ডেল করা অনেক সহজ এবং সাইট স্পেড অত্যন্ত ফাস্ট।
• Webflow (অ্যাডভান্সড লেআউট): যাদের বেসিক HTML/CSS নলেজ আছে এবং যারা ডাইনামিক CMS নিয়ে কাজ করতে চান, তাদের জন্য Webflow প্রিমিয়াম চয়েস।

আপনি যদি ফাস্ট অ্যান্ড ইজি এবং বিউটিফুল ইন্টারেকশন চান, তবে আমি Framer সাজেস্ট করব। এর হোস্টিং ও সেটআপ অনেক দ্রুত।

৩. ইমেজ অপটিমাইজেশন ও স্পিড সিক্রেট (Site Performance)

সাইটকে বুলেটের মতো ফাস্ট করার ৩টি গোল্ডেন রুলস:

1. WebP ফরম্যাট: পিএনজি বা জেপিজি ইমেজ ব্যবহার করা বন্ধ করুন। সব ইমেজকে WebP ফরম্যাটে কনভার্ট করুন এবং রিসাইজ করুন (150KB-এর বেশি যেন না হয়)।
2. ক্লিন ভেক্টর (SVG): লোগো, আইকন ও গ্রাফিক্সগুলোকে SVG ফাইল হিসেবে আপলোড করুন।
3. লেজি লোড (Lazy Load): বড় ইমেজের ক্ষেত্রে লেজি লোড এনেবল করে দিন, যেন স্ক্রল করার সময় ইমেজ লোড হয়।

৪. ইন্টারেকশন ও ডোমেইন অনবোর্ডিং

পোর্টফোলিও সাইটে সাবলীল মাইক্রো-ইন্টারেকশন (Subtle hover effects, smooth page transitions) রাখুন। অতিরিক্ত ফ্যান্সি অ্যানিমেশন দেবেন না যা ইউজারের ফোকাস নষ্ট করে।

অবশ্যই একটি কাস্টম ডোমেইন (যেমন: yourname.design বা yourname.com) কিনুন এবং আপনার সাইটের সাথে কানেক্ট করুন। এটি ইউজারের মনে ট্রাস্ট তৈরি করবে।

পরবর্তী ও শেষ পর্বে আমরা দেখব কীভাবে আপনার এই প্রিমিয়াম পোর্টফোলিও সাইটটি সঠিক ফাউন্ডারদের কাছে পৌঁছাবেন এবং ইনবাউন্ড লিড জেনারেট করবেন।

ধন্যবাদ সবাইকে。