اولین رزومه من با عجله با استفاده از LibreOffice Writer جمع آوری شد. با این حال، خیلی زود متوجه شدم که برای افزایش شانس استخدام، باید یک رزومه برجسته ایجاد کنم که مرا از سایر متقاضیان متمایز کند. از آنجایی که نمی‌خواستم برای یک قالب گران قیمت خرج کنم یا نحوه استفاده از ویرایشگر PDF را یاد بگیرم، تصمیم گرفتم راهی برای ایجاد PDF با استفاده از فناوری‌های وب پیدا کنم. در این پست نحوه استفاده از HTML و Tailwind CSS را برای ایجاد رزومه به اشتراک خواهم گذاشت.
شروع پروژه
من ترجیح می دهم از Tailwind CSS استفاده کنم و ساده ترین راه برای ایجاد یک صفحه وب پایه با Tailwind استفاده از Astro است. من با ایجاد یک پروژه جدید Astro با npm create astro@latest با استفاده از قالب خالی سپس با اجرا کردن Tailwind را اضافه کردم npx astro add tailwind. اکنون، من یک صفحه وب خالی دارم که می توانم با HTML و Tailwind آن را سفارشی کنم.
ایجاد یک صفحه
صفحه وب پاسخگو است، اما رزومه باید کاملاً اندازه استاندارد باشد. من با یک ترفند بسیار جالب به این موضوع پرداختم. آیا می دانستید که می توانید از سانتی متر و اینچ به عنوان واحد css استفاده کنید؟ اضافه کردم h-[297mm] w-[210mm] به یک عنصر کلاس می دهد تا به اندازه یک کاغذ استاندارد A4 باشد. در اینجا الگوی اصلی است:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Cool Resume</title>
</head>
<body class="grid min-h-screen place-items-center bg-gray-400">
<main
class="m-4 h-[297mm] w-[210mm] overflow-hidden rounded-md bg-white p-8 shadow-lg"
>
<!-- Put your content here -->
</main>
</body>
</html>
اضافه کردن لوگوهای فنی
پس از پر کردن رزومه، می‌خواستم لوگوی زبان‌های برنامه‌نویسی و فناوری‌های مختلفی را که در رزومه خود دارم اضافه کنم.
خوشبختانه، متوجه شدم که در astro می‌توانید این کار را به راحتی با آن انجام دهید astro-icon بسته بندی این بسته از Iconify استفاده می کند، یک کتابخانه آیکون که ده ها بسته آیکون مختلف را در یک بسته ترکیب می کند. جالب ترین بسته آیکون برای من آرم SVG بود زیرا شامل تمام آرم های شرکت های مختلف فناوری، زبان های برنامه نویسی و غیره می شود. اکنون اضافه کردن این آیکون ها به همین سادگی است:
<Icon pack="logos" name="rust" class="inline h-5 w-5" /> Rust,
<Icon pack="logos" name="python" class="inline h-5 w-5" /> Python
تبدیل سایت به پی دی اف
اکنون که رزومه جدید من عالی به نظر می رسد، سوال این بود که چگونه آن را به PDF تبدیل کنم. در منوی چاپ (Ctrl+پ) می توانید یک چاپگر ویژه “ذخیره به عنوان PDF” انتخاب کنید و صفحه را به عنوان PDF ذخیره کنید. با این حال، وقتی برای اولین بار این کار را انجام دادم، متوجه شدم که کامل نیست، حاشیه‌ها بسیار بزرگ‌تر بودند، پس‌زمینه برخی از عناصر وجود نداشت، و غیره. تنظیم در منوی چاپ Tailwind دارای یک print: پیشوند برای سبک هایی که فقط باید هنگام چاپ اعمال شوند. من از آن برای حذف تمام حاشیه ها استفاده کردم و صفحه را طوری تنظیم کردم که از عرض و ارتفاع کامل هنگام چاپ استفاده کند. در اینجا قالب به روز شده من به نظر می رسد:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Cool Resume</title>
</head>
<body class="grid min-h-screen place-items-center bg-gray-400 print:min-h-0">
<main
class="m-4 h-[297mm] w-[210mm] overflow-hidden rounded-md bg-white p-8 shadow-lg print:m-0 print:h-screen print:w-screen print:rounded-none print:shadow-none"
>
<!-- Put your content here -->
</main>
</body>
</html>
همچنین برای تبدیل صحیح صفحه، در گزینه های چاپ، در قسمت «تنظیمات بیشتر»، «حاشیه» را روی «هیچکدام» قرار داده و گزینه «گرافیک پس زمینه» را فعال می کنم.
پس از انجام این تغییرات، بدون هیچ مشکلی رزومه من را تبدیل کرد.
نتیجه
امیدوارم این پست برای شما مفید بوده باشد. در اینجا رزومه تمام شده من است. اگر از روشی که در این پست توضیح داده شده برای رزومه سازی استفاده می کنید، لطفاً آن را با من به اشتراک بگذارید در توییتر. با تشکر برای خواندن!
