const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(r){const a={a:"a",code:"code",figure:"figure",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...r.components};return l(e,{children:[l(a.h2,{id:"goal",children:["Goal",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#goal",children:"#"})]}),"\n",n(a.p,{children:"The projects route is designed to feel like a showcase, not just a list of links."}),"\n",n(a.p,{children:"Main goals:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"combine project details with a 3D hero area"}),"\n",n(a.li,{children:"make the laptop model feel polished"}),"\n",n(a.li,{children:"keep the layout responsive"}),"\n",n(a.li,{children:"keep interaction controlled"}),"\n"]}),"\n",l(a.h2,{id:"route-structure",children:["Route structure",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#route-structure",children:"#"})]}),"\n",n(a.p,{children:"The route is built around two main blocks:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"project info card"}),"\n",n(a.li,{children:"3D canvas card"}),"\n"]}),"\n",n(a.p,{children:"This is the basic idea:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"ProjectInfoCard"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"ProjectScene"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]})]})})}),"\n",n(a.p,{children:"The card explains the project. The canvas gives the route its visual identity."}),"\n",l(a.h2,{id:"3d-stack",children:["3D stack",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#3d-stack",children:"#"})]}),"\n",n(a.p,{children:"The scene uses:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"React Three Fiber"}),"\n",n(a.li,{children:"Drei"}),"\n",n(a.li,{children:"Three.js"}),"\n",n(a.li,{children:"postprocessing"}),"\n"]}),"\n",n(a.p,{children:"Key scene pieces:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"Canvas"}),n(a.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Environment"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Float"}),n(a.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"DemoComputer"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"ContactShadows"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"OrbitControls"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:""})]})]})})}),"\n",n(a.p,{children:"This keeps the scene modular and easy to tune."}),"\n",l(a.h2,{id:"lighting-approach",children:["Lighting approach",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#lighting-approach",children:"#"})]}),"\n",n(a.p,{children:"The model uses layered lighting instead of one generic source."}),"\n",n(a.p,{children:"Used lights:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"ambient light"}),"\n",n(a.li,{children:"spotlight"}),"\n",n(a.li,{children:"directional light"}),"\n",n(a.li,{children:"rim point lights"}),"\n",n(a.li,{children:"backlight"}),"\n"]}),"\n",n(a.p,{children:"Example:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"ambientLight"}),n(a.span,{style:{color:"#B392F0"},children:" intensity"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"0.06"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"spotLight"}),n(a.span,{style:{color:"#B392F0"},children:" position"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{["}),n(a.span,{style:{color:"#79B8FF"},children:"6"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"5"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"3"}),n(a.span,{style:{color:"#E1E4E8"},children:"]} "}),n(a.span,{style:{color:"#B392F0"},children:"intensity"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"48"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"directionalLight"}),n(a.span,{style:{color:"#B392F0"},children:" position"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{["}),n(a.span,{style:{color:"#F97583"},children:"-"}),n(a.span,{style:{color:"#79B8FF"},children:"5"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"3.5"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"2.5"}),n(a.span,{style:{color:"#E1E4E8"},children:"]} "}),n(a.span,{style:{color:"#B392F0"},children:"intensity"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"1.6"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]})]})})}),"\n",n(a.p,{children:"Why:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"better shape definition"}),"\n",n(a.li,{children:"stronger product feel"}),"\n",n(a.li,{children:"more controlled highlights"}),"\n"]}),"\n",l(a.h2,{id:"post-processing",children:["Post-processing",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#post-processing",children:"#"})]}),"\n",n(a.p,{children:"The route uses subtle post-processing for polish:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"bloom"}),"\n",n(a.li,{children:"contrast tuning"}),"\n",n(a.li,{children:"saturation"}),"\n",n(a.li,{children:"chromatic aberration"}),"\n",n(a.li,{children:"vignette"}),"\n"]}),"\n",n(a.p,{children:"Example:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:"EffectComposer"}),n(a.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Bloom"}),n(a.span,{style:{color:"#B392F0"},children:" intensity"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"0.45"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"BrightnessContrast"}),n(a.span,{style:{color:"#B392F0"},children:" brightness"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"0.02"}),n(a.span,{style:{color:"#E1E4E8"},children:"} "}),n(a.span,{style:{color:"#B392F0"},children:"contrast"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"0.12"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Vignette"}),n(a.span,{style:{color:"#B392F0"},children:" darkness"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#79B8FF"},children:"0.65"}),n(a.span,{style:{color:"#E1E4E8"},children:"} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:""})]})]})})}),"\n",n(a.p,{children:"The values stay restrained so the model still feels clean."}),"\n",l(a.h2,{id:"model-rig-and-responsiveness",children:["Model rig and responsiveness",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#model-rig-and-responsiveness",children:"#"})]}),"\n",n(a.p,{children:"The laptop model is wrapped in a rig that changes based on screen width."}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" isSmallScreen"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#E1E4E8"},children:" size.width "}),n(a.span,{style:{color:"#F97583"},children:"<"}),n(a.span,{style:{color:"#79B8FF"},children:" 650"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:"<"}),n(a.span,{style:{color:"#85E89D"},children:"group"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" scale"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{isSmallScreen "}),n(a.span,{style:{color:"#F97583"},children:"?"}),n(a.span,{style:{color:"#79B8FF"},children:" 1.05"}),n(a.span,{style:{color:"#F97583"},children:" :"}),n(a.span,{style:{color:"#79B8FF"},children:" 1.42"}),n(a.span,{style:{color:"#E1E4E8"},children:"}"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" position"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{["}),n(a.span,{style:{color:"#79B8FF"},children:"0"}),n(a.span,{style:{color:"#E1E4E8"},children:", isSmallScreen "}),n(a.span,{style:{color:"#F97583"},children:"?"}),n(a.span,{style:{color:"#F97583"},children:" -"}),n(a.span,{style:{color:"#79B8FF"},children:"1.34"}),n(a.span,{style:{color:"#F97583"},children:" :"}),n(a.span,{style:{color:"#F97583"},children:" -"}),n(a.span,{style:{color:"#79B8FF"},children:"1.52"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"0"}),n(a.span,{style:{color:"#E1E4E8"},children:"]}"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:">"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"DemoComputer"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:""})]})]})})}),"\n",n(a.p,{children:"This is important because a model that looks good on desktop can easily break composition on smaller devices."}),"\n",l(a.h2,{id:"project-card-system",children:["Project card system",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#project-card-system",children:"#"})]}),"\n",n(a.p,{children:"The text card handles:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"project title"}),"\n",n(a.li,{children:"bullet points"}),"\n",n(a.li,{children:"featured badge"}),"\n",n(a.li,{children:"tags"}),"\n",n(a.li,{children:"live/repo actions"}),"\n",n(a.li,{children:"previous/next controls"}),"\n"]}),"\n",n(a.p,{children:"The project data is stored centrally and rendered from state."}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#E1E4E8"},children:" ["}),n(a.span,{style:{color:"#79B8FF"},children:"selectedProjectIndex"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#79B8FF"},children:"setSelectedProjectIndex"}),n(a.span,{style:{color:"#E1E4E8"},children:"] "}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#B392F0"},children:" useState"}),n(a.span,{style:{color:"#E1E4E8"},children:"("}),n(a.span,{style:{color:"#79B8FF"},children:"0"}),n(a.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" currentProject"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#E1E4E8"},children:" myProjects[selectedProjectIndex];"})]})]})})}),"\n",n(a.p,{children:"That makes the route easier to update without rewriting UI logic."}),"\n",l(a.h2,{id:"short-architecture-summary",children:["Short architecture summary",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#short-architecture-summary",children:"#"})]}),"\n",n(a.p,{children:"The projects route is:"}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"one responsive 2-column showcase"}),"\n",n(a.li,{children:"one controlled 3D scene"}),"\n",n(a.li,{children:"one state-driven project card system"}),"\n",n(a.li,{children:"one shared visual language using global tokens"}),"\n"]}),"\n",l(a.h2,{id:"prompt",children:["Prompt",n(a.a,{className:"heading-anchor","aria-label":"Link to heading",href:"#prompt",children:"#"})]}),"\n",n(a.p,{children:"If you want to build a projects route like this, use this prompt:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{tabIndex:"0","data-language":"text","data-theme":"github-dark",children:l(a.code,{"data-language":"text","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{children:"Build a projects showcase page in Next.js with React Three Fiber."})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"Use a 2-column layout with a project information card and a 3D laptop scene."})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"Use layered lighting, soft post-processing, and a responsive model rig."})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"Keep controls constrained so the scene stays elegant."})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"Render project content from centralized data with title, points, tags, repo link, and live link."})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"Make the route feel premium but still responsive on small screens."})})]})})})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

My Blog