Film Strip Portfolio
Horizontal portfolio reel with sprocket holes top and bottom, gradient project tiles with year stickers, role line, and tech-stack chips. Built for design portfolios, case-study indexes, and creative project galleries.
Film Strip Portfolio the 23rd of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl23-wrap">
<div class="tl23-holes">
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
</div>
<div class="tl23-strip">
<div class="tl23-frame">
<div class="tl23-num">001 ▸</div>
<div class="tl23-img">
<div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">NOVA</div>
<div class="tl23-year-tag">2026</div>
</div>
<div class="tl23-title">Nova Design System</div>
<div class="tl23-role">Lead Designer</div>
<div class="tl23-tech"><span>Figma</span><span>Tokens</span><span>React</span></div>
</div>
<div class="tl23-frame">
<div class="tl23-num">002 ▸</div>
<div class="tl23-img">
<div class="tl23-img-inner" style="background:linear-gradient(135deg,#0d2137,#0a3d2b)">ATLAS</div>
<div class="tl23-year-tag">2025</div>
</div>
<div class="tl23-title">Atlas Data Viz</div>
<div class="tl23-role">UX + Dev</div>
<div class="tl23-tech"><span>D3.js</span><span>WebGL</span><span>SVG</span></div>
</div>
<div class="tl23-frame">
<div class="tl23-num">003 ▸</div>
<div class="tl23-img">
<div class="tl23-img-inner" style="background:linear-gradient(135deg,#2e1a0a,#1a0a2e)">ORBIT</div>
<div class="tl23-year-tag">2024</div>
</div>
<div class="tl23-title">Orbit Mobile App</div>
<div class="tl23-role">Product Design</div>
<div class="tl23-tech"><span>iOS</span><span>Swift</span><span>Haptics</span></div>
</div>
<div class="tl23-frame">
<div class="tl23-num">004 ▸</div>
<div class="tl23-img">
<div class="tl23-img-inner" style="background:linear-gradient(135deg,#0a2e1a,#2e0a1a)">DUNE</div>
<div class="tl23-year-tag">2023</div>
</div>
<div class="tl23-title">Dune Brand Identity</div>
<div class="tl23-role">Brand + Motion</div>
<div class="tl23-tech"><span>After Effects</span><span>AI</span></div>
</div>
<div class="tl23-frame">
<div class="tl23-num">005 ▸</div>
<div class="tl23-img">
<div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a2e0a,#0a1a2e)">LOOP</div>
<div class="tl23-year-tag">2022</div>
</div>
<div class="tl23-title">Loop CMS Platform</div>
<div class="tl23-role">Full-stack Design</div>
<div class="tl23-tech"><span>Next.js</span><span>CMS</span></div>
</div>
</div>
<div class="tl23-holes">
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
<div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
</div>
</div> .tl23-wrap {
background: #111;
position: relative;
padding: 0;
overflow: hidden;
border-radius: 3px;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl23-holes {
display: flex;
gap: 1rem;
padding: 0.4rem 1rem;
background: #111;
}
.tl23-hole {
width: 18px;
height: 12px;
background: #0c0c0c;
border-radius: 2px;
flex-shrink: 0;
}
.tl23-strip {
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
background: #000;
}
.tl23-strip::-webkit-scrollbar { display: none; }
.tl23-frame {
flex: 0 0 220px;
padding: 1.5rem 1rem;
background: #141414;
border-right: 2px solid #000;
position: relative;
transition: background 0.2s;
}
.tl23-frame:hover { background: #1a1a1a; }
.tl23-num {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
color: #333;
letter-spacing: 0.2em;
margin-bottom: 0.75rem;
}
.tl23-img {
width: 100%;
aspect-ratio: 16/10;
background: #1e1e1e;
border-radius: 2px;
margin-bottom: 0.75rem;
overflow: hidden;
position: relative;
}
.tl23-img-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
font-size: 2.5rem;
opacity: 0.18;
letter-spacing: 0.1em;
color: #fff;
}
.tl23-year-tag {
position: absolute;
top: 0.4rem;
right: 0.4rem;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.5rem;
background: rgba(0,0,0,0.7);
color: #888;
padding: 0.1rem 0.35rem;
border-radius: 2px;
letter-spacing: 0.1em;
}
.tl23-title {
font-family: 'Syne', 'Inter Tight', sans-serif;
font-size: 0.85rem;
font-weight: 700;
color: #d4d0cb;
margin-bottom: 0.2rem;
line-height: 1.2;
}
.tl23-role {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
color: #555;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tl23-tech {
margin-top: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.tl23-tech span {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.5rem;
color: #444;
border: 1px solid #2a2a2a;
padding: 0.1rem 0.35rem;
border-radius: 2px;
letter-spacing: 0.05em;
}