[{"data":1,"prerenderedAt":2695},["ShallowReactive",2],{"content-query-1JYPMYkpvo":3},[4,1318,1625,1889,2133,2452],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"date":11,"tags":12,"image":19,"imageAlt":20,"body":21,"_type":1311,"_id":1312,"_source":1313,"_file":1314,"_stem":1315,"_extension":1316,"sitemap":1317},"/project/nuxt-gql-pulse","project",false,"","Nuxt GQL Pulse – GraphQL Monitoring Module for Nuxt","A lightweight Nuxt module for monitoring and visualizing GraphQL requests in real-time, helping developers debug and optimize API interactions.","28.09.2025",[13,14,15,16,17,18],"nuxt","nuxt3","graphql","monitoring","frontend","module","nuxt-gql-pulse-screenshot.webp","Nuxt GQL Pulse Logo",{"type":22,"children":23,"toc":1303},"root",[24,33,52,64,70,125,131,136,178,189,195,200,244,254,440,445,451,1216,1221,1245,1250,1256,1284,1297],{"type":25,"tag":26,"props":27,"children":29},"element","h3",{"id":28},"nuxt-gql-pulse",[30],{"type":31,"value":32},"text","⚡ Nuxt GQL Pulse",{"type":25,"tag":34,"props":35,"children":36},"p",{},[37,43,45,50],{"type":25,"tag":38,"props":39,"children":40},"strong",{},[41],{"type":31,"value":42},"Nuxt GQL Pulse",{"type":31,"value":44}," is a module I built to help developers ",{"type":25,"tag":38,"props":46,"children":47},{},[48],{"type":31,"value":49},"monitor and visualize GraphQL requests",{"type":31,"value":51}," in Nuxt apps in real-time. It provides quick insights into queries and mutations, tracks response times, and helps debug GraphQL interactions efficiently.",{"type":25,"tag":34,"props":53,"children":54},{},[55,57,62],{"type":31,"value":56},"The module integrates seamlessly with Nuxt 3 projects and gives a lightweight, ",{"type":25,"tag":38,"props":58,"children":59},{},[60],{"type":31,"value":61},"developer-friendly overlay",{"type":31,"value":63}," for monitoring API activity without adding heavy dependencies.",{"type":25,"tag":26,"props":65,"children":67},{"id":66},"technologies-used",[68],{"type":31,"value":69},"🔧 Technologies Used",{"type":25,"tag":71,"props":72,"children":73},"ul",{},[74,85,95,105,115],{"type":25,"tag":75,"props":76,"children":77},"li",{},[78,83],{"type":25,"tag":38,"props":79,"children":80},{},[81],{"type":31,"value":82},"Nuxt 3",{"type":31,"value":84}," – Framework for modern Vue applications",{"type":25,"tag":75,"props":86,"children":87},{},[88,93],{"type":25,"tag":38,"props":89,"children":90},{},[91],{"type":31,"value":92},"GraphQL",{"type":31,"value":94}," – For API queries and mutations",{"type":25,"tag":75,"props":96,"children":97},{},[98,103],{"type":25,"tag":38,"props":99,"children":100},{},[101],{"type":31,"value":102},"Vue 3 / Composition API",{"type":31,"value":104}," – Reactive UI components for displaying requests",{"type":25,"tag":75,"props":106,"children":107},{},[108,113],{"type":25,"tag":38,"props":109,"children":110},{},[111],{"type":31,"value":112},"TypeScript (optional)",{"type":31,"value":114}," – For type-safe development",{"type":25,"tag":75,"props":116,"children":117},{},[118,123],{"type":25,"tag":38,"props":119,"children":120},{},[121],{"type":31,"value":122},"Tailwind CSS / SCSS",{"type":31,"value":124}," – For styling the module interface",{"type":25,"tag":26,"props":126,"children":128},{"id":127},"why-i-built-it",[129],{"type":31,"value":130},"🧠 Why I Built It",{"type":25,"tag":34,"props":132,"children":133},{},[134],{"type":31,"value":135},"GraphQL is powerful but can be tricky to debug, especially in larger Nuxt projects. I wanted a simple way to:",{"type":25,"tag":71,"props":137,"children":138},{},[139,149,161,166],{"type":25,"tag":75,"props":140,"children":141},{},[142,144],{"type":31,"value":143},"See ",{"type":25,"tag":38,"props":145,"children":146},{},[147],{"type":31,"value":148},"real-time GraphQL requests and responses",{"type":25,"tag":75,"props":150,"children":151},{},[152,154,159],{"type":31,"value":153},"Track ",{"type":25,"tag":38,"props":155,"children":156},{},[157],{"type":31,"value":158},"latency and errors",{"type":31,"value":160}," during development",{"type":25,"tag":75,"props":162,"children":163},{},[164],{"type":31,"value":165},"Integrate monitoring without changing existing code",{"type":25,"tag":75,"props":167,"children":168},{},[169,171,176],{"type":31,"value":170},"Make a ",{"type":25,"tag":38,"props":172,"children":173},{},[174],{"type":31,"value":175},"lightweight, reusable module",{"type":31,"value":177}," for any Nuxt project",{"type":25,"tag":34,"props":179,"children":180},{},[181,183,187],{"type":31,"value":182},"The result is ",{"type":25,"tag":38,"props":184,"children":185},{},[186],{"type":31,"value":42},{"type":31,"value":188}," — easy to set up, extend, and use in development environments.",{"type":25,"tag":26,"props":190,"children":192},{"id":191},"getting-started",[193],{"type":31,"value":194},"🚀 Getting Started",{"type":25,"tag":34,"props":196,"children":197},{},[198],{"type":31,"value":199},"Install the module and peer deps:",{"type":25,"tag":201,"props":202,"children":206},"pre",{"className":203,"code":204,"language":205,"meta":8,"style":8},"language-bash shiki shiki-themes vitesse-dark","npm install nuxt-gql-pulse graphql graphql-request\n","bash",[207],{"type":25,"tag":208,"props":209,"children":210},"code",{"__ignoreMap":8},[211],{"type":25,"tag":212,"props":213,"children":216},"span",{"class":214,"line":215},"line",1,[217,223,229,234,239],{"type":25,"tag":212,"props":218,"children":220},{"style":219},"--shiki-default:#80A665",[221],{"type":31,"value":222},"npm",{"type":25,"tag":212,"props":224,"children":226},{"style":225},"--shiki-default:#C98A7D",[227],{"type":31,"value":228}," install",{"type":25,"tag":212,"props":230,"children":231},{"style":225},[232],{"type":31,"value":233}," nuxt-gql-pulse",{"type":25,"tag":212,"props":235,"children":236},{"style":225},[237],{"type":31,"value":238}," graphql",{"type":25,"tag":212,"props":240,"children":241},{"style":225},[242],{"type":31,"value":243}," graphql-request\n",{"type":25,"tag":34,"props":245,"children":246},{},[247,249],{"type":31,"value":248},"Add it to your ",{"type":25,"tag":38,"props":250,"children":251},{},[252],{"type":31,"value":253},"nuxt.config.ts:",{"type":25,"tag":201,"props":255,"children":259},{"className":256,"code":257,"language":258,"meta":8,"style":8},"language-ts shiki shiki-themes vitesse-dark","export default defineNuxtConfig({\n  modules: ['nuxt-gql-pulse'],\n\n  gqlPulse: {\n    clients: {\n      rickandmortyapi: {\n        endpoint: 'https://rickandmortyapi.com/graphql',\n      },\n    },\n  },\n})\n","ts",[260],{"type":25,"tag":208,"props":261,"children":262},{"__ignoreMap":8},[263,288,322,332,346,359,372,404,413,422,431],{"type":25,"tag":212,"props":264,"children":265},{"class":214,"line":215},[266,272,277,282],{"type":25,"tag":212,"props":267,"children":269},{"style":268},"--shiki-default:#4D9375",[270],{"type":31,"value":271},"export",{"type":25,"tag":212,"props":273,"children":274},{"style":268},[275],{"type":31,"value":276}," default",{"type":25,"tag":212,"props":278,"children":279},{"style":219},[280],{"type":31,"value":281}," defineNuxtConfig",{"type":25,"tag":212,"props":283,"children":285},{"style":284},"--shiki-default:#666666",[286],{"type":31,"value":287},"({\n",{"type":25,"tag":212,"props":289,"children":291},{"class":214,"line":290},2,[292,298,303,309,313,317],{"type":25,"tag":212,"props":293,"children":295},{"style":294},"--shiki-default:#B8A965",[296],{"type":31,"value":297},"  modules",{"type":25,"tag":212,"props":299,"children":300},{"style":284},[301],{"type":31,"value":302},": [",{"type":25,"tag":212,"props":304,"children":306},{"style":305},"--shiki-default:#C98A7D77",[307],{"type":31,"value":308},"'",{"type":25,"tag":212,"props":310,"children":311},{"style":225},[312],{"type":31,"value":28},{"type":25,"tag":212,"props":314,"children":315},{"style":305},[316],{"type":31,"value":308},{"type":25,"tag":212,"props":318,"children":319},{"style":284},[320],{"type":31,"value":321},"],\n",{"type":25,"tag":212,"props":323,"children":325},{"class":214,"line":324},3,[326],{"type":25,"tag":212,"props":327,"children":329},{"emptyLinePlaceholder":328},true,[330],{"type":31,"value":331},"\n",{"type":25,"tag":212,"props":333,"children":335},{"class":214,"line":334},4,[336,341],{"type":25,"tag":212,"props":337,"children":338},{"style":294},[339],{"type":31,"value":340},"  gqlPulse",{"type":25,"tag":212,"props":342,"children":343},{"style":284},[344],{"type":31,"value":345},": {\n",{"type":25,"tag":212,"props":347,"children":349},{"class":214,"line":348},5,[350,355],{"type":25,"tag":212,"props":351,"children":352},{"style":294},[353],{"type":31,"value":354},"    clients",{"type":25,"tag":212,"props":356,"children":357},{"style":284},[358],{"type":31,"value":345},{"type":25,"tag":212,"props":360,"children":362},{"class":214,"line":361},6,[363,368],{"type":25,"tag":212,"props":364,"children":365},{"style":294},[366],{"type":31,"value":367},"      rickandmortyapi",{"type":25,"tag":212,"props":369,"children":370},{"style":284},[371],{"type":31,"value":345},{"type":25,"tag":212,"props":373,"children":375},{"class":214,"line":374},7,[376,381,386,390,395,399],{"type":25,"tag":212,"props":377,"children":378},{"style":294},[379],{"type":31,"value":380},"        endpoint",{"type":25,"tag":212,"props":382,"children":383},{"style":284},[384],{"type":31,"value":385},": ",{"type":25,"tag":212,"props":387,"children":388},{"style":305},[389],{"type":31,"value":308},{"type":25,"tag":212,"props":391,"children":392},{"style":225},[393],{"type":31,"value":394},"https://rickandmortyapi.com/graphql",{"type":25,"tag":212,"props":396,"children":397},{"style":305},[398],{"type":31,"value":308},{"type":25,"tag":212,"props":400,"children":401},{"style":284},[402],{"type":31,"value":403},",\n",{"type":25,"tag":212,"props":405,"children":407},{"class":214,"line":406},8,[408],{"type":25,"tag":212,"props":409,"children":410},{"style":284},[411],{"type":31,"value":412},"      },\n",{"type":25,"tag":212,"props":414,"children":416},{"class":214,"line":415},9,[417],{"type":25,"tag":212,"props":418,"children":419},{"style":284},[420],{"type":31,"value":421},"    },\n",{"type":25,"tag":212,"props":423,"children":425},{"class":214,"line":424},10,[426],{"type":25,"tag":212,"props":427,"children":428},{"style":284},[429],{"type":31,"value":430},"  },\n",{"type":25,"tag":212,"props":432,"children":434},{"class":214,"line":433},11,[435],{"type":25,"tag":212,"props":436,"children":437},{"style":284},[438],{"type":31,"value":439},"})\n",{"type":25,"tag":34,"props":441,"children":442},{},[443],{"type":31,"value":444},"That’s it! You can now use Nuxt GQL Pulse in your Nuxt app ✨",{"type":25,"tag":26,"props":446,"children":448},{"id":447},"example-query-characters-from-rick-morty-api",[449],{"type":31,"value":450},"Example: Query characters from Rick & Morty API",{"type":25,"tag":201,"props":452,"children":456},{"className":453,"code":454,"language":455,"meta":8,"style":8},"language-vue shiki shiki-themes vitesse-dark","\u003Cscript setup lang=\"ts\">\nconst query = /* GraphQL */ `\n  query {\n    characters(page: 1) {\n      results {\n        id\n        name\n        status\n        species\n      }\n    }\n  }\n`\n\nconst { data } = await useAsyncGqlPulse\u003C{\n  characters: {\n    results: { id: string; name: string; status: string; species: string }[]\n  }\n}>({\n  client: 'rickandmortyapi',\n  document: query,\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch2>Rick & Morty Characters\u003C/h2>\n    \u003Cul>\n      \u003Cli v-for=\"character in data.characters.results\" :key=\"character.id\">\n        {{ character.name }} — {{ character.status }} ({{ character.species }})\n      \u003C/li>\n    \u003C/ul>\n  \u003C/div>\n\u003C/template>\n","vue",[457],{"type":25,"tag":208,"props":458,"children":459},{"__ignoreMap":8},[460,507,537,545,553,561,569,577,585,593,601,609,618,627,635,677,690,776,784,793,823,844,852,869,877,894,912,949,965,1066,1149,1166,1183,1200],{"type":25,"tag":212,"props":461,"children":462},{"class":214,"line":215},[463,468,473,479,484,489,494,498,502],{"type":25,"tag":212,"props":464,"children":465},{"style":284},[466],{"type":31,"value":467},"\u003C",{"type":25,"tag":212,"props":469,"children":470},{"style":268},[471],{"type":31,"value":472},"script",{"type":25,"tag":212,"props":474,"children":476},{"style":475},"--shiki-default:#BD976A",[477],{"type":31,"value":478}," setup",{"type":25,"tag":212,"props":480,"children":481},{"style":475},[482],{"type":31,"value":483}," lang",{"type":25,"tag":212,"props":485,"children":486},{"style":284},[487],{"type":31,"value":488},"=",{"type":25,"tag":212,"props":490,"children":491},{"style":305},[492],{"type":31,"value":493},"\"",{"type":25,"tag":212,"props":495,"children":496},{"style":225},[497],{"type":31,"value":258},{"type":25,"tag":212,"props":499,"children":500},{"style":305},[501],{"type":31,"value":493},{"type":25,"tag":212,"props":503,"children":504},{"style":284},[505],{"type":31,"value":506},">\n",{"type":25,"tag":212,"props":508,"children":509},{"class":214,"line":290},[510,516,521,526,532],{"type":25,"tag":212,"props":511,"children":513},{"style":512},"--shiki-default:#CB7676",[514],{"type":31,"value":515},"const ",{"type":25,"tag":212,"props":517,"children":518},{"style":475},[519],{"type":31,"value":520},"query",{"type":25,"tag":212,"props":522,"children":523},{"style":284},[524],{"type":31,"value":525}," =",{"type":25,"tag":212,"props":527,"children":529},{"style":528},"--shiki-default:#758575DD",[530],{"type":31,"value":531}," /* GraphQL */",{"type":25,"tag":212,"props":533,"children":534},{"style":305},[535],{"type":31,"value":536}," `\n",{"type":25,"tag":212,"props":538,"children":539},{"class":214,"line":324},[540],{"type":25,"tag":212,"props":541,"children":542},{"style":225},[543],{"type":31,"value":544},"  query {\n",{"type":25,"tag":212,"props":546,"children":547},{"class":214,"line":334},[548],{"type":25,"tag":212,"props":549,"children":550},{"style":225},[551],{"type":31,"value":552},"    characters(page: 1) {\n",{"type":25,"tag":212,"props":554,"children":555},{"class":214,"line":348},[556],{"type":25,"tag":212,"props":557,"children":558},{"style":225},[559],{"type":31,"value":560},"      results {\n",{"type":25,"tag":212,"props":562,"children":563},{"class":214,"line":361},[564],{"type":25,"tag":212,"props":565,"children":566},{"style":225},[567],{"type":31,"value":568},"        id\n",{"type":25,"tag":212,"props":570,"children":571},{"class":214,"line":374},[572],{"type":25,"tag":212,"props":573,"children":574},{"style":225},[575],{"type":31,"value":576},"        name\n",{"type":25,"tag":212,"props":578,"children":579},{"class":214,"line":406},[580],{"type":25,"tag":212,"props":581,"children":582},{"style":225},[583],{"type":31,"value":584},"        status\n",{"type":25,"tag":212,"props":586,"children":587},{"class":214,"line":415},[588],{"type":25,"tag":212,"props":589,"children":590},{"style":225},[591],{"type":31,"value":592},"        species\n",{"type":25,"tag":212,"props":594,"children":595},{"class":214,"line":424},[596],{"type":25,"tag":212,"props":597,"children":598},{"style":225},[599],{"type":31,"value":600},"      }\n",{"type":25,"tag":212,"props":602,"children":603},{"class":214,"line":433},[604],{"type":25,"tag":212,"props":605,"children":606},{"style":225},[607],{"type":31,"value":608},"    }\n",{"type":25,"tag":212,"props":610,"children":612},{"class":214,"line":611},12,[613],{"type":25,"tag":212,"props":614,"children":615},{"style":225},[616],{"type":31,"value":617},"  }\n",{"type":25,"tag":212,"props":619,"children":621},{"class":214,"line":620},13,[622],{"type":25,"tag":212,"props":623,"children":624},{"style":305},[625],{"type":31,"value":626},"`\n",{"type":25,"tag":212,"props":628,"children":630},{"class":214,"line":629},14,[631],{"type":25,"tag":212,"props":632,"children":633},{"emptyLinePlaceholder":328},[634],{"type":31,"value":331},{"type":25,"tag":212,"props":636,"children":638},{"class":214,"line":637},15,[639,643,648,653,658,662,667,672],{"type":25,"tag":212,"props":640,"children":641},{"style":512},[642],{"type":31,"value":515},{"type":25,"tag":212,"props":644,"children":645},{"style":284},[646],{"type":31,"value":647},"{",{"type":25,"tag":212,"props":649,"children":650},{"style":475},[651],{"type":31,"value":652}," data",{"type":25,"tag":212,"props":654,"children":655},{"style":284},[656],{"type":31,"value":657}," }",{"type":25,"tag":212,"props":659,"children":660},{"style":284},[661],{"type":31,"value":525},{"type":25,"tag":212,"props":663,"children":664},{"style":268},[665],{"type":31,"value":666}," await",{"type":25,"tag":212,"props":668,"children":669},{"style":219},[670],{"type":31,"value":671}," useAsyncGqlPulse",{"type":25,"tag":212,"props":673,"children":674},{"style":284},[675],{"type":31,"value":676},"\u003C{\n",{"type":25,"tag":212,"props":678,"children":680},{"class":214,"line":679},16,[681,686],{"type":25,"tag":212,"props":682,"children":683},{"style":475},[684],{"type":31,"value":685},"  characters",{"type":25,"tag":212,"props":687,"children":688},{"style":284},[689],{"type":31,"value":345},{"type":25,"tag":212,"props":691,"children":693},{"class":214,"line":692},17,[694,699,704,709,713,719,724,729,733,737,741,746,750,754,758,763,767,771],{"type":25,"tag":212,"props":695,"children":696},{"style":475},[697],{"type":31,"value":698},"    results",{"type":25,"tag":212,"props":700,"children":701},{"style":284},[702],{"type":31,"value":703},": { ",{"type":25,"tag":212,"props":705,"children":706},{"style":475},[707],{"type":31,"value":708},"id",{"type":25,"tag":212,"props":710,"children":711},{"style":284},[712],{"type":31,"value":385},{"type":25,"tag":212,"props":714,"children":716},{"style":715},"--shiki-default:#5DA994",[717],{"type":31,"value":718},"string",{"type":25,"tag":212,"props":720,"children":721},{"style":284},[722],{"type":31,"value":723},"; ",{"type":25,"tag":212,"props":725,"children":726},{"style":475},[727],{"type":31,"value":728},"name",{"type":25,"tag":212,"props":730,"children":731},{"style":284},[732],{"type":31,"value":385},{"type":25,"tag":212,"props":734,"children":735},{"style":715},[736],{"type":31,"value":718},{"type":25,"tag":212,"props":738,"children":739},{"style":284},[740],{"type":31,"value":723},{"type":25,"tag":212,"props":742,"children":743},{"style":475},[744],{"type":31,"value":745},"status",{"type":25,"tag":212,"props":747,"children":748},{"style":284},[749],{"type":31,"value":385},{"type":25,"tag":212,"props":751,"children":752},{"style":715},[753],{"type":31,"value":718},{"type":25,"tag":212,"props":755,"children":756},{"style":284},[757],{"type":31,"value":723},{"type":25,"tag":212,"props":759,"children":760},{"style":475},[761],{"type":31,"value":762},"species",{"type":25,"tag":212,"props":764,"children":765},{"style":284},[766],{"type":31,"value":385},{"type":25,"tag":212,"props":768,"children":769},{"style":715},[770],{"type":31,"value":718},{"type":25,"tag":212,"props":772,"children":773},{"style":284},[774],{"type":31,"value":775}," }[]\n",{"type":25,"tag":212,"props":777,"children":779},{"class":214,"line":778},18,[780],{"type":25,"tag":212,"props":781,"children":782},{"style":284},[783],{"type":31,"value":617},{"type":25,"tag":212,"props":785,"children":787},{"class":214,"line":786},19,[788],{"type":25,"tag":212,"props":789,"children":790},{"style":284},[791],{"type":31,"value":792},"}>({\n",{"type":25,"tag":212,"props":794,"children":796},{"class":214,"line":795},20,[797,802,806,810,815,819],{"type":25,"tag":212,"props":798,"children":799},{"style":294},[800],{"type":31,"value":801},"  client",{"type":25,"tag":212,"props":803,"children":804},{"style":284},[805],{"type":31,"value":385},{"type":25,"tag":212,"props":807,"children":808},{"style":305},[809],{"type":31,"value":308},{"type":25,"tag":212,"props":811,"children":812},{"style":225},[813],{"type":31,"value":814},"rickandmortyapi",{"type":25,"tag":212,"props":816,"children":817},{"style":305},[818],{"type":31,"value":308},{"type":25,"tag":212,"props":820,"children":821},{"style":284},[822],{"type":31,"value":403},{"type":25,"tag":212,"props":824,"children":826},{"class":214,"line":825},21,[827,832,836,840],{"type":25,"tag":212,"props":828,"children":829},{"style":294},[830],{"type":31,"value":831},"  document",{"type":25,"tag":212,"props":833,"children":834},{"style":284},[835],{"type":31,"value":385},{"type":25,"tag":212,"props":837,"children":838},{"style":475},[839],{"type":31,"value":520},{"type":25,"tag":212,"props":841,"children":842},{"style":284},[843],{"type":31,"value":403},{"type":25,"tag":212,"props":845,"children":847},{"class":214,"line":846},22,[848],{"type":25,"tag":212,"props":849,"children":850},{"style":284},[851],{"type":31,"value":439},{"type":25,"tag":212,"props":853,"children":855},{"class":214,"line":854},23,[856,861,865],{"type":25,"tag":212,"props":857,"children":858},{"style":284},[859],{"type":31,"value":860},"\u003C/",{"type":25,"tag":212,"props":862,"children":863},{"style":268},[864],{"type":31,"value":472},{"type":25,"tag":212,"props":866,"children":867},{"style":284},[868],{"type":31,"value":506},{"type":25,"tag":212,"props":870,"children":872},{"class":214,"line":871},24,[873],{"type":25,"tag":212,"props":874,"children":875},{"emptyLinePlaceholder":328},[876],{"type":31,"value":331},{"type":25,"tag":212,"props":878,"children":880},{"class":214,"line":879},25,[881,885,890],{"type":25,"tag":212,"props":882,"children":883},{"style":284},[884],{"type":31,"value":467},{"type":25,"tag":212,"props":886,"children":887},{"style":268},[888],{"type":31,"value":889},"template",{"type":25,"tag":212,"props":891,"children":892},{"style":284},[893],{"type":31,"value":506},{"type":25,"tag":212,"props":895,"children":897},{"class":214,"line":896},26,[898,903,908],{"type":25,"tag":212,"props":899,"children":900},{"style":284},[901],{"type":31,"value":902},"  \u003C",{"type":25,"tag":212,"props":904,"children":905},{"style":268},[906],{"type":31,"value":907},"div",{"type":25,"tag":212,"props":909,"children":910},{"style":284},[911],{"type":31,"value":506},{"type":25,"tag":212,"props":913,"children":915},{"class":214,"line":914},27,[916,921,926,931,937,941,945],{"type":25,"tag":212,"props":917,"children":918},{"style":284},[919],{"type":31,"value":920},"    \u003C",{"type":25,"tag":212,"props":922,"children":923},{"style":268},[924],{"type":31,"value":925},"h2",{"type":25,"tag":212,"props":927,"children":928},{"style":284},[929],{"type":31,"value":930},">",{"type":25,"tag":212,"props":932,"children":934},{"style":933},"--shiki-default:#DBD7CAEE",[935],{"type":31,"value":936},"Rick & Morty Characters",{"type":25,"tag":212,"props":938,"children":939},{"style":284},[940],{"type":31,"value":860},{"type":25,"tag":212,"props":942,"children":943},{"style":268},[944],{"type":31,"value":925},{"type":25,"tag":212,"props":946,"children":947},{"style":284},[948],{"type":31,"value":506},{"type":25,"tag":212,"props":950,"children":952},{"class":214,"line":951},28,[953,957,961],{"type":25,"tag":212,"props":954,"children":955},{"style":284},[956],{"type":31,"value":920},{"type":25,"tag":212,"props":958,"children":959},{"style":268},[960],{"type":31,"value":71},{"type":25,"tag":212,"props":962,"children":963},{"style":284},[964],{"type":31,"value":506},{"type":25,"tag":212,"props":966,"children":968},{"class":214,"line":967},29,[969,974,978,983,987,991,996,1001,1005,1010,1015,1019,1024,1028,1033,1038,1042,1046,1050,1054,1058,1062],{"type":25,"tag":212,"props":970,"children":971},{"style":284},[972],{"type":31,"value":973},"      \u003C",{"type":25,"tag":212,"props":975,"children":976},{"style":268},[977],{"type":31,"value":75},{"type":25,"tag":212,"props":979,"children":980},{"style":268},[981],{"type":31,"value":982}," v-for",{"type":25,"tag":212,"props":984,"children":985},{"style":284},[986],{"type":31,"value":488},{"type":25,"tag":212,"props":988,"children":989},{"style":284},[990],{"type":31,"value":493},{"type":25,"tag":212,"props":992,"children":993},{"style":475},[994],{"type":31,"value":995},"character",{"type":25,"tag":212,"props":997,"children":998},{"style":512},[999],{"type":31,"value":1000}," in",{"type":25,"tag":212,"props":1002,"children":1003},{"style":475},[1004],{"type":31,"value":652},{"type":25,"tag":212,"props":1006,"children":1007},{"style":284},[1008],{"type":31,"value":1009},".",{"type":25,"tag":212,"props":1011,"children":1012},{"style":475},[1013],{"type":31,"value":1014},"characters",{"type":25,"tag":212,"props":1016,"children":1017},{"style":284},[1018],{"type":31,"value":1009},{"type":25,"tag":212,"props":1020,"children":1021},{"style":475},[1022],{"type":31,"value":1023},"results",{"type":25,"tag":212,"props":1025,"children":1026},{"style":284},[1027],{"type":31,"value":493},{"type":25,"tag":212,"props":1029,"children":1030},{"style":284},[1031],{"type":31,"value":1032}," :",{"type":25,"tag":212,"props":1034,"children":1035},{"style":219},[1036],{"type":31,"value":1037},"key",{"type":25,"tag":212,"props":1039,"children":1040},{"style":284},[1041],{"type":31,"value":488},{"type":25,"tag":212,"props":1043,"children":1044},{"style":284},[1045],{"type":31,"value":493},{"type":25,"tag":212,"props":1047,"children":1048},{"style":475},[1049],{"type":31,"value":995},{"type":25,"tag":212,"props":1051,"children":1052},{"style":284},[1053],{"type":31,"value":1009},{"type":25,"tag":212,"props":1055,"children":1056},{"style":475},[1057],{"type":31,"value":708},{"type":25,"tag":212,"props":1059,"children":1060},{"style":284},[1061],{"type":31,"value":493},{"type":25,"tag":212,"props":1063,"children":1064},{"style":284},[1065],{"type":31,"value":506},{"type":25,"tag":212,"props":1067,"children":1069},{"class":214,"line":1068},30,[1070,1075,1080,1084,1088,1093,1098,1103,1107,1111,1115,1119,1124,1128,1132,1136,1140,1144],{"type":25,"tag":212,"props":1071,"children":1072},{"style":284},[1073],{"type":31,"value":1074},"        {{",{"type":25,"tag":212,"props":1076,"children":1077},{"style":475},[1078],{"type":31,"value":1079}," character",{"type":25,"tag":212,"props":1081,"children":1082},{"style":284},[1083],{"type":31,"value":1009},{"type":25,"tag":212,"props":1085,"children":1086},{"style":475},[1087],{"type":31,"value":728},{"type":25,"tag":212,"props":1089,"children":1090},{"style":284},[1091],{"type":31,"value":1092}," }}",{"type":25,"tag":212,"props":1094,"children":1095},{"style":933},[1096],{"type":31,"value":1097}," — ",{"type":25,"tag":212,"props":1099,"children":1100},{"style":284},[1101],{"type":31,"value":1102},"{{",{"type":25,"tag":212,"props":1104,"children":1105},{"style":475},[1106],{"type":31,"value":1079},{"type":25,"tag":212,"props":1108,"children":1109},{"style":284},[1110],{"type":31,"value":1009},{"type":25,"tag":212,"props":1112,"children":1113},{"style":475},[1114],{"type":31,"value":745},{"type":25,"tag":212,"props":1116,"children":1117},{"style":284},[1118],{"type":31,"value":1092},{"type":25,"tag":212,"props":1120,"children":1121},{"style":933},[1122],{"type":31,"value":1123}," (",{"type":25,"tag":212,"props":1125,"children":1126},{"style":284},[1127],{"type":31,"value":1102},{"type":25,"tag":212,"props":1129,"children":1130},{"style":475},[1131],{"type":31,"value":1079},{"type":25,"tag":212,"props":1133,"children":1134},{"style":284},[1135],{"type":31,"value":1009},{"type":25,"tag":212,"props":1137,"children":1138},{"style":475},[1139],{"type":31,"value":762},{"type":25,"tag":212,"props":1141,"children":1142},{"style":284},[1143],{"type":31,"value":1092},{"type":25,"tag":212,"props":1145,"children":1146},{"style":933},[1147],{"type":31,"value":1148},")\n",{"type":25,"tag":212,"props":1150,"children":1152},{"class":214,"line":1151},31,[1153,1158,1162],{"type":25,"tag":212,"props":1154,"children":1155},{"style":284},[1156],{"type":31,"value":1157},"      \u003C/",{"type":25,"tag":212,"props":1159,"children":1160},{"style":268},[1161],{"type":31,"value":75},{"type":25,"tag":212,"props":1163,"children":1164},{"style":284},[1165],{"type":31,"value":506},{"type":25,"tag":212,"props":1167,"children":1169},{"class":214,"line":1168},32,[1170,1175,1179],{"type":25,"tag":212,"props":1171,"children":1172},{"style":284},[1173],{"type":31,"value":1174},"    \u003C/",{"type":25,"tag":212,"props":1176,"children":1177},{"style":268},[1178],{"type":31,"value":71},{"type":25,"tag":212,"props":1180,"children":1181},{"style":284},[1182],{"type":31,"value":506},{"type":25,"tag":212,"props":1184,"children":1186},{"class":214,"line":1185},33,[1187,1192,1196],{"type":25,"tag":212,"props":1188,"children":1189},{"style":284},[1190],{"type":31,"value":1191},"  \u003C/",{"type":25,"tag":212,"props":1193,"children":1194},{"style":268},[1195],{"type":31,"value":907},{"type":25,"tag":212,"props":1197,"children":1198},{"style":284},[1199],{"type":31,"value":506},{"type":25,"tag":212,"props":1201,"children":1203},{"class":214,"line":1202},34,[1204,1208,1212],{"type":25,"tag":212,"props":1205,"children":1206},{"style":284},[1207],{"type":31,"value":860},{"type":25,"tag":212,"props":1209,"children":1210},{"style":268},[1211],{"type":31,"value":889},{"type":25,"tag":212,"props":1213,"children":1214},{"style":284},[1215],{"type":31,"value":506},{"type":25,"tag":34,"props":1217,"children":1218},{},[1219],{"type":31,"value":1220},"Start your Nuxt app:",{"type":25,"tag":201,"props":1222,"children":1224},{"className":203,"code":1223,"language":205,"meta":8,"style":8},"npm run dev\n",[1225],{"type":25,"tag":208,"props":1226,"children":1227},{"__ignoreMap":8},[1228],{"type":25,"tag":212,"props":1229,"children":1230},{"class":214,"line":215},[1231,1235,1240],{"type":25,"tag":212,"props":1232,"children":1233},{"style":219},[1234],{"type":31,"value":222},{"type":25,"tag":212,"props":1236,"children":1237},{"style":225},[1238],{"type":31,"value":1239}," run",{"type":25,"tag":212,"props":1241,"children":1242},{"style":225},[1243],{"type":31,"value":1244}," dev\n",{"type":25,"tag":34,"props":1246,"children":1247},{},[1248],{"type":31,"value":1249},"You’ll now see a real-time overlay tracking your GraphQL queries and mutations in development mode.",{"type":25,"tag":26,"props":1251,"children":1253},{"id":1252},"features",[1254],{"type":31,"value":1255},"✅ Features",{"type":25,"tag":71,"props":1257,"children":1258},{},[1259,1264,1269,1274,1279],{"type":25,"tag":75,"props":1260,"children":1261},{},[1262],{"type":31,"value":1263},"Real-time GraphQL request monitoring",{"type":25,"tag":75,"props":1265,"children":1266},{},[1267],{"type":31,"value":1268},"Query and mutation logs",{"type":25,"tag":75,"props":1270,"children":1271},{},[1272],{"type":31,"value":1273},"Response times and error tracking",{"type":25,"tag":75,"props":1275,"children":1276},{},[1277],{"type":31,"value":1278},"Easy integration with Nuxt 3",{"type":25,"tag":75,"props":1280,"children":1281},{},[1282],{"type":31,"value":1283},"Lightweight and developer-friendly",{"type":25,"tag":34,"props":1285,"children":1286},{},[1287,1289],{"type":31,"value":1288},"Explore the module or contribute on GitHub: ",{"type":25,"tag":1290,"props":1291,"children":1295},"a",{"href":1292,"rel":1293},"https://github.com/Abbasmoe/nuxt-gql-pulse",[1294],"nofollow",[1296],{"type":31,"value":28},{"type":25,"tag":1298,"props":1299,"children":1300},"style",{},[1301],{"type":31,"value":1302},"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);}",{"title":8,"searchDepth":290,"depth":290,"links":1304},[1305,1306,1307,1308,1309,1310],{"id":28,"depth":324,"text":32},{"id":66,"depth":324,"text":69},{"id":127,"depth":324,"text":130},{"id":191,"depth":324,"text":194},{"id":447,"depth":324,"text":450},{"id":1252,"depth":324,"text":1255},"markdown","content:project:nuxt-gql-pulse.md","content","project/nuxt-gql-pulse.md","project/nuxt-gql-pulse","md",{"loc":5},{"_path":1319,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1320,"description":1321,"date":1322,"tags":1323,"image":1328,"imageAlt":1329,"body":1330,"_type":1311,"_id":1621,"_source":1313,"_file":1622,"_stem":1623,"_extension":1316,"sitemap":1624},"/project/employment-agency-template","Employment Agency Template – Job Placement Platform","This is a commercial template for a job placement platform built with Nuxt 3, Tailwind CSS, and DaisyUI. The content is placeholder and customizable for your business needs.","20.08.2025",[14,455,1324,1325,1326,1327],"tailwindcss","daisyui","job-platform","commercial-template","employment-agency-template-screenshot.webp","Employment Agency Template preview",{"type":22,"children":1331,"toc":1613},[1332,1338,1363,1375,1379,1385,1407,1424,1427,1433,1448,1451,1456,1490,1493,1499,1610],{"type":25,"tag":26,"props":1333,"children":1335},{"id":1334},"employment-agency-template-commercial-job-placement-platform",[1336],{"type":31,"value":1337},"✨ Employment Agency Template – Commercial Job Placement Platform",{"type":25,"tag":34,"props":1339,"children":1340},{},[1341,1343,1348,1350,1354,1356,1361],{"type":31,"value":1342},"This website is a ",{"type":25,"tag":38,"props":1344,"children":1345},{},[1346],{"type":31,"value":1347},"commercial template",{"type":31,"value":1349}," for a job placement platform, intended as a base for your business.",{"type":25,"tag":1351,"props":1352,"children":1353},"br",{},[],{"type":31,"value":1355},"\nAll images, content, and call-to-actions are ",{"type":25,"tag":38,"props":1357,"children":1358},{},[1359],{"type":31,"value":1360},"placeholders",{"type":31,"value":1362}," and can be fully replaced or customized.",{"type":25,"tag":34,"props":1364,"children":1365},{},[1366,1368],{"type":31,"value":1367},"🌍 ",{"type":25,"tag":1290,"props":1369,"children":1372},{"href":1370,"rel":1371},"https://employment-agency-template.netlify.app",[1294],[1373],{"type":31,"value":1374},"View the live demo",{"type":25,"tag":1376,"props":1377,"children":1378},"hr",{},[],{"type":25,"tag":26,"props":1380,"children":1382},{"id":1381},"️-commercial-use-licensing",[1383],{"type":31,"value":1384},"⚠️ Commercial Use & Licensing",{"type":25,"tag":34,"props":1386,"children":1387},{},[1388,1390,1395,1396,1399,1401,1406],{"type":31,"value":1389},"This template is ",{"type":25,"tag":38,"props":1391,"children":1392},{},[1393],{"type":31,"value":1394},"for commercial use only",{"type":31,"value":1009},{"type":25,"tag":1351,"props":1397,"children":1398},{},[],{"type":31,"value":1400},"\nYou ",{"type":25,"tag":38,"props":1402,"children":1403},{},[1404],{"type":31,"value":1405},"cannot use, reproduce, or redistribute it freely",{"type":31,"value":1009},{"type":25,"tag":34,"props":1408,"children":1409},{},[1410,1412,1417,1419,1422],{"type":31,"value":1411},"If you are interested, please ",{"type":25,"tag":38,"props":1413,"children":1414},{},[1415],{"type":31,"value":1416},"contact me",{"type":31,"value":1418}," to agree on pricing.",{"type":25,"tag":1351,"props":1420,"children":1421},{},[],{"type":31,"value":1423},"\nEverything can be updated, including images, content, elements, and add-ons. You can also remove sections or add new ones to fit your needs.",{"type":25,"tag":1376,"props":1425,"children":1426},{},[],{"type":25,"tag":925,"props":1428,"children":1430},{"id":1429},"overview",[1431],{"type":31,"value":1432},"Overview",{"type":25,"tag":34,"props":1434,"children":1435},{},[1436,1438,1441,1443,1446],{"type":31,"value":1437},"This template is designed as a modern, responsive platform for employment agencies or job placement services.",{"type":25,"tag":1351,"props":1439,"children":1440},{},[],{"type":31,"value":1442},"\nIt provides a professional design, flexible structure, and a foundation to build your commercial platform quickly.",{"type":25,"tag":1351,"props":1444,"children":1445},{},[],{"type":31,"value":1447},"\nEverything (images, texts, buttons, sections) can be customized or removed to fit your needs.",{"type":25,"tag":1376,"props":1449,"children":1450},{},[],{"type":25,"tag":925,"props":1452,"children":1453},{"id":1252},[1454],{"type":31,"value":1455},"Features",{"type":25,"tag":71,"props":1457,"children":1458},{},[1459,1464,1475,1480],{"type":25,"tag":75,"props":1460,"children":1461},{},[1462],{"type":31,"value":1463},"Responsive layouts for desktop, tablet, and mobile.",{"type":25,"tag":75,"props":1465,"children":1466},{},[1467,1469,1474],{"type":31,"value":1468},"Component-based UI with ",{"type":25,"tag":38,"props":1470,"children":1471},{},[1472],{"type":31,"value":1473},"DaisyUI",{"type":31,"value":1009},{"type":25,"tag":75,"props":1476,"children":1477},{},[1478],{"type":31,"value":1479},"Placeholder content and demo images fully replaceable.",{"type":25,"tag":75,"props":1481,"children":1482},{},[1483,1488],{"type":25,"tag":38,"props":1484,"children":1485},{},[1486],{"type":31,"value":1487},"i18n support",{"type":31,"value":1489}," for multi-language platforms.",{"type":25,"tag":1376,"props":1491,"children":1492},{},[],{"type":25,"tag":26,"props":1494,"children":1496},{"id":1495},"️-tech-stack",[1497],{"type":31,"value":1498},"🤹‍♂️ Tech Stack",{"type":25,"tag":71,"props":1500,"children":1501},{},[1502,1517,1532,1546,1561,1576,1590,1600],{"type":25,"tag":75,"props":1503,"children":1504},{},[1505,1515],{"type":25,"tag":38,"props":1506,"children":1507},{},[1508],{"type":25,"tag":1290,"props":1509,"children":1512},{"href":1510,"rel":1511},"https://nuxt.com/",[1294],[1513],{"type":31,"value":1514},"Nuxt.js 3",{"type":31,"value":1516}," – Full-stack Vue framework.",{"type":25,"tag":75,"props":1518,"children":1519},{},[1520,1530],{"type":25,"tag":38,"props":1521,"children":1522},{},[1523],{"type":25,"tag":1290,"props":1524,"children":1527},{"href":1525,"rel":1526},"https://tailwindcss.com/",[1294],[1528],{"type":31,"value":1529},"Tailwind CSS",{"type":31,"value":1531}," – Base CSS framework; only write custom CSS when needed. Uses PurgeCSS in production to remove unused classes.",{"type":25,"tag":75,"props":1533,"children":1534},{},[1535,1544],{"type":25,"tag":38,"props":1536,"children":1537},{},[1538],{"type":25,"tag":1290,"props":1539,"children":1542},{"href":1540,"rel":1541},"https://daisyui.com/",[1294],[1543],{"type":31,"value":1473},{"type":31,"value":1545}," – Free Tailwind CSS component library.",{"type":25,"tag":75,"props":1547,"children":1548},{},[1549,1559],{"type":25,"tag":38,"props":1550,"children":1551},{},[1552],{"type":25,"tag":1290,"props":1553,"children":1556},{"href":1554,"rel":1555},"https://eslint.org/",[1294],[1557],{"type":31,"value":1558},"ESLint",{"type":31,"value":1560}," – For JavaScript linting.",{"type":25,"tag":75,"props":1562,"children":1563},{},[1564,1574],{"type":25,"tag":38,"props":1565,"children":1566},{},[1567],{"type":25,"tag":1290,"props":1568,"children":1571},{"href":1569,"rel":1570},"https://prettier.io/",[1294],[1572],{"type":31,"value":1573},"Prettier",{"type":31,"value":1575}," – Code formatting; format-on-save recommended.",{"type":25,"tag":75,"props":1577,"children":1578},{},[1579,1588],{"type":25,"tag":38,"props":1580,"children":1581},{},[1582],{"type":25,"tag":1290,"props":1583,"children":1585},{"href":1510,"rel":1584},[1294],[1586],{"type":31,"value":1587},"Nuxt Devtools",{"type":31,"value":1589}," – Visual tools to inspect and debug your app.",{"type":25,"tag":75,"props":1591,"children":1592},{},[1593,1598],{"type":25,"tag":38,"props":1594,"children":1595},{},[1596],{"type":31,"value":1597},"i18n",{"type":31,"value":1599}," – For localization.",{"type":25,"tag":75,"props":1601,"children":1602},{},[1603,1608],{"type":25,"tag":38,"props":1604,"children":1605},{},[1606],{"type":31,"value":1607},"prettier-plugin-tailwindcss",{"type":31,"value":1609}," – Automatically sorts Tailwind CSS classes in recommended order.",{"type":25,"tag":1376,"props":1611,"children":1612},{},[],{"title":8,"searchDepth":290,"depth":290,"links":1614},[1615,1616,1617,1618],{"id":1334,"depth":324,"text":1337},{"id":1381,"depth":324,"text":1384},{"id":1429,"depth":290,"text":1432},{"id":1252,"depth":290,"text":1455,"children":1619},[1620],{"id":1495,"depth":324,"text":1498},"content:project:employment-agency-template.md","project/employment-agency-template.md","project/employment-agency-template",{"loc":1319},{"_path":1626,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1627,"description":1628,"date":1629,"tags":1630,"image":1634,"imageAlt":1635,"body":1636,"_type":1311,"_id":1885,"_source":1313,"_file":1886,"_stem":1887,"_extension":1316,"sitemap":1888},"/project/africa-passport","Africa Passports – The Future of a United Africa","Africa Passports is an interactive platform visualizing the concept of a united Africa with one passport. Explore mobility, unity, and progress across the continent.","18.09.2025",[14,455,1324,1631,1632,1633],"africa-passports","unity","digital-passport","africa-passports-screenshot.webp","Africa Passports interactive platform preview",{"type":22,"children":1637,"toc":1878},[1638,1644,1668,1679,1682,1686,1691,1733,1738,1741,1747,1780,1785,1788,1794,1799,1804,1823,1828,1849,1860,1863,1869,1874],{"type":25,"tag":26,"props":1639,"children":1641},{"id":1640},"africa-passports-a-vision-for-unity",[1642],{"type":31,"value":1643},"✨ Africa Passports – A Vision for Unity",{"type":25,"tag":34,"props":1645,"children":1646},{},[1647,1649,1654,1656,1659,1661,1666],{"type":31,"value":1648},"Welcome to ",{"type":25,"tag":38,"props":1650,"children":1651},{},[1652],{"type":31,"value":1653},"Africa Passports",{"type":31,"value":1655},", a platform dedicated to exploring the future of a united Africa.",{"type":25,"tag":1351,"props":1657,"children":1658},{},[],{"type":31,"value":1660},"\nOur vision is simple yet powerful: ",{"type":25,"tag":38,"props":1662,"children":1663},{},[1664],{"type":31,"value":1665},"one vision, one passport",{"type":31,"value":1667},", connecting people across borders and fostering unity and collaboration.",{"type":25,"tag":34,"props":1669,"children":1670},{},[1671,1672],{"type":31,"value":1367},{"type":25,"tag":1290,"props":1673,"children":1676},{"href":1674,"rel":1675},"https://africa-passport.netlify.app/",[1294],[1677],{"type":31,"value":1678},"Explore Africa Passports Live",{"type":25,"tag":1376,"props":1680,"children":1681},{},[],{"type":25,"tag":26,"props":1683,"children":1684},{"id":1495},[1685],{"type":31,"value":1498},{"type":25,"tag":34,"props":1687,"children":1688},{},[1689],{"type":31,"value":1690},"The site is built using a clean, lightweight modern frontend stack designed for speed, scalability, and ease of use:",{"type":25,"tag":71,"props":1692,"children":1693},{},[1694,1707,1720],{"type":25,"tag":75,"props":1695,"children":1696},{},[1697,1705],{"type":25,"tag":38,"props":1698,"children":1699},{},[1700],{"type":25,"tag":1290,"props":1701,"children":1703},{"href":1510,"rel":1702},[1294],[1704],{"type":31,"value":1514},{"type":31,"value":1706}," – Vue-based full-stack framework, perfect for server-side rendering, static site generation, and everything in between.",{"type":25,"tag":75,"props":1708,"children":1709},{},[1710,1718],{"type":25,"tag":38,"props":1711,"children":1712},{},[1713],{"type":25,"tag":1290,"props":1714,"children":1716},{"href":1525,"rel":1715},[1294],[1717],{"type":31,"value":1529},{"type":31,"value":1719}," – Utility-first CSS framework that enables rapid UI development with clean, readable class-based design.",{"type":25,"tag":75,"props":1721,"children":1722},{},[1723,1731],{"type":25,"tag":38,"props":1724,"children":1725},{},[1726],{"type":25,"tag":1290,"props":1727,"children":1729},{"href":1540,"rel":1728},[1294],[1730],{"type":31,"value":1473},{"type":31,"value":1732}," – A powerful Tailwind plugin that provides pre-styled components, helping me build a functional UI quickly without writing custom components from scratch.",{"type":25,"tag":34,"props":1734,"children":1735},{},[1736],{"type":31,"value":1737},"This combination gives me full control over design while maintaining flexibility for future improvements.",{"type":25,"tag":1376,"props":1739,"children":1740},{},[],{"type":25,"tag":26,"props":1742,"children":1744},{"id":1743},"what-youll-find-here",[1745],{"type":31,"value":1746},"📚 What You’ll Find Here",{"type":25,"tag":71,"props":1748,"children":1749},{},[1750,1760,1770],{"type":25,"tag":75,"props":1751,"children":1752},{},[1753,1758],{"type":25,"tag":38,"props":1754,"children":1755},{},[1756],{"type":31,"value":1757},"Interactive Passport Experience",{"type":31,"value":1759}," – Explore how a common African passport could look and function digitally.",{"type":25,"tag":75,"props":1761,"children":1762},{},[1763,1768],{"type":25,"tag":38,"props":1764,"children":1765},{},[1766],{"type":31,"value":1767},"Vision for Unity",{"type":31,"value":1769}," – Learn about the idea behind Africa Passports and the mission of seamless mobility across Africa.",{"type":25,"tag":75,"props":1771,"children":1772},{},[1773,1778],{"type":25,"tag":38,"props":1774,"children":1775},{},[1776],{"type":31,"value":1777},"Inspiration & Conceptual Tools",{"type":31,"value":1779}," – Engage with visualizations and design experiments that help bring this vision to life.",{"type":25,"tag":34,"props":1781,"children":1782},{},[1783],{"type":31,"value":1784},"Whether you’re curious about Africa’s potential for unity or a developer exploring interactive experiences, this platform offers insight and inspiration.",{"type":25,"tag":1376,"props":1786,"children":1787},{},[],{"type":25,"tag":26,"props":1789,"children":1791},{"id":1790},"️-local-setup",[1792],{"type":31,"value":1793},"⚙️ Local Setup",{"type":25,"tag":34,"props":1795,"children":1796},{},[1797],{"type":31,"value":1798},"To run the project locally, follow these steps:",{"type":25,"tag":34,"props":1800,"children":1801},{},[1802],{"type":31,"value":1803},"Install dependencies:",{"type":25,"tag":201,"props":1805,"children":1807},{"className":203,"code":1806,"language":205,"meta":8,"style":8},"npm install\n",[1808],{"type":25,"tag":208,"props":1809,"children":1810},{"__ignoreMap":8},[1811],{"type":25,"tag":212,"props":1812,"children":1813},{"class":214,"line":215},[1814,1818],{"type":25,"tag":212,"props":1815,"children":1816},{"style":219},[1817],{"type":31,"value":222},{"type":25,"tag":212,"props":1819,"children":1820},{"style":225},[1821],{"type":31,"value":1822}," install\n",{"type":25,"tag":34,"props":1824,"children":1825},{},[1826],{"type":31,"value":1827},"Start the development server:",{"type":25,"tag":201,"props":1829,"children":1830},{"className":203,"code":1223,"language":205,"meta":8,"style":8},[1831],{"type":25,"tag":208,"props":1832,"children":1833},{"__ignoreMap":8},[1834],{"type":25,"tag":212,"props":1835,"children":1836},{"class":214,"line":215},[1837,1841,1845],{"type":25,"tag":212,"props":1838,"children":1839},{"style":219},[1840],{"type":31,"value":222},{"type":25,"tag":212,"props":1842,"children":1843},{"style":225},[1844],{"type":31,"value":1239},{"type":25,"tag":212,"props":1846,"children":1847},{"style":225},[1848],{"type":31,"value":1244},{"type":25,"tag":34,"props":1850,"children":1851},{},[1852,1854],{"type":31,"value":1853},"Your site will be available at: ",{"type":25,"tag":208,"props":1855,"children":1857},{"className":1856},[],[1858],{"type":31,"value":1859},"http://localhost:3000",{"type":25,"tag":1376,"props":1861,"children":1862},{},[],{"type":25,"tag":26,"props":1864,"children":1866},{"id":1865},"license",[1867],{"type":31,"value":1868},"📝 License",{"type":25,"tag":34,"props":1870,"children":1871},{},[1872],{"type":31,"value":1873},"© 2024–present — Abbas Mohamed. All rights reserved.",{"type":25,"tag":1298,"props":1875,"children":1876},{},[1877],{"type":31,"value":1302},{"title":8,"searchDepth":290,"depth":290,"links":1879},[1880,1881,1882,1883,1884],{"id":1640,"depth":324,"text":1643},{"id":1495,"depth":324,"text":1498},{"id":1743,"depth":324,"text":1746},{"id":1790,"depth":324,"text":1793},{"id":1865,"depth":324,"text":1868},"content:project:africa-passport.md","project/africa-passport.md","project/africa-passport",{"loc":1626},{"_path":1890,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1891,"description":1892,"date":1893,"tags":1894,"image":1897,"imageAlt":1898,"body":1899,"_type":1311,"_id":2129,"_source":1313,"_file":2130,"_stem":2131,"_extension":1316,"sitemap":2132},"/project/my-website","My Personal Website – Portfolio, Blog & Projects","This is my personal website built with Nuxt 3, Tailwind CSS, and DaisyUI. It includes my blog, portfolio, and side projects in one place.","18.09.2024",[14,455,1324,1325,1895,1896],"personal-website","portfolio","my-website-screenshot.webp","Portfolio website preview",{"type":22,"children":1900,"toc":2122},[1901,1907,1931,1942,1945,1949,1953,1992,1996,1999,2003,2036,2041,2044,2048,2052,2056,2073,2077,2098,2107,2110,2114,2118],{"type":25,"tag":26,"props":1902,"children":1904},{"id":1903},"my-personal-website-blog-portfolio-projects",[1905],{"type":31,"value":1906},"✨ My Personal Website – Blog, Portfolio & Projects",{"type":25,"tag":34,"props":1908,"children":1909},{},[1910,1912,1915,1917,1922,1924,1929],{"type":31,"value":1911},"Welcome to my personal corner on the web.",{"type":25,"tag":1351,"props":1913,"children":1914},{},[],{"type":31,"value":1916},"\nThis site serves as a central hub for my ",{"type":25,"tag":38,"props":1918,"children":1919},{},[1920],{"type":31,"value":1921},"blog posts",{"type":31,"value":1923},", ",{"type":25,"tag":38,"props":1925,"children":1926},{},[1927],{"type":31,"value":1928},"project showcases",{"type":31,"value":1930},", and general updates about my work and interests in tech.",{"type":25,"tag":34,"props":1932,"children":1933},{},[1934,1935],{"type":31,"value":1367},{"type":25,"tag":1290,"props":1936,"children":1939},{"href":1937,"rel":1938},"https://abbas-mohamed.netlify.app/",[1294],[1940],{"type":31,"value":1941},"Visit my live website",{"type":25,"tag":1376,"props":1943,"children":1944},{},[],{"type":25,"tag":26,"props":1946,"children":1947},{"id":1495},[1948],{"type":31,"value":1498},{"type":25,"tag":34,"props":1950,"children":1951},{},[1952],{"type":31,"value":1690},{"type":25,"tag":71,"props":1954,"children":1955},{},[1956,1968,1980],{"type":25,"tag":75,"props":1957,"children":1958},{},[1959,1967],{"type":25,"tag":38,"props":1960,"children":1961},{},[1962],{"type":25,"tag":1290,"props":1963,"children":1965},{"href":1510,"rel":1964},[1294],[1966],{"type":31,"value":1514},{"type":31,"value":1706},{"type":25,"tag":75,"props":1969,"children":1970},{},[1971,1979],{"type":25,"tag":38,"props":1972,"children":1973},{},[1974],{"type":25,"tag":1290,"props":1975,"children":1977},{"href":1525,"rel":1976},[1294],[1978],{"type":31,"value":1529},{"type":31,"value":1719},{"type":25,"tag":75,"props":1981,"children":1982},{},[1983,1991],{"type":25,"tag":38,"props":1984,"children":1985},{},[1986],{"type":25,"tag":1290,"props":1987,"children":1989},{"href":1540,"rel":1988},[1294],[1990],{"type":31,"value":1473},{"type":31,"value":1732},{"type":25,"tag":34,"props":1993,"children":1994},{},[1995],{"type":31,"value":1737},{"type":25,"tag":1376,"props":1997,"children":1998},{},[],{"type":25,"tag":26,"props":2000,"children":2001},{"id":1743},[2002],{"type":31,"value":1746},{"type":25,"tag":71,"props":2004,"children":2005},{},[2006,2016,2026],{"type":25,"tag":75,"props":2007,"children":2008},{},[2009,2014],{"type":25,"tag":38,"props":2010,"children":2011},{},[2012],{"type":31,"value":2013},"Portfolio",{"type":31,"value":2015}," – A showcase of projects I’ve built, ranging from small experiments to more structured applications.",{"type":25,"tag":75,"props":2017,"children":2018},{},[2019,2024],{"type":25,"tag":38,"props":2020,"children":2021},{},[2022],{"type":31,"value":2023},"Side Projects",{"type":31,"value":2025}," – I believe learning by building is key, so this section includes tools, micro-apps, and utilities I’ve created for fun or experimentation.",{"type":25,"tag":75,"props":2027,"children":2028},{},[2029,2034],{"type":25,"tag":38,"props":2030,"children":2031},{},[2032],{"type":31,"value":2033},"Playground & Snippets",{"type":31,"value":2035}," – Small reusable code snippets, UI patterns, and quick tests live here too.",{"type":25,"tag":34,"props":2037,"children":2038},{},[2039],{"type":31,"value":2040},"Whether you’re a fellow developer or someone curious about what I build — feel free to explore.",{"type":25,"tag":1376,"props":2042,"children":2043},{},[],{"type":25,"tag":26,"props":2045,"children":2046},{"id":1790},[2047],{"type":31,"value":1793},{"type":25,"tag":34,"props":2049,"children":2050},{},[2051],{"type":31,"value":1798},{"type":25,"tag":34,"props":2053,"children":2054},{},[2055],{"type":31,"value":1803},{"type":25,"tag":201,"props":2057,"children":2058},{"className":203,"code":1806,"language":205,"meta":8,"style":8},[2059],{"type":25,"tag":208,"props":2060,"children":2061},{"__ignoreMap":8},[2062],{"type":25,"tag":212,"props":2063,"children":2064},{"class":214,"line":215},[2065,2069],{"type":25,"tag":212,"props":2066,"children":2067},{"style":219},[2068],{"type":31,"value":222},{"type":25,"tag":212,"props":2070,"children":2071},{"style":225},[2072],{"type":31,"value":1822},{"type":25,"tag":34,"props":2074,"children":2075},{},[2076],{"type":31,"value":1827},{"type":25,"tag":201,"props":2078,"children":2079},{"className":203,"code":1223,"language":205,"meta":8,"style":8},[2080],{"type":25,"tag":208,"props":2081,"children":2082},{"__ignoreMap":8},[2083],{"type":25,"tag":212,"props":2084,"children":2085},{"class":214,"line":215},[2086,2090,2094],{"type":25,"tag":212,"props":2087,"children":2088},{"style":219},[2089],{"type":31,"value":222},{"type":25,"tag":212,"props":2091,"children":2092},{"style":225},[2093],{"type":31,"value":1239},{"type":25,"tag":212,"props":2095,"children":2096},{"style":225},[2097],{"type":31,"value":1244},{"type":25,"tag":34,"props":2099,"children":2100},{},[2101,2102],{"type":31,"value":1853},{"type":25,"tag":208,"props":2103,"children":2105},{"className":2104},[],[2106],{"type":31,"value":1859},{"type":25,"tag":1376,"props":2108,"children":2109},{},[],{"type":25,"tag":26,"props":2111,"children":2112},{"id":1865},[2113],{"type":31,"value":1868},{"type":25,"tag":34,"props":2115,"children":2116},{},[2117],{"type":31,"value":1873},{"type":25,"tag":1298,"props":2119,"children":2120},{},[2121],{"type":31,"value":1302},{"title":8,"searchDepth":290,"depth":290,"links":2123},[2124,2125,2126,2127,2128],{"id":1903,"depth":324,"text":1906},{"id":1495,"depth":324,"text":1498},{"id":1743,"depth":324,"text":1746},{"id":1790,"depth":324,"text":1793},{"id":1865,"depth":324,"text":1868},"content:project:my-website.md","project/my-website.md","project/my-website",{"loc":1890},{"_path":2134,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2135,"description":2136,"date":2137,"tags":2138,"image":2143,"imageAlt":2144,"body":2145,"_type":1311,"_id":2448,"_source":1313,"_file":2449,"_stem":2450,"_extension":1316,"sitemap":2451},"/project/gallery-app","Gallery App – Vue 2 + Axios + JSON Server","A lightweight image gallery app built with Vue 2 and Axios, using JSON Server as a fake backend for uploading and managing image data.","09.21.2021",[455,2139,2140,2141,2142,17],"vue2","axios","json-server","image-upload","gallery-app-screenshot.webp","Galerie App Logo",{"type":22,"children":2146,"toc":2442},[2147,2153,2185,2190,2194,2235,2238,2242,2247,2294,2299,2302,2306,2311,2345,2350,2375,2386,2389,2394,2417,2422,2438],{"type":25,"tag":26,"props":2148,"children":2150},{"id":2149},"gallery-app",[2151],{"type":31,"value":2152},"📸 Gallery App",{"type":25,"tag":34,"props":2154,"children":2155},{},[2156,2158,2163,2164,2169,2171,2176,2178,2183],{"type":31,"value":2157},"This is a personal project I built to explore and reinforce concepts around ",{"type":25,"tag":38,"props":2159,"children":2160},{},[2161],{"type":31,"value":2162},"Vue 2",{"type":31,"value":1923},{"type":25,"tag":38,"props":2165,"children":2166},{},[2167],{"type":31,"value":2168},"API integration with Axios",{"type":31,"value":2170},", and using ",{"type":25,"tag":38,"props":2172,"children":2173},{},[2174],{"type":31,"value":2175},"JSON Server",{"type":31,"value":2177}," to simulate a backend. It's a minimal but functional ",{"type":25,"tag":38,"props":2179,"children":2180},{},[2181],{"type":31,"value":2182},"image gallery application",{"type":31,"value":2184},", ideal for learning how to build CRUD-based frontends without setting up a full backend stack.",{"type":25,"tag":34,"props":2186,"children":2187},{},[2188],{"type":31,"value":2189},"The core idea was to create a clean, responsive interface that lets users upload images, view them in a gallery layout, and manage them easily. It’s also a good example of working with legacy frontend tech that’s still widely used in older codebases.",{"type":25,"tag":26,"props":2191,"children":2192},{"id":66},[2193],{"type":31,"value":69},{"type":25,"tag":71,"props":2195,"children":2196},{},[2197,2206,2216,2225],{"type":25,"tag":75,"props":2198,"children":2199},{},[2200,2204],{"type":25,"tag":38,"props":2201,"children":2202},{},[2203],{"type":31,"value":2162},{"type":31,"value":2205}," – JavaScript framework for building UI",{"type":25,"tag":75,"props":2207,"children":2208},{},[2209,2214],{"type":25,"tag":38,"props":2210,"children":2211},{},[2212],{"type":31,"value":2213},"Axios",{"type":31,"value":2215}," – For handling all HTTP requests to the mock API",{"type":25,"tag":75,"props":2217,"children":2218},{},[2219,2223],{"type":25,"tag":38,"props":2220,"children":2221},{},[2222],{"type":31,"value":2175},{"type":31,"value":2224}," – Lightweight mock REST API server using local JSON files",{"type":25,"tag":75,"props":2226,"children":2227},{},[2228,2233],{"type":25,"tag":38,"props":2229,"children":2230},{},[2231],{"type":31,"value":2232},"SCSS/CSS",{"type":31,"value":2234}," – For simple, clean styling",{"type":25,"tag":1376,"props":2236,"children":2237},{},[],{"type":25,"tag":26,"props":2239,"children":2240},{"id":127},[2241],{"type":31,"value":130},{"type":25,"tag":34,"props":2243,"children":2244},{},[2245],{"type":31,"value":2246},"While modern Vue 3 and frameworks like Nuxt 3 dominate the current frontend landscape, Vue 2 is still maintained and present in many real-world projects. I wanted a simple environment to practice:",{"type":25,"tag":71,"props":2248,"children":2249},{},[2250,2262,2272,2284],{"type":25,"tag":75,"props":2251,"children":2252},{},[2253,2255,2260],{"type":31,"value":2254},"Making ",{"type":25,"tag":38,"props":2256,"children":2257},{},[2258],{"type":31,"value":2259},"API calls",{"type":31,"value":2261}," with Axios",{"type":25,"tag":75,"props":2263,"children":2264},{},[2265,2267],{"type":31,"value":2266},"Handling ",{"type":25,"tag":38,"props":2268,"children":2269},{},[2270],{"type":31,"value":2271},"form submissions and file uploads",{"type":25,"tag":75,"props":2273,"children":2274},{},[2275,2277,2282],{"type":31,"value":2276},"Simulating ",{"type":25,"tag":38,"props":2278,"children":2279},{},[2280],{"type":31,"value":2281},"data persistence",{"type":31,"value":2283}," with a fake backend",{"type":25,"tag":75,"props":2285,"children":2286},{},[2287,2289],{"type":31,"value":2288},"Structuring a clean, ",{"type":25,"tag":38,"props":2290,"children":2291},{},[2292],{"type":31,"value":2293},"component-based SPA",{"type":25,"tag":34,"props":2295,"children":2296},{},[2297],{"type":31,"value":2298},"The result is this Gallery App — quick to spin up, easy to extend, and great for prototyping.",{"type":25,"tag":1376,"props":2300,"children":2301},{},[],{"type":25,"tag":26,"props":2303,"children":2304},{"id":191},[2305],{"type":31,"value":194},{"type":25,"tag":34,"props":2307,"children":2308},{},[2309],{"type":31,"value":2310},"To start the project locally:",{"type":25,"tag":201,"props":2312,"children":2314},{"className":203,"code":2313,"language":205,"meta":8,"style":8},"npm install\nnpm run serve\n",[2315],{"type":25,"tag":208,"props":2316,"children":2317},{"__ignoreMap":8},[2318,2329],{"type":25,"tag":212,"props":2319,"children":2320},{"class":214,"line":215},[2321,2325],{"type":25,"tag":212,"props":2322,"children":2323},{"style":219},[2324],{"type":31,"value":222},{"type":25,"tag":212,"props":2326,"children":2327},{"style":225},[2328],{"type":31,"value":1822},{"type":25,"tag":212,"props":2330,"children":2331},{"class":214,"line":290},[2332,2336,2340],{"type":25,"tag":212,"props":2333,"children":2334},{"style":219},[2335],{"type":31,"value":222},{"type":25,"tag":212,"props":2337,"children":2338},{"style":225},[2339],{"type":31,"value":1239},{"type":25,"tag":212,"props":2341,"children":2342},{"style":225},[2343],{"type":31,"value":2344}," serve\n",{"type":25,"tag":34,"props":2346,"children":2347},{},[2348],{"type":31,"value":2349},"In a separate terminal, run:",{"type":25,"tag":201,"props":2351,"children":2353},{"className":203,"code":2352,"language":205,"meta":8,"style":8},"json-server --watch db.json\n",[2354],{"type":25,"tag":208,"props":2355,"children":2356},{"__ignoreMap":8},[2357],{"type":25,"tag":212,"props":2358,"children":2359},{"class":214,"line":215},[2360,2364,2370],{"type":25,"tag":212,"props":2361,"children":2362},{"style":219},[2363],{"type":31,"value":2141},{"type":25,"tag":212,"props":2365,"children":2367},{"style":2366},"--shiki-default:#C99076",[2368],{"type":31,"value":2369}," --watch",{"type":25,"tag":212,"props":2371,"children":2372},{"style":225},[2373],{"type":31,"value":2374}," db.json\n",{"type":25,"tag":34,"props":2376,"children":2377},{},[2378,2380,2385],{"type":31,"value":2379},"This will start the fake backend at ",{"type":25,"tag":208,"props":2381,"children":2383},{"className":2382},[],[2384],{"type":31,"value":1859},{"type":31,"value":1009},{"type":25,"tag":1376,"props":2387,"children":2388},{},[],{"type":25,"tag":34,"props":2390,"children":2391},{},[2392],{"type":31,"value":2393},"✅ Features:",{"type":25,"tag":71,"props":2395,"children":2396},{},[2397,2402,2407,2412],{"type":25,"tag":75,"props":2398,"children":2399},{},[2400],{"type":31,"value":2401},"Upload and list images",{"type":25,"tag":75,"props":2403,"children":2404},{},[2405],{"type":31,"value":2406},"Basic gallery layout",{"type":25,"tag":75,"props":2408,"children":2409},{},[2410],{"type":31,"value":2411},"Uses mock data with JSON Server",{"type":25,"tag":75,"props":2413,"children":2414},{},[2415],{"type":31,"value":2416},"Built as a single-page app (SPA)",{"type":25,"tag":34,"props":2418,"children":2419},{},[2420],{"type":31,"value":2421},"This project is useful for learning how frontend apps interact with APIs and how local JSON servers can simulate a full backend for testing.",{"type":25,"tag":2423,"props":2424,"children":2425},"blockquote",{},[2426],{"type":25,"tag":34,"props":2427,"children":2428},{},[2429,2431],{"type":31,"value":2430},"Want to try it or contribute? ",{"type":25,"tag":1290,"props":2432,"children":2435},{"href":2433,"rel":2434},"https://github.com/Abbasmoe/gallery-app",[1294],[2436],{"type":31,"value":2437},"Check it out on GitHub",{"type":25,"tag":1298,"props":2439,"children":2440},{},[2441],{"type":31,"value":1302},{"title":8,"searchDepth":290,"depth":290,"links":2443},[2444,2445,2446,2447],{"id":2149,"depth":324,"text":2152},{"id":66,"depth":324,"text":69},{"id":127,"depth":324,"text":130},{"id":191,"depth":324,"text":194},"content:project:gallery-app.md","project/gallery-app.md","project/gallery-app",{"loc":2134},{"_path":2453,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2454,"description":2455,"date":2456,"tags":2457,"image":2464,"imageAlt":2465,"body":2466,"_type":1311,"_id":2691,"_source":1313,"_file":2692,"_stem":2693,"_extension":1316,"sitemap":2694},"/project/university-archive","University Projects Archive – Design & Development","A collection of web development projects created alongside my university studies. These projects focus on UI redesigns, personal branding, and skill enhancement.","01.12.2020",[2139,2458,2459,2460,2461,2462,2463],"html","css","javascript","ui-redesign","university","surge.sh","university-archive-screenshot.webp","Preview of university web projects and UI redesigns",{"type":22,"children":2467,"toc":2684},[2468,2474,2486,2491,2505,2508,2512,2517,2555,2560,2563,2569,2574,2607,2612,2615,2621,2626,2672,2675,2679],{"type":25,"tag":26,"props":2469,"children":2471},{"id":2470},"university-projects-archive",[2472],{"type":31,"value":2473},"✨ University Projects Archive",{"type":25,"tag":34,"props":2475,"children":2476},{},[2477,2479,2484],{"type":31,"value":2478},"Welcome to my ",{"type":25,"tag":38,"props":2480,"children":2481},{},[2482],{"type":31,"value":2483},"University Projects Archive",{"type":31,"value":2485},", a collection of work developed alongside my academic studies.",{"type":25,"tag":34,"props":2487,"children":2488},{},[2489],{"type":31,"value":2490},"These projects were created to apply theoretical knowledge in a practical setting, focusing on enhancing my development skills and experimenting with UI/UX design. This repository highlights my initiative to redesign existing institutional tools and build a personal digital presence using the technologies I was mastering at the time.",{"type":25,"tag":34,"props":2492,"children":2493},{},[2494,2495],{"type":31,"value":1367},{"type":25,"tag":38,"props":2496,"children":2497},{},[2498],{"type":25,"tag":1290,"props":2499,"children":2502},{"href":2500,"rel":2501},"https://abalebenslauf.surge.sh/",[1294],[2503],{"type":31,"value":2504},"View Main CV Website",{"type":25,"tag":1376,"props":2506,"children":2507},{},[],{"type":25,"tag":26,"props":2509,"children":2510},{"id":1495},[2511],{"type":31,"value":1498},{"type":25,"tag":34,"props":2513,"children":2514},{},[2515],{"type":31,"value":2516},"The projects in this archive were built using a robust mix of core web technologies and early component frameworks to ensure functionality and interactive design:",{"type":25,"tag":71,"props":2518,"children":2519},{},[2520,2535,2545],{"type":25,"tag":75,"props":2521,"children":2522},{},[2523,2533],{"type":25,"tag":38,"props":2524,"children":2525},{},[2526],{"type":25,"tag":1290,"props":2527,"children":2530},{"href":2528,"rel":2529},"https://v2.vuejs.org/",[1294],[2531],{"type":31,"value":2532},"Vue.js 2",{"type":31,"value":2534}," – Used for creating reactive interfaces and structuring the application logic in the redesign projects.",{"type":25,"tag":75,"props":2536,"children":2537},{},[2538,2543],{"type":25,"tag":38,"props":2539,"children":2540},{},[2541],{"type":31,"value":2542},"HTML5 & CSS3",{"type":31,"value":2544}," – The backbone of the layout and styling, ensuring structure and visual consistency across different screens.",{"type":25,"tag":75,"props":2546,"children":2547},{},[2548,2553],{"type":25,"tag":38,"props":2549,"children":2550},{},[2551],{"type":31,"value":2552},"Vanilla JavaScript",{"type":31,"value":2554}," – Implemented for lightweight logic and DOM manipulation where a full framework wasn't necessary.",{"type":25,"tag":34,"props":2556,"children":2557},{},[2558],{"type":31,"value":2559},"This stack allowed me to experiment with both static site creation and dynamic single-page application concepts.",{"type":25,"tag":1376,"props":2561,"children":2562},{},[],{"type":25,"tag":26,"props":2564,"children":2566},{"id":2565},"project-collection",[2567],{"type":31,"value":2568},"📚 Project Collection",{"type":25,"tag":34,"props":2570,"children":2571},{},[2572],{"type":31,"value":2573},"This archive consists of three distinct projects, each addressing a specific design or development challenge:",{"type":25,"tag":71,"props":2575,"children":2576},{},[2577,2587,2597],{"type":25,"tag":75,"props":2578,"children":2579},{},[2580,2585],{"type":25,"tag":38,"props":2581,"children":2582},{},[2583],{"type":31,"value":2584},"Main Personal CV",{"type":31,"value":2586}," – A comprehensive personal website serving as a digital portfolio. It was designed to present my academic background and technical skillset professionally.",{"type":25,"tag":75,"props":2588,"children":2589},{},[2590,2595],{"type":25,"tag":38,"props":2591,"children":2592},{},[2593],{"type":31,"value":2594},"University Webmail Redesign",{"type":31,"value":2596}," – A UI/UX case study where I redesigned the university's email portal. The goal was to modernize the interface and improve the user experience of the tool we used daily.",{"type":25,"tag":75,"props":2598,"children":2599},{},[2600,2605],{"type":25,"tag":38,"props":2601,"children":2602},{},[2603],{"type":31,"value":2604},"University Webmail Login Portal",{"type":31,"value":2606}," – A recreation of the university’s authentication entry point. This project focused on replicating and refining the login layout and form structure.",{"type":25,"tag":34,"props":2608,"children":2609},{},[2610],{"type":31,"value":2611},"These projects demonstrate a proactive approach to learning by rebuilding and improving real-world tools.",{"type":25,"tag":1376,"props":2613,"children":2614},{},[],{"type":25,"tag":26,"props":2616,"children":2618},{"id":2617},"access-the-projects",[2619],{"type":31,"value":2620},"🔗 Access the Projects",{"type":25,"tag":34,"props":2622,"children":2623},{},[2624],{"type":31,"value":2625},"You can explore the live versions of these archived projects via the links below:",{"type":25,"tag":2627,"props":2628,"children":2629},"ol",{},[2630,2644,2658],{"type":25,"tag":75,"props":2631,"children":2632},{},[2633,2638],{"type":25,"tag":38,"props":2634,"children":2635},{},[2636],{"type":31,"value":2637},"Main CV / Portfolio:",{"type":25,"tag":1290,"props":2639,"children":2641},{"href":2500,"rel":2640},[1294],[2642],{"type":31,"value":2643},"Visit Website",{"type":25,"tag":75,"props":2645,"children":2646},{},[2647,2652],{"type":25,"tag":38,"props":2648,"children":2649},{},[2650],{"type":31,"value":2651},"University Webmail Redesign:",{"type":25,"tag":1290,"props":2653,"children":2656},{"href":2654,"rel":2655},"https://email-uni-page-ms.surge.sh/",[1294],[2657],{"type":31,"value":2643},{"type":25,"tag":75,"props":2659,"children":2660},{},[2661,2666],{"type":25,"tag":38,"props":2662,"children":2663},{},[2664],{"type":31,"value":2665},"University Webmail Login Portal:",{"type":25,"tag":1290,"props":2667,"children":2670},{"href":2668,"rel":2669},"https://email-login-page.surge.sh/",[1294],[2671],{"type":31,"value":2643},{"type":25,"tag":1376,"props":2673,"children":2674},{},[],{"type":25,"tag":26,"props":2676,"children":2677},{"id":1865},[2678],{"type":31,"value":1868},{"type":25,"tag":34,"props":2680,"children":2681},{},[2682],{"type":31,"value":2683},"© 2020–present — Abbas Mohamed. All rights reserved.",{"title":8,"searchDepth":290,"depth":290,"links":2685},[2686,2687,2688,2689,2690],{"id":2470,"depth":324,"text":2473},{"id":1495,"depth":324,"text":1498},{"id":2565,"depth":324,"text":2568},{"id":2617,"depth":324,"text":2620},{"id":1865,"depth":324,"text":1868},"content:project:university-archive.md","project/university-archive.md","project/university-archive",{"loc":2453},1766592751593]