আপনি কি ফ্রিল্যান্সিং শুরু করতে চান? নাকি চাকরির ইন্টারভিউতে নিজের কাজ দেখানোর জন্য একটা দারুণ পোর্টফোলিও দরকার? যেকোনো ওয়েব ডেভেলপারের জন্য নিজের পোর্টফোলিও ওয়েবসাইট থাকা এখন প্রায় বাধ্যতামূলক হয়ে গেছে। শুধু রেজাল্ট বা সার্টিফিকেট নয়, ক্লায়েন্ট বা এমপ্লয়ার দেখতে চায় আপনি আসলে কী করতে পারেন — আর সেটা সবচেয়ে ভালোভাবে বোঝানো যায় নিজের ওয়েবসাইট দিয়ে।
ভালো খবর হলো, আপনার জন্য খুব বেশি কিছু শেখার দরকার নেই। HTML, CSS এবং JavaScript — এই তিনটি জিনিস ভালোভাবে আয়ত্ত করলেই আপনি একটি চমৎকার personal portfolio website HTML CSS JavaScript দিয়ে তৈরি করে ফেলতে পারেন। এই আর্টিকেলে আমি ধাপে ধাপে দেখাবো কীভাবে শুরু করবেন, কী কী সেকশন রাখবেন, এবং কীভাবে আপনার ওয়েবসাইটকে দাঁড় করাবেন।
১. প্ল্যানিং: আপনার পোর্টফোলিওতে কী কী থাকবে?
কোড লেখা শুরু করার আগে একটু চিন্তা করুন — আপনার পোর্টফোলিওতে কোন কোন তথ্য থাকবে? একজন ক্লায়েন্ট বা রিক্রুটার আপনার ওয়েবসাইটে ঢুকে ৩০ সেকেন্ডের মধ্যে বুঝতে চায়: আপনি কে, কী করেন, এবং কেন তাকে আপনাকে hire করা উচিত। তাই সেকশনগুলো হতে হবে স্পষ্ট এবং সংগঠিত।
- হিরো সেকশন (Hero Section): আপনার নাম, একটি সংক্ষিপ্ত ট্যাগলাইন (যেমন: “ফ্রন্ট-এন্ড ডেভেলপার যিনি ভালোবাসেন সুন্দর UI বানাতে”), এবং একটি CTA (Call to Action) বাটন — যেমন “আমার কাজ দেখুন” বা “যোগাযোগ করুন”।
- About Me: আপনার সম্পর্কে ৩-৪ লাইনের পরিচিতি। কোথায় থাকেন, কী নিয়ে কাজ করেন, কী কী স্কিল আছে।
- Skills: আপনার প্রযুক্তিগত দক্ষতার তালিকা। HTML, CSS, JavaScript, React, Node.js ইত্যাদি।
- Portfolio/Projects: আপনার ৩-৫টি সেরা প্রজেক্টের ছবি, লাইভ ডেমো লিংক এবং GitHub লিংক।
- Contact: ইমেইল, ফোন নম্বর, সোশ্যাল লিংক (LinkedIn, GitHub, Facebook) এবং একটি কন্টাক্ট ফর্ম।
এই পরিকল্পনা মাথায় রেখে আমরা প্রথমে HTML দিয়ে কাঠামো তৈরি করব।
২. HTML দিয়ে ওয়েবসাইটের কাঠামো তৈরি
HTML হলো আপনার ওয়েবসাইটের কঙ্কাল। প্রথমে একটা প্রজেক্ট ফোল্ডার তৈরি করুন, তার ভেতরে index.html, style.css এবং script.js ফাইল বানান। এবার index.html ফাইলে নিচের কোডটি লিখুন:
<!DOCTYPE html>
<html lang='bn'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>My Portfolio</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<header>
<nav>
<ul>
<li><a href='#home'>হোম</a></li>
<li><a href='#about'>আমার সম্পর্কে</a></li>
<li><a href='#skills'>দক্ষতা</a></li>
<li><a href='#projects'>প্রজেক্ট</a></li>
<li><a href='#contact'>যোগাযোগ</a></li>
</ul>
</nav>
</header>
<section id='home'>
<h1>হাই, আমি রাকিব</h1>
<p>আমি একজন ফ্রন্ট-এন্ড ডেভেলপার।</p>
</section>
<section id='about'>
<h2>আমার সম্পর্কে</h2>
<p>ঢাকায় থাকি, ২ বছর ধরে ওয়েব ডেভেলপমেন্ট করছি।</p>
</section>
<section id='skills'>
<h2>দক্ষতা</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id='projects'>
<h2>প্রজেক্ট</h2>
<p>এখানে আপনার প্রজেক্টগুলো দেখান।</p>
</section>
<section id='contact'>
<h2>যোগাযোগ</h2>
<p>ইমেইল: rahib@example.com</p>
</section>
<script src='script.js'></script>
</body>
</html>এখানে প্রতিটি সেকশনের জন্য id ব্যবহার করেছি, যাতে নেভিগেশন মেনু থেকে ক্লিক করলে সরাসরি সেই অংশে চলে যায়। এখন আপনার ওয়েবসাইটে কিছু কনটেন্ট আছে, কিন্তু দেখতে একদম সাদামাটা। এবার CSS দিয়ে সাজিয়ে তুলি।
৩. CSS দিয়ে স্টাইলিং: নিজের মতো করে ডিজাইন
CSS হলো আপনার ওয়েবসাইটের সৌন্দর্য। আপনি চাইলে গুগল ফন্ট, কালার স্কিম, গ্র্যাডিয়েন্ট — সবকিছু নিজের পছন্দমতো সেট করতে পারেন। নিচে একটি আধুনিক, রেসপন্সিভ ডিজাইনের উদাহরণ দিচ্ছি:
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hind Siliguri', sans-serif;
line-height: 1.6;
color: #333;
}
header {
background: #2c3e50;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
section {
padding: 2rem;
max-width: 900px;
margin: auto;
}
#home {
background: #ecf0f1;
text-align: center;
padding: 5rem 2rem;
}
#home h1 {
font-size: 2.5rem;
color: #2c3e50;
}
.btn {
display: inline-block;
background: #e67e22;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
}
#skills ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#skills li {
background: #3498db;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
}
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 10px 0;
}
}এখানে @media কোয়েরি ব্যবহার করেছি, যাতে মোবাইল ফোনে মেনুগুলো সুন্দরভাবে দেখায়। আপনার পছন্দমতো রং বদলে নিতে পারেন। মনে রাখবেন, ডিজাইন যত ক্লিন ও প্রফেশনাল হবে, দর্শকের উপর ভালো ইমপ্রেশন পড়বে।
৪. JavaScript দিয়ে ইন্টারঅ্যাকটিভিটি যোগ
JavaScript আপনার ওয়েবসাইটে প্রাণ সঞ্চার করে। যেমন: স্ক্রল করলে মেনুতে অ্যাক্টিভ লিংক হাইলাইট করা, কন্টাক্ট ফর্মের ভ্যালিডেশন, বা প্রজেক্ট ফিল্টার করা। প্রথমে একটি সহজ উদাহরণ দেখি — স্ক্রল করলে নেভিগেশন ব্যাকগ্রাউন্ড পরিবর্তন হবে:
// script.js
window.addEventListener('scroll', function () {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.background = '#1a252f';
} else {
header.style.background = '#2c3e50';
}
});আরেকটি দরকারি ফিচার হলো কন্টাক্ট ফর্মের ভ্যালিডেশন। ধরুন, আপনার ফর্মে নাম ও ইমেইল ইনপুট আছে। JavaScript দিয়ে চেক করতে পারেন যে ইউজার সঠিকভাবে ফিল আপ করেছে কি না:
document.getElementById('contact-form').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
if (name === '' || email === '') {
alert('দয়া করে সব ঘর পূরণ করুন');
} else if (!email.includes('@')) {
alert('সঠিক ইমেইল দিন');
} else {
alert('ধন্যবাদ! আপনার মেসেজ পাঠানো হয়েছে।');
}
});এভাবে ছোট ছোট ফিচার যোগ করলে আপনার personal portfolio website HTML CSS JavaScript আরও প্রফেশনাল লাগবে।
৫. প্রজেক্ট সেকশন: নিজের কাজ দেখানোর সেরা জায়গা
আপনার পোর্টফোলিওর সবচেয়ে গুরুত্বপূর্ণ অংশ হলো প্রজেক্ট সেকশন। এখানে প্রতিটি প্রজেক্টের জন্য একটি কার্ড তৈরি করুন। কার্ডে থাকবে প্রজেক্টের স্ক্রিনশট, নাম, সংক্ষিপ্ত বিবরণ, ব্যবহৃত টেকনোলজি এবং লাইভ ডেমো/গিটহাব লিংক। HTML কাঠামোটা এমন হতে পারে:
<div class='project-card'>
<img src='project1.png' alt='প্রজেক্ট ১'>
<h3>ব্লগ ওয়েবসাইট</h3>
<p>HTML, CSS, JavaScript দিয়ে তৈরি একটি রেসপন্সিভ ব্লগ।</p>
<a href='#'>লাইভ ডেমো</a>
<a href='#'>গিটহাব</a>
</div>CSS দিয়ে এই কার্ডগুলোকে গ্রিডে সাজিয়ে নিন। যেমন:
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}যদি আপনার কাছে এখনও অনেক প্রজেক্ট না থাকে, তাহলে ২-৩টি ভালো প্রজেক্টই যথেষ্ট। তবে প্রতিটি প্রজেক্ট যেন সম্পূর্ণ এবং কাজ করে — অর্ধসমাপ্ত প্রজেক্ট দেখানোর চেয়ে না দেখানো ভালো।
৬. রেসপন্সিভ ডিজাইন: মোবাইল ফ্রেন্ডলি করা
বাংলাদেশে বেশিরভাগ মানুষ মোবাইল দিয়ে ইন্টারনেট ব্রাউজ করে। তাই আপনার পোর্টফোলিওকে মোবাইলের জন্য রেসপন্সিভ করা অত্যন্ত জরুরি। CSS-এর @media কোয়েরি দিয়ে আপনি বিভিন্ন স্ক্রিন সাইজ অনুযায়ী ডিজাইন অ্যাডজাস্ট করতে পারেন। আগেই একটি উদাহরণ দেখেছি। আরও কিছু টিপস:
- ছবিগুলোর জন্য
max-width: 100%ব্যবহার করুন, যাতে ছবি কখনো কন্টেইনার থেকে বড় না হয়। - ফন্ট সাইজের জন্য
remইউনিট ব্যবহার করুন, যাতে জুম করলেও সমস্যা না হয়। - টাচ স্ক্রিনের জন্য বাটনগুলোতে পর্যাপ্ত স্পেস দিন।
গুগল ক্রোমের ডেভেলপার টুলস থেকে আপনি মোবাইল ভিউ টেস্ট করতে পারেন — F12 চাপুন, তারপর ডিভাইস টুলবার অন করুন।
৭. হোস্টিং এবং ডোমেইন: ওয়েবসাইট অনলাইনে প্রকাশ
ওয়েবসাইট তৈরি শেষ হলে সেটাকে অনলাইনে প্রকাশ করতে হবে। বাংলাদেশে ফ্রি হোস্টিং পেতে পারেন GitHub Pages, Netlify বা Vercel-এ। এগুলোতে আপনার সাইট ফ্রি হোস্ট করতে পারবেন। GitHub Pages-এ হোস্ট করার নিয়ম:
- GitHub-এ একটি রিপোজিটরি তৈরি করুন, নাম দিন
yourusername.github.io। - আপনার HTML, CSS, JS ফাইলগুলো রিপোজিটরিতে আপলোড করুন।
- Settings → Pages-এ গিয়ে Branch হিসেবে
mainসিলেক্ট করুন। - কয়েক মিনিট পর আপনার সাইট
https://yourusername.github.io-তে লাইভ হবে।
পেশাদার কিছু করতে চাইলে একটি কাস্টম ডোমেইন কিনতে পারেন (যেমন yourname.com) — বাংলাদেশে .com ডোমেইনের খরচ সাধারণত ৮০০-১২০০ টাকার মধ্যে। Netlify বা Vercel-এ ডোমেইন কানেক্ট করাও সহজ।
উপসংহার: পরবর্তী পদক্ষেপ
আপনার নিজের হাতে তৈরি একটি পোর্টফোলিও ওয়েবসাইট এখন আপনার হাতের মুঠোয়। শুধু কোড শেখাই যথেষ্ট নয়, সেটা কাজে লাগিয়ে নিজের পরিচিতি তৈরি করাই আসল লক্ষ্য। আমি বলব, আজই শুরু করুন — প্রথমে একটি সাধারণ ডিজাইন বানান, তারপর ধীরে ধীরে উন্নত করুন। চাইলে আমাদের কোর্সগুলো দেখে আরও শিখতে পারেন। আর আপনার তৈরি সাইটটি যদি শেয়ার করতে চান, তাহলে আমাদের কমিউনিটিতে যোগ দিন। শুভকামনা!
সাধারণ প্রশ্নোত্তর
১. পোর্টফোলিও ওয়েবসাইট বানাতে কী কী প্রযুক্তি জানা দরকার?
শুরুতে শুধু HTML, CSS এবং JavaScript জানলেই যথেষ্ট। পরে আপনি চাইলে React বা Vue.js-এর মতো ফ্রেমওয়ার্ক শিখতে পারেন। তবে মৌলিক বিষয়গুলো ভালোভাবে আয়ত্ত থাকলে যেকোনো টুলস ব্যবহার করা সহজ হবে।
২. ফ্রি হোস্টিং কি নিরাপদ?
হ্যাঁ, GitHub Pages, Netlify, Vercel — এগুলো ফ্রি হলেও নিরাপদ এবং নির্ভরযোগ্য। তবে আপনার সাইটে যদি ব্যাকএন্ড বা ডাটাবেসের প্রয়োজন হয়, তাহলে পেইড হোস্টিং বিবেচনা করতে পারেন।
৩. আমার প্রজেক্ট না থাকলে কী দেখাবো?
আপনি নিজে কিছু ছোট প্রজেক্ট তৈরি করুন — যেমন একটি টাস্ক ম্যানেজার, একটি ক্যালকুলেটর, বা একটি ল্যান্ডিং পেজ। এমনকি নিজের জন্য বানানো এই পোর্টফোলিওটাই একটি প্রজেক্ট হিসেবে দেখাতে পারেন।
৪. পোর্টফোলিওতে কি ইংরেজি ব্যবহার করা উচিত?
বাংলাদেশে ক্লায়েন্ট বা ফ্রিল্যান্স মার্কেটপ্লেসে ইংরেজি বেশি ব্যবহৃত হয়, তাই ইংরেজিতে লেখা ভালো। তবে আপনি চাইলে বাংলা এবং ইংরেজি দুই ভাষাতেই কনটেন্ট রাখতে পারেন।
৫. এই পোর্টফোলিও কি চাকরির ইন্টারভিউতে সাহায্য করবে?
অবশ্যই! একটি সুন্দর পোর্টফোলিও আপনার কাজের প্রমাণ হিসেবে কাজ করে। ইন্টারভিউতে আপনার কোডিং দক্ষতা দেখানোর সবচেয়ে ভালো মাধ্যম এটি।
