2:I[8047,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Column"]
3:I[2092,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Button"]
4:I[9316,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Heading"]
5:I[1467,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"SmartImage"]
6:I[1162,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Flex"]
7:I[5472,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"AvatarGroup"]
8:I[2060,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Text"]
a:I[1522,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"default"]
b:I[4707,[],""]
d:I[6423,[],""]
c:["slug","Portfolio","d"]
0:["bDhTX4w24JXMIopZm2OtZ",[[["",{"children":["work",{"children":[["slug","Portfolio","d"],{"children":["__PAGE__?{\"slug\":\"Portfolio\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["work",{"children":[["slug","Portfolio","d"],{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{"as":"section","maxWidth":"m","horizontal":"center","gap":"l","children":[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒\",\"datePublished\":\"2025-02-01\",\"dateModified\":\"2025-02-01\",\"description\":\"𝚂𝚑𝚘𝚠 𝚘𝚏𝚏 𝚢𝚘𝚞𝚛 𝚍𝚎𝚟 𝚜𝚔𝚒𝚕𝚕𝚜 𝚒𝚗 𝚜𝚝𝚢𝚕𝚎 𝚠𝚒𝚝𝚑 𝚊 𝚙𝚘𝚛𝚝𝚏𝚘𝚕𝚒𝚘 𝚝𝚑𝚊𝚝’𝚜 𝚏𝚊𝚜𝚝𝚎𝚛 𝚝𝚑𝚊𝚗 𝚢𝚘𝚞𝚛 𝚌𝚘𝚏𝚏𝚎𝚎 𝚔𝚒𝚌𝚔. 𝙽𝚎𝚡𝚝.𝚓𝚜 + 𝚃𝚊𝚒𝚕𝚠𝚒𝚗𝚍 𝙲𝚂𝚂 = 𝚜𝚕𝚒𝚌𝚔, 𝚜𝚑𝚒𝚗𝚢, 𝚊𝚗𝚍 𝚜𝚘 𝚌𝚞𝚜𝚝𝚘𝚖𝚒𝚣𝚊𝚋𝚕𝚎 𝚢𝚘𝚞𝚛 𝚙𝚛𝚘𝚓𝚎𝚌𝚝𝚜 𝚠𝚒𝚕𝚕 𝚙𝚛𝚊𝚌𝚝𝚒𝚌𝚊𝚕𝚕𝚢 𝚠𝚒𝚗𝚔 𝚊𝚝 𝚛𝚎𝚌𝚛𝚞𝚒𝚝𝚎𝚛𝚜\",\"image\":\"https://demo.magic-portfolio.com/og?title=𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒\",\"url\":\"https://demo.magic-portfolio.com/work/Portfolio\",\"author\":{\"@type\":\"Person\",\"name\":\"𝓘𝓼𝓼𝓪𝓬 𝓜𝓸𝓼𝓮𝓼 𝓓\"}}"}}],["$","$L2",null,{"maxWidth":"xs","gap":"16","children":[["$","$L3",null,{"href":"/work","variant":"tertiary","weight":"default","size":"s","prefixIcon":"chevronLeft","children":"Projects"}],["$","$L4",null,{"variant":"display-strong-s","children":"𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒"}]]}],["$","$L5",null,{"priority":true,"aspectRatio":"16 / 9","radius":"m","alt":"image","src":"/projects/Portfolio.mp4"}],["$","$L2",null,{"style":{"margin":"auto"},"as":"article","maxWidth":"xs","children":[["$","$L6",null,{"gap":"12","marginBottom":"24","vertical":"center","children":[["$","$L7",null,{"reverse":true,"avatars":[{"src":"/about/me.jpg"}],"size":"m"}],["$","$L8",null,{"variant":"body-default-s","onBackground":"neutral-weak","children":"February 1, 2025"}]]}],"$L9"]}],["$","$La",null,{}]]}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/4612b5a83fc9ad30.css","precedence":"next","crossOrigin":"$undefined"}]]],null],null]},[null,["$","$Lb",null,{"parallelRouterKey":"children","segmentPath":["children","work","children","$c","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Ld",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$Lb",null,{"parallelRouterKey":"children","segmentPath":["children","work","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Ld",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/15321eadbcfb15cf.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/845771c36a659ef2.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/css/a5c471f6f9fb2804.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/css/e578cf952a0222b2.css","precedence":"next","crossOrigin":"$undefined"}]],"$Le"],null],null],["$Lf",null]]]]
10:I[6995,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"ToastProvider"]
11:I[124,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Background"]
12:I[9295,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"Header"]
13:I[1844,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"RouteGuard"]
14:I[9511,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"SmartLink"]
15:I[7868,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"IconButton"]
16:I[1288,["665","static/chunks/f97e080b-82142bce571282c5.js","240","static/chunks/53c13509-eaf564bb5542b29d.js","516","static/chunks/f7333993-771a495057fa5276.js","464","static/chunks/464-27062b5d77534a78.js","835","static/chunks/835-8fb4eaa6b59c2403.js","7","static/chunks/7-71c345ad3bf92479.js","854","static/chunks/854-6f236f00c3593074.js","798","static/chunks/app/work/%5Bslug%5D/page-618e7328e1a6e8c4.js"],"HeadingLink"]
e:["$","$L6",null,{"as":"html","lang":"en","background":"page","data-neutral":"slate","data-brand":"violet","data-accent":"pink","data-solid":"contrast","data-solid-style":"plastic","data-theme":"dark","data-border":"playful","data-surface":"translucent","data-transition":"all","className":"__variable_f367f3 __variable_a06722","children":["$","$L10",null,{"children":["$","$L2",null,{"style":{"minHeight":"100vh"},"as":"body","fillWidth":true,"margin":"0","padding":"0","children":[["$","$L11",null,{"mask":{"cursor":true,"x":0,"y":0,"radius":65},"gradient":{"display":true,"x":50,"y":10,"width":100,"height":100,"tilt":0,"colorStart":"brand-background-strong","colorEnd":"static-transparent","opacity":60},"dots":{"display":true,"color":"brand-on-background-weak","size":2,"opacity":20},"grid":{"display":false,"color":"neutral-alpha-weak","width":"$undefined","height":"$undefined","opacity":100},"lines":{"display":false,"opacity":100}}],["$","$L6",null,{"fillWidth":true,"minHeight":"16"}],["$","$L12",null,{}],["$","$L6",null,{"position":"relative","zIndex":0,"fillWidth":true,"paddingY":"l","paddingX":"l","horizontal":"center","flex":1,"children":["$","$L6",null,{"horizontal":"center","fillWidth":true,"minHeight":"0","children":["$","$L13",null,{"children":["$","$Lb",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Ld",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","$L2",null,{"as":"section","fill":true,"center":true,"paddingBottom":"160","children":[["$","$L8",null,{"marginBottom":"s","variant":"display-strong-xl","children":"404"}],["$","$L4",null,{"marginBottom":"l","variant":"display-default-xs","children":"Page Not Found"}],["$","$L8",null,{"onBackground":"neutral-weak","children":"The page you are looking for does not exist."}]]}],"notFoundStyles":[]}]}]}]}],["$","$L6",null,{"as":"footer","position":"relative","fillWidth":true,"padding":"8","horizontal":"center","mobileDirection":"column","children":[["$","$L6",null,{"className":"Footer_mobile__TYNqJ","maxWidth":"m","paddingY":"8","paddingX":"16","gap":"16","horizontal":"space-between","vertical":"center","children":[["$","$L8",null,{"variant":"body-default-s","onBackground":"neutral-strong","children":[["$","$L8",null,{"onBackground":"neutral-weak","children":["© ",2025," /"]}],["$","$L8",null,{"paddingX":"4","children":"𝓘𝓼𝓼𝓪𝓬 𝓜𝓸𝓼𝓮𝓼 𝓓"}],["$","$L8",null,{"onBackground":"neutral-weak","children":["/ My"," ",["$","$L14",null,{"style":{"marginLeft":"-0.125rem"},"href":"hhttps://github.com/Issac-Moses/Issac-Moses-Portfolio","children":"PortFolio"}]]}]]}],["$","$L6",null,{"gap":"16","children":[["$","$L15","𝙶𝚒𝚝𝙷𝚞𝚋",{"href":"https://github.com/Issac-Moses","icon":"github","tooltip":"𝙶𝚒𝚝𝙷𝚞𝚋","size":"s","variant":"ghost"}],["$","$L15","𝙻𝚒𝚗𝚔𝚎𝚍𝙸𝚗",{"href":"https://www.linkedin.com/in/i%EF%BD%93%EF%BD%93-a-c-m-%E5%8F%A3%EF%BD%93%E3%83%A2%EF%BD%93-d-12837831b/","icon":"linkedin","tooltip":"𝙻𝚒𝚗𝚔𝚎𝚍𝙸𝚗","size":"s","variant":"ghost"}],"",["$","$L15","𝙴𝚖𝚊𝚒𝚕",{"href":"mailto:issacmoses19082005@gmail.com","icon":"email","tooltip":"𝙴𝚖𝚊𝚒𝚕","size":"s","variant":"ghost"}]]}]]}],["$","$L6",null,{"height":"80","show":"s"}]]}]]}]}]}]
9:[["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":1,"id":"a-dynamic-portfolio-framework-for-developers-leveraging-nextjs-and-tailwind-css","children":"A Dynamic Portfolio Framework for Developers Leveraging Next.js and Tailwind CSS"}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"table-of-contents","children":"Table of Contents"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["$","a",null,{"href":"#introduction","children":"Introduction"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#motivation","children":"Motivation"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#technology-stack","children":"Technology Stack"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#architecture","children":"Architecture"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#key-features","children":"Key Features"}]}],"\n",["$","li",null,{"children":[["$","a",null,{"href":"#implementation-details","children":"Implementation Details"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","a",null,{"href":"#1-nextjs-for-dynamic-rendering","children":"1. Next.js for Dynamic Rendering"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#2-tailwind-css-for-design-efficiency","children":"2. Tailwind CSS for Design Efficiency"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#3-component-based-architecture","children":"3. Component-Based Architecture"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#4-responsive-and-interactive-ui","children":"4. Responsive and Interactive UI"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#5-deployment-and-optimization","children":"5. Deployment and Optimization"}]}],"\n"]}],"\n"]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#challenges-and-solutions","children":"Challenges and Solutions"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#use-cases","children":"Use Cases"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#conclusion","children":"Conclusion"}]}],"\n",["$","li",null,{"children":["$","a",null,{"href":"#references","children":"References"}]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"introduction","children":"Introduction"}],"\n",["$","$L8",null,{"style":{"lineHeight":"175%"},"variant":"body-default-m","onBackground":"neutral-medium","marginTop":"8","marginBottom":"12","children":"In the modern software development ecosystem, a developer's portfolio is a critical tool to showcase skills, projects, and professional achievements. Traditional portfolios are often static, time-consuming to update, and lack interactivity."}],"\n",["$","$L8",null,{"style":{"lineHeight":"175%"},"variant":"body-default-m","onBackground":"neutral-medium","marginTop":"8","marginBottom":"12","children":["This project proposes a ",["$","strong",null,{"children":"dynamic portfolio framework"}]," built using ",["$","strong",null,{"children":"Next.js"}]," and ",["$","strong",null,{"children":"Tailwind CSS"}],", enabling developers to create responsive, visually appealing, and easily maintainable portfolios. The framework emphasizes ",["$","strong",null,{"children":"reusability, scalability, and automation"}],"."]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"motivation","children":"Motivation"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"Dynamic Content Updates:"}]," Developers frequently update their project list and skills; dynamic frameworks reduce manual edits."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Responsive Design:"}]," Modern portfolios must work seamlessly across devices."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Maintainability:"}]," Component-based design ensures easier updates and scalability."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Modern Aesthetic:"}]," Developers want portfolios that reflect modern UI/UX trends."]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"technology-stack","children":"Technology Stack"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"Next.js:"}]," React-based framework for server-side rendering and static site generation."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Tailwind CSS:"}]," Utility-first CSS framework for rapid, customizable styling."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"React:"}]," For building reusable UI components."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Vercel / Netlify:"}]," Cloud platforms for deployment with automatic CI/CD."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Optional Tools:"}]," Framer Motion (animations), TypeScript (type safety), React Icons, Google Fonts."]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"architecture","children":"Architecture"}],"\n",["$","$L8",null,{"style":{"lineHeight":"175%"},"variant":"body-default-m","onBackground":"neutral-medium","marginTop":"8","marginBottom":"12","children":["The framework follows a ",["$","strong",null,{"children":"modular architecture"}],":"]}],"\n",["$","pre",null,{"children":["$","code",null,{"className":"language-bash","children":"    Portfolio Framework\n    │\n    ├── Components\n    │ ├── Header\n    │ ├── Hero Section\n    │ ├── Project Cards\n    │ ├── Experience Section\n    │ ├── Contact Form\n    │\n    ├── Pages\n    │ ├── index.js\n    │ ├── projects.js\n    │ ├── about.js\n    │\n    ├── Styles\n    │ └── Tailwind Config\n    │\n    ├── Data\n    │ └── JSON or Markdown for dynamic content\n\n"}]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"Components:"}]," Reusable UI elements."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Pages:"}]," Route-based rendering using Next.js."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Data Layer:"}]," Dynamic content can be fetched from JSON files, Markdown, or APIs."]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"key-features","children":"Key Features"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"Dynamic Project Rendering:"}]," Add projects via JSON/Markdown without changing core code."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Responsive Design:"}]," Tailwind ensures mobile-first, cross-device compatibility."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Modern UI/UX:"}]," Smooth animations, gradient text, and interactive cards."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"SEO and Performance Optimized:"}]," Next.js handles SSR and SSG for better search rankings."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Dark and Light Mode Support:"}]," Toggleable themes with minimal effort."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Easy Deployment:"}]," Compatible with Vercel or Netlify for continuous deployment."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Analytics Integration:"}]," Optional Google Analytics or Plausible integration."]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"implementation-details","children":"Implementation Details"}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":3,"id":"1-nextjs-for-dynamic-rendering","children":"1. Next.js for Dynamic Rendering"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Supports ",["$","strong",null,{"children":"Static Site Generation (SSG)"}]," for faster load times."]}],"\n",["$","li",null,{"children":["Supports ",["$","strong",null,{"children":"Server-Side Rendering (SSR)"}]," for dynamic data fetching."]}],"\n",["$","li",null,{"children":"Route-based structure allows intuitive page navigation."}],"\n"]}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":3,"id":"2-tailwind-css-for-design-efficiency","children":"2. Tailwind CSS for Design Efficiency"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Utility-first classes reduce the need for custom CSS."}],"\n",["$","li",null,{"children":"Supports dark mode, responsive layouts, gradients, and shadows."}],"\n",["$","li",null,{"children":["Minimal build size due to ",["$","strong",null,{"children":"tree-shaking"}],"."]}],"\n"]}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":3,"id":"3-component-based-architecture","children":"3. Component-Based Architecture"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Components like HeroSection, ProjectCard, and ExperienceCard are ",["$","strong",null,{"children":"reusable"}],"."]}],"\n",["$","li",null,{"children":"Props-driven architecture allows easy customization."}],"\n",["$","li",null,{"children":["Enables ",["$","strong",null,{"children":"future scalability"}]," by adding new sections or features."]}],"\n"]}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":3,"id":"4-responsive-and-interactive-ui","children":"4. Responsive and Interactive UI"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Mobile-first design ensures usability across devices."}],"\n",["$","li",null,{"children":["Smooth animations and hover effects via ",["$","strong",null,{"children":"Framer Motion"}]," or Tailwind utilities."]}],"\n",["$","li",null,{"children":"Interactive elements like project cards with links, images, and descriptions."}],"\n"]}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":3,"id":"5-deployment-and-optimization","children":"5. Deployment and Optimization"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Optimized images using Next.js ",["$","strong",null,{"children":"Image component"}],"."]}],"\n",["$","li",null,{"children":"Built-in code splitting and lazy loading for performance."}],"\n",["$","li",null,{"children":"Supports CI/CD pipelines for automatic deployment on pushes."}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"use-cases","children":"Use Cases"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"Developer Portfolios:"}]," Showcase projects, skills, and experience dynamically."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Agency or Freelancer Profiles:"}]," Present team projects and case studies."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Open Source Contributors:"}]," Highlight contributions with GitHub integration."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Personal Branding:"}]," Use dynamic sections for blogs, testimonials, and contact forms."]}],"\n"]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"conclusion","children":"Conclusion"}],"\n",["$","$L8",null,{"style":{"lineHeight":"175%"},"variant":"body-default-m","onBackground":"neutral-medium","marginTop":"8","marginBottom":"12","children":["The ",["$","strong",null,{"children":"Dynamic Portfolio Framework"}]," using ",["$","strong",null,{"children":"Next.js"}]," and ",["$","strong",null,{"children":"Tailwind CSS"}]," allows developers to create professional, modern, and maintainable portfolios. By leveraging ",["$","strong",null,{"children":"dynamic content rendering, responsive design, and component-based architecture"}],", this framework provides an efficient solution for developers who want to showcase their work effectively and interactively."]}],"\n",["$","hr",null,{}],"\n",["$","$L16",null,{"style":{"marginTop":"var(--static-space-24)","marginBottom":"var(--static-space-12)"},"level":2,"id":"references","children":"References"}],"\n",["$","ol",null,{"children":["\n",["$","li",null,{"children":["Vercel, ",["$","em",null,{"children":"Next.js Documentation"}],", ",["$","a",null,{"href":"https://nextjs.org/docs","target":"_blank","rel":"noopener noreferrer","children":"https://nextjs.org/docs"}]]}],"\n",["$","li",null,{"children":["Tailwind Labs, ",["$","em",null,{"children":"Tailwind CSS Documentation"}],", ",["$","a",null,{"href":"https://tailwindcss.com/docs","target":"_blank","rel":"noopener noreferrer","children":"https://tailwindcss.com/docs"}]]}],"\n",["$","li",null,{"children":["React, ",["$","em",null,{"children":"Official Documentation"}],", ",["$","a",null,{"href":"https://reactjs.org/docs/getting-started.html","target":"_blank","rel":"noopener noreferrer","children":"https://reactjs.org/docs/getting-started.html"}]]}],"\n",["$","li",null,{"children":["Framer Motion, ",["$","em",null,{"children":"Animation Library for React"}],", ",["$","a",null,{"href":"https://www.framer.com/motion/","target":"_blank","rel":"noopener noreferrer","children":"https://www.framer.com/motion/"}]]}],"\n",["$","li",null,{"children":["Smashing Magazine, ",["$","em",null,{"children":"Best Practices for Developer Portfolios"}],", 2023."]}],"\n",["$","li",null,{"children":["Netlify Docs, ",["$","em",null,{"children":"Deploying Next.js Apps"}],", ",["$","a",null,{"href":"https://docs.netlify.com","target":"_blank","rel":"noopener noreferrer","children":"https://docs.netlify.com"}]]}],"\n"]}]]
f:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒"}],["$","meta","3",{"name":"description","content":"𝚂𝚑𝚘𝚠 𝚘𝚏𝚏 𝚢𝚘𝚞𝚛 𝚍𝚎𝚟 𝚜𝚔𝚒𝚕𝚕𝚜 𝚒𝚗 𝚜𝚝𝚢𝚕𝚎 𝚠𝚒𝚝𝚑 𝚊 𝚙𝚘𝚛𝚝𝚏𝚘𝚕𝚒𝚘 𝚝𝚑𝚊𝚝’𝚜 𝚏𝚊𝚜𝚝𝚎𝚛 𝚝𝚑𝚊𝚗 𝚢𝚘𝚞𝚛 𝚌𝚘𝚏𝚏𝚎𝚎 𝚔𝚒𝚌𝚔. 𝙽𝚎𝚡𝚝.𝚓𝚜 + 𝚃𝚊𝚒𝚕𝚠𝚒𝚗𝚍 𝙲𝚂𝚂 = 𝚜𝚕𝚒𝚌𝚔, 𝚜𝚑𝚒𝚗𝚢, 𝚊𝚗𝚍 𝚜𝚘 𝚌𝚞𝚜𝚝𝚘𝚖𝚒𝚣𝚊𝚋𝚕𝚎 𝚢𝚘𝚞𝚛 𝚙𝚛𝚘𝚓𝚎𝚌𝚝𝚜 𝚠𝚒𝚕𝚕 𝚙𝚛𝚊𝚌𝚝𝚒𝚌𝚊𝚕𝚕𝚢 𝚠𝚒𝚗𝚔 𝚊𝚝 𝚛𝚎𝚌𝚛𝚞𝚒𝚝𝚎𝚛𝚜"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒"}],["$","meta","7",{"property":"og:description","content":"𝚂𝚑𝚘𝚠 𝚘𝚏𝚏 𝚢𝚘𝚞𝚛 𝚍𝚎𝚟 𝚜𝚔𝚒𝚕𝚕𝚜 𝚒𝚗 𝚜𝚝𝚢𝚕𝚎 𝚠𝚒𝚝𝚑 𝚊 𝚙𝚘𝚛𝚝𝚏𝚘𝚕𝚒𝚘 𝚝𝚑𝚊𝚝’𝚜 𝚏𝚊𝚜𝚝𝚎𝚛 𝚝𝚑𝚊𝚗 𝚢𝚘𝚞𝚛 𝚌𝚘𝚏𝚏𝚎𝚎 𝚔𝚒𝚌𝚔. 𝙽𝚎𝚡𝚝.𝚓𝚜 + 𝚃𝚊𝚒𝚕𝚠𝚒𝚗𝚍 𝙲𝚂𝚂 = 𝚜𝚕𝚒𝚌𝚔, 𝚜𝚑𝚒𝚗𝚢, 𝚊𝚗𝚍 𝚜𝚘 𝚌𝚞𝚜𝚝𝚘𝚖𝚒𝚣𝚊𝚋𝚕𝚎 𝚢𝚘𝚞𝚛 𝚙𝚛𝚘𝚓𝚎𝚌𝚝𝚜 𝚠𝚒𝚕𝚕 𝚙𝚛𝚊𝚌𝚝𝚒𝚌𝚊𝚕𝚕𝚢 𝚠𝚒𝚗𝚔 𝚊𝚝 𝚛𝚎𝚌𝚛𝚞𝚒𝚝𝚎𝚛𝚜"}],["$","meta","8",{"property":"og:url","content":"https://demo.magic-portfolio.com/work/Portfolio"}],["$","meta","9",{"property":"og:image","content":"https://demo.magic-portfolio.com/og?title=%F0%9D%90%80%20%F0%9D%90%83%F0%9D%90%B2%F0%9D%90%A7%F0%9D%90%9A%F0%9D%90%A6%F0%9D%90%A2%F0%9D%90%9C%20%F0%9D%90%8F%F0%9D%90%A8%F0%9D%90%AB%F0%9D%90%AD%F0%9D%90%9F%F0%9D%90%A8%F0%9D%90%A5%F0%9D%90%A2%F0%9D%90%A8%20%F0%9D%90%85%F0%9D%90%AB%F0%9D%90%9A%F0%9D%90%A6%F0%9D%90%9E%F0%9D%90%B0%F0%9D%90%A8%F0%9D%90%AB%F0%9D%90%A4%20%F0%9D%90%9F%F0%9D%90%A8%F0%9D%90%AB%20%F0%9D%90%83%F0%9D%90%9E%F0%9D%90%AF%F0%9D%90%9E%F0%9D%90%A5%F0%9D%90%A8%F0%9D%90%A9%F0%9D%90%9E%F0%9D%90%AB%F0%9D%90%AC%20%F0%9D%90%8B%F0%9D%90%9E%F0%9D%90%AF%F0%9D%90%9E%F0%9D%90%AB%F0%9D%90%9A%F0%9D%90%A0%F0%9D%90%A2%F0%9D%90%A7%F0%9D%90%A0%20%F0%9D%90%8D%F0%9D%90%9E%F0%9D%90%B1%F0%9D%90%AD.%F0%9D%90%A3%F0%9D%90%AC%20%F0%9D%90%9A%F0%9D%90%A7%F0%9D%90%9D%20%F0%9D%90%93%F0%9D%90%9A%F0%9D%90%A2%F0%9D%90%A5%F0%9D%90%B0%F0%9D%90%A2%F0%9D%90%A7%F0%9D%90%9D%20%F0%9D%90%82%F0%9D%90%92%F0%9D%90%92"}],["$","meta","10",{"property":"og:type","content":"article"}],["$","meta","11",{"property":"article:published_time","content":"2025-02-01"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"𝐀 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐏𝐨𝐫𝐭𝐟𝐨𝐥𝐢𝐨 𝐅𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤 𝐟𝐨𝐫 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐋𝐞𝐯𝐞𝐫𝐚𝐠𝐢𝐧𝐠 𝐍𝐞𝐱𝐭.𝐣𝐬 𝐚𝐧𝐝 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒"}],["$","meta","14",{"name":"twitter:description","content":"𝚂𝚑𝚘𝚠 𝚘𝚏𝚏 𝚢𝚘𝚞𝚛 𝚍𝚎𝚟 𝚜𝚔𝚒𝚕𝚕𝚜 𝚒𝚗 𝚜𝚝𝚢𝚕𝚎 𝚠𝚒𝚝𝚑 𝚊 𝚙𝚘𝚛𝚝𝚏𝚘𝚕𝚒𝚘 𝚝𝚑𝚊𝚝’𝚜 𝚏𝚊𝚜𝚝𝚎𝚛 𝚝𝚑𝚊𝚗 𝚢𝚘𝚞𝚛 𝚌𝚘𝚏𝚏𝚎𝚎 𝚔𝚒𝚌𝚔. 𝙽𝚎𝚡𝚝.𝚓𝚜 + 𝚃𝚊𝚒𝚕𝚠𝚒𝚗𝚍 𝙲𝚂𝚂 = 𝚜𝚕𝚒𝚌𝚔, 𝚜𝚑𝚒𝚗𝚢, 𝚊𝚗𝚍 𝚜𝚘 𝚌𝚞𝚜𝚝𝚘𝚖𝚒𝚣𝚊𝚋𝚕𝚎 𝚢𝚘𝚞𝚛 𝚙𝚛𝚘𝚓𝚎𝚌𝚝𝚜 𝚠𝚒𝚕𝚕 𝚙𝚛𝚊𝚌𝚝𝚒𝚌𝚊𝚕𝚕𝚢 𝚠𝚒𝚗𝚔 𝚊𝚝 𝚛𝚎𝚌𝚛𝚞𝚒𝚝𝚎𝚛𝚜"}],["$","meta","15",{"name":"twitter:image","content":"https://demo.magic-portfolio.com/og?title=%F0%9D%90%80%20%F0%9D%90%83%F0%9D%90%B2%F0%9D%90%A7%F0%9D%90%9A%F0%9D%90%A6%F0%9D%90%A2%F0%9D%90%9C%20%F0%9D%90%8F%F0%9D%90%A8%F0%9D%90%AB%F0%9D%90%AD%F0%9D%90%9F%F0%9D%90%A8%F0%9D%90%A5%F0%9D%90%A2%F0%9D%90%A8%20%F0%9D%90%85%F0%9D%90%AB%F0%9D%90%9A%F0%9D%90%A6%F0%9D%90%9E%F0%9D%90%B0%F0%9D%90%A8%F0%9D%90%AB%F0%9D%90%A4%20%F0%9D%90%9F%F0%9D%90%A8%F0%9D%90%AB%20%F0%9D%90%83%F0%9D%90%9E%F0%9D%90%AF%F0%9D%90%9E%F0%9D%90%A5%F0%9D%90%A8%F0%9D%90%A9%F0%9D%90%9E%F0%9D%90%AB%F0%9D%90%AC%20%F0%9D%90%8B%F0%9D%90%9E%F0%9D%90%AF%F0%9D%90%9E%F0%9D%90%AB%F0%9D%90%9A%F0%9D%90%A0%F0%9D%90%A2%F0%9D%90%A7%F0%9D%90%A0%20%F0%9D%90%8D%F0%9D%90%9E%F0%9D%90%B1%F0%9D%90%AD.%F0%9D%90%A3%F0%9D%90%AC%20%F0%9D%90%9A%F0%9D%90%A7%F0%9D%90%9D%20%F0%9D%90%93%F0%9D%90%9A%F0%9D%90%A2%F0%9D%90%A5%F0%9D%90%B0%F0%9D%90%A2%F0%9D%90%A7%F0%9D%90%9D%20%F0%9D%90%82%F0%9D%90%92%F0%9D%90%92"}],["$","link","16",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"1280x1280"}]]
1:null