1import{u as b,r as c,j as t,d as r,a as n,m as d}from"./index-y4oTXVR4.js";import{C as w,T as j}from"./sharedStyles-v3Blrpjc.js";import{p as s}from"./projectname-Pa4_eMIs.js";import v from"./NextProject-DaBChRJb.js";const $=d` 2 0% { 3 box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 4 0 0 40px rgba(255, 255, 255, 0.05); 5 } 6 50% { 7 box-shadow: 0 0 30px rgba(255, 255, 255, 0.2), 8 0 0 60px rgba(255, 255, 255, 0.1); 9 } 10 100% { 11 box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 12 0 0 40px rgba(255, 255, 255, 0.05); 13 } 14`,P=d` 15 0%, 16 100% { 17 opacity: 0.6; 18 } 19 50% { 20 opacity: 1; 21 } 22`,k=r.div` 23 height: 100vh; 24 display: flex; 25 flex-direction: column; 26 align-items: center; 27 justify-content: space-between; 28`,C=r.div` 29 display: grid; 30 grid-template-columns: 1fr 1fr; 31 gap: 50px; 32 width: 100%; 33 height: 100%; 34`,E=r(n.div)` 35 display: flex; 36 flex-direction: column; 37 justify-content: space-between; 38 padding: 20px; 39 margin-top: 75px; 40 margin-left: 25px; 41 text-align: right; 42 overflow-y: auto; 43 height: 100%; 44 border-top: 1px ${e=>e.theme.colors.border.secondary} solid; 45 scrollbar-width: none; 46 -ms-overflow-style: none; 47 48 &::-webkit-scrollbar {
49 display: none; 50 } 51`,I=r.div` 52 display: flex; 53 flex-direction: column; 54 align-items: center; 55 gap: 20px; 56`,S=r(n.ul)` 57 display: flex; 58 flex-direction: column; 59 margin-top: 25px; 60 align-items: flex-end; 61 row-gap: 150px; 62 list-style: none; 63 padding-bottom: 200px; 64`,V=r(n.li)` 65 display: flex; 66 flex-direction: column; 67 align-items: flex-end; 68 color: ${e=>e.theme.colors.text.secondary}; 69 cursor: pointer; 70 transition: color 0.3s ease-in; 71 72 &:hover { 73 color: ${e=>e.theme.colors.text.hover}; 74 } 75 76 .project-title { 77 font-size: 48px; 78 font-weight: 100; 79 font-family: "ade"; 80 text-transform: uppercase; 81 mask-image: linear-gradient(to right, transparent, #000 20%, #000 70%, transparent), 82 linear-gradient(to bottom, transparent, #000 20%, #000 70%, transparent); 83 -webkit-mask-image: linear-gradient(to right, transparent, #000 40%, #000 60%, transparent), 84 linear-gradient(to bottom, transparent, #000 50%, transparent); 85 } 86 87 .project-description { 88 font-size: 12px; 89 font-weight: 800; 90 font-family: "work sans, black"; 91 text-transform: uppercase; 92 color: ${e=>e.theme.colors.text.secondary}; 93 } 94`,z={hidden:{opacity:0,x:50},visible:{opacity:1,x:0,transition:{duration:.5,ease:"easeOut"}}},N=r(n.div)` 95 width: 100%; 96 height: 100%; 97 display: flex; 98 align-items: center; 99 justify-content: center; 100 position: relative; 101 animation: ${$} 4s infinite; 102 perspective: 1000px; 103 transform-style: preserve-3d; 104`,T=r(n.div)` 105 position: relative; 106 transform-style: preserve-3d; 107 display: flex; 108 align-items: center; 109 justify-content: center; 110 width: 100%; 111 height: 100%; 112`,Y=r(n.img)` 113 max-width: 90%; 114 max-height: 80vh; 115 object-fit: contain; 116 opacity: ${e=>e.isVisible?1:0}; 117 transition: opacity 0.5s ease; 118 filter: brightness(1.1) contrast(1.1); 119 border-radius: 24px; 120 box-shadow: 0 0 50px ${e=>e.theme.colors.shadow.glowStrong}, 121 0 0 100px ${e=>e.theme.colors.shadow.glow}, 122 0 8px 32px rgba(0, 0, 0, 0.1), 123 0 2px 8px rgba(0, 0, 0, 0.1); 124 transform: perspective(1000px) rotateY(-5deg); 125 transform-style: preserve-3d; 126 backface-visibility: hidden; 127 margin: 0 auto; 128 display: block; 129`,M=r.div` 130 position: absolute; 131 top: 0; 132 left: 0; 133 right: 0; 134 bottom: 0; 135 background: linear-gradient( 136 to right, 137 ${e=>e.theme.colors.gradient.overlayStart} 0%, 138 ${e=>e.theme.colors.gradient.overlayMid} 15%, 139 rgba(0, 0, 0, 0.2) 25%, 140 ${e=>e.theme.colors.gradient.overlayEnd} 45%, 141 ${e=>e.theme.colors.gradient.overlayEnd} 100% 142 ); 143 z-index: 1; 144 pointer-events: none; 145 mix-blend-mode: multiply; 146`,A=e=>{const i=e.length;return i>20?"2.5rem":i>14?"2.8rem":i>6?"3.2rem":"4.2rem"},F=r(n.h1)` 147 font-family: 'Ade', serif; 148 font-size: ${e=>A(e.title)}; 149 color: ${e=>e.theme.colors.text.hover}; 150 position: absolute; 151 left: 1rem; 152 top: 40%; 153 transform: translateY(-50%); 154 z-index: 2; 155 opacity: ${e=>e.isVisible?1:0}; 156 transition: opacity 0.8s ease; 157 text-transform: uppercase; 158 letter-spacing: 2px; 159 animation: ${e=>e.isVisible?P:"none"} 3s infinite; 160 mix-blend-mode: exclusion; 161 text-shadow: 0 0 10px ${e=>e.theme.colors.shadow.glowMid}, 162 0 0 50px ${e=>e.theme.colors.shadow.glowStrong}, 163 0 0 70px ${e=>e.theme.colors.shadow.glow}; 164 max-width: 40%; 165 line-height: 1.2; 166 font-weight: 300; 167`,G=()=>{const e=b(),[i,p]=c.useState(null),[m,l]=c.useState(!1),x=()=>{e("/")},h=o=>{const u=o.replace(/\s+/g,"");e(`/projects/${u}`)},g=o=>{l(!1),p(o)},f=()=>{l(!0)},a=i?s.findIndex(o=>o.id===i.id):-1,y=a>=0&&a<s.length-1?s[a+1]:null;return t.jsxs(k,{children:[t.jsxs(C,{children:[t.jsx(E,{children:t.jsx(S,{children:s.map(o=>t.jsxs(V,{variants:z,initial:"hidden",whileInView:"visible",viewport:{once:!1,amount:.1},onClick:()=>h(o.title),onMouseEnter:()=>g(o),children:[t.jsx("span",{className:"project-title",children:o.title}),t.jsx("span",{className:"project-description",children:o.description})]},o.id))})}),t.jsx(I,{children:t.jsx(N,{children:i&&i.image&&!m?t.jsxs(t.Fragment,{children:[t.jsx(T,{children:t.jsx(Y,{src:i.image,alt:i.title,isVisible:!0,onError:f,initial:{opacity:0,scale:.95,rotateY:-5}
167,animate:{opacity:1,scale:1,rotateY:-2},transition:{duration:.5,delay:.2}},i.id)}),t.jsx(M,{}),t.jsx(F,{isVisible:!0,initial:{opacity:0,x:-20},animate:{opacity:1,x:0},transition:{duration:.5,delay:.2},title:i.title,children:i.title.toUpperCase()},i.id)]}):null})}),t.jsx(w,{children:t.jsx(j,{onClick:x,children:"johnny sheng's projects"})})]}),i&&t.jsx(v,{currentProject:i,nextProject:y})]})};export{G as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.