[{"data":1,"prerenderedAt":760},["ShallowReactive",2],{"/projects/portfolio-refresh":3},{"id":4,"title":5,"additionalTags":6,"body":7,"description":734,"excerpt":735,"extension":736,"featured":737,"meta":738,"name":5,"navigation":737,"openSource":744,"path":745,"projectDate":746,"seo":747,"sitemap":748,"status":752,"stem":753,"subtitle":754,"tags":755,"thumbnail":758,"__hash__":759},"projects/projects/1.portfolio-refresh.md","Portfolio Refresh",[],{"type":8,"value":9,"toc":727},"minimark",[10,14,18,23,46,50,53,57,60,63,66,70,74,77,80,468,471,608,615,636,643,672,676,723],[11,12],"stats-table",{":stats":13},"[{\"label\": \"release date\", \"value\": \"2025\"}]",[15,16,17],"p",{},"Welcome to my 2025 refreshed portfolio.",[19,20,22],"h2",{"id":21},"goals","Goals",[24,25,26,34,40],"ol",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Speed"," - It had to be fast and I wanted to get as close to a perfect Lighthouse score as possible.",[27,35,36,39],{},[30,37,38],{},"Modern"," - I wanted to utilize the latest tech, Nuxt, Tailwind, and GSAP for subtle animations & micro-interactions.",[27,41,42,45],{},[30,43,44],{},"Learn Something New"," - Get out of my comfort zone and try new things.",[19,47,49],{"id":48},"results","Results",[51,52],"app-lighthouse-results",{},[19,54,56],{"id":55},"process","Process",[15,58,59],{},"I knew from the very beginning I wanted to stick with Vue but I wanted to take it a step further and explore the Nuxt ecosystem which up to this point I hadn't really had a chance or reason to use.",[15,61,62],{},"Choosing Nuxt lead me to Nuxt UI which brought with it Tailwind, which was another tech that I had minimal experience with but that I wanted to get more familiar with.",[15,64,65],{},"I also knew I wanted to host on Vercel's Edge network as I felt that would get me closer to that perfect Lighthouse score.",[19,67,69],{"id":68},"animations","Animations",[71,72],"app-sticker",{":replayable":73},"true",[15,75,76],{},"The opening sticker animation was made using an SVG that I designed in Adobe Illustrator and then animated the writing in GSAP.",[15,78,79],{},"The entire writing animation is a mere 6 lines of code.",[81,82,87],"pre",{"className":83,"code":84,"language":85,"meta":86,"style":86},"language-vue shiki shiki-themes material-theme-lighter monokai monokai","\u003Cscript setup>\nonMounted(() => {\n    gsap.set(\"#sig-1\", { drawSVG: '0%' });\n    gsap.set(\"#sig-2\", { drawSVG: '0%' });\n    const tl = gsap.timeline({ \n        defaults: { duration: .6, delay: .3, ease: 'power1.inOut' } });\n    tl.to('#sticker', { y: 0, opacity: 1 });\n    tl.to(\"#sig-1\", { drawSVG: '-100%', delay: 0.4 });\n    tl.to(\"#sig-2\", { drawSVG: '100%', delay: -.01 });\n})\n\u003C/script>\n","vue","",[88,89,90,110,131,186,224,253,304,352,399,449,458],"code",{"__ignoreMap":86},[91,92,95,99,103,107],"span",{"class":93,"line":94},"line",1,[91,96,98],{"class":97},"sqipZ","\u003C",[91,100,102],{"class":101},"sDhRb","script",[91,104,106],{"class":105},"s4WCV"," setup",[91,108,109],{"class":97},">\n",[91,111,113,117,121,124,128],{"class":93,"line":112},2,[91,114,116],{"class":115},"sj8bM","onMounted",[91,118,120],{"class":119},"s--uY","(",[91,122,123],{"class":97},"()",[91,125,127],{"class":126},"sMInQ"," =>",[91,129,130],{"class":97}," {\n",[91,132,134,137,140,143,146,150,154,156,159,162,165,168,171,174,177,180,183],{"class":93,"line":133},3,[91,135,136],{"class":119},"    gsap",[91,138,139],{"class":97},".",[91,141,142],{"class":115},"set",[91,144,120],{"class":145},"sFVGM",[91,147,149],{"class":148},"sl1cq","\"",[91,151,153],{"class":152},"seZNR","#sig-1",[91,155,149],{"class":148},[91,157,158],{"class":97},",",[91,160,161],{"class":97}," {",[91,163,164],{"class":145}," drawSVG",[91,166,167],{"class":97},":",[91,169,170],{"class":148}," '",[91,172,173],{"class":152},"0%",[91,175,176],{"class":148},"'",[91,178,179],{"class":97}," }",[91,181,182],{"class":145},")",[91,184,185],{"class":97},";\n",[91,187,189,191,193,195,197,199,202,204,206,208,210,212,214,216,218,220,222],{"class":93,"line":188},4,[91,190,136],{"class":119},[91,192,139],{"class":97},[91,194,142],{"class":115},[91,196,120],{"class":145},[91,198,149],{"class":148},[91,200,201],{"class":152},"#sig-2",[91,203,149],{"class":148},[91,205,158],{"class":97},[91,207,161],{"class":97},[91,209,164],{"class":145},[91,211,167],{"class":97},[91,213,170],{"class":148},[91,215,173],{"class":152},[91,217,176],{"class":148},[91,219,179],{"class":97},[91,221,182],{"class":145},[91,223,185],{"class":97},[91,225,227,230,233,237,240,242,245,247,250],{"class":93,"line":226},5,[91,228,229],{"class":126},"    const",[91,231,232],{"class":119}," tl",[91,234,236],{"class":235},"s-IWT"," =",[91,238,239],{"class":119}," gsap",[91,241,139],{"class":97},[91,243,244],{"class":115},"timeline",[91,246,120],{"class":145},[91,248,249],{"class":97},"{",[91,251,252],{"class":145}," \n",[91,254,256,259,261,263,266,268,272,274,277,279,282,284,287,289,291,294,296,298,300,302],{"class":93,"line":255},6,[91,257,258],{"class":145},"        defaults",[91,260,167],{"class":97},[91,262,161],{"class":97},[91,264,265],{"class":145}," duration",[91,267,167],{"class":97},[91,269,271],{"class":270},"sfpNJ"," .6",[91,273,158],{"class":97},[91,275,276],{"class":145}," delay",[91,278,167],{"class":97},[91,280,281],{"class":270}," .3",[91,283,158],{"class":97},[91,285,286],{"class":145}," ease",[91,288,167],{"class":97},[91,290,170],{"class":148},[91,292,293],{"class":152},"power1.inOut",[91,295,176],{"class":148},[91,297,179],{"class":97},[91,299,179],{"class":97},[91,301,182],{"class":145},[91,303,185],{"class":97},[91,305,307,310,312,315,317,319,322,324,326,328,331,333,336,338,341,343,346,348,350],{"class":93,"line":306},7,[91,308,309],{"class":119},"    tl",[91,311,139],{"class":97},[91,313,314],{"class":115},"to",[91,316,120],{"class":145},[91,318,176],{"class":148},[91,320,321],{"class":152},"#sticker",[91,323,176],{"class":148},[91,325,158],{"class":97},[91,327,161],{"class":97},[91,329,330],{"class":145}," y",[91,332,167],{"class":97},[91,334,335],{"class":270}," 0",[91,337,158],{"class":97},[91,339,340],{"class":145}," opacity",[91,342,167],{"class":97},[91,344,345],{"class":270}," 1",[91,347,179],{"class":97},[91,349,182],{"class":145},[91,351,185],{"class":97},[91,353,355,357,359,361,363,365,367,369,371,373,375,377,379,382,384,386,388,390,393,395,397],{"class":93,"line":354},8,[91,356,309],{"class":119},[91,358,139],{"class":97},[91,360,314],{"class":115},[91,362,120],{"class":145},[91,364,149],{"class":148},[91,366,153],{"class":152},[91,368,149],{"class":148},[91,370,158],{"class":97},[91,372,161],{"class":97},[91,374,164],{"class":145},[91,376,167],{"class":97},[91,378,170],{"class":148},[91,380,381],{"class":152},"-100%",[91,383,176],{"class":148},[91,385,158],{"class":97},[91,387,276],{"class":145},[91,389,167],{"class":97},[91,391,392],{"class":270}," 0.4",[91,394,179],{"class":97},[91,396,182],{"class":145},[91,398,185],{"class":97},[91,400,402,404,406,408,410,412,414,416,418,420,422,424,426,429,431,433,435,437,440,443,445,447],{"class":93,"line":401},9,[91,403,309],{"class":119},[91,405,139],{"class":97},[91,407,314],{"class":115},[91,409,120],{"class":145},[91,411,149],{"class":148},[91,413,201],{"class":152},[91,415,149],{"class":148},[91,417,158],{"class":97},[91,419,161],{"class":97},[91,421,164],{"class":145},[91,423,167],{"class":97},[91,425,170],{"class":148},[91,427,428],{"class":152},"100%",[91,430,176],{"class":148},[91,432,158],{"class":97},[91,434,276],{"class":145},[91,436,167],{"class":97},[91,438,439],{"class":235}," -",[91,441,442],{"class":270},".01",[91,444,179],{"class":97},[91,446,182],{"class":145},[91,448,185],{"class":97},[91,450,452,455],{"class":93,"line":451},10,[91,453,454],{"class":97},"}",[91,456,457],{"class":119},")\n",[91,459,461,464,466],{"class":93,"line":460},11,[91,462,463],{"class":97},"\u003C/",[91,465,102],{"class":101},[91,467,109],{"class":97},[15,469,470],{},"The sticker's dropshadow was made using an SVG filter:",[81,472,476],{"className":473,"code":474,"language":475,"meta":86,"style":86},"language-html shiki shiki-themes material-theme-lighter monokai monokai","\u003Csvg ...>\n  \u003Cdefs>\n      \u003Cfilter id=\"shadow\">\n          \u003CfeDropShadow dx=\"0\" dy=\"6\" stdDeviation=\"7\" flood-opacity=\"0.3\" />\n      \u003C/filter>\n  \u003C/defs>\n\u003C/svg>\n","html",[88,477,478,490,500,523,582,591,600],{"__ignoreMap":86},[91,479,480,482,485,488],{"class":93,"line":94},[91,481,98],{"class":97},[91,483,484],{"class":101},"svg",[91,486,487],{"class":105}," ...",[91,489,109],{"class":97},[91,491,492,495,498],{"class":93,"line":112},[91,493,494],{"class":97},"  \u003C",[91,496,497],{"class":101},"defs",[91,499,109],{"class":97},[91,501,502,505,508,511,514,516,519,521],{"class":93,"line":133},[91,503,504],{"class":97},"      \u003C",[91,506,507],{"class":101},"filter",[91,509,510],{"class":105}," id",[91,512,513],{"class":97},"=",[91,515,149],{"class":148},[91,517,518],{"class":152},"shadow",[91,520,149],{"class":148},[91,522,109],{"class":97},[91,524,525,528,531,534,536,538,541,543,546,548,550,553,555,558,560,562,565,567,570,572,574,577,579],{"class":93,"line":188},[91,526,527],{"class":97},"          \u003C",[91,529,530],{"class":101},"feDropShadow",[91,532,533],{"class":105}," dx",[91,535,513],{"class":97},[91,537,149],{"class":148},[91,539,540],{"class":152},"0",[91,542,149],{"class":148},[91,544,545],{"class":105}," dy",[91,547,513],{"class":97},[91,549,149],{"class":148},[91,551,552],{"class":152},"6",[91,554,149],{"class":148},[91,556,557],{"class":105}," stdDeviation",[91,559,513],{"class":97},[91,561,149],{"class":148},[91,563,564],{"class":152},"7",[91,566,149],{"class":148},[91,568,569],{"class":105}," flood-opacity",[91,571,513],{"class":97},[91,573,149],{"class":148},[91,575,576],{"class":152},"0.3",[91,578,149],{"class":148},[91,580,581],{"class":97}," />\n",[91,583,584,587,589],{"class":93,"line":226},[91,585,586],{"class":97},"      \u003C/",[91,588,507],{"class":101},[91,590,109],{"class":97},[91,592,593,596,598],{"class":93,"line":255},[91,594,595],{"class":97},"  \u003C/",[91,597,497],{"class":101},[91,599,109],{"class":97},[91,601,602,604,606],{"class":93,"line":306},[91,603,463],{"class":97},[91,605,484],{"class":101},[91,607,109],{"class":97},[15,609,610,611,614],{},"and then applied onto the ",[88,612,613],{},"\u003Csvg/>"," using a regular style attribute:",[81,616,618],{"className":473,"code":617,"language":475,"meta":86,"style":86},"\u003Csvg style=\"filter: url('#shadow'); ...\n",[88,619,620],{"__ignoreMap":86},[91,621,622,624,626,629,631,633],{"class":93,"line":94},[91,623,98],{"class":97},[91,625,484],{"class":101},[91,627,628],{"class":105}," style",[91,630,513],{"class":97},[91,632,149],{"class":148},[91,634,635],{"class":152},"filter: url('#shadow'); ...\n",[15,637,638,639,642],{},"The ",[88,640,641],{},"v-gsap-nuxt"," module makes it even easier to animate DOM elements simply through specialized attributes.\nThis is method I used on the work history page to animate the history entries in as the page scrolls.",[81,644,648],{"className":645,"code":646,"language":647,"meta":86,"style":86},"language-vue-html shiki shiki-themes material-theme-lighter monokai monokai","\u003Celement v-gsap.whenVisible.once.stagger.from=\"{ opacity: 0, x: -10, stagger: 0.2 }\" >\n","vue-html",[88,649,650],{"__ignoreMap":86},[91,651,652,654,657,660,662,664,667,669],{"class":93,"line":94},[91,653,98],{"class":97},[91,655,656],{"class":101},"element",[91,658,659],{"class":105}," v-gsap.whenVisible.once.stagger.from",[91,661,513],{"class":97},[91,663,149],{"class":148},[91,665,666],{"class":152},"{ opacity: 0, x: -10, stagger: 0.2 }",[91,668,149],{"class":148},[91,670,671],{"class":97}," >\n",[19,673,675],{"id":674},"technologies-utilized","Technologies Utilized",[677,678,679,689],"table",{},[680,681,682],"thead",{},[683,684,685],"tr",{},[686,687,688],"th",{},"Frontend",[690,691,692,698,703,708,713,718],"tbody",{},[683,693,694],{},[695,696,697],"td",{},"Nuxt",[683,699,700],{},[695,701,702],{},"Vue 3",[683,704,705],{},[695,706,707],{},"Nuxt UI",[683,709,710],{},[695,711,712],{},"Tailwind",[683,714,715],{},[695,716,717],{},"GSAP",[683,719,720],{},[695,721,722],{},"TypeScript",[724,725,726],"style",{},"html pre.shiki code .sqipZ, html code.shiki .sqipZ{--shiki-light:#39ADB5;--shiki-default:#F8F8F2;--shiki-dark:#F8F8F2}html pre.shiki code .sDhRb, html code.shiki .sDhRb{--shiki-light:#E53935;--shiki-default:#F92672;--shiki-dark:#F92672}html pre.shiki code .s4WCV, html code.shiki .s4WCV{--shiki-light:#9C3EDA;--shiki-default:#A6E22E;--shiki-dark:#A6E22E}html pre.shiki code .sj8bM, html code.shiki .sj8bM{--shiki-light:#6182B8;--shiki-default:#A6E22E;--shiki-dark:#A6E22E}html pre.shiki code .s--uY, html code.shiki .s--uY{--shiki-light:#90A4AE;--shiki-default:#F8F8F2;--shiki-dark:#F8F8F2}html pre.shiki code .sMInQ, html code.shiki .sMInQ{--shiki-light:#9C3EDA;--shiki-light-font-style:inherit;--shiki-default:#66D9EF;--shiki-default-font-style:italic;--shiki-dark:#66D9EF;--shiki-dark-font-style:italic}html pre.shiki code .sFVGM, html code.shiki .sFVGM{--shiki-light:#E53935;--shiki-default:#F8F8F2;--shiki-dark:#F8F8F2}html pre.shiki code .sl1cq, html code.shiki .sl1cq{--shiki-light:#39ADB5;--shiki-default:#E6DB74;--shiki-dark:#E6DB74}html pre.shiki code .seZNR, html code.shiki .seZNR{--shiki-light:#91B859;--shiki-default:#E6DB74;--shiki-dark:#E6DB74}html pre.shiki code .s-IWT, html code.shiki .s-IWT{--shiki-light:#39ADB5;--shiki-default:#F92672;--shiki-dark:#F92672}html pre.shiki code .sfpNJ, html code.shiki .sfpNJ{--shiki-light:#F76D47;--shiki-default:#AE81FF;--shiki-dark:#AE81FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":86,"searchDepth":112,"depth":112,"links":728},[729,730,731,732,733],{"id":21,"depth":112,"text":22},{"id":48,"depth":112,"text":49},{"id":55,"depth":112,"text":56},{"id":68,"depth":112,"text":69},{"id":674,"depth":112,"text":675},"Rebuilding my website with modern tech.",null,"md",true,{"items":739},[740,741,742,743],"/projects/crateos/home-dark.jpg","/projects/crateos/home.jpg","/projects/crateos/recall.jpg","/projects/crateos/recall-dark.jpg",false,"/projects/portfolio-refresh","2025-05-01T00:00:00.000Z",{"description":734},{"loc":745,"lastmod":749,"changefreq":750,"priority":751},"2025-05-18","monthly",0.8,"published","projects/1.portfolio-refresh","Gotta go fast",[756,697,717,712,722,757],"VueJS","Git","/projects/portfolio/thumb.webp","QiGZjUMDeFEax3ll1HamWS6r0UfyztBOjGdzkqk-VkQ",1778072417574]