Add professional CV template project
This commit is contained in:
85
motolani-cv-template/README.md
Normal file
85
motolani-cv-template/README.md
Normal file
@@ -0,0 +1,85 @@
|
||||
# Motolani Olaiya CV Template
|
||||
|
||||
Static HTML/SCSS resume project for Motolani Olaiya. The goal is a professional, editable CV that works both in the browser and as a print-friendly PDF.
|
||||
|
||||
## Structure
|
||||
|
||||
```text
|
||||
motolani-cv-template/
|
||||
├── index.html
|
||||
├── index-recruiter.html
|
||||
├── index-eu-2page.html
|
||||
├── assets/
|
||||
├── scss/
|
||||
│ └── styles.scss
|
||||
├── css/
|
||||
│ ├── styles.css
|
||||
│ └── print.css
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## How to edit
|
||||
|
||||
1. Update the full version in `index.html`.
|
||||
2. Update the one-page recruiter version in `index-recruiter.html`.
|
||||
3. Update the strict 2-page European version in `index-eu-2page.html`.
|
||||
4. Adjust visual styles in `scss/styles.scss`.
|
||||
5. Keep `css/styles.css` in sync with the SCSS source if you change styling.
|
||||
6. Use `css/print.css` for PDF/export-specific layout changes.
|
||||
|
||||
## Suggested content workflow
|
||||
|
||||
- Keep the summary short and concrete.
|
||||
- Prefer measurable platform/project outcomes over broad adjectives.
|
||||
- Lead with achievements, architecture decisions, and delivery impact instead of responsibility-only wording.
|
||||
- Tailor the top headline and project emphasis for each target role:
|
||||
- Python Developer
|
||||
- Django Developer
|
||||
- Wagtail Developer
|
||||
- Django Oscar Developer
|
||||
- Backend Developer
|
||||
- Full Stack Developer
|
||||
- Ecommerce Developer
|
||||
- Software Engineer
|
||||
- Technical Founder
|
||||
- Technical Consultant
|
||||
|
||||
## Export to PDF
|
||||
|
||||
### Browser method
|
||||
|
||||
1. Open `index.html` in a browser.
|
||||
2. Press `Cmd + P` on macOS or `Ctrl + P` on Windows/Linux.
|
||||
3. Choose **Save as PDF**.
|
||||
4. Keep background graphics enabled if the browser offers that option.
|
||||
|
||||
### Print guidance
|
||||
|
||||
- The layout already includes `@media print` support.
|
||||
- Print output is designed for A4.
|
||||
- If the content grows beyond two pages, reduce spacing or shorten project descriptions before exporting.
|
||||
|
||||
## Recommended usage
|
||||
|
||||
- Use `index-recruiter.html` as the primary one-page application version.
|
||||
- Use `index-eu-2page.html` for senior European software roles that expect a fuller two-page CV.
|
||||
- Use `index.html` when you want the fuller founder/platform narrative.
|
||||
|
||||
## Suggested measurable outcomes to add later
|
||||
|
||||
If you confirm them, these are the strongest metrics to add:
|
||||
|
||||
- Number of client or internal projects onboarded through the platform
|
||||
- Reduction in manual setup time for new projects
|
||||
- Deployment frequency or deployment time improvement
|
||||
- Number of reusable plugins or shared modules created
|
||||
- Search relevance or search coverage improvements
|
||||
- Number of staging or production environments managed
|
||||
- Reduction in onboarding or deployment failures after platform fixes
|
||||
- Size or scope of multilingual / ecommerce implementations delivered
|
||||
|
||||
## Notes
|
||||
|
||||
- This version avoids JavaScript on purpose.
|
||||
- The structure is ATS-friendly: semantic headings, readable lists, and plain text sections.
|
||||
- Unknown or role-specific personal details such as exact graduation years or certification issue dates can be filled in without changing the layout.
|
||||
1
motolani-cv-template/assets/.gitkeep
Normal file
1
motolani-cv-template/assets/.gitkeep
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
147
motolani-cv-template/css/print.css
Normal file
147
motolani-cv-template/css/print.css
Normal file
@@ -0,0 +1,147 @@
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 8mm;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #111111 !important;
|
||||
font-size: 10.7pt;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.resume,
|
||||
.resume--compact,
|
||||
.resume--two-page {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.resume--compact {
|
||||
font-size: 10.1pt !important;
|
||||
}
|
||||
|
||||
.resume--two-page {
|
||||
font-size: 9.35pt !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #111111 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.hero {
|
||||
gap: 0.8rem !important;
|
||||
padding-bottom: 0.8rem !important;
|
||||
border-bottom: 1px solid #bdbdbd !important;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
margin-bottom: 0.45rem !important;
|
||||
font-size: 22pt !important;
|
||||
}
|
||||
|
||||
.resume--compact .hero__identity h1 {
|
||||
font-size: 20pt !important;
|
||||
}
|
||||
|
||||
.headline,
|
||||
.entry__org,
|
||||
.entry__meta,
|
||||
.stack-list dd,
|
||||
.hero__meta li {
|
||||
color: #111111 !important;
|
||||
}
|
||||
|
||||
.hero__meta,
|
||||
.panel,
|
||||
.callout {
|
||||
background: transparent !important;
|
||||
border: 1px solid #bdbdbd !important;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 0.9rem !important;
|
||||
}
|
||||
|
||||
.resume--compact .section {
|
||||
padding-top: 0.65rem !important;
|
||||
}
|
||||
|
||||
.resume--two-page .section {
|
||||
padding-top: 0.42rem !important;
|
||||
}
|
||||
|
||||
.section,
|
||||
.panel,
|
||||
.entry,
|
||||
.callout,
|
||||
.hero,
|
||||
.section--grid {
|
||||
break-inside: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.section--grid {
|
||||
gap: 0.65rem !important;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 0.7rem 0 !important;
|
||||
}
|
||||
|
||||
.resume--compact .panel,
|
||||
.resume--compact .callout,
|
||||
.resume--compact .hero__meta {
|
||||
padding: 0.7rem 0.8rem !important;
|
||||
}
|
||||
|
||||
.resume--two-page .panel,
|
||||
.resume--two-page .callout,
|
||||
.resume--two-page .hero__meta {
|
||||
padding: 0.52rem 0.68rem !important;
|
||||
}
|
||||
|
||||
.resume--compact .entry {
|
||||
padding: 0.5rem 0 !important;
|
||||
}
|
||||
|
||||
.resume--two-page .entry {
|
||||
padding: 0.28rem 0 !important;
|
||||
}
|
||||
|
||||
.resume--compact .entry p,
|
||||
.resume--compact .entry ul,
|
||||
.resume--compact .plain-list li,
|
||||
.resume--compact .stack-list dd {
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
.resume--two-page .entry p,
|
||||
.resume--two-page .entry ul,
|
||||
.resume--two-page .plain-list li,
|
||||
.resume--two-page .stack-list dd {
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.resume--two-page .section,
|
||||
.resume--two-page .section--grid,
|
||||
.resume--two-page .hero {
|
||||
break-inside: auto !important;
|
||||
page-break-inside: auto !important;
|
||||
}
|
||||
|
||||
.tag-list li {
|
||||
background: transparent !important;
|
||||
border-color: #999999 !important;
|
||||
color: #111111 !important;
|
||||
}
|
||||
352
motolani-cv-template/css/styles.css
Normal file
352
motolani-cv-template/css/styles.css
Normal file
@@ -0,0 +1,352 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #182131;
|
||||
background: radial-gradient(circle at top left, rgba(35, 73, 182, 0.06), transparent 24rem), #eef2f7;
|
||||
line-height: 1.6;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2349b6;
|
||||
text-decoration: none;
|
||||
text-underline-offset: 0.16em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
dd {
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
.resume {
|
||||
width: min(1080px, calc(100% - 2rem));
|
||||
margin: 2rem auto;
|
||||
padding: 2.35rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d7deea;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 22px 54px rgba(16, 24, 40, 0.08);
|
||||
}
|
||||
|
||||
.resume--compact {
|
||||
width: min(980px, calc(100% - 2rem));
|
||||
padding: 2rem 2.1rem;
|
||||
}
|
||||
|
||||
.resume--two-page {
|
||||
width: min(1020px, calc(100% - 2rem));
|
||||
padding: 2.1rem 2.15rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
|
||||
gap: 1.75rem;
|
||||
align-items: start;
|
||||
padding-bottom: 1.8rem;
|
||||
border-bottom: 1px solid #c7d1e1;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
margin: 0.35rem 0 0.9rem;
|
||||
font-size: clamp(2.15rem, 4vw, 3.15rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: #2349b6;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 0;
|
||||
max-width: 58ch;
|
||||
color: #5f6c83;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
margin: 0;
|
||||
padding: 1.1rem 1.15rem;
|
||||
list-style: none;
|
||||
background: linear-gradient(180deg, #f8fafc, #eef3ff);
|
||||
border: 1px solid #d5def5;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.hero__meta li {
|
||||
max-width: none;
|
||||
color: #182131;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 1.7rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
margin: 0 0 0.95rem;
|
||||
color: #23304a;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.callout {
|
||||
padding: 1.15rem 1.2rem;
|
||||
border: 1px solid #d7deea;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.panel h2,
|
||||
.callout h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tag-list,
|
||||
.plain-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.plain-list li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.58rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tag-list li {
|
||||
max-width: none;
|
||||
padding: 0.42rem 0.76rem;
|
||||
border: 1px solid #cfdaef;
|
||||
border-radius: 999px;
|
||||
background: #eef3ff;
|
||||
color: #243657;
|
||||
font-size: 0.91rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stack-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stack-list div + div {
|
||||
margin-top: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
border-top: 1px solid #e8edf5;
|
||||
}
|
||||
|
||||
.stack-list dt {
|
||||
color: #243657;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stack-list dd {
|
||||
margin: 0.14rem 0 0;
|
||||
color: #5f6c83;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 1.05rem 0;
|
||||
border-top: 1px solid #d7deea;
|
||||
}
|
||||
|
||||
.entry:first-of-type {
|
||||
border-top: 0;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.entry h3 {
|
||||
margin: 0;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.entry p,
|
||||
.entry ul {
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.entry ul {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.entry li + li {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.entry__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.entry__org {
|
||||
margin-top: 0.2rem;
|
||||
color: #5f6c83;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.entry__meta {
|
||||
color: #5f6c83;
|
||||
font-size: 0.94rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.callout ul {
|
||||
margin: 0;
|
||||
padding-left: 1.15rem;
|
||||
}
|
||||
|
||||
.callout li + li {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
border-top: 1px solid #d7deea;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-meta p {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
color: #5f6c83;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.resume--compact .hero {
|
||||
gap: 1.3rem;
|
||||
padding-bottom: 1.45rem;
|
||||
}
|
||||
|
||||
.resume--compact .section {
|
||||
padding-top: 1.35rem;
|
||||
}
|
||||
|
||||
.resume--compact .headline {
|
||||
max-width: 50ch;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.resume--compact .panel,
|
||||
.resume--compact .callout {
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.resume--compact .entry {
|
||||
padding: 0.9rem 0;
|
||||
}
|
||||
|
||||
.resume--compact .entry li + li {
|
||||
margin-top: 0.32rem;
|
||||
}
|
||||
|
||||
.resume--compact .footer-meta {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.resume--two-page .section {
|
||||
padding-top: 1.45rem;
|
||||
}
|
||||
|
||||
.resume--two-page .panel,
|
||||
.resume--two-page .callout {
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.resume--two-page .entry {
|
||||
padding: 0.88rem 0;
|
||||
}
|
||||
|
||||
.resume--two-page .entry li + li {
|
||||
margin-top: 0.34rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.resume,
|
||||
.resume--compact,
|
||||
.resume--two-page {
|
||||
width: min(100%, calc(100% - 1rem));
|
||||
margin: 0.5rem auto;
|
||||
padding: 1.35rem;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.section--grid,
|
||||
.entry__head {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.entry__head {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.entry__meta {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
}
|
||||
BIN
motolani-cv-template/exports/motolani-olaiya-cv-eu-2page.pdf
Normal file
BIN
motolani-cv-template/exports/motolani-olaiya-cv-eu-2page.pdf
Normal file
Binary file not shown.
BIN
motolani-cv-template/exports/motolani-olaiya-cv-full.pdf
Normal file
BIN
motolani-cv-template/exports/motolani-olaiya-cv-full.pdf
Normal file
Binary file not shown.
BIN
motolani-cv-template/exports/motolani-olaiya-cv-recruiter.pdf
Normal file
BIN
motolani-cv-template/exports/motolani-olaiya-cv-recruiter.pdf
Normal file
Binary file not shown.
212
motolani-cv-template/index-eu-2page.html
Normal file
212
motolani-cv-template/index-eu-2page.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Motolani Olaiya | Senior Django Developer | Backend & Platform Engineer
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Strict 2-page European CV for Motolani Olaiya optimized for Senior Django Developer, Wagtail Developer, Backend Developer, and Platform Engineer roles."
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="stylesheet" href="css/print.css" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="resume resume--compact resume--two-page">
|
||||
<header class="hero">
|
||||
<div class="hero__identity">
|
||||
<p class="eyebrow">
|
||||
Senior Django Developer • Wagtail Developer • Backend Developer •
|
||||
Platform Engineer
|
||||
</p>
|
||||
<h1>Motolani Olaiya</h1>
|
||||
<p class="headline">
|
||||
Founder & Senior Python/Django Developer specializing in ecommerce
|
||||
platforms, CMS systems, search infrastructure, CI/CD, deployment
|
||||
automation, and reusable platform architecture.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="hero__meta">
|
||||
<li>Preferred name: Mandel</li>
|
||||
<li>Netherlands</li>
|
||||
<li><a href="tel:+310653263426">+31 0653263426</a></li>
|
||||
<li>
|
||||
<a href="mailto:mandeleolaiya15@icloud.com"
|
||||
>mandeleolaiya15@icloud.com</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/motolani-olaiya-ba2151296/"
|
||||
>LinkedIn</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="https://www.mandelblog.com/">MandelBlog</a></li>
|
||||
<li>Git platform: Private Gitea</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<h2>Professional Profile</h2>
|
||||
<p>
|
||||
Senior Python/Django developer with practical production experience
|
||||
across Django 5, Wagtail, Django Oscar, PostgreSQL, Elasticsearch,
|
||||
Jenkins, SaltStack, Linux, and Sentry. Built MandelBlog as a reusable
|
||||
platform for client onboarding, multilingual websites, ecommerce
|
||||
delivery, monitoring, and release workflows. Best aligned to senior
|
||||
Django, Wagtail, backend, ecommerce, and platform engineering roles.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Technical Skills</h2>
|
||||
<dl class="stack-list">
|
||||
<div>
|
||||
<dt>Backend</dt>
|
||||
<dd>Python, Django 5, Django Oscar, REST APIs</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>CMS & Ecommerce</dt>
|
||||
<dd>Wagtail, Django Oscar, Elasticsearch</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>DevOps & Platform</dt>
|
||||
<dd>Jenkins, SaltStack, Linux, Sentry, CI/CD</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Frontend</dt>
|
||||
<dd>HTML, CSS, SCSS, Bootstrap 5</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Strength Areas</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Python and Django platform delivery</li>
|
||||
<li>Wagtail and Django Oscar implementation</li>
|
||||
<li>Elasticsearch search infrastructure</li>
|
||||
<li>Platform architecture and plugin reuse</li>
|
||||
<li>CI/CD and deployment automation</li>
|
||||
<li>Staging and production reliability</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Professional Experience</h2>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Founder & Lead Developer</h3>
|
||||
<p class="entry__org">MandelBlog</p>
|
||||
</div>
|
||||
<p class="entry__meta">Ongoing</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Built a reusable Django/Wagtail/Django Oscar platform that
|
||||
accelerated website and ecommerce delivery through shared
|
||||
architecture and automation.
|
||||
</li>
|
||||
<li>
|
||||
Built an onboarding system that provisions repositories, Jenkins
|
||||
jobs, staging environments, SSL, and deployment tracking with
|
||||
minimal manual intervention.
|
||||
</li>
|
||||
<li>
|
||||
Standardized staging and production deployment using Jenkins,
|
||||
SaltStack, Linux, release workflows, and rollback-aware
|
||||
verification.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Internship / Developer Experience</h3>
|
||||
<p class="entry__org">
|
||||
<a href="https://highbiza.nl/">Highbiza</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="entry__meta">1+ year</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Gained real-world Django, Wagtail, Django Oscar, plugin, and
|
||||
ecommerce platform experience in a production-oriented setting.
|
||||
</li>
|
||||
<li>
|
||||
Built practical exposure to delivery workflows and engineering
|
||||
standards that later informed MandelBlog platform work.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Selected Projects</h2>
|
||||
<article class="entry">
|
||||
<h3>MandelBlog Platform</h3>
|
||||
<p>
|
||||
Centralized Django, Wagtail, Django Oscar, plugin reuse, CI/CD, and
|
||||
deployment automation into a reusable engineering baseline.
|
||||
</p>
|
||||
</article>
|
||||
<article class="entry">
|
||||
<h3>Customer Onboarding Platform</h3>
|
||||
<p>
|
||||
Automated the path from project creation to staging readiness by
|
||||
connecting repository provisioning, Jenkins job generation, staging
|
||||
setup, SSL issuance, and deployment state tracking.
|
||||
</p>
|
||||
</article>
|
||||
<article class="entry">
|
||||
<h3>Ecommerce & Search Platform</h3>
|
||||
<p>
|
||||
Combined Django Oscar ecommerce engineering with Elasticsearch-based
|
||||
product, category, and content discovery.
|
||||
</p>
|
||||
</article>
|
||||
<article class="entry">
|
||||
<h3>Deployment Platform</h3>
|
||||
<p>
|
||||
Built deployment infrastructure using Jenkins, SaltStack, Linux, and
|
||||
release-based workflows to improve consistency, traceability, and
|
||||
rollback capability.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Education</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Diploma in Computer Engineering — Ukraine</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Certifications</h2>
|
||||
<p>
|
||||
Project Management, Human Resources, Business Administration,
|
||||
Python Programming, Sales Management, Fitness Coaching, HACCP, Web
|
||||
Accessibility, and HubSpot Content Marketing.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="section footer-meta">
|
||||
<p>
|
||||
Languages: English (Fluent), Russian (Intermediate), Dutch (Basic /
|
||||
Working proficiency) | Reference available: Geertjan, Highbiza,
|
||||
<a href="tel:+31652362105">+31 652362105</a>
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
148
motolani-cv-template/index-recruiter.html
Normal file
148
motolani-cv-template/index-recruiter.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Motolani Olaiya | Senior Python/Django Developer</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="One-page recruiter CV for Motolani Olaiya, senior Python/Django developer with strengths in Wagtail, Django Oscar, Elasticsearch, platform engineering, CI/CD, and automation."
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="stylesheet" href="css/print.css" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="resume resume--compact">
|
||||
<header class="hero">
|
||||
<div class="hero__identity">
|
||||
<p class="eyebrow">Senior Django Developer • Senior Python Developer • Platform Engineer</p>
|
||||
<h1>Motolani Olaiya</h1>
|
||||
<p class="headline">
|
||||
Founder & Senior Python/Django Developer specializing in ecommerce
|
||||
platforms, CMS systems, platform engineering, search
|
||||
infrastructure, deployment automation, and scalable web
|
||||
applications.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="hero__meta">
|
||||
<li>Netherlands</li>
|
||||
<li><a href="tel:+310653263426">+31 0653263426</a></li>
|
||||
<li><a href="mailto:mandeleolaiya15@icloud.com">mandeleolaiya15@icloud.com</a></li>
|
||||
<li><a href="https://www.linkedin.com/in/motolani-olaiya-ba2151296/">LinkedIn</a></li>
|
||||
<li><a href="https://www.mandelblog.com/">MandelBlog</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<h2>Value Statement</h2>
|
||||
<p>
|
||||
Experienced in building scalable ecommerce platforms, CMS systems,
|
||||
deployment infrastructure, onboarding automation, search platforms,
|
||||
and reusable software architectures using Python, Django, Wagtail,
|
||||
Django Oscar, Elasticsearch, Jenkins, and SaltStack.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Technical Skills</h2>
|
||||
<dl class="stack-list">
|
||||
<div>
|
||||
<dt>Backend</dt>
|
||||
<dd>Python, Django 5, Django Oscar, REST APIs</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>CMS & Ecommerce</dt>
|
||||
<dd>Wagtail, Django Oscar, Elasticsearch</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>DevOps & Platform</dt>
|
||||
<dd>Jenkins, SaltStack, Linux, Sentry, CI/CD</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Frontend</dt>
|
||||
<dd>HTML, CSS, SCSS, Bootstrap 5</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Strength Areas</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Python and Django platform delivery</li>
|
||||
<li>Wagtail and Django Oscar implementation</li>
|
||||
<li>Elasticsearch search infrastructure</li>
|
||||
<li>Platform architecture and plugin reuse</li>
|
||||
<li>CI/CD and deployment automation</li>
|
||||
<li>Staging and production reliability</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Core Experience</h2>
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Founder & Lead Developer</h3>
|
||||
<p class="entry__org">MandelBlog</p>
|
||||
</div>
|
||||
<p class="entry__meta">Ongoing</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Built a reusable Django/Wagtail/Django Oscar platform that
|
||||
accelerated client website and ecommerce delivery through shared
|
||||
architecture and automation.
|
||||
</li>
|
||||
<li>
|
||||
Built an automated onboarding system that provisions repositories,
|
||||
Jenkins jobs, staging environments, SSL certificates, and
|
||||
deployment tracking with minimal manual intervention.
|
||||
</li>
|
||||
<li>
|
||||
Implemented Elasticsearch-powered search infrastructure for
|
||||
products, categories, and content.
|
||||
</li>
|
||||
<li>
|
||||
Designed deployment infrastructure using Jenkins, SaltStack, and
|
||||
Linux to improve deployment consistency, traceability, and
|
||||
rollback capability across staging and production.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Internship / Developer Experience</h3>
|
||||
<p class="entry__org">
|
||||
<a href="https://highbiza.nl/">Highbiza</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="entry__meta">1+ year</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Gained real-world Django, Wagtail, Django Oscar, plugin, and
|
||||
ecommerce platform experience in a production-oriented setting.
|
||||
</li>
|
||||
<li>
|
||||
Built practical exposure to project delivery workflows that later
|
||||
informed MandelBlog platform engineering and deployment thinking.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<footer class="section footer-meta">
|
||||
<p>
|
||||
Education: Diploma in Computer Engineering (Ukraine) |
|
||||
Languages: English (Fluent), Russian (Intermediate), Dutch (Basic /
|
||||
Working proficiency) | Reference available: Geertjan, Highbiza,
|
||||
<a href="tel:+31652362105">+31 652362105</a>
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
361
motolani-cv-template/index.html
Normal file
361
motolani-cv-template/index.html
Normal file
@@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Motolani Olaiya | Founder & Senior Python/Django Developer | Platform Engineer
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Achievement-focused CV for Motolani Olaiya, founder of MandelBlog and senior Python/Django developer specializing in ecommerce, CMS platforms, search, CI/CD, and deployment automation."
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="stylesheet" href="css/print.css" media="print" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="resume">
|
||||
<header class="hero">
|
||||
<div class="hero__identity">
|
||||
<p class="eyebrow">
|
||||
Founder & Senior Python/Django Developer | Platform Engineer |
|
||||
Ecommerce & CMS Specialist
|
||||
</p>
|
||||
<h1>Motolani Olaiya</h1>
|
||||
<p class="headline">
|
||||
Experienced in building scalable ecommerce platforms, CMS systems,
|
||||
deployment infrastructure, onboarding automation, search platforms,
|
||||
and reusable software architectures using Python, Django, Wagtail,
|
||||
Django Oscar, Elasticsearch, Jenkins, and SaltStack.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="hero__meta">
|
||||
<li>Preferred name: Mandel</li>
|
||||
<li>Location: Netherlands</li>
|
||||
<li>Phone: <a href="tel:+310653263426">+31 0653263426</a></li>
|
||||
<li>
|
||||
Email:
|
||||
<a href="mailto:mandeleolaiya15@icloud.com"
|
||||
>mandeleolaiya15@icloud.com</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
LinkedIn:
|
||||
<a href="https://www.linkedin.com/in/motolani-olaiya-ba2151296/"
|
||||
>motolani-olaiya-ba2151296</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Portfolio:
|
||||
<a href="https://www.mandelblog.com/">MandelBlog platform work</a>
|
||||
</li>
|
||||
<li>Git platform: Private Gitea</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<h2>Professional Summary</h2>
|
||||
<p>
|
||||
Founder and senior Python/Django developer with production experience
|
||||
building backend systems, ecommerce platforms, CMS products, search
|
||||
infrastructure, deployment workflows, and shared engineering tooling.
|
||||
Strongest fit is in senior Django, Python, platform engineering,
|
||||
ecommerce engineering, Wagtail, and technical consulting roles that
|
||||
need practical architecture ownership and hands-on delivery.
|
||||
</p>
|
||||
<p>
|
||||
Built MandelBlog as a reusable multi-project platform rather than a
|
||||
single-codebase product, enabling faster client onboarding,
|
||||
repeatable deployment workflows, reusable plugin composition,
|
||||
multilingual website delivery, search integration, monitoring, and
|
||||
production support with minimal manual intervention.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Technical Skills</h2>
|
||||
<dl class="stack-list">
|
||||
<div>
|
||||
<dt>Backend</dt>
|
||||
<dd>Python, Django 5, Django Oscar, REST APIs</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>CMS & Ecommerce</dt>
|
||||
<dd>Wagtail, Django Oscar, Elasticsearch</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>DevOps & Platform</dt>
|
||||
<dd>Jenkins, SaltStack, Linux, Sentry, CI/CD</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Frontend</dt>
|
||||
<dd>HTML, CSS, SCSS, Bootstrap 5</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Infrastructure & Security</dt>
|
||||
<dd>OAuth2, OpenID Connect, Git, Private Gitea</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Priority Roles</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Senior Django Developer</li>
|
||||
<li>Senior Python Developer</li>
|
||||
<li>Platform Engineer</li>
|
||||
<li>Django Oscar Ecommerce Developer</li>
|
||||
<li>Wagtail Developer</li>
|
||||
<li>Technical Consultant</li>
|
||||
<li>Technical Founder</li>
|
||||
<li>Backend Developer</li>
|
||||
<li>Full Stack Developer</li>
|
||||
<li>DevOps / CI-CD Engineer</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Work Experience</h2>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Founder & Lead Developer</h3>
|
||||
<p class="entry__org">MandelBlog</p>
|
||||
</div>
|
||||
<p class="entry__meta">Netherlands • Ongoing</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Designed and developed a reusable Django/Wagtail/Django Oscar
|
||||
platform used to accelerate client website and ecommerce delivery
|
||||
through reusable architecture, plugin composition, and automation.
|
||||
</li>
|
||||
<li>
|
||||
Built an automated onboarding system that provisions repositories,
|
||||
Jenkins jobs, staging environments, SSL certificates, and
|
||||
deployment tracking with minimal manual intervention.
|
||||
</li>
|
||||
<li>
|
||||
Designed deployment infrastructure using Jenkins, SaltStack,
|
||||
Linux, and release-based deployment workflows to improve
|
||||
deployment consistency, traceability, rollback capability, and
|
||||
runtime verification.
|
||||
</li>
|
||||
<li>
|
||||
Delivered multilingual Wagtail and Django Oscar implementations
|
||||
with attention to SEO consistency, canonical correctness, cookie
|
||||
compliance, and maintainable admin workflows.
|
||||
</li>
|
||||
<li>
|
||||
Strengthened platform reliability by resolving onboarding,
|
||||
staging, and production blockers across Sentry, template
|
||||
generation, Jenkins handoff, SSL, package compatibility, runtime
|
||||
provisioning, and deployment truthfulness.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Python / Django Developer</h3>
|
||||
<p class="entry__org">Independent Product & Client Delivery Work</p>
|
||||
</div>
|
||||
<p class="entry__meta">Project-based</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Built backend and full-stack web solutions focused on ecommerce,
|
||||
CMS delivery, search, admin usability, and reliable deployment
|
||||
into staging and production environments.
|
||||
</li>
|
||||
<li>
|
||||
Worked end to end across application code, infrastructure,
|
||||
monitoring, CI/CD, plugin integration, and live debugging rather
|
||||
than treating backend development and operations as separate
|
||||
silos.
|
||||
</li>
|
||||
<li>
|
||||
Applied OpenAI integrations to product-oriented use cases such as
|
||||
translation, product description workflows, and content
|
||||
enrichment, with emphasis on practical output rather than demo
|
||||
features.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<div class="entry__head">
|
||||
<div>
|
||||
<h3>Internship / Developer Experience</h3>
|
||||
<p class="entry__org">
|
||||
<a href="https://highbiza.nl/">Highbiza</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="entry__meta">1+ year</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Gained real-world development experience in Django, Wagtail,
|
||||
Django Oscar, reusable plugins, ecommerce platforms, and
|
||||
production-oriented workflows.
|
||||
</li>
|
||||
<li>
|
||||
Worked within an existing delivery environment where CMS,
|
||||
ecommerce, and plugin-based architecture were applied to real
|
||||
project needs rather than isolated tutorial work.
|
||||
</li>
|
||||
<li>
|
||||
Built practical exposure to platform structure, project
|
||||
implementation standards, and day-to-day engineering execution
|
||||
that later informed the MandelBlog platform approach.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Platform Engineering & Architecture</h2>
|
||||
<div class="callout">
|
||||
<ul>
|
||||
<li>
|
||||
Designed reusable plugin architecture supporting multiple
|
||||
websites and ecommerce projects.
|
||||
</li>
|
||||
<li>
|
||||
Standardized project templates, package baselines, onboarding
|
||||
workflows, and deployment verification logic.
|
||||
</li>
|
||||
<li>
|
||||
Built CI/CD processes and operational tooling around Jenkins,
|
||||
SaltStack, Linux, Gitea, and Sentry.
|
||||
</li>
|
||||
<li>
|
||||
Managed staging and production environments with attention to
|
||||
rollback, health checks, traceability, and deployment safety.
|
||||
</li>
|
||||
<li>
|
||||
Defined technical standards for future projects through reusable
|
||||
platform decisions instead of one-off project fixes.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2>Selected Projects</h2>
|
||||
|
||||
<article class="entry">
|
||||
<h3>MandelBlog Platform</h3>
|
||||
<p>
|
||||
Built a shared delivery platform that reduced repeated project
|
||||
setup work by centralizing Django, Wagtail, Django Oscar,
|
||||
plugin-driven architecture, CI/CD, and deployment automation into a
|
||||
reusable engineering baseline.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<h3>Customer Onboarding Platform</h3>
|
||||
<p>
|
||||
Automated the path from project creation to staging readiness by
|
||||
connecting repository provisioning, Jenkins job generation, staging
|
||||
environment setup, SSL issuance, and deployment state tracking
|
||||
while keeping production approval-gated.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<h3>Ecommerce Platform</h3>
|
||||
<p>
|
||||
Led Django Oscar-based ecommerce engineering across search,
|
||||
catalogue structure, B2B-friendly workflows, and plugin-driven
|
||||
feature composition for reusable commerce delivery.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<h3>AI Product Description System</h3>
|
||||
<p>
|
||||
Built AI-assisted content generation and product enrichment
|
||||
workflows to support ecommerce operations with editable,
|
||||
business-focused output.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<h3>Search Platform</h3>
|
||||
<p>
|
||||
Implemented Elasticsearch-powered search infrastructure for
|
||||
products, categories, and content, improving discoverability and
|
||||
search relevance across ecommerce and CMS use cases.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="entry">
|
||||
<h3>Deployment Platform</h3>
|
||||
<p>
|
||||
Standardized staging and production delivery through Jenkins,
|
||||
SaltStack, Linux, and release-based workflows that improved
|
||||
deployment consistency, traceability, environment provisioning, and
|
||||
rollback capability.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Education</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Diploma in Computer Engineering — Ukraine</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Certifications</h2>
|
||||
<ul class="plain-list">
|
||||
<li>Diploma in Project Management</li>
|
||||
<li>Diploma in Human Resources</li>
|
||||
<li>Diploma in Business Administration</li>
|
||||
<li>Diploma in Python Programming</li>
|
||||
<li>Diploma in Sales Management</li>
|
||||
<li>Diploma in Fitness Coaching, Gym Workouts & Bodybuilding</li>
|
||||
<li>Diploma in HACCP</li>
|
||||
<li>Diploma in Web Accessibility</li>
|
||||
<li>HubSpot Content Marketing Certification</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--grid">
|
||||
<div class="panel">
|
||||
<h2>Languages</h2>
|
||||
<ul class="plain-list">
|
||||
<li>English — Fluent</li>
|
||||
<li>Russian — Intermediate</li>
|
||||
<li>Dutch — Basic / Working proficiency</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Links</h2>
|
||||
<ul class="plain-list">
|
||||
<li><a href="https://www.mandelblog.com/">MandelBlog</a></li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/motolani-olaiya-ba2151296/"
|
||||
>LinkedIn Profile</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Reference available: Geertjan, Highbiza —
|
||||
<a href="tel:+31652362105">+31 652362105</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
438
motolani-cv-template/scss/styles.scss
Normal file
438
motolani-cv-template/scss/styles.scss
Normal file
@@ -0,0 +1,438 @@
|
||||
$bg: #eef2f7;
|
||||
$surface: #ffffff;
|
||||
$surface-soft: #f8fafc;
|
||||
$text: #182131;
|
||||
$muted: #5f6c83;
|
||||
$line: #d7deea;
|
||||
$line-strong: #c7d1e1;
|
||||
$accent: #2349b6;
|
||||
$accent-soft: #eef3ff;
|
||||
$shadow: 0 22px 54px rgba(16, 24, 40, 0.08);
|
||||
$print-text: #111111;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: $text;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(35, 73, 182, 0.06), transparent 24rem),
|
||||
$bg;
|
||||
line-height: 1.6;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
text-underline-offset: 0.16em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
dd {
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
.resume {
|
||||
width: min(1080px, calc(100% - 2rem));
|
||||
margin: 2rem auto;
|
||||
padding: 2.35rem;
|
||||
background: $surface;
|
||||
border: 1px solid $line;
|
||||
border-radius: 18px;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
.resume--compact {
|
||||
width: min(980px, calc(100% - 2rem));
|
||||
padding: 2rem 2.1rem;
|
||||
}
|
||||
|
||||
.resume--two-page {
|
||||
width: min(1020px, calc(100% - 2rem));
|
||||
padding: 2.1rem 2.15rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
|
||||
gap: 1.75rem;
|
||||
align-items: start;
|
||||
padding-bottom: 1.8rem;
|
||||
border-bottom: 1px solid $line-strong;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
margin: 0.35rem 0 0.9rem;
|
||||
font-size: clamp(2.15rem, 4vw, 3.15rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: $accent;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.headline {
|
||||
margin: 0;
|
||||
max-width: 58ch;
|
||||
color: $muted;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
margin: 0;
|
||||
padding: 1.1rem 1.15rem;
|
||||
list-style: none;
|
||||
background: linear-gradient(180deg, $surface-soft, $accent-soft);
|
||||
border: 1px solid #d5def5;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.hero__meta li {
|
||||
max-width: none;
|
||||
color: $text;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 1.7rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
margin: 0 0 0.95rem;
|
||||
color: #23304a;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.callout {
|
||||
padding: 1.15rem 1.2rem;
|
||||
border: 1px solid $line;
|
||||
border-radius: 14px;
|
||||
background: $surface-soft;
|
||||
}
|
||||
|
||||
.panel h2,
|
||||
.callout h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tag-list,
|
||||
.plain-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.plain-list li + li {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.58rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tag-list li {
|
||||
max-width: none;
|
||||
padding: 0.42rem 0.76rem;
|
||||
border: 1px solid #cfdaef;
|
||||
border-radius: 999px;
|
||||
background: $accent-soft;
|
||||
color: #243657;
|
||||
font-size: 0.91rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stack-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stack-list div + div {
|
||||
margin-top: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
border-top: 1px solid #e8edf5;
|
||||
}
|
||||
|
||||
.stack-list dt {
|
||||
color: #243657;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stack-list dd {
|
||||
margin: 0.14rem 0 0;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 1.05rem 0;
|
||||
border-top: 1px solid $line;
|
||||
}
|
||||
|
||||
.entry:first-of-type {
|
||||
border-top: 0;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.entry h3 {
|
||||
margin: 0;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.entry p,
|
||||
.entry ul {
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.entry ul {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.entry li + li {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.entry__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.entry__org {
|
||||
margin-top: 0.2rem;
|
||||
color: $muted;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.entry__meta {
|
||||
color: $muted;
|
||||
font-size: 0.94rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.callout ul {
|
||||
margin: 0;
|
||||
padding-left: 1.15rem;
|
||||
}
|
||||
|
||||
.callout li + li {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
border-top: 1px solid $line;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-meta p {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
color: $muted;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.resume--compact {
|
||||
.hero {
|
||||
gap: 1.3rem;
|
||||
padding-bottom: 1.45rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 1.35rem;
|
||||
}
|
||||
|
||||
.headline {
|
||||
max-width: 50ch;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.callout {
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 0.9rem 0;
|
||||
}
|
||||
|
||||
.entry li + li {
|
||||
margin-top: 0.32rem;
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.resume--two-page {
|
||||
.section {
|
||||
padding-top: 1.45rem;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.callout {
|
||||
padding: 1rem 1.05rem;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 0.88rem 0;
|
||||
}
|
||||
|
||||
.entry li + li {
|
||||
margin-top: 0.34rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.resume,
|
||||
.resume--compact,
|
||||
.resume--two-page {
|
||||
width: min(100%, calc(100% - 1rem));
|
||||
margin: 0.5rem auto;
|
||||
padding: 1.35rem;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.section--grid,
|
||||
.entry__head {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.entry__head {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.entry__meta {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.hero__meta {
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: #ffffff;
|
||||
color: $print-text;
|
||||
font-size: 10.7pt;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $print-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resume,
|
||||
.resume--compact,
|
||||
.resume--two-page {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
gap: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.hero__identity h1 {
|
||||
margin-bottom: 0.45rem;
|
||||
font-size: 22pt;
|
||||
}
|
||||
|
||||
.headline,
|
||||
.entry__org,
|
||||
.entry__meta,
|
||||
.stack-list dd {
|
||||
color: $print-text;
|
||||
}
|
||||
|
||||
.hero__meta,
|
||||
.panel,
|
||||
.callout {
|
||||
background: transparent;
|
||||
border: 1px solid #bdbdbd;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 0.9rem;
|
||||
}
|
||||
|
||||
.section,
|
||||
.panel,
|
||||
.entry,
|
||||
.callout,
|
||||
.hero {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.tag-list li {
|
||||
background: transparent;
|
||||
border-color: #999999;
|
||||
color: $print-text;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user