[{"data":1,"prerenderedAt":570},["Reactive",2],{"project-portfolio":3,"content-query-OnIkYh2m9J":209,"surround-project-portfolio":343},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"source":10,"tags":11,"image":18,"previewImage":18,"createdAt":19,"body":20,"_type":204,"_id":205,"_source":206,"_file":207,"_extension":208},"/project/portfolio","project",false,"","Portfolio","This website, as you might already notice, is my portfolio. I am using it to showcase what I learn and what I can do. It was built with the cutting-edge framework Nuxt","https://github.com/MohsenDastaran/portfolio",[12,13,14,15,16,17],"Vue.js","Nuxt.js","three.js","gsap","SCSS","SEO","/logo.svg","2022-03-31T00:00:00+03:00",{"type":21,"children":22,"toc":201},"root",[23,54],{"type":24,"tag":25,"props":26,"children":27},"element","project-header",{},[28,39],{"type":24,"tag":29,"props":30,"children":31},"project-title",{},[32],{"type":24,"tag":33,"props":34,"children":35},"p",{},[36],{"type":37,"value":38},"text","Mohsen Dastaran Portfolio",{"type":24,"tag":40,"props":41,"children":42},"template",{"v-slot:source":7},[43],{"type":24,"tag":33,"props":44,"children":45},{},[46],{"type":24,"tag":47,"props":48,"children":51},"a",{"href":10,"rel":49},[50],"nofollow",[52],{"type":37,"value":53},"source",{"type":24,"tag":55,"props":56,"children":57},"project-main",{},[58,71,194],{"type":24,"tag":59,"props":60,"children":62},"project-section",{"type":61},"fwidth",[63],{"type":24,"tag":64,"props":65,"children":70},"project-image",{":preload":66,":src":67,"alt":68,"preload":69,"type":61},"true","image","My Portfolio Website Logo",true,[],{"type":24,"tag":59,"props":72,"children":73},{"type":37},[74,123,128,173,185,189],{"type":24,"tag":33,"props":75,"children":76},{},[77,79,86,88,95,97,104,106,113,115,121],{"type":37,"value":78},"This website, as you might already notice, is my portfolio. I am using it to showcase what I learn and what I can do. It was built with the cutting-edge framework ",{"type":24,"tag":47,"props":80,"children":83},{"href":81,"rel":82,"no-lowercase":69,"size-inherit":69},"https://v3.nuxtjs.org",[50],[84],{"type":37,"value":85},"Nuxt3",{"type":37,"value":87}," (pretty cool phrase, isn't it 😄 ?). ",{"type":24,"tag":47,"props":89,"children":92},{"href":90,"rel":91,"no-lowercase":69,"size-inherit":69},"https://locomotivemtl.github.io/locomotive-scroll/",[50],[93],{"type":37,"value":94},"Locomotive Scroll",{"type":37,"value":96}," was used for creating smooth scroll on desktop screen, it can also do so on mobile, but I found it wasn't performing well enough. Also, pretty obvious is GreenSock's tool - ",{"type":24,"tag":47,"props":98,"children":101},{"href":99,"rel":100,"no-lowercase":69,"size-inherit":69},"https://greensock.com/gsap/",[50],[102],{"type":37,"value":103},"GSAP",{"type":37,"value":105},". Last but not least important tool is ",{"type":24,"tag":47,"props":107,"children":110},{"href":108,"rel":109,"no-lowercase":69,"size-inherit":69},"https://github.com/oframe/ogl",[50],[111],{"type":37,"value":112},"OGL",{"type":37,"value":114},". This is like ThreeJS, but ",{"type":24,"tag":116,"props":117,"children":118},"em",{},[119],{"type":37,"value":120},"a lot",{"type":37,"value":122}," smaller in size and delivers pretty much every tool you need to build some 3d scene.",{"type":24,"tag":33,"props":124,"children":125},{},[126],{"type":37,"value":127},"While building this website, I faced a lot of different and exceptional issues. One was breaking everything after moving one line of code up or down 😅. Another was, how to reconcile Nuxt3, GSAP, and Locomotive Scroll in one package, so the route transition looks soft and native. But after trials and errors, something proper was created. Feel free to break everything 😂.",{"type":24,"tag":129,"props":130,"children":131},"ul",{},[132,143,153,163],{"type":24,"tag":133,"props":134,"children":135},"li",{},[136],{"type":24,"tag":47,"props":137,"children":140},{"href":138,"rel":139},"https://github.com/MohsenDastaran",[50],[141],{"type":37,"value":142},"github",{"type":24,"tag":133,"props":144,"children":145},{},[146],{"type":24,"tag":47,"props":147,"children":150},{"href":148,"rel":149},"https://x.com/Mohsen_Dastaran",[50],[151],{"type":37,"value":152},"twitter",{"type":24,"tag":133,"props":154,"children":155},{},[156],{"type":24,"tag":47,"props":157,"children":160},{"href":158,"rel":159},"https://t.me/MohsenDastaran",[50],[161],{"type":37,"value":162},"telegram",{"type":24,"tag":133,"props":164,"children":165},{},[166],{"type":24,"tag":47,"props":167,"children":170},{"href":168,"rel":169},"https://www.linkedin.com/in/MohsenDastaran",[50],[171],{"type":37,"value":172},"linkedin",{"type":24,"tag":129,"props":174,"children":175},{},[176],{"type":24,"tag":133,"props":177,"children":178},{},[179],{"type":24,"tag":47,"props":180,"children":182},{"href":181},"mailto:mohsen.dastaran@gmail.com",[183],{"type":37,"value":184},"email",{"type":24,"tag":186,"props":187,"children":188},"br",{},[],{"type":24,"tag":33,"props":190,"children":191},{},[192],{"type":37,"value":193},"Would love to hear from you 😉",{"type":24,"tag":59,"props":195,"children":197},{"type":196},"project-next",[198],{"type":24,"tag":196,"props":199,"children":200},{},[],{"title":7,"searchDepth":202,"depth":202,"links":203},2,[],"markdown","content:project:portfolio.md","content","project/portfolio.md","md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"source":10,"tags":210,"image":18,"previewImage":18,"createdAt":19,"body":211,"_type":204,"_id":205,"_source":206,"_file":207,"_extension":208},[12,13,14,15,16,17],{"type":21,"children":212,"toc":341},[213,234],{"type":24,"tag":25,"props":214,"children":215},{},[216,223],{"type":24,"tag":29,"props":217,"children":218},{},[219],{"type":24,"tag":33,"props":220,"children":221},{},[222],{"type":37,"value":38},{"type":24,"tag":40,"props":224,"children":225},{"v-slot:source":7},[226],{"type":24,"tag":33,"props":227,"children":228},{},[229],{"type":24,"tag":47,"props":230,"children":232},{"href":10,"rel":231},[50],[233],{"type":37,"value":53},{"type":24,"tag":55,"props":235,"children":236},{},[237,243,335],{"type":24,"tag":59,"props":238,"children":239},{"type":61},[240],{"type":24,"tag":64,"props":241,"children":242},{":preload":66,":src":67,"alt":68,"preload":69,"type":61},[],{"type":24,"tag":59,"props":244,"children":245},{"type":37},[246,279,283,318,328,331],{"type":24,"tag":33,"props":247,"children":248},{},[249,250,255,256,261,262,267,268,273,274,278],{"type":37,"value":78},{"type":24,"tag":47,"props":251,"children":253},{"href":81,"rel":252,"no-lowercase":69,"size-inherit":69},[50],[254],{"type":37,"value":85},{"type":37,"value":87},{"type":24,"tag":47,"props":257,"children":259},{"href":90,"rel":258,"no-lowercase":69,"size-inherit":69},[50],[260],{"type":37,"value":94},{"type":37,"value":96},{"type":24,"tag":47,"props":263,"children":265},{"href":99,"rel":264,"no-lowercase":69,"size-inherit":69},[50],[266],{"type":37,"value":103},{"type":37,"value":105},{"type":24,"tag":47,"props":269,"children":271},{"href":108,"rel":270,"no-lowercase":69,"size-inherit":69},[50],[272],{"type":37,"value":112},{"type":37,"value":114},{"type":24,"tag":116,"props":275,"children":276},{},[277],{"type":37,"value":120},{"type":37,"value":122},{"type":24,"tag":33,"props":280,"children":281},{},[282],{"type":37,"value":127},{"type":24,"tag":129,"props":284,"children":285},{},[286,294,302,310],{"type":24,"tag":133,"props":287,"children":288},{},[289],{"type":24,"tag":47,"props":290,"children":292},{"href":138,"rel":291},[50],[293],{"type":37,"value":142},{"type":24,"tag":133,"props":295,"children":296},{},[297],{"type":24,"tag":47,"props":298,"children":300},{"href":148,"rel":299},[50],[301],{"type":37,"value":152},{"type":24,"tag":133,"props":303,"children":304},{},[305],{"type":24,"tag":47,"props":306,"children":308},{"href":158,"rel":307},[50],[309],{"type":37,"value":162},{"type":24,"tag":133,"props":311,"children":312},{},[313],{"type":24,"tag":47,"props":314,"children":316},{"href":168,"rel":315},[50],[317],{"type":37,"value":172},{"type":24,"tag":129,"props":319,"children":320},{},[321],{"type":24,"tag":133,"props":322,"children":323},{},[324],{"type":24,"tag":47,"props":325,"children":326},{"href":181},[327],{"type":37,"value":184},{"type":24,"tag":186,"props":329,"children":330},{},[],{"type":24,"tag":33,"props":332,"children":333},{},[334],{"type":37,"value":193},{"type":24,"tag":59,"props":336,"children":337},{"type":196},[338],{"type":24,"tag":196,"props":339,"children":340},{},[],{"title":7,"searchDepth":202,"depth":202,"links":342},[],[344,459],{"_path":345,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":346,"description":347,"source":348,"live":349,"tags":350,"image":353,"previewImage":353,"createdAt":354,"body":355,"_type":204,"_id":457,"_source":206,"_file":458,"_extension":208},"/project/nuxt-shadcn-boilerplate","Nuxt Shadcn Boilerplate","Nuxt 3 Shadcn boilerplate using UI-Thing + Inspire UI + Dark Mode + Theme Costomizer + i18n + State Manage(Pinia) + Tailwind + Icon Collections(Lucide &...) + Zod. ","https://github.com/MohsenDastaran/Vue-Shadcn-Boilerplate","https://vue-shadcn-boilerplate.netlify.app/",[12,13,351,352],"Shadcn","Tailwind","/shadcn.webp","2024-05-30T00:00:00+03:00",{"type":21,"children":356,"toc":455},[357,380],{"type":24,"tag":25,"props":358,"children":359},{},[360,368],{"type":24,"tag":29,"props":361,"children":362},{},[363],{"type":24,"tag":33,"props":364,"children":365},{},[366],{"type":37,"value":367},"Nuxt 3 Shadcn boilerplate",{"type":24,"tag":40,"props":369,"children":370},{"v-slot:live":7},[371],{"type":24,"tag":33,"props":372,"children":373},{},[374],{"type":24,"tag":47,"props":375,"children":377},{"href":349,"rel":376},[50],[378],{"type":37,"value":379},"see live",{"type":24,"tag":55,"props":381,"children":382},{},[383,389,449],{"type":24,"tag":59,"props":384,"children":385},{"type":61},[386],{"type":24,"tag":64,"props":387,"children":388},{":preload":66,":src":67,"alt":68,"preload":69,"type":61},[],{"type":24,"tag":59,"props":390,"children":391},{"type":37},[392,397,432,442,445],{"type":24,"tag":33,"props":393,"children":394},{},[395],{"type":37,"value":396},"Nuxt 3 Shadcn boilerplate using UI-Thing + Inspire UI + Dark Mode + Theme Costomizer + i18n + State Manage(Pinia) + Tailwind + Icon Collections(Lucide &...) + Zod.",{"type":24,"tag":129,"props":398,"children":399},{},[400,408,416,424],{"type":24,"tag":133,"props":401,"children":402},{},[403],{"type":24,"tag":47,"props":404,"children":406},{"href":348,"rel":405},[50],[407],{"type":37,"value":142},{"type":24,"tag":133,"props":409,"children":410},{},[411],{"type":24,"tag":47,"props":412,"children":414},{"href":148,"rel":413},[50],[415],{"type":37,"value":152},{"type":24,"tag":133,"props":417,"children":418},{},[419],{"type":24,"tag":47,"props":420,"children":422},{"href":158,"rel":421},[50],[423],{"type":37,"value":162},{"type":24,"tag":133,"props":425,"children":426},{},[427],{"type":24,"tag":47,"props":428,"children":430},{"href":168,"rel":429},[50],[431],{"type":37,"value":172},{"type":24,"tag":129,"props":433,"children":434},{},[435],{"type":24,"tag":133,"props":436,"children":437},{},[438],{"type":24,"tag":47,"props":439,"children":440},{"href":181},[441],{"type":37,"value":184},{"type":24,"tag":186,"props":443,"children":444},{},[],{"type":24,"tag":33,"props":446,"children":447},{},[448],{"type":37,"value":193},{"type":24,"tag":59,"props":450,"children":451},{"type":196},[452],{"type":24,"tag":196,"props":453,"children":454},{},[],{"title":7,"searchDepth":202,"depth":202,"links":456},[],"content:project:Nuxt Shadcn boilerplate.md","project/Nuxt Shadcn boilerplate.md",{"_path":460,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":461,"description":462,"source":463,"live":464,"tags":465,"image":353,"previewImage":353,"createdAt":467,"body":468,"_type":204,"_id":568,"_source":206,"_file":569,"_extension":208},"/project/shadcn-table","Shadcn Table","A feature-rich table listing the submitted orders","https://github.com/MohsenDastaran/shadcn-table","https://shadcn-table.netlify.app/",[12,13,351,466],"table","2024-03-31T00:00:00+03:00",{"type":21,"children":469,"toc":566},[470,491],{"type":24,"tag":25,"props":471,"children":472},{},[473,480],{"type":24,"tag":29,"props":474,"children":475},{},[476],{"type":24,"tag":33,"props":477,"children":478},{},[479],{"type":37,"value":461},{"type":24,"tag":40,"props":481,"children":482},{"v-slot:live":7},[483],{"type":24,"tag":33,"props":484,"children":485},{},[486],{"type":24,"tag":47,"props":487,"children":489},{"href":464,"rel":488},[50],[490],{"type":37,"value":379},{"type":24,"tag":55,"props":492,"children":493},{},[494,500,560],{"type":24,"tag":59,"props":495,"children":496},{"type":61},[497],{"type":24,"tag":64,"props":498,"children":499},{":preload":66,":src":67,"alt":68,"preload":69,"type":61},[],{"type":24,"tag":59,"props":501,"children":502},{"type":37},[503,508,543,553,556],{"type":24,"tag":33,"props":504,"children":505},{},[506],{"type":37,"value":507},"A feature-rich table listing the submitted orders.",{"type":24,"tag":129,"props":509,"children":510},{},[511,519,527,535],{"type":24,"tag":133,"props":512,"children":513},{},[514],{"type":24,"tag":47,"props":515,"children":517},{"href":463,"rel":516},[50],[518],{"type":37,"value":142},{"type":24,"tag":133,"props":520,"children":521},{},[522],{"type":24,"tag":47,"props":523,"children":525},{"href":148,"rel":524},[50],[526],{"type":37,"value":152},{"type":24,"tag":133,"props":528,"children":529},{},[530],{"type":24,"tag":47,"props":531,"children":533},{"href":158,"rel":532},[50],[534],{"type":37,"value":162},{"type":24,"tag":133,"props":536,"children":537},{},[538],{"type":24,"tag":47,"props":539,"children":541},{"href":168,"rel":540},[50],[542],{"type":37,"value":172},{"type":24,"tag":129,"props":544,"children":545},{},[546],{"type":24,"tag":133,"props":547,"children":548},{},[549],{"type":24,"tag":47,"props":550,"children":551},{"href":181},[552],{"type":37,"value":184},{"type":24,"tag":186,"props":554,"children":555},{},[],{"type":24,"tag":33,"props":557,"children":558},{},[559],{"type":37,"value":193},{"type":24,"tag":59,"props":561,"children":562},{"type":196},[563],{"type":24,"tag":196,"props":564,"children":565},{},[],{"title":7,"searchDepth":202,"depth":202,"links":567},[],"content:project:shadcn-table.md","project/shadcn-table.md",1787179675820]