-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
1 lines (1 loc) · 25.9 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="shortcut icon" href="/portfolio/favicon.ico"/><title>Personal Portfolio</title><meta name="description" content="My personal web development portfolio including various frontend and fullstack projects as well as web development blog articles. Tech-Stack: React, Next.js, Redux, Typescript, Node.js, Express, MongoDB, Bootstrap, Shopware."/><meta name="next-head-count" content="5"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerPolicy="no-referrer"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/portfolio/_next/static/css/afd1f1acc4546ee2.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/afd1f1acc4546ee2.css" data-n-g=""/><link rel="preload" href="/portfolio/_next/static/css/0a4ec652d6028205.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/0a4ec652d6028205.css" data-n-p=""/><link rel="preload" href="/portfolio/_next/static/css/f6e0480671a3e269.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/f6e0480671a3e269.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/portfolio/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/portfolio/_next/static/chunks/webpack-f10e1d74334e5489.js" defer=""></script><script src="/portfolio/_next/static/chunks/framework-75db3117d1377048.js" defer=""></script><script src="/portfolio/_next/static/chunks/main-995bb50545027da3.js" defer=""></script><script src="/portfolio/_next/static/chunks/pages/_app-12446f34b1c606dc.js" defer=""></script><script src="/portfolio/_next/static/chunks/675-0787ec1bc5f64e14.js" defer=""></script><script src="/portfolio/_next/static/chunks/854-f6c15d4fc34ab343.js" defer=""></script><script src="/portfolio/_next/static/chunks/pages/index-4f38ac3929c74433.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_buildManifest.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_ssgManifest.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_middlewareManifest.js" defer=""></script><style data-href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Poppins&display=swap">@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVQ.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJM.woff) format('woff')}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37MOzlojwUKaJO.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7MOzlojwUKaJO.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77MOzlojwUKaJO.woff) format('woff');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7MOzlojwUKQ.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div class="app" data-theme="dark"><div class="navbar_navbar__LVObF "><div class="navbar_container__RaknJ"><a class="navbar_logo__UErdh" href="/portfolio"></a><nav class="navbar_navMenu___hRqD" id="navMenu"><div class="navbar_linkWrapper__Tf745"><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">Projects</a><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">Blog</a><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">About me</a></div></nav><div class="navbar_navContainer__1x0xH"><button class="navbar_icon__LC6_z" style="opacity:0;transform:translateY(-30px) translateZ(0)"><i class="fa fa-envelope"></i></button><button class="navbar_icon__LC6_z" style="opacity:0;transform:translateY(-30px) translateZ(0)"><i class="fa fa-sun" style="opacity:1;transform:none"></i></button><div class="navbar_iconMain__bk69K"><button class="navbar_icon__LC6_z navbar_iconMain__bk69K"><svg width="45" height="45" viewBox="0 0 23 23"><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 2.5 L 20 2.5"></path><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 9.423 L 20 9.423" opacity="1"></path><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 16.346 L 20 16.346"></path></svg></button></div></div></div></div><main><section class="hero_greetings__a2HWI"><div class="hero_container__SSOqw"><div class="hero_row__3xLuq"><div class="hero_columnLeft__oVNaI"><h3 data-aos="fade-left">Hi, my name is Lorem Ipsum.</h3><h1 data-aos="fade-right">I'm a Web Developer.</h1><p data-aos="fade-left" data-aos-delay="150">I build stuff with<!-- --> <!-- --><span><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2716%27%20height=%2716%27/%3e"/></span><img alt="usa-flag" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="usa-flag" srcSet="https://renebitter.github.io/portfolio/images/js.png?imwidth=16 1x, https://renebitter.github.io/portfolio/images/js.png?imwidth=32 2x" src="https://renebitter.github.io/portfolio/images/js.png?imwidth=32" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></span> <!-- -->Javascript.<!-- --></p><div class="hero_socialMedia__u1M78"><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-github" data-aos="flip-up"></i></a><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-linkedin" data-aos="flip-up" data-aos-delay="50"></i></a> <!-- --><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-twitter" data-aos="flip-up" data-aos-delay="100"></i></a> <!-- --><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-codepen" data-aos="flip-up" data-aos-delay="150"></i></a></div><div class="hero_ctaButtons__sdlsA"><button class="btn btn-filled" data-aos="fade-up">My Work</button><button class="btn btn-outlined" data-aos="fade-down">Let's Talk</button></div></div><div class="hero_columnRight__k1__j hero_profilePic__nP6mQ"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27460%27%20height=%27460%27/%3e"/></span><img alt="profile-pic" data-aos="fade-left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="profile-pic" data-aos="fade-left" srcSet="https://renebitter.github.io/portfolio/images/profile-pic.webp?imwidth=640 1x, https://renebitter.github.io/portfolio/images/profile-pic.webp?imwidth=1080 2x" src="https://renebitter.github.io/portfolio/images/profile-pic.webp?imwidth=1080" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></div><div class="iconScrollContainer"><a href="#projects"><div class="iconScroll" data-aos="fade-down" data-aos-offset="50"></div></a></div></div></section><section class="featuredProjects_projects__0N_5L" id="projects"><div class="featuredProjects_container__yJkuw"><h2 data-aos="slide-right">Featured projects</h2><div data-aos="flip-up"><div class="swiper featuredProjects mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><div class="featuredProjectItem_project__4gS4N"><div class="featuredProjectItem_titleContainer__v2No_"><div class="featuredProjectItem_title__EfMkF"><h3>Example 1</h3><small>React, MongoDB, Node, Express, Context</small></div></div><div class="featuredProjectItem_row__JkxSm"><div class="featuredProjectItem_columnRight__2_jp2"><a href="/portfolio/projects/example-1"><div class="featuredProjectItem_card__mEdFm"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27460%27/%3e"/></span><img alt="Example 1" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Example 1" srcSet="https://renebitter.github.io/portfolio/images/projects/contact-keeper.png?imwidth=640 1x, https://renebitter.github.io/portfolio/images/projects/contact-keeper.png?imwidth=1200 2x" src="https://renebitter.github.io/portfolio/images/projects/contact-keeper.png?imwidth=1200" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></a></div><div class="featuredProjectItem_columnLeft__mfDaL"><p class="featuredProjectItem_description__Vxlli">This is a MERN Fullstack project with authentication and CRUD functionality.</p><div class="featuredProjectItem_projectLinks__EToR1"><a href="https://github.com/" target="_blank" rel="noreferrer"><i class="fab fa-github"></i>Github<!-- --></a><a href="https://google.com/" target="_blank" rel="noreferrer"><i class="fas fa-link"></i>Website<!-- --></a><a href="/portfolio/projects/example-1"><i class="fa fa-circle-info"></i>Project details<!-- --></a></div></div></div></div></div><div class="swiper-slide"><div class="featuredProjectItem_project__4gS4N"><div class="featuredProjectItem_titleContainer__v2No_"><div class="featuredProjectItem_title__EfMkF"><h3>Example 2</h3><small>React, Context</small></div></div><div class="featuredProjectItem_row__JkxSm"><div class="featuredProjectItem_columnRight__2_jp2"><a href="/portfolio/projects/example-2"><div class="featuredProjectItem_card__mEdFm"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27460%27/%3e"/></span><img alt="Example 2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="Example 2" srcSet="https://renebitter.github.io/portfolio/images/projects/github-finder.png?imwidth=640 1x, https://renebitter.github.io/portfolio/images/projects/github-finder.png?imwidth=1200 2x" src="https://renebitter.github.io/portfolio/images/projects/github-finder.png?imwidth=1200" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div></a></div><div class="featuredProjectItem_columnLeft__mfDaL"><p class="featuredProjectItem_description__Vxlli">Search for github users with Github API and React Context.</p><div class="featuredProjectItem_projectLinks__EToR1"><a href="https://github.com/" target="_blank" rel="noreferrer"><i class="fab fa-github"></i>Github<!-- --></a><a href="https://google.com/" target="_blank" rel="noreferrer"><i class="fas fa-link"></i>Website<!-- --></a><a href="/portfolio/projects/example-2"><i class="fa fa-circle-info"></i>Project details<!-- --></a></div></div></div></div></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div></div><div class="featuredProjects_buttonWrapper__s1dM1"><button class="btn btn-filled" data-aos="fade-up">View All Projects</button></div></div></section><section class="featuredPosts_blog__89cAf mvh-100" id="blog"><div class="featuredPosts_container__W9yVQ"><h2 data-aos="slide-right">Featured posts</h2><div><div class="featuredPosts_gallery__FW5hN"><div class="postItem_card__A_FX_" data-aos="zoom-in-up"><div><h4>Lorem Ipsum</h4><time>April 3, 2022</time><p>How to build a blog using react-markdown to render posts written in markdown</p></div><div class="postItem_cardAction__0dwSq"><a href="/portfolio/posts/example-post-2">Read more</a></div></div><div class="postItem_card__A_FX_" data-aos="zoom-in-up"><div><h4>Using Markdown as a blog format</h4><time>April 3, 2022</time><p>How to build a blog using react-markdown to render posts written in markdown</p></div><div class="postItem_cardAction__0dwSq"><a href="/portfolio/posts/example-post">Read more</a></div></div></div></div><div data-aos="fade-up" class="featuredPosts_buttonWrapper__xgcGX"><button class="btn btn-filled">View All Posts</button></div></div></section><section class="about_about__aUSCF" id="about"><div class="about_container__9Q92l"><h2 data-aos="slide-right">About me</h2><div class="about_row__5R2uZ"><div class="about_columnLeft__0w_r1" data-aos="fade-right"><h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi molestiae libero eius adipisci reprehenderit, cumque illum atque provident ullam placeat harum veritatis odit perferendis ipsum aperiam mollitia voluptates temporibus nulla?</h3><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat qui autem quis, alias porro eligendi nostrum impedit aut omnis a distinctio officiis excepturi facere incidunt ut! Asperiores laboriosam iure blanditiis.</p></div><div class="about_columnRight__Ndnud"><div class="about_imageContainer__cDRKA"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27600%27/%3e"/></span><img alt="profile-pic" data-aos="fade-left" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="profile-pic" data-aos="fade-left" srcSet="https://renebitter.github.io/portfolio/images/profile-pic-2.webp?imwidth=640 1x, https://renebitter.github.io/portfolio/images/profile-pic-2.webp?imwidth=1200 2x" src="https://renebitter.github.io/portfolio/images/profile-pic-2.webp?imwidth=1200" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript></span></div><div class="about_quote___sn_z" data-aos="fade-right">"Distinctio officiis excepturi facere incidunt ut!"</div></div></div></div></section><footer class="footer_footer__zsYAi"><div class="footer_socialMedia__hzLZE"><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-github"></i></a><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-linkedin"></i></a></div><div>Lorem Ipsum</div><small>Icons by<!-- --> <!-- --><a href="https://www.flaticon.com/" target="_blank" rel="noreferrer">Flaticon</a> <!-- -->&<!-- --> <!-- --><a href="https://fontawesome.com/" target="_blank" rel="noreferrer">Font Awesome</a></small></footer></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"posts":[{"slug":"example-post-2","title":"Lorem Ipsum","date":"2022-04-03","image":"first-post.jpg","excerpt":"How to build a blog using react-markdown to render posts written in markdown","isFeatured":true,"tech":["Markdown"],"content":"\n# Using Markdown as a blog format\n\n\n\n```text\n---\ntitle: 'Using Markdown as a blog format'\ndate: '2022-04-03'\nimage: first-post.jpg\nexcerpt: 'How to build a blog using react-markdown to render posts written in markdown'\nisFeatured: true\n---\n\n```\n\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos minima optio omnis commodi atque modi, dolores saepe nostrum vero sunt obcaecati recusandae animi delectus veritatis ut nam dolore magnam.\n\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, explicabo necessitatibus cumque quis, labore incidunt facere dolor impedit odio fugit totam, praesentium blanditiis consequatur deleniti repellat reprehenderit modi aut enim.\n"},{"slug":"example-post","title":"Using Markdown as a blog format","date":"2022-04-03","image":"first-post.jpg","excerpt":"How to build a blog using react-markdown to render posts written in markdown","isFeatured":true,"tech":["Markdown"],"content":"\n# Using Markdown as a blog format\n\n\n\n```text\n---\ntitle: 'Using Markdown as a blog format'\ndate: '2022-04-03'\nimage: first-post.jpg\nexcerpt: 'How to build a blog using react-markdown to render posts written in markdown'\nisFeatured: true\n---\n\n```\n\n```jsx\nimport ReactMarkdown from 'react-markdown';\nimport Image from 'next/image';\nimport classes from './postContent.module.scss';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nconst PostContent = (props) =\u003e {\n const { post } = props;\n\n const title = post.title;\n const content = post.content;\n const imagePath = `/portfolio/images/posts/${post.slug}/${post.image}`;\n\n const customRenderers = {\n p(paragraph) {\n const { node } = paragraph;\n\n if (node.children[0].tagName === 'img') {\n const image = node.children[0];\n\n return (\n \u003cdiv\u003e\n \u003cImage src={imagePath} alt={image.alt} width={450} height={450} /\u003e\n \u003c/div\u003e\n );\n }\n\n return \u003cp\u003e{paragraph.children}\u003c/p\u003e;\n },\n\n code(code) {\n const { className, children } = code;\n const language = className.split('-')[1]; // className is something like language-js =\u003e We need the \"js\" part here\n\n return (\n \u003cSyntaxHighlighter\n language={language}\n style={atomDark}\n // eslint-disable-next-line react/no-children-prop\n children={children}\n /\u003e\n );\n },\n };\n\n return (\n \u003cdiv className={classes.postContent}\u003e\n \u003cdiv className={classes.container}\u003e\n \u003carticle\u003e\n \u003cReactMarkdown components={customRenderers}\u003e{content}\u003c/ReactMarkdown\u003e\n \u003c/article\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n};\n\nexport default PostContent;\n```\n"}],"featuredProjects":[{"slug":"example-1","title":"Example 1","tech":["React","MongoDB","Node","Express","Context"],"description":"This is a MERN Fullstack project with authentication and CRUD functionality.","liveLink":"https://google.com/","githubLink":"https://github.com/","image":"contact-keeper.png","isFeatured":true,"screenshots":[{"screenshot":"01-home.png","description":"Homepage with navbar and hero element."},{"screenshot":"02-home.png","description":"Homepage. Carousel with 3 top-rated products and general product listing."}],"content":"\n## Description\n\nThis is a MERN Fullstack project with authentication and CRUD functionality.\n\n## Key takeaways\n\nContext\n\n#### Code Example\n\nCombines all reducers and apply thunk (middleware that allows\nyou to return functions).\n\n\u003cdetails\u003e\n\n \u003csummary\u003e\n \u003cins\u003eView code\u003c/ins\u003e\n \u003cspan\u003e\n \u003ci class=\"fa-solid fa-angle-right\"\u003e\u003c/i\u003e\n \u003c/span\u003e\n \u003c/summary\u003e\n\n```js\nconst reducer = combineReducers({\n productList: productListReducer,\n});\n```\n\n\u003c/details\u003e\n\u003cbr /\u003e\n"},{"slug":"example-2","title":"Example 2","tech":["React","Context"],"description":"Search for github users with Github API and React Context.","liveLink":"https://google.com/","githubLink":"https://github.com/","image":"github-finder.png","isFeatured":true,"content":"\n## Description\n\nUser searching app using Github API and context.\n\n## Key takeaways\n\nGithub API and Context\n"}]},"__N_SSG":true},"page":"/","query":{},"buildId":"lH_ilZ9o8Ak1_-mg94rg5","assetPrefix":"/portfolio","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>