Volvo Intelligence Hub — Hoda Rezvanjoo
/* ============ Volvo case study — editorial layout ============ */
/* tiny brand line at top */
.topline {
height: 4px;
background:
linear-gradient(90deg,
transparent 0%,
rgba(237,122,28,0.0) 20%,
var(–accent) 38%,
var(–accent) 62%,
rgba(237,122,28,0.0) 80%,
transparent 100%);
}
/* hero */
.hero {
padding: 60px 0 0;
text-align: left;
}
.hero .eyebrow {
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(–ink-3);
margin-bottom: 36px;
display: flex;
align-items: center;
gap: 14px;
}
.hero .eyebrow .bar {
width: 28px;
height: 1px;
background: var(–accent);
}
h1.title {
font-family: ‘Source Serif 4’, serif;
font-weight: 300;
font-size: clamp(50px, 7vw, 104px);
line-height: 1.0;
letter-spacing: -0.025em;
color: var(–ink);
text-wrap: balance;
max-width: 14ch;
margin-bottom: 48px;
}
h1.title .word {
display: inline-block;
position: relative;
}
h1.title .word.swooshed::after {
content: ”;
position: absolute;
left: -2%;
right: -2%;
bottom: 0.04em;
height: 0.18em;
background-image: url(“data:image/svg+xml;utf8,”);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -1;
}
.hero .lede {
font-family: ‘Source Serif 4’, serif;
font-weight: 400;
font-size: 24px;
line-height: 1.5;
color: var(–ink-2);
max-width: 36ch;
margin-bottom: 40px;
}
.hero .lede .drop {
font-family: ‘Source Serif 4’, serif;
font-weight: 500;
color: var(–ink);
}
.hero .cta-row {
display: flex;
align-items: baseline;
gap: 28px;
flex-wrap: wrap;
margin-top: 8px;
}
/* meta line — single horizontal row with subtle dots */
.meta-line {
margin-top: 88px;
padding: 28px 0;
border-top: 1px solid var(–rule);
border-bottom: 1px solid var(–rule);
display: flex;
align-items: baseline;
gap: 36px;
flex-wrap: wrap;
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-size: 13px;
}
.meta-line .item {
display: flex;
align-items: baseline;
gap: 10px;
}
.meta-line .item .k {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 10px;
color: var(–ink-3);
}
.meta-line .item .v {
color: var(–ink);
font-weight: 500;
}
.meta-line .item + .item::before {
content: ‘·’;
color: var(–ink-4);
margin-right: 16px;
}
/* demo block — full container width, generous */
.demo-wrap { margin: 80px 0 24px; }
.demo {
position: relative;
background: #0e2540;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.demo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(ellipse at 30% 60%, rgba(237,122,28,0.18), transparent 55%),
linear-gradient(135deg, #0e2540 0%, #1a3556 100%);
color: rgba(255,255,255,0.55);
font-family: ‘Source Serif 4’, serif;
font-style: italic;
font-size: 16px;
letter-spacing: 0.02em;
}
.demo-corner {
position: absolute;
top: 24px; left: 28px;
display: flex;
align-items: center;
gap: 12px;
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-size: 10px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 500;
}
.demo-corner .dot {
width: 6px; height: 6px; background: var(–accent); border-radius: 50%;
}
.demo-cap {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 18px 4px 0;
font-family: ‘Source Serif 4’, serif;
font-style: italic;
font-size: 14px;
color: var(–ink-3);
}
.demo-cap .left em { color: var(–ink); font-style: italic; font-weight: 500; }
.demo-cap .right {
font-style: normal;
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* main reading section */
.reading {
padding: 100px 0 40px;
}
.reading-grid {
display: grid;
grid-template-columns: 1fr 260px;
gap: 96px;
}
@media (max-width: 920px) {
.reading-grid { grid-template-columns: 1fr; gap: 56px; }
}
.reading h2 {
font-family: ‘Source Serif 4’, serif;
font-weight: 400;
font-size: 38px;
line-height: 1.1;
letter-spacing: -0.018em;
color: var(–ink);
margin: 56px 0 24px;
text-wrap: balance;
}
.reading h2:first-of-type { margin-top: 0; }
.reading h2 em {
font-style: italic;
font-weight: 400;
color: var(–ink-2);
}
.reading h2 .word.swooshed {
display: inline-block;
position: relative;
}
.reading h2 .word.swooshed::after {
content: ”;
position: absolute;
left: -2%; right: -2%;
bottom: 0.06em;
height: 0.18em;
background-image: url(“data:image/svg+xml;utf8,”);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -1;
}
.reading p {
font-family: ‘Source Serif 4’, serif;
font-size: 19px;
line-height: 1.65;
color: var(–ink-2);
max-width: 60ch;
margin-bottom: 24px;
}
.reading p strong { color: var(–ink); font-weight: 600; }
.reading p em { color: var(–ink); }
/* features as numbered list — minimal */
.features-block {
margin-top: 56px;
}
.features-block .col-title {
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–ink-3);
margin-bottom: 28px;
}
.features {
display: flex;
flex-direction: column;
}
.feat {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid var(–rule);
align-items: baseline;
}
.feat:first-of-type { border-top: 1px solid var(–rule); }
.feat .n {
font-family: ‘Source Serif 4’, serif;
font-style: italic;
font-weight: 400;
font-size: 26px;
color: var(–accent);
letter-spacing: -0.01em;
line-height: 1;
}
.feat .t {
font-family: ‘Source Serif 4’, serif;
font-size: 19px;
line-height: 1.5;
color: var(–ink);
}
/* aside — sticky brief */
.aside {
position: sticky;
top: 40px;
align-self: start;
}
.aside-card {
padding: 24px 0;
border-top: 2px solid var(–ink);
}
.aside-card .title {
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–ink);
margin-bottom: 24px;
}
.aside-row {
padding: 16px 0;
border-bottom: 1px solid var(–rule);
}
.aside-row:last-child { border-bottom: 0; }
.aside-row .k {
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–ink-3);
font-weight: 500;
margin-bottom: 6px;
}
.aside-row .v {
font-family: ‘Source Serif 4’, serif;
font-size: 16px;
line-height: 1.45;
color: var(–ink);
}
.aside-row .v em { font-style: italic; color: var(–ink-2); }
/* pager — very minimal */
.pager {
margin-top: 120px;
padding: 40px 0;
border-top: 1px solid var(–rule);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.pager .col { display: flex; flex-direction: column; gap: 10px; transition: opacity 0.2s ease; }
.pager .col.next { text-align: right; align-items: flex-end; }
.pager .col .lbl {
font-family: ‘Plus Jakarta Sans’, sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–ink-3);
font-weight: 500;
}
.pager .col .lbl .arr { color: var(–accent); }
.pager .col .ttl {
font-family: ‘Source Serif 4’, serif;
font-weight: 400;
font-size: 28px;
line-height: 1.15;
color: var(–ink);
letter-spacing: -0.012em;
text-wrap: balance;
}
.pager .col .ttl em { font-style: italic; }
.pager .col:hover .ttl { color: var(–accent); }
Case study — Business Intelligence
Volvo Intelligence Hub.
This project demonstrates my ability to turn disconnected sales and inventory data into actionable business intelligence. Designed as a simulated case for Volvo Trucks, the dashboard enables dynamic filtering, KPI tracking, and automated insights — all hosted via a browser-based interface built in Streamlit. It reflects the kind of work I aim to deliver as an Insight Analyst: clear, functional, and decision-ready.
Live preview
800 × 371
Project Context.
Use Case. Simulated insight solution for Volvo Trucks (2017–2018 sales data).
Role. Reporting Analyst (self-directed simulation).
Challenge. Inconsistent data across Excel files, lack of visual sales tracking, no unified KPI structure.
Goal. Build a lightweight browser-based tool that informs both sales performance and inventory risk.
Regional and annual filters — model, year, category.
KPI-driven insights with built-in logic for high-risk inventory.
Visual comparison of sales volume vs stock levels.
Auto-generated written insights, tailored to selected filters.
Accessible and interactive front-end built entirely with Python + Streamlit.
← Previous case
Sales & Performance Dashboards
Next case →
User Funnel Analysis & KPI Reporting
/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js
Insight 