#sbm-portfolio {
–concrete: #2a2825;
–slab: #1c1b19;
–dust: #3d3a36;
–chalk: #f0ece4;
–ghost: rgba(240,236,228,0.22);
–ghost-mid: rgba(240,236,228,0.45);
–rust: #e84e00;
–rust-d: #b83c00;
–rule: rgba(240,236,228,0.10);
–rule-mid: rgba(240,236,228,0.06);
–display: ‘Arial Black’, ‘Helvetica Neue’, Arial, sans-serif;
–mono: ‘Space Mono’, ‘Courier New’, monospace;
–sans: ‘Helvetica Neue’, Helvetica, ‘Inter’, Arial, sans-serif;
–nav-h: 50px;
–ease: cubic-bezier(0.4, 0, 0.2, 1);
background: var(–concrete);
color: var(–chalk);
font-family: var(–sans);
font-weight: 300;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
position: relative;
}
@import url(‘https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@200;300;400&display=swap’);
#sbm-portfolio *, #sbm-portfolio *::before, #sbm-portfolio *::after { box-sizing: border-box; margin: 0; padding: 0; }
#sbm-portfolio { scroll-behavior: smooth; }
/* grain overlay */
#sbm-portfolio::before {
content: ”;
position: fixed; inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.055;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 200 200′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.75′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23n)’/%3E%3C/svg%3E”);
background-repeat: repeat;
background-size: 160px;
}
#sbm-portfolio .tex { position: relative; }
#sbm-portfolio .tex::after {
content: ”;
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.04;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 400 400′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’t’%3E%3CfeTurbulence type=’turbulence’ baseFrequency=’0.3′ numOctaves=’6′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23t)’/%3E%3C/svg%3E”);
background-size: 320px;
mix-blend-mode: overlay;
}
#sbm-portfolio .grid-bg {
background-image:
linear-gradient(var(–rule-mid) 1px, transparent 1px),
linear-gradient(90deg, var(–rule-mid) 1px, transparent 1px);
background-size: 40px 40px;
}
#sbm-portfolio nav {
position: fixed;
top: 0; left: 0; right: 0;
height: var(–nav-h);
display: flex;
align-items: stretch;
z-index: 500;
background: var(–slab);
border-bottom: 1px solid var(–rule);
}
#sbm-portfolio .nav-brand {
background: var(–rust);
height: 100%;
display: flex;
align-items: center;
padding: 0 22px;
cursor: pointer;
flex-shrink: 0;
position: relative;
}
#sbm-portfolio .nav-brand::after {
content: ”;
position: absolute;
top: 8px; right: -1px;
width: 1px; height: calc(100% – 16px);
background: rgba(0,0,0,0.25);
}
#sbm-portfolio .nav-name {
font-family: var(–display);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–chalk);
cursor: pointer;
transition: letter-spacing 0.25s var(–ease);
}
#sbm-portfolio .nav-brand:hover .nav-name { letter-spacing: 0.28em; }
#sbm-portfolio .nav-annotation {
font-family: var(–mono);
font-size: 8px;
color: var(–ghost);
letter-spacing: 0.08em;
align-self: center;
padding: 0 20px;
border-left: 1px solid var(–rule);
line-height: 1;
white-space: nowrap;
}
#sbm-portfolio .nav-links {
display: flex;
list-style: none;
margin-left: auto;
height: 100%;
}
#sbm-portfolio .nav-links li { height: 100%; }
#sbm-portfolio .nav-links a {
font-family: var(–mono);
font-size: 9px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: var(–ghost-mid);
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
padding: 0 22px;
border-left: 1px solid var(–rule);
transition: color 0.2s, background 0.2s, letter-spacing 0.2s;
position: relative;
}
#sbm-portfolio .nav-links a:hover {
color: var(–chalk);
font-weight: 700;
letter-spacing: 0.26em;
background: rgba(232,78,0,0.12);
}
#sbm-portfolio .nav-links a:hover::before {
content: ”;
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(–rust);
}
#sbm-portfolio #music-player {
position: fixed;
bottom: 0; right: 0;
z-index: 400;
display: flex;
align-items: center;
background: var(–slab);
border-top: 1px solid var(–rule);
border-left: 1px solid var(–rule);
height: 42px;
}
#sbm-portfolio .player-label {
font-family: var(–mono);
font-size: 7px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(–rust);
padding: 0 12px;
white-space: nowrap;
border-right: 1px solid var(–rule);
height: 100%;
display: flex;
align-items: center;
}
#sbm-portfolio .player-track {
font-family: var(–mono);
font-size: 8px;
color: var(–ghost-mid);
padding: 0 12px;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.3s;
}
#sbm-portfolio .player-track.fade { opacity: 0; }
#sbm-portfolio #prev-btn, #sbm-portfolio #next-btn {
background: transparent;
border: none;
border-left: 1px solid var(–rule);
width: 34px; height: 100%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
#sbm-portfolio #prev-btn:hover, #sbm-portfolio #next-btn:hover { background: rgba(232,78,0,0.15); }
#sbm-portfolio #prev-btn svg, #sbm-portfolio #next-btn svg { width: 9px; height: 9px; fill: var(–ghost-mid); }
#sbm-portfolio #play-btn {
background: transparent;
border: none;
border-left: 1px solid var(–rule);
width: 42px; height: 100%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
#sbm-portfolio #play-btn:hover { background: var(–rust); }
#sbm-portfolio #play-btn svg { width: 11px; height: 11px; fill: var(–chalk); }
#sbm-portfolio .player-bar-wrap {
width: 80px; height: 1px;
background: var(–rule);
cursor: pointer;
margin: 0 12px;
position: relative;
}
#sbm-portfolio .player-bar-fill {
height: 100%;
background: var(–rust);
width: 0%;
transition: width 0.5s linear;
pointer-events: none;
}
#sbm-portfolio #home {
position: relative;
width: 100%; height: 100vh;
overflow: hidden;
background: var(–slab);
}
#sbm-portfolio .slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 1.4s var(–ease);
background-size: cover;
background-position: center;
}
#sbm-portfolio .slide.active { opacity: 1; }
#sbm-portfolio .slide-1 { background-color: #1a1816; background-image: url(‘IMG_2948.jpeg’); }
#sbm-portfolio .slide-2 { background-color: #1d1c1a; background-image: url(‘IMG_3259.jpeg’); }
#sbm-portfolio .slide-3 { background-color: #181614; background-image: url(‘IMG_3534.jpeg’); }
#sbm-portfolio .slide-4 { background-color: #1b1a18; background-image: url(‘IMG_1901.jpeg’); }
#sbm-portfolio .slide-overlay {
position: absolute; inset: 0;
background: linear-gradient(160deg,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.15) 45%,
rgba(0,0,0,0.82) 100%);
}
#sbm-portfolio .hero-slab {
position: absolute;
top: 0; left: 0;
width: 10px; height: 100%;
background: var(–rust);
z-index: 3;
}
#sbm-portfolio .hero-scan {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,0.06) 3px,
rgba(0,0,0,0.06) 4px
);
}
#sbm-portfolio .hero-ghost-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: var(–display);
font-size: clamp(120px, 20vw, 220px);
font-weight: 800;
letter-spacing: -0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.035);
white-space: nowrap;
z-index: 1;
pointer-events: none;
user-select: none;
}
#sbm-portfolio .hero-ref {
position: absolute;
top: calc(var(–nav-h) + 18px);
right: 18px;
z-index: 3;
text-align: right;
}
#sbm-portfolio .hero-ref span {
display: block;
font-family: var(–mono);
font-size: 8px;
color: var(–ghost-mid);
letter-spacing: 0.12em;
line-height: 1.9;
}
#sbm-portfolio .hero-ref .ref-orange { color: var(–rust); }
#sbm-portfolio .hero-text {
position: absolute;
bottom: 64px; left: 40px; right: 40px;
z-index: 3;
}
#sbm-portfolio .hero-pre {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–ghost-mid);
margin-bottom: 10px;
}
#sbm-portfolio .hero-title {
font-family: var(–display);
font-size: clamp(54px, 9vw, 114px);
font-weight: 800;
line-height: 0.88;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(–chalk);
}
#sbm-portfolio .hero-title .hl { color: var(–rust); }
#sbm-portfolio .hero-sub {
font-family: var(–sans);
font-size: 11px;
font-weight: 200;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–ghost-mid);
margin-top: 20px;
}
#sbm-portfolio .slide-counter {
position: absolute;
bottom: 72px; right: 40px;
font-family: var(–mono);
font-size: 9px;
letter-spacing: 0.14em;
color: var(–ghost);
z-index: 3;
}
#sbm-portfolio #slide-num { color: var(–rust); font-weight: 700; }
#sbm-portfolio .slide-dots {
position: absolute;
bottom: 28px; left: 40px;
display: flex; gap: 4px;
z-index: 3;
}
#sbm-portfolio .dot {
width: 16px; height: 2px;
background: var(–ghost);
transition: background 0.35s, width 0.35s var(–ease);
cursor: pointer;
}
#sbm-portfolio .dot:hover { background: var(–ghost-mid); }
#sbm-portfolio .dot.active { background: var(–rust); width: 44px; }
#sbm-portfolio .page-section { display: none; min-height: 100vh; }
#sbm-portfolio .page-section.visible { display: block; }
#sbm-portfolio #folio {
background: var(–concrete);
padding-top: var(–nav-h);
}
#sbm-portfolio .folio-header {
padding: 36px 40px 28px;
border-bottom: 1px solid var(–rule);
position: relative;
overflow: hidden;
}
#sbm-portfolio .folio-header::before {
content: ’01’;
position: absolute;
right: 32px; bottom: -20px;
font-family: var(–display);
font-size: 160px;
font-weight: 800;
color: rgba(255,255,255,0.03);
line-height: 1;
pointer-events: none;
}
#sbm-portfolio .folio-header-meta {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–rust);
margin-bottom: 10px;
}
#sbm-portfolio .folio-header-title {
font-family: var(–display);
font-size: clamp(32px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(–chalk);
line-height: 0.92;
}
#sbm-portfolio .folio-header-note {
font-family: var(–sans);
font-size: 11px;
font-weight: 200;
letter-spacing: 0.2em;
color: var(–ghost-mid);
margin-top: 12px;
text-transform: uppercase;
}
#sbm-portfolio .project-block { border-bottom: 1px solid var(–rule); }
#sbm-portfolio .project-title-bar {
display: grid;
grid-template-columns: 10px 1fr auto;
align-items: stretch;
border-bottom: 1px solid var(–rule);
background: var(–slab);
position: relative;
overflow: hidden;
}
#sbm-portfolio .project-title-bar::after {
content: ”;
position: absolute; inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
0deg,
transparent, transparent 7px,
rgba(255,255,255,0.012) 7px, rgba(255,255,255,0.012) 8px
);
}
#sbm-portfolio .project-title-slab { background: var(–rust); width: 10px; }
#sbm-portfolio .project-title-inner { padding: 28px 40px; }
#sbm-portfolio .project-index {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(–rust);
margin-bottom: 8px;
}
#sbm-portfolio .project-name {
font-family: var(–display);
font-size: clamp(26px, 4vw, 52px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 0.92;
color: var(–chalk);
}
#sbm-portfolio .project-meta-col {
padding: 28px 40px;
border-left: 1px solid var(–rule);
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
min-width: 200px;
}
#sbm-portfolio .project-meta-item {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.14em;
color: var(–ghost-mid);
text-transform: uppercase;
}
#sbm-portfolio .project-meta-item span { color: var(–chalk); margin-left: 8px; }
#sbm-portfolio .project-desc-strip {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(–rule);
background: var(–concrete);
}
#sbm-portfolio .project-desc-left { padding: 32px 40px; border-right: 1px solid var(–rule); }
#sbm-portfolio .project-desc-right { padding: 32px 40px; }
#sbm-portfolio .project-caption-label {
font-family: var(–mono);
font-size: 7px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(–rust);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
#sbm-portfolio .project-caption-label::after {
content: ”;
display: block;
flex: 1;
height: 1px;
background: var(–rule);
}
#sbm-portfolio .project-desc-text {
font-family: var(–sans);
font-size: 13px;
font-weight: 300;
line-height: 1.85;
color: rgba(240,236,228,0.65);
}
#sbm-portfolio .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
#sbm-portfolio .project-tag {
font-family: var(–mono);
font-size: 7px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–ghost-mid);
border: 1px solid var(–rule);
padding: 4px 10px;
}
#sbm-portfolio .project-grid { display: grid; gap: 1px; background: var(–rule); }
#sbm-portfolio .project-grid.layout-2col { grid-template-columns: repeat(2, 1fr); }
#sbm-portfolio .project-grid.layout-3col { grid-template-columns: repeat(3, 1fr); }
#sbm-portfolio .proj-img { position: relative; overflow: hidden; cursor: pointer; background: var(–dust); }
#sbm-portfolio .proj-img.tall { aspect-ratio: 3/4; }
#sbm-portfolio .proj-img.wide { aspect-ratio: 16/9; }
#sbm-portfolio .proj-img.square { aspect-ratio: 1; }
#sbm-portfolio .proj-img.span2 { grid-column: span 2; }
#sbm-portfolio .proj-img.span3 { grid-column: span 3; }
#sbm-portfolio .proj-img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.9s var(–ease), filter 0.5s;
filter: saturate(0.8) contrast(1.04);
}
#sbm-portfolio .proj-img:hover img { transform: scale(1.04); filter: saturate(1) contrast(1); }
#sbm-portfolio .proj-img::before {
content: ”;
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: var(–rust);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.4s var(–ease);
z-index: 4;
}
#sbm-portfolio .proj-img:hover::before { transform: scaleY(1); }
#sbm-portfolio .proj-img-label {
position: absolute;
top: 14px; right: 14px;
font-family: var(–mono);
font-size: 7px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–ghost);
z-index: 3;
pointer-events: none;
}
#sbm-portfolio .proj-placeholder {
width: 100%; height: 100%;
min-height: 240px;
display: flex; align-items: center; justify-content: center;
background: var(–dust);
transition: background 0.4s;
position: relative;
}
#sbm-portfolio .proj-placeholder::before {
content: ”;
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(
45deg,
transparent, transparent 20px,
rgba(255,255,255,0.022) 20px, rgba(255,255,255,0.022) 21px
);
}
#sbm-portfolio .proj-img:hover .proj-placeholder { background: #46423d; }
#sbm-portfolio .placeholder-label {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–ghost-mid);
position: relative; z-index: 1;
}
#sbm-portfolio #about { background: var(–concrete); padding-top: var(–nav-h); }
#sbm-portfolio .about-header {
padding: 36px 40px 28px;
border-bottom: 1px solid var(–rule);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
position: relative;
overflow: hidden;
}
#sbm-portfolio .about-header::before {
content: ’02’;
position: absolute;
right: 32px; bottom: -20px;
font-family: var(–display);
font-size: 160px;
font-weight: 800;
color: rgba(255,255,255,0.03);
line-height: 1;
pointer-events: none;
}
#sbm-portfolio .about-header-left .meta {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.22em;
color: var(–rust);
text-transform: uppercase;
margin-bottom: 10px;
}
#sbm-portfolio .about-header-left h2 {
font-family: var(–display);
font-size: clamp(32px, 5vw, 64px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 0.92;
color: var(–chalk);
}
#sbm-portfolio .about-header-right {
font-family: var(–sans);
font-size: 11px;
font-weight: 200;
letter-spacing: 0.18em;
color: var(–ghost-mid);
text-transform: uppercase;
text-align: right;
line-height: 1.9;
flex-shrink: 0;
}
#sbm-portfolio .about-inner { display: grid; grid-template-columns: 320px 1fr; }
#sbm-portfolio .about-left { padding: 40px 32px 64px 40px; border-right: 1px solid var(–rule); }
#sbm-portfolio .about-right { padding: 40px 40px 64px; }
#sbm-portfolio .portrait-placeholder {
width: 100%; aspect-ratio: 3/4;
background: var(–dust);
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
position: relative; overflow: hidden;
}
#sbm-portfolio .portrait-placeholder::before {
content: ”;
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
-45deg, transparent, transparent 16px,
rgba(255,255,255,0.025) 16px, rgba(255,255,255,0.025) 17px
);
}
#sbm-portfolio .about-details { border-top: 1px solid var(–rust); }
#sbm-portfolio .detail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid var(–rule);
}
#sbm-portfolio .detail-label {
font-family: var(–mono);
font-size: 7px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–rust);
}
#sbm-portfolio .detail-value {
font-family: var(–sans);
font-size: 11px;
font-weight: 200;
color: var(–chalk);
text-align: right;
letter-spacing: 0.04em;
}
#sbm-portfolio .about-headline {
font-family: var(–display);
font-size: clamp(34px, 4.5vw, 58px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 0.92;
color: var(–chalk);
margin-bottom: 32px;
}
#sbm-portfolio .about-headline .hl { color: var(–rust); }
#sbm-portfolio .about-annotation {
font-family: var(–mono);
font-size: 8px;
color: var(–ghost-mid);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 16px;
}
#sbm-portfolio .about-body {
font-family: var(–sans);
font-size: 14px;
font-weight: 300;
line-height: 1.82;
color: rgba(240,236,228,0.72);
}
#sbm-portfolio .about-body p + p { margin-top: 18px; }
#sbm-portfolio .about-aside {
background: var(–rust);
padding: 22px 28px;
margin-top: 40px;
position: relative; overflow: hidden;
}
#sbm-portfolio .about-aside::before {
content: ”;
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
90deg, transparent, transparent 28px,
rgba(0,0,0,0.06) 28px, rgba(0,0,0,0.06) 29px
);
}
#sbm-portfolio .about-aside p {
font-family: var(–display);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(–chalk);
line-height: 1.5;
position: relative;
}
#sbm-portfolio .about-aside-note {
font-family: var(–mono);
font-size: 8px;
color: rgba(240,236,228,0.6);
letter-spacing: 0.18em;
margin-top: 10px;
position: relative;
}
#sbm-portfolio footer {
background: var(–slab);
border-top: 1px solid var(–rule);
display: grid;
grid-template-columns: 10px 1fr;
}
#sbm-portfolio .footer-slab { background: var(–rust); }
#sbm-portfolio .footer-inner {
padding: 28px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
#sbm-portfolio .footer-name {
font-family: var(–display);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–chalk);
}
#sbm-portfolio .footer-meta {
font-family: var(–mono);
font-size: 8px;
letter-spacing: 0.12em;
color: var(–ghost-mid);
text-align: right;
line-height: 2.1;
}
@media (max-width: 768px) {
#sbm-portfolio .nav-annotation { display: none; }
#sbm-portfolio .nav-links a { padding: 0 14px; }
#sbm-portfolio .hero-text { left: 22px; right: 22px; bottom: 64px; }
#sbm-portfolio .hero-ghost-text { display: none; }
#sbm-portfolio .hero-ref { display: none; }
#sbm-portfolio .folio-header, #sbm-portfolio .about-header { padding: 28px 24px 20px; }
#sbm-portfolio .project-title-bar { grid-template-columns: 6px 1fr; }
#sbm-portfolio .project-meta-col { display: none; }
#sbm-portfolio .project-title-inner { padding: 24px; }
#sbm-portfolio .project-desc-strip { grid-template-columns: 1fr; }
#sbm-portfolio .project-desc-left { border-right: none; border-bottom: 1px solid var(–rule); padding: 24px; }
#sbm-portfolio .project-desc-right { padding: 24px; }
#sbm-portfolio .project-grid.layout-2col { grid-template-columns: 1fr; }
#sbm-portfolio .project-grid.layout-3col { grid-template-columns: 1fr; }
#sbm-portfolio .proj-img.span2, #sbm-portfolio .proj-img.span3 { grid-column: span 1; }
#sbm-portfolio .about-inner { grid-template-columns: 1fr; }
#sbm-portfolio .about-left { border-right: none; border-bottom: 1px solid var(–rule); padding: 32px 24px; }
#sbm-portfolio .about-right { padding: 32px 24px; }
#sbm-portfolio .about-header { flex-direction: column; align-items: flex-start; gap: 12px; }
#sbm-portfolio .about-header-right { text-align: left; }
#sbm-portfolio footer { grid-template-columns: 6px 1fr; }
#sbm-portfolio .footer-inner { flex-direction: column; gap: 14px; padding: 24px; }
#sbm-portfolio .footer-meta { text-align: left; }
#sbm-portfolio #music-player .player-track { display: none; }
#sbm-portfolio #prev-btn, #sbm-portfolio #next-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#sbm-portfolio .slide { transition: none; }
}
Samuel
Projects &
BP · 01
BP · 02
BP · 03
Who
Space Is
(function() {
// ── Live clock ──────────────────────────────
function tick() {
const el = document.getElementById(‘hero-time’);
if (el) el.textContent = new Date().toTimeString().slice(0,8);
}
tick(); setInterval(tick, 1000);
// ── Slideshow ───────────────────────────────
const root = document.getElementById(‘sbm-portfolio’);
const slides = root.querySelectorAll(‘.slide’);
const dotsEl = root.querySelector(‘#dots’);
const slideNum = root.querySelector(‘#slide-num’);
const slideTotal = root.querySelector(‘#slide-total’);
let current = 0, slideTimer;
const INTERVAL = 5000;
slideTotal.textContent = String(slides.length).padStart(2,’0′);
slides.forEach((_, i) => {
const d = document.createElement(‘div’);
d.className = ‘dot’ + (i === 0 ? ‘ active’ : ”);
d.addEventListener(‘click’, () => goTo(i));
dotsEl.appendChild(d);
});
function goTo(n) {
slides[current].classList.remove(‘active’);
dotsEl.children[current].classList.remove(‘active’);
current = (n + slides.length) % slides.length;
slides[current].classList.add(‘active’);
dotsEl.children[current].classList.add(‘active’);
slideNum.textContent = String(current + 1).padStart(2,’0′);
clearInterval(slideTimer);
slideTimer = setInterval(() => goTo(current + 1), INTERVAL);
}
slideTimer = setInterval(() => goTo(current + 1), INTERVAL);
// ── Page switching (exposed globally for onclick handlers) ──
window.sbmShowPage = function(id) {
root.querySelectorAll(‘.page-section’).forEach(s => s.classList.remove(‘visible’));
const home = root.querySelector(‘#home’);
if (id === ‘home’) {
home.style.display = ‘block’;
window.scrollTo(0,0);
} else {
home.style.display = ‘none’;
root.querySelector(‘#’ + id).classList.add(‘visible’);
window.scrollTo(0,0);
}
};
// ── Music player — multi-track shuffle ──────
// ✏️ EDIT: replace src filenames with your actual Media Library URLs
const TRACKS = [
{ title: ‘Hero – Blaiq’, src: ‘Hero_Track_1.mp3’ },
{ title: ‘Track 2 – Artist’, src: ‘Track_2.mp3’ },
{ title: ‘Track 3 – Artist’, src: ‘Track_3.mp3’ },
{ title: ‘Track 4 – Artist’, src: ‘Track_4.mp3’ },
];
function shuffle(arr) {
const a = […arr];
for (let i = a.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
let queue = shuffle(TRACKS);
let qIdx = 0;
let playing = false;
const audio = root.querySelector(‘#audio’);
const playIcon = root.querySelector(‘#play-icon’);
const barFill = root.querySelector(‘#bar-fill’);
const seekBar = root.querySelector(‘#seek-bar’);
const trackEl = root.querySelector(‘#track-name’);
function loadTrack(idx) {
const t = queue[idx];
trackEl.classList.add(‘fade’);
setTimeout(() => {
trackEl.textContent = t.title;
trackEl.classList.remove(‘fade’);
}, 300);
audio.src = t.src;
barFill.style.width = ‘0%’;
if (playing) audio.play().catch(()=>{});
}
window.sbmNextTrack = function() {
qIdx = (qIdx + 1) % queue.length;
if (qIdx === 0) queue = shuffle(TRACKS);
loadTrack(qIdx);
};
window.sbmPrevTrack = function() {
qIdx = (qIdx – 1 + queue.length) % queue.length;
loadTrack(qIdx);
};
audio.addEventListener(‘ended’, window.sbmNextTrack);
window.sbmTogglePlay = function() {
if (playing) {
audio.pause();
playIcon.innerHTML = ”;
} else {
if (!audio.src || audio.src === window.location.href) loadTrack(qIdx);
audio.play().catch(()=>{});
playIcon.innerHTML = ”;
}
playing = !playing;
};
audio.addEventListener(‘timeupdate’, () => {
if (audio.duration) barFill.style.width = (audio.currentTime / audio.duration * 100) + ‘%’;
});
seekBar.addEventListener(‘click’, e => {
const r = seekBar.getBoundingClientRect();
if (audio.duration) audio.currentTime = ((e.clientX – r.left) / r.width) * audio.duration;
});
trackEl.textContent = queue[0].title;
})();
▸ Sound
—
Blaiq
REF — 2025
Architecture
Portfolio
— — — — —
01 / Selected Works
Samuel
Blake
McGarvey
Architecture · Material Research · Adaptive Reuse
Projects &
Explorations
Architecture Portfolio · 2022 – 2025
Project Description
Battersea pavilion project is a response to the natural topographical and cultural landscape. It attempts to concentrate light and rest into a composed moment.
Process Note
[Secondary note placeholder — material research, structural thinking, or contextual observations. Can also be a tutor quote or a key decision point in the design process.]
BP · 01
BP · 02
BP · 03
Image — BP · 04
BP · 04
Image — BP · 05
BP · 05
Project Description
[Project description placeholder.]
Process Note
[Process note placeholder.]
Image — 02 · 01
Image — 02 · 02
Image — 02 · 03
Image — 02 · 04
Project Description
Battersea pavilion project is a response to the natural topographical and cultural landscape. It attempts to concentrate light and rest into a composed moment.
Process Note
[Process note placeholder.]
Image — 03 · 01
Image — 03 · 02
Image — 03 · 03
Who
I Am
Architecture Student
Based in London
Foster + Partners · 2025
Based in London
Foster + Partners · 2025
Portrait
Based
London, UK
Born
Edinburgh
School
Experience
Foster + Partners
Email
samblakemcgarvey@gmail.com
Space Is
Never
Neutral
// bio — plain text
I am fascinated by the way in which buildings feel alive, evoking emotions and influencing how we interact with the built environment. On my eighth birthday, I was given a book on architectural masterpieces and how to build them in Lego, igniting a playful interest in exploring form. I took a single-day trip in early December to Barcelona to experience Antoni Gaudí’s work for the first time. I explored the Gothic Quarter before eventually reaching the Sagrada Família. Seeing it there in its tangible presence, I felt the lifelong dedication to its construction. Here was not just an edifice, but a tapestry of Gaudí’s mind: his deep commitment to community has helped me evolve my understanding of an architect’s role in society; one that is deeply rooted in constructing and sustaining human connection. Ultimately, architecture is more than the creation of buildings; I believe it is about enhancing the environments where people work, play, and experience life.
My creative side and technical knowledge combined in Design Technology, where I particularly enjoyed refining expressive sketching into an orthographic presentation. This led me to win the school’s award for best Higher DT portfolio. These abilities are being further strengthened during my three-month placement at Foster + Partners, where working within a professional design environment encourages me to build on my digital literacy. I completed an Autodesk Certification in Revit, giving me a strong foundation in BIM workflows, and am continually improving my technical confidence when working on more complex design tasks. This experience is introducing me to the practical, applied skills of teamwork, scheduling, and employing product design software.
Available for collaborations,
competitions & conversation.
// get in touch — samblakemcgarvey@gmail.com
Blaiq Studio 