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