HTML এবং CSS দিয়ে একটি পেশাদার রেজю তৈরি করলে আপনি একটি আকর্ষণীয়, কাস্টমাইজযোগ্য ডকুমেন্ট বানাতে পারেন যা ডিজিটালি সহজে শেয়ার করা যায়। একটি ভালো স্ট্রাকচারড রেজю আপনার দক্ষতা এবং অভিজ্ঞতা কার্যকরভাবে শোーケস করে এবং বিভিন্ন ডিভাইসে পেশাদার চেহারা বজায় রাখে।
সিনট্যাক্স
/* Basic Resume Layout Structure */
.container { display: grid; grid-template-columns: 1fr 2fr; max-width: 1000px; margin: 0 auto; }
.left-section { background-color: #333; color: white; padding: 20px; }
.right-section { background-color: white; padding: 20px; }
রেজю কম্পোনেন্ট
একটি পেশাদার রেজুতে সাধারণত এই এসেনশিয়াল সেকশনগুলো থাকে:
| সেকশন | উদ্দেশ্য | কন্টেন্ট |
|---|---|---|
| হেডার | যোগাযোগের তথ্য | নাম, জব টাইটেল, ফোন, ইমেইল |
| সামারি | পেশাদার ওভারভিউ | দক্ষতা এবং লক্ষ্যের সংক্ষিপ্ত বিবরণ |
| অনুভব | কর্ম ইতিহাস | জব টাইটেল, কোম্পানি, তারিখ, অর্জন |
| শিক্ষা | একাডেমিক ব্যাকগ্রাউন্ড | ডিগ্রি, প্রতিষ্ঠান, গ্র্যাজুয়েশন তারিখ |
| দক্ষতা | টেকনিক্যাল সক্ষমতা | প্রোগ্রামিং ল্যাঙ্গুয়েজ, টুল, প্রোফিশিয়েন্সি লেভেল |
| প্রজেক্ট | পোর্টফোলিও | উল্লেখযোগ্য কাজের উদাহরণ এবং বিবরণ |
উদাহরণ: সম্পূর্ণ রেজু লেআউট
নিচের উদাহরণটি একটি আধুনিক টু-কলাম রেজু লেআউট তৈরি করে:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Resume</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; padding: 20px; } .resume-container { width: 100%; max-width: 900px; background: white; display: grid; grid-template-columns: 300px 1fr; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; } .left-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; } .profile-img { width: 120px; height: 120px; border-radius: 50%; background-color: #fff; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #667eea; font-weight: bold; } .left-section h2 { text-align: center; margin-bottom: 10px; font-size: 1.5em; } .left-section .title { text-align: center; font-size: 0.9em; opacity: 0.9; margin-bottom: 30px; } .section-title { color: #fff; font-size: 1.1em; margin: 25px 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid rgba(255,255,255,0.3); } .contact-info { list-style: none; } .contact-info li { margin: 10px 0; font-size: 0.9em; } .skills-list { list-style: none; } .skill-item { margin: 15px 0; } .skill-name { font-size: 0.9em; margin-bottom: 5px; } .skill-bar { background: rgba(255,255,255,0.3); height: 6px; border-radius: 3px; overflow: hidden; } .skill-progress { height: 100%; background: #fff; border-radius: 3px; } .right-section { padding: 30px; } .right-section h1 { color: #333; font-size: 2em; margin-bottom: 10px; } .right-section .job-title { color: #667eea; font-size: 1.2em; margin-bottom: 30px; } .right-section .section-title { color: #333; font-size: 1.3em; margin: 30px 0 15px 0; padding-bottom: 5px; border-bottom: 2px solid #667eea; } .experience-item { margin: 20px 0; } .experience-item h4 { color: #333; font-size: 1.1em; } .experience-item .company { color: #667eea; font-weight: bold; } .experience-item .date { color: #666; font-size: 0.9em; font-style: italic; } .experience-item ul { margin-top: 10px; padding-left: 20px; } .experience-item li { color: #555; margin: 5px 0; } </style> </head> <body> <div class="resume-container"> <div class="left-section"> <div class="profile-img">JS</div> <h2>John Smith</h2> <p class="title">Full Stack Developer</p> <h3 class="section-title">Contact</h3> <ul class="contact-info"> <li>📧 john.smith@email.com</li> <li>📞 +1 (555) 123-4567</li> <li>🔗 linkedin.com/in/johnsmith</li> <li>📍 New York, NY</li> </ul> <h3 class="section-title">Skills</h3> <div class="skills-list"> <div class="skill-item"> <div class="skill-name">JavaScript</div> <div class="skill-bar"> <div class="skill-progress" style="width: 90%"></div> </div> </div> <div class="skill-item"> <div class="skill-name">React</div> <div class="skill-bar"> <div class="skill-progress" style="width: 85%"></div> </div> </div> <div class="skill-item"> <div class="skill-name">Node.js</div> <div class="skill-bar"> <div class="skill-progress" style="width: 80%"></div> </div> </div> </div> <div class="right-section"> <h1>John Smith</h1> <p class="job-title">Full Stack Developer</p> <h3 class="section-title">Summary</h3> <p>Experienced Full Stack Developer with 5+ years of expertise in building scalable web applications using modern JavaScript frameworks and cloud technologies.</p> <h3 class="section-title">Experience</h3> <div class="experience-item"> <h4>Senior Developer at <span class="company">Tech Solutions Inc.</span></h4> <p class="date">2021 - Present</p> <ul> <li>Led development of customer portal serving 10,000+ users</li> <li>Improved application performance by 40% through optimization</li> <li>Mentored junior developers and conducted code reviews</li> </ul> </div> <div class="experience-item"> <h4>Junior Developer at <span class="company">StartUp Co.</span></h4> <p class="date">2019 - 2021</p> <ul> <li>Developed responsive web applications using React and Node.js</li> <li>Collaborated with design team to implement user interfaces</li> </ul> </div> <h3 class="section-title">Education</h3> <div class="experience-item"> <h4>Bachelor of Computer Science</h4> <p class="company">University of Technology</p> <p class="date">2015 - 2019</p> </div> </div> </div> </body> </html>
একটি পেশাদার টু-কলাম রেজু লেআউট দেখা যাচ্ছে যার বাম পাশে পার্পল গ্রেডিয়েন্ট সাইডবার রয়েছে কন্ট্যাক্ট ইনফো এবং প্রগ্রেস বারের সাথে স্কিলস, এবং ডান পাশে সাদা সেকশন অভিজ্ঞতা এবং শিক্ষার ডিটেইলসহ। ডিজাইনটি ক্লিন এবং আধুনিক সঠিক টাইপোগ্রাফি এবং স্পেসিংসহ।
মূল ডিজাইন নীতিমালা
- Grid Layout: রেস্পনসিভ টু-কলাম স্ট্রাকচারের জন্য CSS Grid ব্যবহার করুন
- Typography Hierarchy: হেডিংয়ের জন্য ভিন্ন ফন্ট সাইজ এবং ওজন
- Color Scheme: ভালো কন্ট্রাস্টের সাথে পেশাদার রঙ
- Visual Elements: স্কিলসের জন্য প্রগ্রেস বার, কনসিস্টেন্ট স্পেসিং
- Responsive Design: ভিন্ন স্ক্রিন সাইজের সাথে অ্যাডাপ্টেবল
উপসংহার
HTML এবং CSS দিয়ে রেজু তৈরি করলে আপনাকে ডিজাইন এবং লেআউটের পুরো কন্ট্রোল मिलে পেশাদার প্রেজেন্টেশন নিশ্চিত কর תוך। সিম্যান্টিক HTML স্ট্রাকচার এবং আধুনিক CSS স্টাইলিংর কম্বিনেশন একটি আকর্ষণীয়, অ্যাক্সেসিবল রেজু তৈরি করে যা ডিজিটাল ফরম্যাটে বের করে তোলে।
