-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 59.5 KB
/
Copy pathindex.html
File metadata and controls
1 lines (1 loc) · 59.5 KB
1
<!DOCTYPE html><html><head><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="/site.webmanifest"/><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="og:title" content="Muhammad J — Front-end Developer"/><meta name="description" content="Front-end Developer. JavaScript and UI/UX enthusiast. I build & rescue websites & applications mostly with React."/><meta name="og:description" content="Front-end Developer. JavaScript and UI/UX enthusiast. I build & rescue websites & applications mostly with React."/><meta name="og:url" content="https://imsolitude.github.io"/><meta name="og:image" content="/apple-touch-icon.png"/><title>Muhammad J — Front-end Developer</title><meta name="next-head-count" content="8"/><link rel="preload" href="/_next/static/css/828d6cf9993c50723942.css" as="style"/><link rel="stylesheet" href="/_next/static/css/828d6cf9993c50723942.css"/><link rel="preload" href="/_next/static/css/8c55218d48042a60f237.css" as="style"/><link rel="stylesheet" href="/_next/static/css/8c55218d48042a60f237.css"/><link rel="preload" href="/_next/static/vHDEhX4-QFqE9FKDlzYyi/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/vHDEhX4-QFqE9FKDlzYyi/pages/index.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack-1c5199ff66550d26e499.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.126679bf45d7d49475d8.js" as="script"/><link rel="preload" href="/_next/static/chunks/cb1608f2.9900ee1d612a941f4f27.js" as="script"/><link rel="preload" href="/_next/static/chunks/05d954cf.3786c099b72ee5e58958.js" as="script"/><link rel="preload" href="/_next/static/chunks/a9a7754c.9fc41ff8698d76d96803.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.1fddac36d49d2908b728.js" as="script"/><link rel="preload" href="/_next/static/chunks/df6bcb69ddeb5147b7f89c61ebb9e387503481dd.28aeeb7e429fae7411c9.js" as="script"/><link rel="preload" href="/_next/static/runtime/main-5db55adc2dd1cc6710ab.js" as="script"/></head><body><div id="__next"><header class="container max-w-screen-lg mx-auto py-4 px-4"><div class="flex items-center"><div class="flex items-center space-x-2"><a class="transition duration-300 hover:text-blue-500 plain-link" href="/"><h1 class="">Muhammad J</h1></a><span class="text-gray-400 hidden md:block">— Front-end Developer</span></div><div class="flex items-center space-x-4 ml-auto text-sm md:text-lg"><a class="transition duration-300 hover:text-blue-500 " href="/#work">Work</a></div></div></header><div class="index_headerContainer__3IVua max-w-screen-lg mx-auto flex flex-wrap items-center"><section class="px-4 sm:py-4 py-6 lg:w-1/2 w-full space-y-4" style="opacity:0;transform:translateY(50px) translateZ(0)"><p class="text-base">Hey there, I'm a</p><h1 class="text-2xl md:text-4xl font-semibold">Front-end Developer. JavaScript and UI/UX enthusiast. I build & rescue websites & applications mostly with React.</h1><div></div></section><div class="index_squareContainer__1Zye9 bg-blue-500 rounded-none lg:rounded-lg lg:w-1/2 w-full flex justify-center items-center p-2 lg:py-0" style="opacity:0"><div class="bg-gray-100 rounded-lg w-24 h-24 md:w-32 md:h-32 cursor-pointer" style="transform:scale(0.5) translateZ(0)"></div></div></div><div class="max-w-screen-lg mx-auto mt-12 md:mt-0 mb-20 md:mb-40"><section class="px-4 sm:py-4 py-6 w-full sm:pt-10 md:pb-10 px-2 rounded-none lg:rounded-lg bg-gray-100 text-black shadow-sm" style="opacity:0;transform:translateY(50px) translateZ(0)"><div class="max-w-screen-lg flex flex-col justify-center md:px-16 px-8 mx-auto"><p class="undefined font-semibold text-lg md:text-2xl">I code with JavaScript, primarily in React and recently with Next.js, Gatsby & TailwindCSS. I have experience working in Firebase and 3rd party APIs (Stripe, Dropbox, Google Auth, etc.).</p><div class="index_badgesContainer__oqxDr flex flex-wrap mt-4 mb-4"><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JavaScript<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="js-square" class="svg-inline--fa fa-js-square fa-w-14 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="#f0db4f"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">React<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="react" class="svg-inline--fa fa-react fa-w-16 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#00d8ff"><path fill="currentColor" d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" class="svg-inline--fa fa-html5 fa-w-12 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" color="#F16529"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3" class="svg-inline--fa fa-css3 fa-w-16 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#264de4"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">Git<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="git-alt" class="svg-inline--fa fa-git-alt fa-w-14 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="#000"><path fill="currentColor" d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">Next.js</span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">Gatsby</span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">Bootstrap<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" class="svg-inline--fa fa-bootstrap fa-w-14 fa-1x ml-2 align-middle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="#602C50"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path></svg></span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">TailwindCSS</span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">Firebase</span><span class=" bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REST API</span></div></div><div class="w-11/12 md:w-2/3 mx-auto bg-white text-gray-900 rounded-lg shadow-lg text-center py-6 md:py-5 px-4 md:px-2 -mb-20"><h1 class="mb-2 text-sm md:text-xl font-semibold break-words">Have a project, idea or problem you'd like to discuss?</h1><p class="text-sm md:text-base">Let's talk:<!-- --> <a href="mailto:muhammadcodez@gmail.com" class="underline">muhammadcodez@gmail.com</a></p></div></section></div><section class="px-4 sm:py-4 py-6 max-w-screen-lg mx-auto mb-20" id="work" style="opacity:0;transform:translateY(50px) translateZ(0)"><h1 class="text-4xl mb-5 md:mb-4">Work<span class="text-blue-500">.</span></h1><div class="flex flex-wrap -m-4"><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-13.gif" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">GROMMET</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">STRIPE</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">DROPBOX</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">Replayed Dashboard</h2><p class="leading-relaxed text-base mb-4">Video Editing Managment Dashboard</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-12.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">Hacker News</h2><p class="leading-relaxed text-base mb-4">Trending News React App</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/HackerNews" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-11.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">ANT.DESIGN</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CLOUD FIREBASE</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">Skippit</h2><p class="leading-relaxed text-base mb-4">Skippit's React Landing Page</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-10.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">BOOTSTRAP</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">Replayed</h2><p class="leading-relaxed text-base mb-4">Replayed Co's Landing Page</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-9.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">ReacTrivia</h2><p class="leading-relaxed text-base mb-4">React Quiz App</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/ReacTrivia" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-8.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">ReactCalculator</h2><p class="leading-relaxed text-base mb-4">Simple React Calculator</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/ReactCalculator" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-7.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">QuoteNext</h2><p class="leading-relaxed text-base mb-4">React Random Quotes Generator</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/QuoteNext" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-6.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">REACT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">MarketWhale</h2><p class="leading-relaxed text-base mb-4">React Inventory Web App</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/market-whale" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-5.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">BOOTSTRAP</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">GitDiamond</h2><p class="leading-relaxed text-base mb-4">App Landing Page</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/GitDiamond" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-4.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JAVASCRIPT</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">BOOTSTRAP</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">PCTrance</h2><p class="leading-relaxed text-base mb-4">Gaming Website Landing Page</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/PCTrance" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-3.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JQUERY</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">QuickFood</h2><p class="leading-relaxed text-base mb-4">Web App UI Concept</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/QuickFood" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-2.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">Hover Styles</h2><p class="leading-relaxed text-base mb-4">On Hover Ready-to-use UI Snippets</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/hover-styles" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><div class="undefined undefined overflow-hidden bg-gray-100 p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><img class="index_ProjectImage__1HOiF rounded shadow-xs w-full object-cover mb-4" src="/images/projects/project-1.png" alt="project-1" loading="lazy"/><div class="index_StackContainer__2N3nK tracking-widest text-blue-500 font-medium title-font"><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">JEKYLL</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">HTML</span><span class="font-semibold bg-blue-100 hover:bg-blue-200 text-10 bg-gray-200 hover:bg-gray-300 rounded-md text-center p-2">CSS</span></div><h2 class="text-gray-900 font-bold text-3xl title-font">MeteorX</h2><p class="leading-relaxed text-base mb-4">Jekyll-based Landing Page</p><div class="flex"><button class="Button__StyledButton-sc-1ora921-0 IaqFU flex items-center justify-center min-w-16 font-bold rounded shadow transition duration-300 transform hover:-translate-y-px focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-2 px-4 bg-blue-500 hover:bg-blue-600 focus:bg-blue-500 text-white"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8 fa-1x ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" color="var(--white)"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg><span>Demo</span></button><a href="https://github.com/ImSolitude/MeteorX" target="_blank" class="plain flex items-center ml-auto transition duration-300 opacity-25 hover:opacity-50"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div class="w-full md:w-1/2 p-4"><a href="https://codepen.io/muhammadj/" target="_blank" class="no-translate"><div class="flex flex-col justify-center items-center cursor-pointer h-full overflow-hidden bg-blue-900 text-white p-6 rounded-lg transition-shadow duration-300 shadow hover:shadow-lg"><h2 class="font-bold text-2xl title-font"><span>More at</span> <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="codepen" class="svg-inline--fa fa-codepen fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path></svg> <span>Codepen</span></h2><p class="leading-relaxed text-base mb-4 opacity-50 underline">https://codepen.io/muhammadj</p></div></a></div></div></section><div class="backToTopContainer bg-gray-300 hover:bg-gray-400 text-gray-600 hover:text-gray-700 cursor-pointer"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-up" class="svg-inline--fa fa-angle-up fa-w-10 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg></div><footer class="text-gray-600 bg-gray-800 py-6 px-4"><div class="max-w-screen-lg text-center grid grid-cols-1 md:grid-cols-3 mx-auto "><h1 class="text-base md:text-2xl mb-2 md:mb-0">© 2020 ∙ MuhammadJ</h1><div class="flex space-x-4 justify-center mb-2 md:mb-0"><a href="https://github.com/ImSolitude" target="_blank" class="plain transform duration-300 opacity-75 hover:opacity-100"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://codepen.io/muhammadj/" target="_blank" class="plain transform duration-300 opacity-75 hover:opacity-100"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="codepen" class="svg-inline--fa fa-codepen fa-w-16 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path></svg></a><a href="https://www.linkedin.com/in/muhammad-jumaa-717a31130/" target="_blank" class="plain transform duration-300 opacity-75 hover:opacity-100"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14 fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></div><a href="mailto:muhammadcodez@gmail.com" class="flex items-center justify-center space-x-4 md:ml-auto text-sm md:text-lg">muhammadcodez@gmail.com</a></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"vHDEhX4-QFqE9FKDlzYyi","nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/_next/static/runtime/polyfills-c08425aef0d34f1d272c.js"></script><script async="" data-next-page="/_app" src="/_next/static/vHDEhX4-QFqE9FKDlzYyi/pages/_app.js"></script><script async="" data-next-page="/" src="/_next/static/vHDEhX4-QFqE9FKDlzYyi/pages/index.js"></script><script src="/_next/static/runtime/webpack-1c5199ff66550d26e499.js" async=""></script><script src="/_next/static/chunks/framework.126679bf45d7d49475d8.js" async=""></script><script src="/_next/static/chunks/cb1608f2.9900ee1d612a941f4f27.js" async=""></script><script src="/_next/static/chunks/05d954cf.3786c099b72ee5e58958.js" async=""></script><script src="/_next/static/chunks/a9a7754c.9fc41ff8698d76d96803.js" async=""></script><script src="/_next/static/chunks/commons.1fddac36d49d2908b728.js" async=""></script><script src="/_next/static/chunks/df6bcb69ddeb5147b7f89c61ebb9e387503481dd.28aeeb7e429fae7411c9.js" async=""></script><script src="/_next/static/runtime/main-5db55adc2dd1cc6710ab.js" async=""></script><script src="/_next/static/vHDEhX4-QFqE9FKDlzYyi/_buildManifest.js" async=""></script><script src="/_next/static/vHDEhX4-QFqE9FKDlzYyi/_ssgManifest.js" async=""></script></body></html>