{"id":375,"date":"2026-02-06T00:46:26","date_gmt":"2026-02-06T00:46:26","guid":{"rendered":"https:\/\/maxevansmoke.studio\/?page_id=375"},"modified":"2026-05-11T20:05:37","modified_gmt":"2026-05-11T20:05:37","slug":"about","status":"publish","type":"page","link":"https:\/\/maxevansmoke.studio\/?page_id=375","title":{"rendered":"About"},"content":{"rendered":"
<\/div>\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Hi, I’m Max.<\/h2>\n\n\n\n


I\u2019m currently a senior at the Fay Jones School of Architecture and Design pursuing my Bachelor of Architecture degree. My work explores unconventional forms, drawing influence from Russian Deconstructivism and early modernist experimentation. I\u2019m particularly interested in architecture that challenges notions of stability, clarity, and expectation.

My workflow centers around Rhino and Grasshopper, alongside the Adobe Creative Suite. I\u2019m fascinated by alternative design methodologies, parametric systems, and radical approaches that question how architecture is conceived, represented, and constructed.<\/p>\n\n\n\n

Outside of studio, I enjoy rock climbing, photography, hacky sack, and anything outdoors. I\u2019m drawn to experiences that challenge me creatively and physically.

Thank you for taking the time to investigate the MESS.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n

<\/div>\n\n\n
\n
\n
\n

What is MESS?<\/h2>\n\n\n\n

MESS stands for Max Evan Smoke Studio<\/em>.<\/p>\n\n\n\n

I use the term to describe my work as a whole. I have always resisted traditional conventions of representation and composition, so it felt appropriate to frame the collection as the \u201cMESS.\u201d The name functions as both an acronym and a play on words; reflecting a design process driven by curiosity rather than conformity. <\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n
\n\n\n\n\n\n\nSkills \u2014 MAX EVAN SMOKE<\/title>\n<style>\n html, body {\n overflow-x: hidden;\n max-width: 100%;\n }\n\n \/* Axis label font size \u2014 desktop *\/\n #mess-skills .ms-axis-label {\n font-size: 30px !important;\n }\n\n \/* Axis label font size \u2014 mobile *\/\n @media (max-width: 700px) {\n #mess-skills .ms-axis-label {\n font-size: 22px !important;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"mess-skills\">\n <div class=\"ms-inner\">\n <div class=\"ms-sidebar\">\n <div class=\"ms-header\">\n <p class=\"ms-eyebrow\" id=\"ms-eyebrow-text\"><\/p>\n <h2 class=\"ms-title\" id=\"ms-title-text\"><\/h2>\n <\/div>\n <div class=\"ms-skills-list\" id=\"ms-skillList\"><\/div>\n <\/div>\n <div class=\"ms-graph-wrap\">\n <div class=\"ms-graph-tilt\" id=\"ms-graph-tilt\">\n <svg id=\"ms-radar\"><\/svg>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n(function () {\n'use strict';\n\nconst CONFIG = {\n skills: [\n { name: 'Photoshop', value: 80 },\n { name: 'Rhino', value: 90 },\n { name: 'Revit', value: 45 },\n { name: 'Illustrator', value: 80 },\n { name: 'Grasshopper', value: 65 },\n { name: 'InDesign', value: 75 },\n { name: 'Photography', value: 90 },\n ],\n eyebrow : 'skill profile \/ 2026',\n title : 'DESIGN<br>STACK',\n accent : '#cdff00',\n accentText : '#ffffff',\n background : 'transparent',\n fontTitle : \"'Maniac Grunged', sans-serif\",\n fontUI : \"'Bungee Hairline', sans-serif\",\n dragMax : 35,\n damping : 0.62,\n stiffness : 0.13,\n tiltMax : 14,\n tiltEase : 0.08,\n depth : 15,\n desktop: {\n graphSize : 650,\n gap : '100px',\n sidebarScale : 1.4,\n titleSize : 64,\n eyebrowSize : 9,\n skillNameSize : 11,\n skillPctSize : 11,\n skillRowGap : 14,\n barHeight : 1,\n letterSpacing : '0.18em',\n eyebrowOpacity : 1.00,\n skillPctOpacity : 0.80,\n headerBorderOpacity : 0.65,\n barTrackOpacity : 0.12,\n ringStroke : 0.006,\n axisStroke : 0.01,\n polyStroke : 0.013,\n sideStroke : 0.009,\n crosshairStroke : 0.004,\n ringOpacity : 0.12,\n axisOpacity : 0.20,\n labelOpacity : 0.90,\n tickOpacity : 0.25,\n crosshairOpacity : 0.07,\n polyFillOpacity : 0.10,\n quadrantAOpacity : 0.03,\n quadrantBOpacity : 0.07,\n centreDotOpacity : 0.35,\n axisLabelSize : 0.085,\n tickLabelSize : 0.060,\n dotRadius : 0.045,\n dotHoverRadius : 0.075,\n },\n mobile: {\n graphSize : 300,\n stackGap : '40px',\n sidebarScale : 1.0,\n titleSize : 48,\n eyebrowSize : 11,\n skillNameSize : 11,\n skillPctSize : 11,\n skillRowGap : 12,\n barHeight : 1,\n letterSpacing : '0.14em',\n eyebrowOpacity : 1.00,\n skillPctOpacity : 0.80,\n headerBorderOpacity : 0.25,\n barTrackOpacity : 0.18,\n ringStroke : 0.006,\n axisStroke : 0.006,\n polyStroke : 0.013,\n sideStroke : 0.009,\n crosshairStroke : 0.004,\n ringOpacity : 0.12,\n axisOpacity : 0.20,\n labelOpacity : 0.90,\n tickOpacity : 0.25,\n crosshairOpacity : 0.07,\n polyFillOpacity : 0.10,\n quadrantAOpacity : 0.03,\n quadrantBOpacity : 0.07,\n centreDotOpacity : 0.35,\n axisLabelSize : 0.085,\n tickLabelSize : 0.060,\n dotRadius : 0.045,\n dotHoverRadius : 0.075,\n },\n};\n\n['https:\/\/fonts.googleapis.com\/css2?family=Bungee+Hairline&display=swap',\n 'https:\/\/fonts.cdnfonts.com\/css\/maniac'].forEach(href => {\n const l = document.createElement('link');\n l.rel = 'stylesheet'; l.href = href;\n document.head.appendChild(l);\n});\n\nconst A = CONFIG.accent;\nconst T = CONFIG.accentText;\nconst BG = CONFIG.background;\nconst D = CONFIG.desktop;\nconst M = CONFIG.mobile;\n\nfunction hexAlpha(hex, a) {\n const r = parseInt(hex.slice(1,3), 16);\n const g = parseInt(hex.slice(3,5), 16);\n const b = parseInt(hex.slice(5,7), 16);\n return `rgba(${r},${g},${b},${a})`;\n}\nfunction scaled(cfg, val) { return `${(val * cfg.sidebarScale).toFixed(1)}px`; }\n\nconst R_D = D.graphSize * 0.40;\nconst R_M = M.graphSize * 0.40;\n\nconst sheet = document.createElement('style');\nsheet.textContent = `\n #mess-skills *, #mess-skills *::before, #mess-skills *::after {\n box-sizing: border-box; margin: 0; padding: 0;\n }\n #mess-skills {\n background : ${BG};\n color : ${T};\n font-family : ${CONFIG.fontUI};\n width : 100%;\n overflow-x : hidden;\n padding : 60px 40px;\n display : flex;\n align-items : center;\n justify-content : center;\n }\n #mess-skills .ms-inner {\n width : 100%;\n display : grid;\n grid-template-columns : 1fr ${D.graphSize}px;\n column-gap : clamp(60px, 5vw, 140px);\n align-items : center;\n }\n #mess-skills .ms-graph-wrap {\n width : ${D.graphSize}px;\n height : ${D.graphSize}px;\n flex-shrink : 0;\n overflow : hidden;\n perspective : 700px;\n perspective-origin : center center;\n }\n #mess-skills .ms-graph-tilt {\n width : 100%;\n height : 100%;\n transform-style : preserve-3d;\n will-change : transform;\n }\n #mess-skills svg {\n width : 100%;\n height : 100%;\n overflow : visible;\n display : block;\n }\n #mess-skills .ms-ring {\n fill : none;\n stroke : ${T};\n stroke-width : ${(R_D * D.ringStroke).toFixed(3)};\n opacity : 0;\n transition : opacity 0.4s ease;\n }\n #mess-skills.ms-visible .ms-ring { opacity: ${D.ringOpacity}; }\n #mess-skills .ms-axis {\n stroke : ${T};\n stroke-width : ${(R_D * D.axisStroke).toFixed(3)};\n stroke-dasharray : ${(R_D*0.035).toFixed(2)} ${(R_D*0.046).toFixed(2)};\n opacity : 0;\n transition : opacity 0.3s ease;\n }\n #mess-skills.ms-visible .ms-axis { opacity: ${D.axisOpacity}; }\n #mess-skills .ms-axis-label {\n fill : ${T};\n font-family : ${CONFIG.fontUI};\n font-size : ${(R_D * D.axisLabelSize).toFixed(2)};\n text-transform : uppercase;\n pointer-events : none;\n opacity : 0;\n transition : opacity 0.4s ease;\n text-rendering : geometricPrecision;\n }\n #mess-skills.ms-visible .ms-axis-label { opacity: ${D.labelOpacity}; }\n #mess-skills .ms-tick-label {\n fill : ${T};\n font-family : ${CONFIG.fontUI};\n font-size : ${(R_D * D.tickLabelSize).toFixed(2)};\n opacity : 0;\n pointer-events : none;\n transition : opacity 0.4s ease;\n text-rendering : geometricPrecision;\n }\n #mess-skills.ms-visible .ms-tick-label { opacity: ${D.tickOpacity}; }\n #mess-skills #ms-dataPoly {\n fill : ${hexAlpha(A, D.polyFillOpacity)};\n stroke : ${A};\n stroke-width : ${(R_D * D.polyStroke).toFixed(3)};\n stroke-linejoin : round;\n opacity : 0;\n transform : scale(0.1);\n transform-origin : 0px 0px;\n transform-box : fill-box;\n transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);\n }\n #mess-skills.ms-visible #ms-dataPoly { opacity: 1; transform: scale(1); }\n #mess-skills .ms-side-face {\n opacity : 0;\n transition : opacity 0.7s cubic-bezier(0.16,1,0.3,1);\n }\n #mess-skills.ms-visible .ms-side-face { opacity: 1; }\n #mess-skills .ms-quadrant-a { fill: ${hexAlpha(A, D.quadrantAOpacity)}; stroke: none; pointer-events: none; }\n #mess-skills .ms-quadrant-b { fill: ${hexAlpha(A, D.quadrantBOpacity)}; stroke: none; pointer-events: none; }\n #mess-skills .ms-lifted { transform-origin: 0px 0px; transform-box: fill-box; }\n #mess-skills .ms-vertex {\n fill : ${A};\n cursor : grab;\n transition : r 0.15s cubic-bezier(0.34,1.56,0.64,1);\n }\n #mess-skills .ms-vertex:hover { r: ${(R_D * D.dotHoverRadius).toFixed(2)}; }\n #mess-skills .ms-vertex.ms-dragging { r: ${(R_D * D.dotHoverRadius).toFixed(2)}; cursor: grabbing; }\n #mess-skills .ms-crosshair {\n stroke : ${T};\n stroke-width : ${(R_D * D.crosshairStroke).toFixed(3)};\n opacity : ${D.crosshairOpacity};\n }\n @keyframes ms-hintPulse {\n 0%, 100% { r: ${(R_D * D.dotRadius).toFixed(2)}; }\n 50% { r: ${(R_D * D.dotHoverRadius).toFixed(2)}; opacity: 0.5; }\n }\n #mess-skills .ms-hint { animation: ms-hintPulse 0.8s ease 3; }\n #mess-skills .ms-sidebar {\n display : flex;\n flex-direction : column;\n gap : 32px;\n width : 100%;\n justify-self : start;\n }\n #mess-skills .ms-header {\n border-left : 1px solid #cdff00;\n padding-left : 18px;\n }\n #mess-skills .ms-eyebrow {\n font-family : ${CONFIG.fontUI};\n font-size : ${scaled(D, D.eyebrowSize)};\n letter-spacing : 0.28em;\n text-transform : uppercase;\n opacity : ${D.eyebrowOpacity};\n margin-bottom : 10px;\n color : ${T};\n }\n #mess-skills .ms-title {\n font-family : ${CONFIG.fontTitle};\n font-size : ${scaled(D, D.titleSize)};\n line-height : 0.88;\n letter-spacing : 0.02em;\n color : ${T};\n }\n #mess-skills .ms-skills-list {\n display : flex;\n flex-direction : column;\n gap : ${scaled(D, D.skillRowGap)};\n width : 100%;\n }\n #mess-skills .ms-skill-row {\n display : flex;\n flex-direction : column;\n gap : 5px;\n opacity : 0;\n transform : translateX(-12px);\n transition : opacity 0.4s ease, transform 0.4s ease;\n }\n #mess-skills.ms-visible .ms-skill-row { opacity: 1; transform: translateX(0); }\n #mess-skills .ms-skill-meta {\n display : flex;\n justify-content : space-between;\n align-items : baseline;\n }\n #mess-skills .ms-skill-name {\n font-family : ${CONFIG.fontUI};\n font-size : ${scaled(D, D.skillNameSize)};\n letter-spacing : ${D.letterSpacing};\n text-transform : uppercase;\n color : ${T};\n }\n #mess-skills .ms-skill-pct {\n font-family : ${CONFIG.fontUI};\n font-size : ${scaled(D, D.skillPctSize)};\n color : ${A};\n opacity : ${D.skillPctOpacity};\n }\n #mess-skills .ms-pct-mobile { display: none; }\n #mess-skills .ms-pct-desktop { display: inline; }\n #mess-skills .ms-bar-track {\n height : ${scaled(D, D.barHeight)};\n background : ${hexAlpha(A, D.barTrackOpacity)};\n position : relative;\n overflow : hidden;\n }\n #mess-skills .ms-bar-fill {\n position : absolute;\n left: 0; top: 0; bottom: 0;\n background : ${A};\n width : 0%;\n }\n @keyframes ms-barShoot {\n 0% { width: 0%; }\n 65% { width: calc(var(--tw) * 1.08); }\n 80% { width: calc(var(--tw) * 0.97); }\n 90% { width: calc(var(--tw) * 1.02); }\n 100% { width: var(--tw); }\n }\n #mess-skills .ms-bar-fill.ms-bar-animate {\n animation: ms-barShoot 0.9s cubic-bezier(0.25,0.46,0.45,0.94) forwards;\n }\n\n \/* ====== LARGE MONITORS \u2014 scale up graph column only ====== *\/\n @media (min-width: 1500px) {\n #mess-skills .ms-inner { grid-template-columns: 1fr 850px; }\n #mess-skills .ms-graph-wrap { width: 850px; height: 850px; }\n }\n @media (min-width: 1900px) {\n #mess-skills .ms-inner { grid-template-columns: 1fr 1000px; }\n #mess-skills .ms-graph-wrap { width: 1000px; height: 1000px; }\n }\n\n \/* ====== MOBILE ====== *\/\n @media (max-width: 700px) {\n #mess-skills { padding: 40px 0; }\n #mess-skills .ms-inner {\n grid-template-columns : 1fr;\n column-gap : 0;\n row-gap : ${M.stackGap};\n justify-items : center;\n }\n #mess-skills .ms-graph-wrap {\n width : min(${M.graphSize}px, calc(100vw - 80px));\n height : min(${M.graphSize}px, calc(100vw - 80px));\n overflow : visible;\n }\n #mess-skills .ms-sidebar {\n align-items : center;\n text-align : center;\n justify-self : center;\n max-width : min(${M.graphSize + 40}px, calc(100vw - 40px));\n }\n #mess-skills .ms-header {\n border-left : none;\n border-bottom : 1px solid #cdff00;\n padding-left : 0;\n padding-bottom: 14px;\n width : 100%;\n display : flex;\n flex-direction: column;\n align-items : center;\n }\n #mess-skills .ms-skills-list { width: 100%; gap: ${scaled(M, M.skillRowGap)}; }\n #mess-skills .ms-skill-row { text-align: center; }\n #mess-skills .ms-skill-meta { justify-content: center; gap: 8px; }\n #mess-skills .ms-pct-desktop { display: none; }\n #mess-skills .ms-pct-mobile { display: block; text-align: center; }\n\n #mess-skills .ms-ring { stroke-width: ${(R_M * M.ringStroke).toFixed(3)}; }\n #mess-skills.ms-visible .ms-ring { opacity: ${M.ringOpacity}; }\n #mess-skills .ms-axis {\n stroke-width : ${(R_M * M.axisStroke).toFixed(3)};\n stroke-dasharray : ${(R_M*0.035).toFixed(2)} ${(R_M*0.046).toFixed(2)};\n }\n #mess-skills.ms-visible .ms-axis { opacity: ${M.axisOpacity}; }\n #mess-skills .ms-axis-label { font-size: ${(R_M * M.axisLabelSize).toFixed(2)}; }\n #mess-skills.ms-visible .ms-axis-label { opacity: ${M.labelOpacity}; }\n #mess-skills .ms-tick-label { font-size: ${(R_M * M.tickLabelSize).toFixed(2)}; }\n #mess-skills.ms-visible .ms-tick-label { opacity: ${M.tickOpacity}; }\n #mess-skills #ms-dataPoly {\n stroke-width : ${(R_M * M.polyStroke).toFixed(3)};\n fill : ${hexAlpha(A, M.polyFillOpacity)};\n }\n #mess-skills .ms-crosshair {\n stroke-width : ${(R_M * M.crosshairStroke).toFixed(3)};\n opacity : ${M.crosshairOpacity};\n }\n #mess-skills .ms-vertex:hover { r: ${(R_M * M.dotHoverRadius).toFixed(2)}; }\n #mess-skills .ms-vertex.ms-dragging { r: ${(R_M * M.dotHoverRadius).toFixed(2)}; }\n #mess-skills .ms-quadrant-a { fill: ${hexAlpha(A, M.quadrantAOpacity)}; }\n #mess-skills .ms-quadrant-b { fill: ${hexAlpha(A, M.quadrantBOpacity)}; }\n #mess-skills .ms-title { font-size: ${scaled(M, M.titleSize)}; }\n #mess-skills .ms-eyebrow { font-size: ${scaled(M, M.eyebrowSize)}; opacity: ${M.eyebrowOpacity}; }\n #mess-skills .ms-skill-name { font-size: ${scaled(M, M.skillNameSize)}; letter-spacing: ${M.letterSpacing}; }\n #mess-skills .ms-skill-pct { font-size: ${scaled(M, M.skillPctSize)}; opacity: ${M.skillPctOpacity}; }\n #mess-skills .ms-bar-track { height: ${scaled(M, M.barHeight)}; background: ${hexAlpha(A, M.barTrackOpacity)}; }\n\n #mess-skills .ms-bar-fill {\n left : 50%;\n transform : translateX(-50%);\n width : 0%;\n }\n @keyframes ms-barShoot {\n 0% { width: 0%; }\n 65% { width: calc(var(--tw) * 1.08); }\n 80% { width: calc(var(--tw) * 0.97); }\n 90% { width: calc(var(--tw) * 1.02); }\n 100% { width: var(--tw); }\n }\n @keyframes ms-hintPulse {\n 0%, 100% { r: ${(R_M * M.dotRadius).toFixed(2)}; }\n 50% { r: ${(R_M * M.dotHoverRadius).toFixed(2)}; opacity: 0.5; }\n }\n }\n`;\ndocument.head.appendChild(sheet);\n\ndocument.getElementById('ms-eyebrow-text').textContent = CONFIG.eyebrow;\ndocument.getElementById('ms-title-text').innerHTML = CONFIG.title;\n\nfunction isMobile() { return window.innerWidth <= 700; }\nfunction getR() { return isMobile() ? R_M : R_D; }\nfunction getCFG() { return isMobile() ? M : D; }\n\nconst SKILLS = CONFIG.skills;\nconst NUM = SKILLS.length;\nconst RINGS = 5;\nconst DRAG_MAX = CONFIG.dragMax;\nconst DAMPING = CONFIG.damping;\nconst STIFFNESS = CONFIG.stiffness;\nconst TILT_MAX = CONFIG.tiltMax;\nconst TILT_EASE = CONFIG.tiltEase;\nconst DEPTH = CONFIG.depth;\n\nfunction polar(angle, r) {\n const a = angle - Math.PI \/ 2;\n return { x: Math.cos(a) * r, y: Math.sin(a) * r };\n}\nfunction angleFor(i) { return (2 * Math.PI * i) \/ NUM; }\nfunction svgEl(tag, attrs, parent) {\n const e = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', tag);\n if (attrs) for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, v);\n if (parent) parent.appendChild(e);\n return e;\n}\n\nconst svg = document.getElementById('ms-radar');\nsvg.setAttribute('text-rendering', 'geometricPrecision');\n\nlet clipPolyEl, sidesGroup, liftedGroup, dataPolyEl;\nconst sideFaces = [];\nconst dotsArr = [];\nconst origins = SKILLS.map(() => ({ x: 0, y: 0 }));\nconst pos = SKILLS.map(() => ({ x: 0, y: 0 }));\nconst vel = SKILLS.map(() => ({ x: 0, y: 0 }));\nconst dotR = SKILLS.map(() => 0);\n\nlet animationsTriggered = false;\nlet dotsReady = false;\n\nfunction buildSVG(R) {\n const cfg = getCFG();\n while (svg.firstChild) svg.removeChild(svg.firstChild);\n\n const half = R * 2.2;\n svg.setAttribute('viewBox', `${-half} ${-half} ${half*2} ${half*2}`);\n\n for (let ring = 1; ring <= RINGS; ring++) {\n const rr = (ring \/ RINGS) * R;\n const pts = Array.from({ length: NUM }, (_, i) => {\n const p = polar(angleFor(i), rr);\n return `${p.x},${p.y}`;\n }).join(' ');\n svgEl('polygon', { points: pts, class: 'ms-ring',\n style: `transition-delay:${0.08 + (ring-1)*0.12}s` }, svg);\n const tp = polar(0, rr);\n svgEl('text', { x: tp.x + R*0.035, y: tp.y,\n class: 'ms-tick-label', 'text-anchor': 'start',\n 'dominant-baseline': 'middle',\n style: `transition-delay:${0.5 + (ring-1)*0.05}s` }, svg\n ).textContent = `${((ring\/RINGS)*100)|0}`;\n }\n\n SKILLS.forEach((_, i) => {\n const p = polar(angleFor(i), R);\n svgEl('line', { x1:0, y1:0, x2:p.x, y2:p.y, class:'ms-axis',\n style:`transition-delay:${0.45 + i*0.04}s` }, svg);\n });\n\n svgEl('line', { x1:-R, y1:0, x2:R, y2:0, class:'ms-crosshair' }, svg);\n svgEl('line', { x1:0, y1:-R, x2:0, y2:R, class:'ms-crosshair' }, svg);\n\n const defs = svgEl('defs', {}, svg);\n clipPolyEl = svgEl('polygon', {}, svgEl('clipPath', { id:'ms-poly-clip' }, defs));\n\n const quadGroup = svgEl('g', { 'clip-path':'url(#ms-poly-clip)' }, svg);\n for (let i = 0; i < NUM; i++) {\n const p1 = polar(angleFor(i), R * 2);\n const p2 = polar(angleFor(i + 1), R * 2);\n svgEl('polygon', {\n points: `0,0 ${p1.x},${p1.y} ${p2.x},${p2.y}`,\n class: i % 2 === 0 ? 'ms-quadrant-a' : 'ms-quadrant-b'\n }, quadGroup);\n }\n\n sidesGroup = svgEl('g', { id:'ms-sides' }, svg);\n sideFaces.length = 0;\n for (let i = 0; i < NUM; i++) {\n sideFaces.push(svgEl('polygon', { class:'ms-side-face',\n style:'transition-delay:0.9s' }, sidesGroup));\n }\n\n liftedGroup = svgEl('g', { class:'ms-lifted', id:'ms-lifted' }, svg);\n dataPolyEl = svgEl('polygon', { id:'ms-dataPoly',\n style:'transition-delay:0.85s' }, liftedGroup);\n\n for (let i = 0; i < NUM; i++) {\n origins[i] = polar(angleFor(i), (SKILLS[i].value \/ 100) * R);\n pos[i] = { x: origins[i].x, y: origins[i].y };\n vel[i] = { x: 0, y: 0 };\n dotR[i] = dotsReady ? R * cfg.dotRadius : 0;\n }\n\n dotsArr.length = 0;\n SKILLS.forEach((_, i) => {\n dotsArr.push(svgEl('circle', {\n cx: origins[i].x, cy: origins[i].y,\n r: dotR[i], class: 'ms-vertex'\n }, liftedGroup));\n });\n\n const labelR = R * 1.20;\n SKILLS.forEach((s, i) => {\n const angle = angleFor(i);\n const p = polar(angle, labelR);\n const deg = ((angle * 180 \/ Math.PI) + 360) % 360;\n let anchor = 'middle', dy = 0;\n if (deg > 15 && deg < 165) anchor = 'start';\n if (deg > 195 && deg < 345) anchor = 'end';\n if (deg < 15 || deg > 345) dy = -R * 0.045;\n if (deg > 165 && deg < 195) dy = R * 0.09;\n svgEl('text', { x: p.x, y: p.y + dy, class: 'ms-axis-label',\n 'text-anchor': anchor, 'dominant-baseline': 'middle',\n style: `transition-delay:${0.6 + i*0.05}s` }, svg\n ).textContent = s.name;\n });\n\n svgEl('circle', { cx:0, cy:0, r: R*0.022, fill:T,\n opacity: cfg.centreDotOpacity }, svg);\n\n if (animationsTriggered) {\n document.getElementById('mess-skills').classList.add('ms-visible');\n }\n}\n\nbuildSVG(getR());\n\nlet tiltX = 0, tiltY = 0, tiltTX = 0, tiltTY = 0, intensity = 0;\n\nfunction updatePoly() {\n const pts = pos.map(p => `${p.x},${p.y}`).join(' ');\n dataPolyEl.setAttribute('points', pts);\n clipPolyEl.setAttribute('points', pts);\n dotsArr.forEach((d, i) => {\n d.setAttribute('cx', pos[i].x);\n d.setAttribute('cy', pos[i].y);\n d.setAttribute('r', dotR[i].toFixed(2));\n });\n}\n\nfunction updateSides(depthX, depthY) {\n const R = getR();\n const cfg = getCFG();\n for (let i = 0; i < NUM; i++) {\n const j = (i + 1) % NUM;\n const ax = pos[i].x, ay = pos[i].y;\n const bx = pos[j].x, by = pos[j].y;\n const cx2 = bx + depthX, cy2 = by + depthY;\n const dx2 = ax + depthX, dy2 = ay + depthY;\n const ex = bx - ax, ey = by - ay;\n const nx = -ey, ny = ex;\n const shade = (nx * tiltY - ny * tiltX) \/ (TILT_MAX * 1.4 + 0.001);\n const alpha = intensity * (0.12 + shade * 0.10);\n const ca = Math.max(0, Math.min(0.28, alpha));\n sideFaces[i].setAttribute('points', `${ax},${ay} ${bx},${by} ${cx2},${cy2} ${dx2},${dy2}`);\n sideFaces[i].setAttribute('fill', hexAlpha(A, ca));\n sideFaces[i].setAttribute('stroke', hexAlpha(A, 0.35 * intensity));\n sideFaces[i].setAttribute('stroke-width', (R * cfg.sideStroke).toFixed(3));\n sideFaces[i].setAttribute('stroke-linejoin', 'round');\n }\n}\n\nupdatePoly();\nupdateSides(0, 0);\n\nlet dragging = -1;\n\nfunction tick() {\n const R = getR();\n const cfg = getCFG();\n for (let i = 0; i < NUM; i++) {\n if (i === dragging) continue;\n const dx = origins[i].x - pos[i].x;\n const dy = origins[i].y - pos[i].y;\n vel[i].x = (vel[i].x + dx * STIFFNESS) * DAMPING;\n vel[i].y = (vel[i].y + dy * STIFFNESS) * DAMPING;\n pos[i].x += vel[i].x;\n pos[i].y += vel[i].y;\n }\n const targetR = dotsReady ? R * cfg.dotRadius : 0;\n for (let i = 0; i < NUM; i++) {\n if (Math.abs(dotR[i] - targetR) > 0.01) dotR[i] += (targetR - dotR[i]) * 0.08;\n }\n tiltX += (tiltTX - tiltX) * TILT_EASE;\n tiltY += (tiltTY - tiltY) * TILT_EASE;\n intensity = Math.sqrt(tiltX*tiltX + tiltY*tiltY) \/ (TILT_MAX || 1);\n tiltEl.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;\n const depthX = (tiltY \/ (TILT_MAX || 1)) * DEPTH;\n const depthY = -(tiltX \/ (TILT_MAX || 1)) * DEPTH;\n liftedGroup.setAttribute('transform', `scale(${1 + intensity * 0.07})`);\n updatePoly();\n updateSides(depthX, depthY);\n requestAnimationFrame(tick);\n}\n\nrequestAnimationFrame(tick);\n\nconst tiltEl = document.getElementById('ms-graph-tilt');\nconst graphWrap = tiltEl.parentElement;\n\ngraphWrap.addEventListener('mousemove', e => {\n const rect = graphWrap.getBoundingClientRect();\n tiltTY = ((e.clientX - rect.left) \/ rect.width - 0.5) * TILT_MAX;\n tiltTX = -((e.clientY - rect.top) \/ rect.height - 0.5) * TILT_MAX;\n});\ngraphWrap.addEventListener('mouseleave', () => { tiltTX = 0; tiltTY = 0; });\n\nfunction svgPoint(e) {\n const pt = svg.createSVGPoint();\n const src = e.touches ? e.touches[0] : e;\n pt.x = src.clientX; pt.y = src.clientY;\n return pt.matrixTransform(svg.getScreenCTM().inverse());\n}\n\nsvg.addEventListener('mousedown', onSvgDown);\nsvg.addEventListener('touchstart', onSvgDown, { passive: false });\n\nfunction onSvgDown(e) {\n const idx = dotsArr.indexOf(e.target);\n if (idx === -1) return;\n e.preventDefault();\n dragging = idx;\n e.target.classList.add('ms-dragging');\n e.target.classList.remove('ms-hint');\n function onMove(ev) {\n const p = svgPoint(ev);\n const ox = origins[dragging].x, oy = origins[dragging].y;\n const dx = p.x - ox, dy = p.y - oy;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if (dist > 0) {\n const clamped = Math.min(dist, DRAG_MAX);\n const angle = Math.atan2(dy, dx);\n pos[dragging].x = ox + Math.cos(angle) * clamped;\n pos[dragging].y = oy + Math.sin(angle) * clamped;\n }\n vel[dragging].x = 0; vel[dragging].y = 0;\n }\n function onUp() {\n dotsArr[dragging]?.classList.remove('ms-dragging');\n dragging = -1;\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('touchmove', onMove);\n window.removeEventListener('mouseup', onUp);\n window.removeEventListener('touchend', onUp);\n }\n window.addEventListener('mousemove', onMove);\n window.addEventListener('touchmove', onMove, { passive: false });\n window.addEventListener('mouseup', onUp);\n window.addEventListener('touchend', onUp);\n}\n\nlet resizeTimer;\nwindow.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n buildSVG(getR()); updatePoly(); updateSides(0, 0);\n }, 120);\n});\n\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (!entry.isIntersecting || animationsTriggered) return;\n animationsTriggered = true;\n document.getElementById('mess-skills').classList.add('ms-visible');\n setTimeout(() => { dotsReady = true; }, 1500);\n setTimeout(() => {\n [0, 2, 5].filter(i => i < NUM).forEach((idx, j) => {\n setTimeout(() => {\n dotsArr[idx]?.classList.add('ms-hint');\n setTimeout(() => dotsArr[idx]?.classList.remove('ms-hint'), 2600);\n }, j * 220);\n });\n }, 2200);\n SKILLS.forEach((_, i) => {\n setTimeout(() => {\n document.getElementById(`ms-bar-${i}`)?.classList.add('ms-bar-animate');\n }, 1000 + i * 110);\n });\n observer.disconnect();\n });\n}, { threshold: 0.5 });\n\nobserver.observe(document.getElementById('mess-skills'));\n\nconst listEl = document.getElementById('ms-skillList');\nSKILLS.forEach((s, i) => {\n const row = document.createElement('div');\n row.className = 'ms-skill-row';\n row.style.transitionDelay = `${0.9 + i * 0.09}s`;\n row.innerHTML = `\n <div class=\"ms-skill-meta\">\n <span class=\"ms-skill-name\">${s.name}<\/span>\n <span class=\"ms-skill-pct ms-pct-desktop\">${s.value}%<\/span>\n <\/div>\n <div class=\"ms-bar-track\">\n <div class=\"ms-bar-fill\" id=\"ms-bar-${i}\" style=\"--tw:${s.value}%\"><\/div>\n <\/div>\n <span class=\"ms-skill-pct ms-pct-mobile\">${s.value}%<\/span>`;\n listEl.appendChild(row);\n});\n\n})();\n<\/script>\n<\/body>\n<\/html>\n\n<\/div>\n\n<div class=\"tpgb-empty-space tpgb-block-7f61_375 \"><\/div>\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center is-style-text-display has-maniac-grunged-font-family is-style-text-display--3\" style=\"font-size:clamp(39.111px, 2.444rem + ((1vw - 3.2px) * 3.322), 73px);font-style:normal;font-weight:400\">contact me<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-accent-1-color has-alpha-channel-opacity has-accent-1-background-color has-background is-style-wide is-style-wide--4\"\/>\n\n\n\n<p class=\"has-text-align-center is-style-text-display has-bungee-hairline-font-family has-large-font-size is-style-text-display--5\" style=\"font-style:normal;font-weight:400\">email: max.evan.smoke@gmail.com<\/p>\n\n\n\n<p class=\"has-text-align-center is-style-text-display has-bungee-hairline-font-family has-large-font-size is-style-text-display--6\" style=\"font-style:normal;font-weight:400\">Instagram: @maxevansmoke<\/p>\n\n\n\n<div class=\"wp-block-file aligncenter has-link-color wp-elements-90a2be7e289d753b95f9a442e5fdec51\"><a id=\"wp-block-file--media-ba6f3f5b-71e7-43f2-ab19-59aaf4013f4c\" href=\"https:\/\/maxevansmoke.studio\/?attachment_id=1250\" target=\"_blank\" rel=\"noreferrer noopener\">RESUME<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hi, I’m Max. I\u2019m currently a senior at the Fay Jones School of Architecture and Design pursuing my Bachelor of Architecture degree. My work explores unconventional forms, drawing influence from Russian Deconstructivism and early modernist experimentation. I\u2019m particularly interested in architecture that challenges notions of stability, clarity, and expectation. My workflow centers around Rhino and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"home-page","meta":{"tpgb_global_settings":"","_eb_attr":"","footnotes":""},"class_list":["post-375","page","type-page","status-publish","hentry"],"tpgb_featured_images":null,"tpgb_post_meta_info":{"get_date":"February 6, 2026","get_modified_date":"May 11, 2026","author_name":"maxevansmoke","author_url":"https:\/\/maxevansmoke.studio\/?author=1","author_email":"max.evan.smoke@gmail.com","author_website":"http:\/\/maxevansmoke.studio","author_description":"","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["administrator"],"author_firstname":"","author_lastname":"","user_login":"maxevansmoke","author_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/42d3d78a8c9c4f46fee547438de8e999798f855bde437add3bedd1c96e66e184?s=200&d=mm&r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/42d3d78a8c9c4f46fee547438de8e999798f855bde437add3bedd1c96e66e184?s=400&d=mm&r=g 2x' class='avatar avatar-200 photo' height='200' width='200' loading='lazy' decoding='async'\/>","author_avatar_url":"https:\/\/secure.gravatar.com\/avatar\/42d3d78a8c9c4f46fee547438de8e999798f855bde437add3bedd1c96e66e184?s=96&d=mm&r=g","comment_count":0,"post_likes":0,"post_views":0},"tpgb_post_category":[],"_links":{"self":[{"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/pages\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=375"}],"version-history":[{"count":216,"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/pages\/375\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=\/wp\/v2\/pages\/375\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/maxevansmoke.studio\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}