AI-Powered Integrated Career Platform
Name
Powerful Resume and CV Creation,
Reinvented!
Our Resume & CV Creator gives you the power to design professional, unique, and fully customizable documents in just a few clicks.
Experience the Ultimate Flexibility in Resume & CV Design
Stop juggling with rigid templates that force you to fit your content into fixed layouts. CircinoNow has reinvented templates to empower you to create a document that’s truly yours:
-
Pick a design you love.
-
Customize it—rearrange sections, change colors, and decide whether to include a photo, a header with online profile links, and more.
-
Choose to create a resume or CV by selecting only the sections you want—with just a click.
Try These Sample Templates Now!
pdfGenerator
templateId
{"headerTextColor":"#FFFFFF","backgroundColor":"#F7F7F7","textFont":"Arial, sans-serif","sectionTextColor":"#FFFFFF","textColor":"#333333","paperSize":"Letter","sectionColor":"#005B79","sectionAlign":"center","useSectionBackgroundColor":false,"fontSize":"11px","headerColor":"#005B79"}
["Skills","Education","Certificates","Languages","Summary","Experience","Activities","Projects","Awards"]
type
<title>Resume - {{name}}</title>
<body>
<style>
:root {
--paperSize: {{paperSize}};
--backgroundColor: {{backgroundColor}};
--headerColor: {{headerColor}};
--headerTextColor: {{headerTextColor}};
--textFont: {{textFont}};
--fontSize: {{fontSize}};
--textColor: {{textColor}};
--sectionColor: {{sectionColor}};
--sectionTextColor: {{sectionTextColor}};
--sectionAlign: {{sectionAlign}};
}
body {
font-family: var(--textFont);
font-size: var(--fontSize);
background-color: var(--backgroundColor);
color: var(--textColor);
line-height: 1.5;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 0;
margin-bottom: 5px;
}
h2 {
font-weight: bold;
margin-top: 20px;
margin-bottom: 5px;
text-align: var(--sectionAlign);
padding: 0 5px;
}
h3 {
font-weight: bold;
margin: 0 0 5px;
}
ul {
padding-left: 20px;
}
ul li {
margin: 0 0 5px;
}
/* Remove the margin between the <p> and <ul> within the summary section */
section p + ul {
margin-top: 0;
}
/* Optional: Adjust <p> margin if needed */
section p {
margin-bottom: 0;
}
/*
** CSS class selector
*/
.container {
margin-top: 15px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
/* Style the photo to make it round */
.photo-container {
text-align: center; /* Center align the image */
margin-bottom: 20px; /* Add space below the image */
}
.profile-photo {
width: 100px; /* Set the width of the image */
height: 100px; /* Set the height of the image */
border-radius: 50%; /* This makes the image round */
object-fit: cover; /* Ensures the image fits well inside the circle */
border: 3px solid #fff; /* Optional: Adds a white border around the photo */
}
.contact-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem; /* Adjust the spacing between the items */
text-align: center; /* Keeps the text centered */
}
.contact-info a {
text-decoration: none;
color: #2980b9;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.5rem; /* Adjust the space between icon and text */
}
.contact-item svg {
color: #e74c3c; /* Adjust icon color */
}
.tagline {
text-align: center;
font-style: italic;
}
.main-content {
display: flex;
justify-content: space-between;
}
.left-column {
width: 30%;
margin-right: 20px;
background-color: #F2F2F2;
padding: 5px;
}
.right-column {
width: 70%;
margin-right: 20px;
}
.left-section,
.right-section {
margin-bottom: 10px;
}
h2.left-header {
background-color: var(--sectionColor);
color: var(--sectionTextColor);
}
h2.right-header {
border-bottom: 2px solid var(--sectionColor);
color: var(--sectionColor);
}
/* Experience & Education */
.workExpItem, .projItem, .awardItem, .actItem {
margin-bottom: 10px;
padding-left: 5px;
display: block; /* Ensure the title stays on the same line as the date */
}
.workExpItem h3, .projItem h3, .awardItem h3, .actItem h3 {
font-weight: bold;
display: inline-block; /* Ensure the title stays on the same line as the date */
margin-top: 0px;
margin-bottom: 0px;
}
.workExpItem p, .projItem p, .awardItem p, .actItem p {
//display: inline-block; /* Ensure the title stays on the same line as the date */
margin-top: 0px;
margin-bottom: 0px;
}
.workTitleDate, .eduDegreeDate, .projProjectDate, .actPositionDate, .awardInstituteDate {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 0px;
margin-bottom: 0px;
}
.workDate, .projDate, .awardDate, .actDate {
font-weight: normal;
display: inline-block; /* Ensure the title stays on the same line as the date */
text-align: right;
}
.eduItem, .certItem {
margin-bottom: 10px;
padding-left: 5px;
display: inline-block; /* Ensure the title stays on the same line as the date */
}
.eduItem h3, .certItem h3 {
font-weight: bold;
display: inline-block; /* Ensure the title stays on the same line as the date */
margin-top: 0px;
margin-bottom: 0px;
}
.eduItem p, .certItem p {
display: inline-block; /* Ensure the title stays on the same line as the date */
margin-top: 0px;
margin-bottom: 0px;
}
.eduDate, .certDate {
font-weight: normal;
display: inline-block; /* Ensure the title stays on the same line as the date */
text-align: right;
}
.profileLink {
text-align: center;
font-size: var(--fontSize);
background-color: var(--headerColor);
color: var(--headerTextColor);
width: 100%;
height: 30px;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Add a new class for null case */
.profileLink.null {
background-color: var(--backgroundColor);
color: transparent; /* Make the text effectively invisible */
}
.profileLink a {
color: var(--headerTextColor);
text-decoration: none;
}
@page {
size: var(--paperSize);
margin-top: 0.5in;
margin-bottom: 0.5in;
margin-left: 0in;
margin-right: 0in;
background-color: var(--backgroundColor); /* Apply background color to both top and bottom margins for subsequent pages */
}
/* Special margin for the first page */
@page :first {
margin-top: 0in; /* No top margin for the first page */
/* Apply background color to bottom margin only for the first page */
background-color: var(--backgroundColor);
}
/* Print-specific styles to ensure this appears on device print setting */
@media print {
html, body {
background-color: var(--backgroundColor); /* Ensure full-page background color */
color: var(--textColor); /* Ensure text is printed in black */
min-height: auto; /* Avoid forcing a height in the print layout */
height: auto; /* Let the content determine the height */
margin: 0;
-webkit-print-color-adjust: exact; /* Ensure background is preserved */
print-color-adjust: exact;
}
/* Use the pseudo-element to extend the background color to the entire page */
html::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--backgroundColor); /* Fill entire page including margins */
z-index: -1; /* Keep the background behind the content */
-webkit-print-color-adjust: exact; /* Ensure background is preserved */
print-color-adjust: exact;
}
.container {
background-color: var(--backgroundColor);
-webkit-print-color-adjust: exact; /* Ensure background colors are preserved */
print-color-adjust: exact;
}
.profileLink {
background-color: var(--headerColor);
color: var(--headerTextColor);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
{% if linkedInLink or circinoNowLink %}
<div class="profileLink">
<p>
Visit {{ name }}'s
{% if circinoNowLink %}
<a href="{{ circinoNowLink }}" target="_blank">CircinoNow Profile</a>
{% endif %}
{% if linkedInLink and circinoNowLink %}
|
{% endif %}
{% if linkedInLink %}
<a href="{{ linkedInLink }}" target="_blank">LinkedIn Profile</a>
{% endif %}
</p>
</div>
{% else %}
<div class="profileLink null">
<!-- No profiles available -->
</div>
{% endif %}
<div class="container">
<!-- Main Content Section (Two-Column Layout) -->
<div class="main-content">
<div class="left-column">
<!-- Photo Section -->
{% if photo %}
<div class="photo-container">
<img src="{{photo}}" alt="{{name}}'s Photo" class="profile-photo">
</div>
{% endif %}
<div class="side-by-side">
<section class="left-section">
<!-- Name and Contact Info -->
<h1>{{name}}</h1>
<p class="tagline">{{tagline}}</p>
<h3 class="contact-info">
<span class="contact-item">
<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g transform="translate(0 -1028.4)">
<path d="m12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z" transform="translate(0 1028.4)" fill="#e74c3c"/>
<path d="m12 3c-2.7614 0-5 2.2386-5 5 0 2.761 2.2386 5 5 5 2.761 0 5-2.239 5-5 0-2.7614-2.239-5-5-5zm0 2c1.657 0 3 1.3431 3 3s-1.343 3-3 3-3-1.3431-3-3 1.343-3 3-3z" transform="translate(0 1028.4)" fill="#c0392b"/>
</g>
</svg>
{{location}}
</span>
<span class="contact-item">
<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g transform="translate(0 -1028.4)">
<path d="m23.015 1046.8c0 0.3-0.052 0.6-0.156 1.1-0.105 0.4-0.214 0.8-0.329 1-0.219 0.6-0.855 1.1-1.907 1.7-0.98 0.5-1.95 0.8-2.909 0.8h-0.828c-0.261-0.1-0.558-0.2-0.892-0.2-0.333-0.1-0.583-0.2-0.75-0.3-0.156 0-0.443-0.1-0.86-0.3s-0.672-0.2-0.766-0.3c-1.022-0.3-1.934-0.8-2.736-1.3-1.3346-0.8-2.7157-1.9-4.1438-3.3-1.4176-1.5-2.5381-2.9-3.3616-4.2-0.5003-0.8-0.9329-1.7-1.2977-2.7-0.0313-0.1-0.1251-0.4-0.2815-0.8-0.1563-0.4-0.2658-0.7-0.3283-0.9-0.0522-0.1-0.1251-0.4-0.2189-0.7s-0.1616-0.6-0.2033-0.9c-0.0313-0.3-0.0469-0.5-0.0469-0.8 0-1 0.2658-2 0.7974-2.9 0.5837-1.1 1.1362-1.7 1.6574-2 0.2606-0.1 0.615-0.2 1.0632-0.3 0.4586-0.1 0.8287-0.1 1.1101-0.1h0.3284c0.1876 0.1 0.4638 0.5 0.8287 1.2 0.1146 0.2 0.271 0.5 0.469 0.8 0.1981 0.4 0.3805 0.7 0.5473 1 0.1667 0.3 0.3283 0.6 0.4847 0.9 0.0312 0 0.1198 0.1 0.2658 0.4 0.1563 0.2 0.271 0.4 0.344 0.5 0.0729 0.2 0.1094 0.3 0.1094 0.5s-0.1511 0.4-0.4534 0.8c-0.2919 0.3-0.615 0.6-0.9694 0.8-0.344 0.3-0.6672 0.5-0.9694 0.8-0.2919 0.3-0.4378 0.6-0.4378 0.8 0 0.1 0.026 0.2 0.0781 0.3 0.0522 0.2 0.0939 0.3 0.1251 0.3 0.0417 0.1 0.1147 0.2 0.2189 0.4 0.1147 0.2 0.1772 0.3 0.1877 0.3 0.7922 1.4 1.699 2.7 2.7205 3.7 1.0213 1 2.2463 1.9 3.6743 2.7 0.021 0 0.12 0.1 0.297 0.2s0.302 0.2 0.375 0.2 0.178 0.1 0.313 0.1c0.146 0.1 0.266 0.1 0.36 0.1 0.187 0 0.427-0.1 0.719-0.4s0.568-0.6 0.829-1c0.26-0.3 0.547-0.7 0.86-1 0.312-0.3 0.573-0.4 0.781-0.4 0.146 0 0.292 0 0.438 0.1 0.157 0.1 0.344 0.2 0.563 0.3 0.219 0.2 0.349 0.3 0.391 0.3 0.261 0.2 0.537 0.3 0.829 0.5 0.302 0.2 0.635 0.3 1 0.5s0.647 0.4 0.845 0.5c0.729 0.4 1.125 0.7 1.188 0.8 0.031 0.1 0.047 0.2 0.047 0.4" fill="#e74c3c"/>
</g>
</svg>
{{phone}}
</span>
<span class="contact-item">
<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_iconCarrier">
<g transform="translate(0 -1028.4)">
<g transform="matrix(1.0607 1.0607 -1.0607 1.0607 1146.8 34.926)">
<path d="m-63 1003.4v11.3 0.7 1l2 2 2-2v-1-0.7-11.3h-4z" fill="#ecf0f1"/>
<path d="m-61 1003.4v15l2-2v-1-0.7-11.3h-2z" fill="#bdc3c7"/>
<rect height="11" width="4" y="1004.4" x="-63" fill="#e74c3c"/>
<path d="m-61 1000.4c-1.105 0-2 0.9-2 2v1h4v-1c0-1.1-0.895-2-2-2z" fill="#7f8c8d"/>
<g transform="translate(-7,1)">
<path d="m-55.406 1016 1.406 1.4 1.406-1.4h-1.406-1.406z" fill="#34495e"/>
<path d="m-54 1016v1.4l1.406-1.4h-1.406z" fill="#2c3e50"/>
</g>
<path d="m-61 1000.4c-1.105 0-2 0.9-2 2v1h2v-3z" fill="#95a5a6"/>
<rect height="11" width="2" y="1004.4" x="-61" fill="#c0392b"/>
</g>
</g>
</g>
</svg>
<a href="mailto:{{email}}">{{email}}</a>
</span>
</h3>
</section>
</div>
{% for section in sectionOrders %}
<div class="side-by-side">
{% if section == "Skills" and showSkills == true %}
<section class="left-section">
<h2 class="left-header">{{skillsLabel}}</h2>
<ul class="skills">
{% for item in skills %}
<li>{{item.skill}}</li>
{% endfor %}
</ul>
</section>
{% elif section == "Education" and showEducation == true %}
<section class="left-section">
<h2 class="left-header">{{eduLabel}}</h2>
{% for item in education %}
<div class="eduItem">
<h3>{{item.eduDegree}}</h3>
<p>{{item.eduInstitute}}</p>
<p>{{item.eduDate}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Certificates" and showCertificates == true %}
<section class="left-section">
<h2 class="left-header">{{certLabel}}</h2>
{% for item in certificates %}
<div class="certItem">
<h3>{{item.certificateInstitute}}</h3>
<p class="certDate">{{item.certDate}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Languages" and showLanguages == true %}
<section class="left-section">
<h2 class="left-header">{{langLabel}}</h2>
<ul class="languages">
{% for item in languages %}
<li>{{item.language}}</li>
{% endfor %}
</ul>
</section>
{% endif %}
</div>
{% endfor %}
</div>
<div class="right-column">
{% for section in sectionOrders %}
{% if section == "Summary" and showSummary == true %}
<section class="right-section">
<h2 class="right-header">{{summaryLabel}}</h2>
<p>{{summary}}</p>
</section>
{% elif section == "Experience" and showExperience == true %}
<section class="right-section">
<h2 class="right-header">{{workExpLabel}}</h2>
{% for item in workExp %}
<div class="workExpItem">
<div class="workTitleDate">
<h3>{{item.workTitleCompany}}</h3>
<p class="workDate">{{item.workDate}}</p>
</div>
<p>{{item.workDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Projects" and showProjects == true %}
<section class="right-section">
<h2 class="right-header">{{projLabel}}</h2>
{% for item in projects %}
<div class="projItem">
<div class="projProjectDate">
<h3>{{item.project}}</h3>
<p class="projDate">{{item.projDate}}</p>
</div>
<p>{{item.projDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Activities" and showActivities == true %}
<section class="right-section">
<h2 class="right-header">{{actLabel}}</h2>
{% for item in activities %}
<div class="actItem">
<div class="actPositionDate">
<h3>{{item.actPositionOrg}}</h3>
<p class="actDate">{{item.actDate}}</p>
</div>
<p>{{item.actDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Awards" and showAwards == true %}
<section class="right-section">
<h2 class="right-header">{{awardsLabel}}</h2>
{% for item in awards %}
<div class="awardItem">
<div class="awardInstituteDate">
<h3>{{item.awardInstitute}}</h3>
<p class="awardDate">{{item.awardDate}}</p>
</div>
<p>{{item.awardDesc}}</p>
</div>
{% endfor %}
</section>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</body>
Core30
(* Customizable)
pdfGenerator
templateId
{"headerTextColor":"#F1C40F","backgroundColor":"#FFFFFF","textFont":"Montserrat, sans-serif","sectionTextColor":"#FFFFFF","textColor":"#333333","paperSize":"Letter","sectionColor":"#2C3E50","sectionAlign":"center","useSectionBackgroundColor":false,"fontSize":"11px","headerColor":"#2C3E50"}
["Summary","Experience","Education","Skills","Certificates","Awards","Languages","Activities","Projects"]
type
<title>Resume - {{name}}</title>
<body>
<style>
:root {
--paperSize: {{paperSize}};
--backgroundColor: {{backgroundColor}};
--headerColor: {{headerColor}};
--headerTextColor: {{headerTextColor}};
--textFont: {{textFont}};
--fontSize: {{fontSize}};
--textColor: {{textColor}};
--sectionColor: {{sectionColor}};
--sectionTextColor: {{sectionTextColor}};
--sectionAlign: {{sectionAlign}};
}
body {
font-family: var(--textFont);
font-size: var(--fontSize);
background-color: var(--backgroundColor);
color: var(--textColor);
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin-left: 0.3in;
margin-right: 0.3in;
}
header {
text-align: center;
margin-bottom: 20px;
}
.name {
font-weight: bold;
margin-bottom: 5px;
}
.tagline {
font-style: italic;
margin-bottom: 10px;
}
.header {
display: flex; /* Use Flexbox for horizontal alignment */
align-items: center; /* Vertically align items */
gap: 20px; /* Add space between photo and contact info */
}
.photo-container {
flex-shrink: 0; /* Prevent the photo from shrinking */
width: 100px; /* Set a fixed width for the photo */
height: 100px; /* Set a fixed height for the photo */
margin-right: 20px;
}
.profile-photo {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--sectionColor);
}
.contact-container {
flex-grow: 1; /* Allow the contact information to take remaining space */
}
.contact-info {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
line-height: 1.5;
font-weight: bold;
}
.contact-item {
display: flex;
align-items: center;
gap: 5px;
}
.contact-item a {
text-decoration: none;
}
h2.section-title {
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
color: var(--sectionTextColor);
background-color: var(--sectionColor);
padding-left: 5px;
}
section {
margin-bottom: 20px;
}
/* Remove the margin between the <p> and <ul> within the summary section */
section p + ul {
margin-top: 0;
}
/* Optional: Adjust <p> margin if needed */
section p {
margin-bottom: 0;
}
.skills-list, .languages-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 0;
list-style-type: none;
margin: 0;
}
.skills-list li, .languages-list li {
margin-bottom: 5px;
padding-left: 5px;
}
.workExpItem, .eduItem, .certItem, .projItem, .actItem, .awardItem {
margin-bottom: 15px;
page-break-inside: avoid; // Prevent page break occur at the item
padding-left: 5px;
}
.workExpItem p, .eduItem p, .certItem p, .projItem p, .actItem p, .awardItem p {
margin-top: 0px;
padding-left: 5px;
}
.workTitleDate, .eduDegreeDate, .certificateInstituteDate, .projProjectDate, .actPositionDate, .awardInstituteDate {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 0px;
margin-bottom: 0px;
}
.position, .degree, .certificate-name, .project-title, .activity-title, .award-name {
font-weight: bold;
margin: 0; /* Remove margin */
display: inline-block; /* Ensure the title stays on the same line as the date */
}
.dates, .project-date, .activity-date, .award-date, .education-date, .certificate-date {
margin: 0; /* Remove margin */
display: inline-block; /* Align the date with the title */
margin-left: 10px; /* Add some space between the title and the date */
text-align: right;
}
.description, .institution, .certificate-name, .project-description, .activity-description, .award-description {
}
.project-title, .activity-title, .award-name, .degree {
font-weight: bold;
}
.project-date, .activity-date, .award-date, .education-date {
text-align: right;
}
.photo-container {
text-align: center;
margin-bottom: 20px;
}
.profile-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
}
.profileLink {
text-align: center;
font-size: var(--fontSize);
background-color: var(--headerColor);
color: var(--headerTextColor);
width: 100%;
height: 30px;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Add a new class for null case */
.profileLink.null {
background-color: var(--backgroundColor);
color: transparent; /* Make the text effectively invisible */
}
.profileLink a {
color: var(--headerTextColor);
text-decoration: none;
}
@page {
size: var(--paperSize);
margin-top: 0.5in;
margin-bottom: 0.5in;
margin-left: 0in;
margin-right: 0in;
background-color: var(--backgroundColor); /* Apply background color to both top and bottom margins for subsequent pages */
}
/* Special margin for the first page */
@page :first {
margin-top: 0in; /* No top margin for the first page */
/* Apply background color to bottom margin only for the first page */
background-color: var(--backgroundColor);
}
/* Print-specific styles to ensure this appears on device print setting */
@media print {
html, body {
background-color: var(--backgroundColor); /* Ensure full-page background color */
color: var(--textColor); /* Ensure text is printed in black */
min-height: auto; /* Avoid forcing a height in the print layout */
height: auto; /* Let the content determine the height */
margin: 0;
-webkit-print-color-adjust: exact; /* Ensure background is preserved */
print-color-adjust: exact;
}
/* Use the pseudo-element to extend the background color to the entire page */
html::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--backgroundColor); /* Fill entire page including margins */
z-index: -1; /* Keep the background behind the content */
-webkit-print-color-adjust: exact; /* Ensure background is preserved */
print-color-adjust: exact;
}
.profileLink {
background-color: var(--headerColor);
color: var(--headerTextColor);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
{% if linkedInLink or circinoNowLink %}
<div class="profileLink">
<p>
Visit {{ name }}'s
{% if circinoNowLink %}
<a href="{{ circinoNowLink }}" target="_blank">CircinoNow Profile</a>
{% endif %}
{% if linkedInLink and circinoNowLink %}
|
{% endif %}
{% if linkedInLink %}
<a href="{{ linkedInLink }}" target="_blank">LinkedIn Profile</a>
{% endif %}
</p>
</div>
{% else %}
<div class="profileLink null">
<!-- No profiles available -->
</div>
{% endif %}
<div class="container">
<div class="header">
<div class="contact-container">
<h1>{{name}}</h1>
<p class="tagline">{{tagline}}</p>
<div class="contact-info">
<div class="contact-item">{{location}}</div>
<div class="contact-item">{{phone}}</div>
<div class="contact-item"><a href="mailto:{{email}}">{{email}}</a></div>
</div>
</div>
{% if photo %}
<div class="photo-container">
<img src="{{photo}}" alt="{{name}}'s Photo" class="profile-photo">
</div>
{% endif %}
</div>
{% for section in sectionOrders %}
{% if section == "Summary" and showSummary %}
<section class="summary">
<h2 class="section-title">{{summaryLabel}}</h2>
<p>{{summary}}</p>
</section>
{% elif section == "Skills" and showSkills %}
<section class="skills">
<h2 class="section-title">{{skillsLabel}}</h2>
<ul class="skills-list">
{% for item in skills %}
<li>{{item.skill}}</li>
{% endfor %}
</ul>
</section>
{% elif section == "Experience" and showExperience %}
<section class="experience">
<h2 class="section-title">{{workExpLabel}}</h2>
{% for item in workExp %}
<div class="workExpItem">
<div class="workTitleDate">
<h3 class="position">{{item.workTitleCompany}}</h3>
<p class="dates">{{item.workDate}}</p>
</div>
<p class="description">{{item.workDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Education" and showEducation %}
<section class="education">
<h2 class="section-title">{{eduLabel}}</h2>
{% for item in education %}
<div class="eduItem">
<div class="eduDegreeDate">
<h3 class="degree">{{item.eduDegree}}</h3>
<p class="dates">{{item.eduDate}}</p>
</div>
<p class="institution">{{item.eduInstitute}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Certificates" and showCertificates %}
<section class="certificates">
<h2 class="section-title">{{certLabel}}</h2>
{% for item in certificates %}
<div class="certItem">
<div class="certificateInstituteDate">
<h3 class="certificate-name">{{item.certificateInstitute}}</h3>
<p class="certificate-date">{{item.certDate}}</p>
</div>
</div>
{% endfor %}
</section>
{% elif section == "Languages" and showLanguages %}
<section class="languages">
<h2 class="section-title">{{langLabel}}</h2>
<ul class="languages-list">
{% for item in languages %}
<li>{{item.language}}</li>
{% endfor %}
</ul>
</section>
{% elif section == "Projects" and showProjects %}
<section class="projects">
<h2 class="section-title">{{projLabel}}</h2>
{% for item in projects %}
<div class="projItem">
<div class="projProjectDate">
<h3 class="project-title">{{item.project}}</h3>
<p class="project-date">{{item.projDate}}</p>
</div>
<p class="project-description">{{item.projDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Activities" and showActivities %}
<section class="activities">
<h2 class="section-title">{{actLabel}}</h2>
{% for item in activities %}
<div class="actItem">
<div class="actPositionDate">
<h3 class="activity-title">{{item.actPositionOrg}}</h3>
<p class="activity-date">{{item.actDate}}</p>
</div>
<p class="activity-description">{{item.actDesc}}</p>
</div>
{% endfor %}
</section>
{% elif section == "Awards" and showAwards %}
<section class="awards">
<h2 class="section-title">{{awardsLabel}}</h2>
{% for item in awards %}
<div class="awardItem">
<div class="awardInstituteDate">
<h3 class="award-name">{{item.awardInstitute}}</h3>
<p class="award-date">{{item.awardDate}}</p>
</div>
<p class="award-description">{{item.awardDesc}}</p>
</div>
{% endfor %}
</section>
{% endif %}
{% endfor %}
</div>
</body>
Minimalist Pro
(* Customizable)
Template
