[{"_id":"674553631b8c712f1378ccb2","publication":"60feafdc1be2da0c4ab76eeb","user":{"_id":"60feaf99fa408f0c89bd2b11","isDeactivated":false,"numFollowers":75,"hasGoldRing":true,"name":"Aashish Panthi","username":"aashishpanthi","tagline":"A developer","photo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg"},"createdAt":"2024-11-26T04:49:29.218Z","memberName":"Aashish Panthi","memberPhoto":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","privacyState":"public","role":"author","updatedAt":"2024-11-26T04:49:29.218Z","username":"aashishpanthi","latestPosts":[{"_id":"6655512a411d363619def41f","views":940,"isActive":true,"type":"story","partOfPublication":true,"responseCount":4,"replyCount":2,"reactions":[],"totalReactions":72,"isPinnedToBlog":false,"title":"SVG path animation in Nextjs using GSAP","cuid":"clwpui5kn00060ajwb3nqexh7","dateAdded":"2024-05-28T03:36:10.680Z","isCoverAttributionHidden":false,"slug":"svg-path-animation-in-nextjs-using-gsap","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1716867233378/d0eb6d47-a98b-457c-865a-793946ff4f30.png","brief":"Before starting out, let me quickly share what we're building today.\nOpen codesandbox.io or visit gsap-svg-path-animation.netlify.app.\nSeems interesting, let's start.\nIntroduction\nYou might have visited some websites where when you scroll, things mov...","author":"60feaf99fa408f0c89bd2b11","readTime":13,"tags":["584879f0c0aaf085e2012086","56a9022e9095f2cd1d3ee204","56744723958ef13879b95338","63e6be338dd6c5e91276d45b"],"publication":{"_id":"60feafdc1be2da0c4ab76eeb","betaFeatures":{"newsletter":false,"embeds":false,"csvImport":false,"customCSS":false,"githubAsSource":false,"payments":true},"views":{"today":20,"thisWeek":118,"lastWeek":325,"thisMonth":584,"allTime":52755},"stripe":{},"numFollowers":0,"badgePageEnabled":true,"newsletterEnabled":true,"textSelectionSharerEnabled":true,"newsletterFrequency":"asap","staticPages":[],"isFeatured":false,"dailyViewsForCurrentMonth":{"1712016000":57,"1712102400":74,"1712188800":67,"1712275200":74,"1712361600":60,"1712448000":40,"1712534400":67,"1712620800":60,"1712707200":55,"1712793600":51,"1712880000":47,"1712966400":39,"1713052800":27,"1713139200":51,"1713225600":43,"1713312000":60,"1713398400":58,"1713484800":41,"1713571200":25,"1713657600":35,"1713744000":42,"1713830400":44,"1713916800":66,"1714003200":63,"1714089600":27,"1714176000":36,"1714262400":23,"1714348800":50,"1714435200":37,"1714521600":33},"viewCountVisible":false,"readTimeHidden":true,"customCSSEnabled":true,"domainChecklistSkipped":false,"author":"60feaf99fa408f0c89bd2b11","isActive":true,"username":"aashishpanthi","domain":"blog.aashish-panthi.com.np","urlPattern":"simple","title":"Aashish's blogs","links":{"twitter":"https://twitter.com/aashishpanthi11","instagram":"https://instagram.com/aashishpanthi11","github":"https://github.com/aashishpanthi","website":"https://aashish-panthi.com.np/","hashnode":"https://hashnode.com/@aashishpanthi","youtube":"https://www.youtube.com/channel/UCe3WNME_cssAFpwLQkvADBw","dailydev":"https://app.daily.dev/aashishpanthi","linkedin":"https://linkedin.com/in/aashishpanthi","mastodon":""},"domainStatus":{"certIssued":true,"ready":true},"domainUpdatedOn":"2021-09-07T09:24:08.443Z","customRules":[],"menu":[{"type":"series","label":"DevRetro","series":"63a72325b1011ed9ec6cebd6","priority":4,"_id":"63a72363c39f50da11a5ae84"},{"type":"series","label":"JavaScript","series":"612bbf312858872661b9bcee","priority":3,"_id":"612bbf5bfd0bf8636d76e12b"},{"type":"series","label":"JS libraries","series":"612929689da1766342ad6d6a","priority":2,"_id":"612bbf46fd0bf8636d76e128"}],"__v":0,"imprint":"","imprintMarkdown":"","meta":"A **developer** trying to share programming knowledge and self-growth.","metaHTML":"

A developer trying to share programming knowledge and self-growth.

\n","hasBadges":true,"darkModeEnabled":false,"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1649938858669/MUCTzzAqy.png","headerColor":"#22495A","layout":"stacked","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002711009/x33eB9pyo.png","darkModeLogo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002756066/k3_V3jMmd.png","description":"I am a full stack developer and here I share my experiences and also share some guides or tutorials for doing certain things related to web development with Javascript and topics.","displayTitle":"All about programming and building fullstack web application and mobile application. Blogs by Aashish Panthi from Nepal","umamiWebsiteUUID":"d8e93366-d0d4-4d5d-b39d-867f7c22772a","umamiDataImported":true,"customCSSDraft":{"home":".blog-author-container {\n background-color: #F4EFEB !important;\n}\n\n.dark .blog-author-container{\n background-color: transparent !important;\n}\n\n\n.blog-posts-wrapper{\n background-color: transparent;\n \n}\n\n.blog-post-card{\n background-color: #F4EFEB;\n border: 1px solid #4F4F4F;\n padding:15px !important;\n border-radius:10px;\n transition: box-shadow .3s;\n}\n\n.blog-post-card:hover{\n box-shadow: 0 0 11px rgba(33,33,33,.2);\n}\n\n.dark .blog-post-card{\n background-color: #22495A;\n border: 1px solid #F4EFEB;\n}\n\n.dark .blog-post-card:hover{\n box-shadow: 0 0 11px rgba(233,233,233,.3);\n}\n\n\n.blog-post-card-meta{\n display:none;\n}\n\n.blog-post-card .blog-post-card-title{\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n color:#4F4F4F;\n}\n\n.dark .blog-post-card-title{\n color:#F4EFEB !important;\n}\n\n.blog-post-card-time{\n display:none;\n}\n\n.blog-post-card-brief a{\n color:#4F4F4F;\n}\n\n.dark .blog-post-card-brief a{\n color:#F4EFEB;\n}\n\n.blog-footer-area{\n background-color:#22495A !important;\n}\n\n.blog-footer-credits p, .blog-footer-credits a{\n color:#F4EFEB !important;\n}\n\n.blog-footer-credits span{\n color:#4F4F4F !important;\n}\n\n.dark .blog-footer-credits span{\n color:#F4EFEB !important;\n}","post":".blog-impressum > .prose { padding-bottom: 3rem; }\r\n.dark .blog-impressum > .prose { padding-bottom: 3rem; }\r\n.blog-impressum > .prose > h3 { visibility: hidden; }\r\n\r\n.dark .blog-impressum { border: 1px solid #3c4654; }\r\n\r\n.dark .dark\\:bg-brand-dark-grey-900 { background-color: #222830; }\r\n.dark .dark\\:bg-brand-black { background-color: #222830; }\r\n.dark .blog-header { background-color: #222830; }\r\n.dark .text-brand-blue { color: #aabbcc; }\r\n.dark .dark\\:border-brand-grey-800 { border-color: #222830; }\r\n.dark .blog-series { border-color: #38404c; }\r\n.dark .dark\\:bg-brand-grey-900 { background-color: #1b2021; }\r\n\r\npre { border: 1px solid gainsboro; }\r\n.dark .prose a { color: #93b0ff; }\r\n\r\n.prose pre { color: #373737; background-color: #ffffff; }\r\n\r\n.hljs-params, .hljs-class .hljs-title { color: #166fc1; }\r\n.dark .hljs-params, .hljs-class .hljs-title { color: #68aff0; }\r\n\r\n.hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #63bd00; }\r\n.hljs-comment { color: #afafaf; }\r\n.dark .hljs-comment { color: #5a5a5a; }\r\n.hljs, .hljs-tag, .hljs-subst { color: #0F172A; }\r\n.dark .hljs, .dark .hljs-tag, .dark .hljs-subst { color: #f8f8f2; }\r\n.dark .prose pre { color: #e2e8f0; background-color: #222830; border-color: #45505e; }\r\n.dark .hljs-string, .dark .hljs-type, .dark .hljs-built_in, .dark .hljs-builtin-name,\r\n.dark .hljs-selector-id, .dark .hljs-selector-attr, .dark .hljs-selector-pseudo, .dark .hljs-addition,\r\n.dark .hljs-variable, .dark .hljs-template-variable { color: #9db0ff; }\r\n.dark .hljs-code, .dark .hljs-title, .dark .hljs-section, .dark .hljs-selector-class { color: #47cd92; }\r\n.dark .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #ff82af; }\r\n\r\n.hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name,\r\n.hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition,\r\n.hljs-variable, .hljs-template-variable { color: #035af9; }\r\n\r\n.blog-post-area { padding-top: 20px; }\r\n.post-cover { border-radius: 8px; }\r\n.dark .border-brand-blue { border-color: #4c5869; }\r\n.border-brand-blue { border-color: #e0e0e0; }\r\n.button-transparent.active { color: #5c5c5c; }\r\n.dark .button-transparent.active { color: #949494; }\r\n.dark .button-primary { border-color: #c5c5c5; color: #eae7e7; }\r\n\r\n.btn-reaction-spp:hover {\r\n animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;\r\n transform: translate3d(0, 0, 0);\r\n backface-visibility: hidden;\r\n perspective: 1000px; \r\n}\r\n\r\n@keyframes shake {\r\n 10%, 90% { transform: translate3d(-1px, 0, 0); }\r\n 20%, 80% { transform: translate3d(2px, 0, 0); }\r\n 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }\r\n 40%, 60% { transform: translate3d(4px, 0, 0); }\r\n}\r\n\r\n.blog-post-detail-card { padding-top: 1rem; }\r\n\r\n@media (min-width: 640px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .blog-author-card { padding-top: 3rem; }\r\n .blog-header { position: fixed; width: 100%; background: #fff; }\r\n .dark .blog-header { position: fixed; width: 100%; }\r\n .blog-header + div { padding-top: 5.4rem; }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n .blog-header + div { padding-top: 6.5rem; }\r\n .sticky { top: 90px !important; }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .blog-author-card { padding-top: 1.5rem; }\r\n}\r\n\r\n.blog-post-area {\r\n background-color:#F4EFEB;\r\n}\r\n\r\n.dark .blog-post-area{\r\n background-color:#0F172A;\r\n}\r\n\r\np code{\r\n background-color:#fff !important;\r\n}\r\n\r\n.dark p code{\r\n background-color:#22495A !important;\r\n}\r\n\r\npre code{\r\n color:#0F172A !important;\r\n}\r\n\r\n.dark pre code{\r\n color:#f8f8f8 !important;\r\n}\r\n\r\n.blog-similar-article-wrapper{\r\n border: .5px solid #4F4F4F !important;\r\n padding:15px !important;\r\n border-radius:10px;\r\n transition: box-shadow .3s;\r\n background-color:#fff;\r\n}\r\n\r\n.blog-similar-article-wrapper:hover{\r\n box-shadow: 0 0 11px rgba(33,33,33,.2);\r\n}\r\n\r\n.dark .blog-similar-article-wrapper{\r\n background-color:#22495A;\r\n}\r\n\r\n.dark .blog-similar-article-wrapper:hover{\r\n box-shadow: 0 0 11px rgba(233,233,233,.2);\r\n}\r\n\r\n.blog-similar-article-wrapper h1 a{\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n color:#4F4F4F;\r\n}\r\n\r\n.dark .blog-similar-article-wrapper h1 a{\r\n color:#F4EFEB;\r\n}\r\n\r\n.blog-footer-area{\r\n background-color:#22495A !important;\r\n}\r\n\r\n.blog-footer-credits p, .blog-footer-credits a{\r\n color:#F4EFEB !important;\r\n}\r\n\r\n.blog-footer-credits span{\r\n color:#4F4F4F !important;\r\n}\r\n\r\n.dark .blog-footer-credits span{\r\n color:#F4EFEB !important;\r\n}","static":"","homeMin":".blog-author-container{background-color:#f4efeb !important}.dark .blog-author-container{background-color:transparent !important}.blog-posts-wrapper{background-color:transparent}.blog-post-card{background-color:#f4efeb;border:1px solid #4f4f4f;padding:15px !important;border-radius:10px;transition:box-shadow .3s}.blog-post-card:hover{box-shadow:0 0 11px rgba(33,33,33,.2)}.dark .blog-post-card{background-color:#22495a;border:1px solid #f4efeb}.dark .blog-post-card:hover{box-shadow:0 0 11px rgba(233,233,233,.3)}.blog-post-card-meta{display:none}.blog-post-card .blog-post-card-title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#4f4f4f}.dark .blog-post-card-title{color:#f4efeb !important}.blog-post-card-time{display:none}.blog-post-card-brief a{color:#4f4f4f}.dark .blog-post-card-brief a{color:#f4efeb}.blog-footer-area{background-color:#22495a !important}.blog-footer-credits p,.blog-footer-credits a{color:#f4efeb !important}.blog-footer-credits span{color:#4f4f4f !important}.dark .blog-footer-credits span{color:#f4efeb !important}","postMin":".blog-impressum>.prose{padding-bottom:3rem}.dark .blog-impressum>.prose{padding-bottom:3rem}.blog-impressum>.prose>h3{visibility:hidden}.dark .blog-impressum{border:1px solid #3c4654}.dark .dark\\:bg-brand-dark-grey-900{background-color:#222830}.dark .dark\\:bg-brand-black{background-color:#222830}.dark .blog-header{background-color:#222830}.dark .text-brand-blue{color:#abc}.dark .dark\\:border-brand-grey-800{border-color:#222830}.dark .blog-series{border-color:#38404c}.dark .dark\\:bg-brand-grey-900{background-color:#1b2021}pre{border:1px solid gainsboro}.dark .prose a{color:#93b0ff}.prose pre{color:#373737;background-color:#fff}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0f172a}.dark .hljs,.dark .hljs-tag,.dark .hljs-subst{color:#f8f8f2}.dark .prose pre{color:#e2e8f0;background-color:#222830;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.btn-reaction-spp:hover{animation:shake .8s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.blog-post-detail-card{padding-top:1rem}@media(min-width:640px){.blog-author-card{padding-top:2rem}}@media(min-width:768px){.blog-author-card{padding-top:2rem}}@media(min-width:1024px){.blog-author-card{padding-top:3rem}.blog-header{position:fixed;width:100%;background:#fff}.dark .blog-header{position:fixed;width:100%}.blog-header+div{padding-top:5.4rem}}@media(min-width:1280px){.blog-author-card{padding-top:2rem}.blog-header+div{padding-top:6.5rem}.sticky{top:90px !important}}@media(min-width:1600px){.blog-author-card{padding-top:1.5rem}}.blog-post-area{background-color:#f4efeb}.dark .blog-post-area{background-color:#0f172a}p code{background-color:#fff !important}.dark p code{background-color:#22495a !important}pre code{color:#0f172a !important}.dark pre code{color:#f8f8f8 !important}.blog-similar-article-wrapper{border:.5px solid #4f4f4f !important;padding:15px !important;border-radius:10px;transition:box-shadow .3s;background-color:#fff}.blog-similar-article-wrapper:hover{box-shadow:0 0 11px rgba(33,33,33,.2)}.dark .blog-similar-article-wrapper{background-color:#22495a}.dark .blog-similar-article-wrapper:hover{box-shadow:0 0 11px rgba(233,233,233,.2)}.blog-similar-article-wrapper h1 a{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#4f4f4f}.dark .blog-similar-article-wrapper h1 a{color:#f4efeb}.blog-footer-area{background-color:#22495a !important}.blog-footer-credits p,.blog-footer-credits a{color:#f4efeb !important}.blog-footer-credits span{color:#4f4f4f !important}.dark .blog-footer-credits span{color:#f4efeb !important}"},"customCSSPublished":{"home":".blog-author-container {\n background-color: #F4EFEB !important;\n}\n\n.dark .blog-author-container{\n background-color: transparent !important;\n}\n\n\n.blog-posts-wrapper{\n background-color: transparent;\n \n}\n\n.blog-post-card{\n background-color: #F4EFEB;\n border: 1px solid #4F4F4F;\n padding:15px !important;\n border-radius:10px;\n transition: box-shadow .3s;\n}\n\n.blog-post-card:hover{\n box-shadow: 0 0 11px rgba(33,33,33,.2);\n}\n\n.dark .blog-post-card{\n background-color: #22495A;\n border: 1px solid #F4EFEB;\n}\n\n.dark .blog-post-card:hover{\n box-shadow: 0 0 11px rgba(233,233,233,.3);\n}\n\n\n.blog-post-card-meta{\n display:none;\n}\n\n.blog-post-card .blog-post-card-title{\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n color:#4F4F4F;\n}\n\n.dark .blog-post-card-title{\n color:#F4EFEB !important;\n}\n\n.blog-post-card-time{\n display:none;\n}\n\n.blog-post-card-brief a{\n color:#4F4F4F;\n}\n\n.dark .blog-post-card-brief a{\n color:#F4EFEB;\n}\n\n.blog-footer-area{\n background-color:#22495A !important;\n}\n\n.blog-footer-credits p, .blog-footer-credits a{\n color:#F4EFEB !important;\n}\n\n.blog-footer-credits span{\n color:#4F4F4F !important;\n}\n\n.dark .blog-footer-credits span{\n color:#F4EFEB !important;\n}","post":".blog-impressum > .prose { padding-bottom: 3rem; }\r\n.dark .blog-impressum > .prose { padding-bottom: 3rem; }\r\n.blog-impressum > .prose > h3 { visibility: hidden; }\r\n\r\n.dark .blog-impressum { border: 1px solid #3c4654; }\r\n\r\n.dark .dark\\:bg-brand-dark-grey-900 { background-color: #222830; }\r\n.dark .dark\\:bg-brand-black { background-color: #222830; }\r\n.dark .blog-header { background-color: #222830; }\r\n.dark .text-brand-blue { color: #aabbcc; }\r\n.dark .dark\\:border-brand-grey-800 { border-color: #222830; }\r\n.dark .blog-series { border-color: #38404c; }\r\n.dark .dark\\:bg-brand-grey-900 { background-color: #1b2021; }\r\n\r\npre { border: 1px solid gainsboro; }\r\n.dark .prose a { color: #93b0ff; }\r\n\r\n.prose pre { color: #373737; background-color: #ffffff; }\r\n\r\n.hljs-params, .hljs-class .hljs-title { color: #166fc1; }\r\n.dark .hljs-params, .hljs-class .hljs-title { color: #68aff0; }\r\n\r\n.hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #63bd00; }\r\n.hljs-comment { color: #afafaf; }\r\n.dark .hljs-comment { color: #5a5a5a; }\r\n.hljs, .hljs-tag, .hljs-subst { color: #0F172A; }\r\n.dark .hljs, .dark .hljs-tag, .dark .hljs-subst { color: #f8f8f2; }\r\n.dark .prose pre { color: #e2e8f0; background-color: #222830; border-color: #45505e; }\r\n.dark .hljs-string, .dark .hljs-type, .dark .hljs-built_in, .dark .hljs-builtin-name,\r\n.dark .hljs-selector-id, .dark .hljs-selector-attr, .dark .hljs-selector-pseudo, .dark .hljs-addition,\r\n.dark .hljs-variable, .dark .hljs-template-variable { color: #9db0ff; }\r\n.dark .hljs-code, .dark .hljs-title, .dark .hljs-section, .dark .hljs-selector-class { color: #47cd92; }\r\n.dark .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #ff82af; }\r\n\r\n.hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name,\r\n.hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition,\r\n.hljs-variable, .hljs-template-variable { color: #035af9; }\r\n\r\n.blog-post-area { padding-top: 20px; }\r\n.post-cover { border-radius: 8px; }\r\n.dark .border-brand-blue { border-color: #4c5869; }\r\n.border-brand-blue { border-color: #e0e0e0; }\r\n.button-transparent.active { color: #5c5c5c; }\r\n.dark .button-transparent.active { color: #949494; }\r\n.dark .button-primary { border-color: #c5c5c5; color: #eae7e7; }\r\n\r\n.btn-reaction-spp:hover {\r\n animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;\r\n transform: translate3d(0, 0, 0);\r\n backface-visibility: hidden;\r\n perspective: 1000px; \r\n}\r\n\r\n@keyframes shake {\r\n 10%, 90% { transform: translate3d(-1px, 0, 0); }\r\n 20%, 80% { transform: translate3d(2px, 0, 0); }\r\n 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }\r\n 40%, 60% { transform: translate3d(4px, 0, 0); }\r\n}\r\n\r\n.blog-post-detail-card { padding-top: 1rem; }\r\n\r\n@media (min-width: 640px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .blog-author-card { padding-top: 3rem; }\r\n .blog-header { position: fixed; width: 100%; background: #fff; }\r\n .dark .blog-header { position: fixed; width: 100%; }\r\n .blog-header + div { padding-top: 5.4rem; }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .blog-author-card { padding-top: 2rem; }\r\n .blog-header + div { padding-top: 6.5rem; }\r\n .sticky { top: 90px !important; }\r\n}\r\n\r\n@media (min-width: 1600px) {\r\n .blog-author-card { padding-top: 1.5rem; }\r\n}\r\n\r\n.blog-post-area {\r\n background-color:#F4EFEB;\r\n}\r\n\r\n.dark .blog-post-area{\r\n background-color:#0F172A;\r\n}\r\n\r\np code{\r\n background-color:#fff !important;\r\n}\r\n\r\n.dark p code{\r\n background-color:#22495A !important;\r\n}\r\n\r\npre code{\r\n color:#0F172A !important;\r\n}\r\n\r\n.dark pre code{\r\n color:#f8f8f8 !important;\r\n}\r\n\r\n.blog-similar-article-wrapper{\r\n border: .5px solid #4F4F4F !important;\r\n padding:15px !important;\r\n border-radius:10px;\r\n transition: box-shadow .3s;\r\n background-color:#fff;\r\n}\r\n\r\n.blog-similar-article-wrapper:hover{\r\n box-shadow: 0 0 11px rgba(33,33,33,.2);\r\n}\r\n\r\n.dark .blog-similar-article-wrapper{\r\n background-color:#22495A;\r\n}\r\n\r\n.dark .blog-similar-article-wrapper:hover{\r\n box-shadow: 0 0 11px rgba(233,233,233,.2);\r\n}\r\n\r\n.blog-similar-article-wrapper h1 a{\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n color:#4F4F4F;\r\n}\r\n\r\n.dark .blog-similar-article-wrapper h1 a{\r\n color:#F4EFEB;\r\n}\r\n\r\n.blog-footer-area{\r\n background-color:#22495A !important;\r\n}\r\n\r\n.blog-footer-credits p, .blog-footer-credits a{\r\n color:#F4EFEB !important;\r\n}\r\n\r\n.blog-footer-credits span{\r\n color:#4F4F4F !important;\r\n}\r\n\r\n.dark .blog-footer-credits span{\r\n color:#F4EFEB !important;\r\n}","static":"","homeMin":".blog-author-container{background-color:#f4efeb !important}.dark .blog-author-container{background-color:transparent !important}.blog-posts-wrapper{background-color:transparent}.blog-post-card{background-color:#f4efeb;border:1px solid #4f4f4f;padding:15px !important;border-radius:10px;transition:box-shadow .3s}.blog-post-card:hover{box-shadow:0 0 11px rgba(33,33,33,.2)}.dark .blog-post-card{background-color:#22495a;border:1px solid #f4efeb}.dark .blog-post-card:hover{box-shadow:0 0 11px rgba(233,233,233,.3)}.blog-post-card-meta{display:none}.blog-post-card .blog-post-card-title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#4f4f4f}.dark .blog-post-card-title{color:#f4efeb !important}.blog-post-card-time{display:none}.blog-post-card-brief a{color:#4f4f4f}.dark .blog-post-card-brief a{color:#f4efeb}.blog-footer-area{background-color:#22495a !important}.blog-footer-credits p,.blog-footer-credits a{color:#f4efeb !important}.blog-footer-credits span{color:#4f4f4f !important}.dark .blog-footer-credits span{color:#f4efeb !important}","postMin":".blog-impressum>.prose{padding-bottom:3rem}.dark .blog-impressum>.prose{padding-bottom:3rem}.blog-impressum>.prose>h3{visibility:hidden}.dark .blog-impressum{border:1px solid #3c4654}.dark .dark\\:bg-brand-dark-grey-900{background-color:#222830}.dark .dark\\:bg-brand-black{background-color:#222830}.dark .blog-header{background-color:#222830}.dark .text-brand-blue{color:#abc}.dark .dark\\:border-brand-grey-800{border-color:#222830}.dark .blog-series{border-color:#38404c}.dark .dark\\:bg-brand-grey-900{background-color:#1b2021}pre{border:1px solid gainsboro}.dark .prose a{color:#93b0ff}.prose pre{color:#373737;background-color:#fff}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0f172a}.dark .hljs,.dark .hljs-tag,.dark .hljs-subst{color:#f8f8f2}.dark .prose pre{color:#e2e8f0;background-color:#222830;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.btn-reaction-spp:hover{animation:shake .8s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.blog-post-detail-card{padding-top:1rem}@media(min-width:640px){.blog-author-card{padding-top:2rem}}@media(min-width:768px){.blog-author-card{padding-top:2rem}}@media(min-width:1024px){.blog-author-card{padding-top:3rem}.blog-header{position:fixed;width:100%;background:#fff}.dark .blog-header{position:fixed;width:100%}.blog-header+div{padding-top:5.4rem}}@media(min-width:1280px){.blog-author-card{padding-top:2rem}.blog-header+div{padding-top:6.5rem}.sticky{top:90px !important}}@media(min-width:1600px){.blog-author-card{padding-top:1.5rem}}.blog-post-area{background-color:#f4efeb}.dark .blog-post-area{background-color:#0f172a}p code{background-color:#fff !important}.dark p code{background-color:#22495a !important}pre code{color:#0f172a !important}.dark pre code{color:#f8f8f8 !important}.blog-similar-article-wrapper{border:.5px solid #4f4f4f !important;padding:15px !important;border-radius:10px;transition:box-shadow .3s;background-color:#fff}.blog-similar-article-wrapper:hover{box-shadow:0 0 11px rgba(33,33,33,.2)}.dark .blog-similar-article-wrapper{background-color:#22495a}.dark .blog-similar-article-wrapper:hover{box-shadow:0 0 11px rgba(233,233,233,.2)}.blog-similar-article-wrapper h1 a{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#4f4f4f}.dark .blog-similar-article-wrapper h1 a{color:#f4efeb}.blog-footer-area{background-color:#22495a !important}.blog-footer-credits p,.blog-footer-credits a{color:#f4efeb !important}.blog-footer-credits span{color:#4f4f4f !important}.dark .blog-footer-credits span{color:#f4efeb !important}"},"fathomCustomDomain":"","fathomSiteID":"","fbPixelID":"","gaTrackingID":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","metaTags":"\n\n","wmPaymentPointer":"","ogImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002523004/ZCPNjdO0Z.png","createdAt":"2021-07-26T12:51:40.000Z","updatedAt":"2021-07-26T12:51:40.000Z","isTeam":true},"dateUpdated":"2024-05-28T03:46:07.151Z","series":"612929689da1766342ad6d6a","contributors":[{"user":"66a5b265b6991e2c822a86af","stamp":"clz5fj53s02fkyvnv2lvta8wu","_id":"66a6202d0f29dfd1026bd675"},{"user":"66a44e6b8de7dd02ad459ff2","stamp":"clz3udm4h026mh7nvbd9171m2","_id":"66a4a9316f5d768d086eb5fc"},{"_id":"66a4a9316f5d768d086eb5f1","user":"5f133dd0a1826244e3d83237","stamp":"clwq3d350000h08le1jlnbkqy"},{"_id":"66a4a9316f5d768d086eb5f2","user":"61fa8f0698d3a620773e4c90","stamp":"clwpxl5mf000f09l8hbay436f"}],"dateFeatured":"2024-05-28T09:45:10.781Z","bookmarkedIn":[],"isAnonymous":false,"reactionsByCurrentUser":[],"upvotes":0},{"_id":"6611540b47992f2acec3b321","views":107,"isActive":true,"type":"story","partOfPublication":true,"responseCount":0,"replyCount":0,"reactions":[],"totalReactions":21,"isPinnedToBlog":false,"title":"Dynamic Open Graph Image generator using Vercel-og","subtitle":"Build a countdown social media og:image using nextjs and vercel/og","cuid":"cluo5osib001208i54rm8eel3","dateAdded":"2024-04-06T13:54:19.091Z","isCoverAttributionHidden":false,"coverImageAttribution":"","coverImagePhotographer":"","slug":"dynamic-open-graph-image-generator-using-vercel-og","coverImage":"https://cdn.hashnode.com/res/hashnode/image/upload/v1712411471417/3dbc7e3d-4c57-4788-8601-2ee99a9f7111.gif","brief":"Ever thought of building something and got busy with other tasks? And... suddenly remembered the idea? And... you really worked on it? Well that's what happened to me with this idea.\nThe beauty of being a programmer is that you can build anything, no...","author":"60feaf99fa408f0c89bd2b11","readTime":12,"tags":["56744722958ef13879b9519c","5eb98dfc4a6b9627679b3f30","584879f0c0aaf085e2012086","56744723958ef13879b95434","5f0982519f18b1487633729a","56744723958ef13879b95483"],"publication":{"_id":"60feafdc1be2da0c4ab76eeb","betaFeatures":{"newsletter":false,"embeds":false,"csvImport":false,"customCSS":false,"githubAsSource":false,"payments":true},"views":{"today":20,"thisWeek":118,"lastWeek":325,"thisMonth":584,"allTime":52755},"stripe":{},"numFollowers":0,"badgePageEnabled":true,"newsletterEnabled":true,"textSelectionSharerEnabled":true,"newsletterFrequency":"asap","staticPages":[],"isFeatured":false,"dailyViewsForCurrentMonth":{"1712016000":57,"1712102400":74,"1712188800":67,"1712275200":74,"1712361600":60,"1712448000":40,"1712534400":67,"1712620800":60,"1712707200":55,"1712793600":51,"1712880000":47,"1712966400":39,"1713052800":27,"1713139200":51,"1713225600":43,"1713312000":60,"1713398400":58,"1713484800":41,"1713571200":25,"1713657600":35,"1713744000":42,"1713830400":44,"1713916800":66,"1714003200":63,"1714089600":27,"1714176000":36,"1714262400":23,"1714348800":50,"1714435200":37,"1714521600":33},"viewCountVisible":false,"readTimeHidden":true,"customCSSEnabled":true,"domainChecklistSkipped":false,"author":"60feaf99fa408f0c89bd2b11","isActive":true,"username":"aashishpanthi","domain":"blog.aashish-panthi.com.np","urlPattern":"simple","title":"Aashish's blogs","links":{"twitter":"https://twitter.com/aashishpanthi11","instagram":"https://instagram.com/aashishpanthi11","github":"https://github.com/aashishpanthi","website":"https://aashish-panthi.com.np/","hashnode":"https://hashnode.com/@aashishpanthi","youtube":"https://www.youtube.com/channel/UCe3WNME_cssAFpwLQkvADBw","dailydev":"https://app.daily.dev/aashishpanthi","linkedin":"https://linkedin.com/in/aashishpanthi","mastodon":""},"domainStatus":{"certIssued":true,"ready":true},"domainUpdatedOn":"2021-09-07T09:24:08.443Z","customRules":[],"menu":[{"type":"series","label":"DevRetro","series":"63a72325b1011ed9ec6cebd6","priority":4,"_id":"63a72363c39f50da11a5ae84"},{"type":"series","label":"JavaScript","series":"612bbf312858872661b9bcee","priority":3,"_id":"612bbf5bfd0bf8636d76e12b"},{"type":"series","label":"JS libraries","series":"612929689da1766342ad6d6a","priority":2,"_id":"612bbf46fd0bf8636d76e128"}],"__v":0,"imprint":"","imprintMarkdown":"","meta":"A **developer** trying to share programming knowledge and self-growth.","metaHTML":"

A developer trying to share programming knowledge and self-growth.

Members (1)

Aashish Panthi