https://suvraneel.github.io/_next/static/chunks/pages/projects-0785d976c099ceb1.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[327],{7670:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects",function(){return i(8504)}])},8504:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return j}});var o=i(5893),a=i(7986),s=i(1526),n=i(9008),r=i.n(n),l=i(7294),c=i(619),d=i(3024),h=i(9417);let u=console.log,m=e=>u("%c".concat(e,": animation complete"),"color: red"),p=(e,t)=>{t?u("%c".concat(e,": mounted"),"color: green"):u("%c".concat(e,": unmounted"),"color: orange")},g=e=>{let{children:t,onClick:i}=e;return(0,l.useEffect)(()=>(p("Backdrop",!0),()=>p("Backdrop",!1)),[]),(0,o.jsx)(a.E.div,{className:"backdrop",onClick:i,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},children:t})};var b=i(2097);let f={hidden:{transform:"scale(0) rotateX(-360deg)",opacity:0,transition:{delay:.3}},visible:{transform:" scale(1) rotateX(0deg)",opacity:1,transition:{duration:.5}},exit:{transform:"scale(0) rotateX(360deg)",opacity:0,transition:{duration:.5}}},w=e=>{let{handleClose:t,project:i}=e;return(0,l.useEffect)(()=>(p("Modal",!0),()=>p("Modal",!1)),[]),(0,o.jsx)(g,{onClick:t,children:(0,o.jsxs)(a.E.div,{onClick:e=>e.stopPropagation(),className:"w-full h-fit mx-0 p-10 sm:p-14 bg-black rounded absolute top-0 left-0 flex flex-col-reverse sm:flex-row justify-evenly gap-10",variants:f,initial:"hidden",animate:"visible",exit:"exit",children:[(0,o.jsxs)("div",{className:"w-full sm:w-9/12 h-fit sm:h-full flex-col gap-3 overflow-y-scroll overflow-x-hidden scroll-smooth",children:[(0,o.jsx)(y,{video:i.video}),(0,o.jsx)(a.E.video,{src:"./images/project-assets/"+i.gif,preload:"auto",autoPlay:!0})]}),(0,o.jsxs)("div",{className:"w-full flex flex-col",children:[(0,o.jsx)(v,{project:i}),(0,o.jsx)(x,{onClick:t})]})]})})},v=e=>{let{project:t}=e;return(0,o.jsxs)("div",{className:"flex flex-col gap-5",children:[(0,o.jsx)("div",{className:"text-3xl text-white mt-4 sm:mt-0",children:t.name}),(0,o.jsxs)("div",{className:"text-lg text-cyan-500 flex flex-col",children:[(0,o.jsx)("a",{href:t.github,title:"GitHub Repo Link",target:"_blank",rel:"noreferrer",children:(0,o.jsx)(b.x,{icon:d.zhw,brandColor:"cyan",title:"GitHub Repository",titleClassName:"text-lg text-white"})}),(0,o.jsx)("a",{href:t.url,title:"Deployment Link",target:"_blank",rel:"noreferrer",children:(0,o.jsx)(b.x,{icon:h.nNP,brandColor:"cyan",title:"Deployment URL",titleClassName:"text-lg text-white"})})]}),(0,o.jsx)("div",{className:"flex flex-row gap-2 flex-wrap",children:t.tech_stk.map(e=>(0,o.jsx)("div",{className:"bg-slate-100 dark:hover:bg-slate-700 dark:bg-stone-800 rounded-2xl w-fit px-3 py-1 text-orange-600 drop-shadow-md font-semibold flex justify-center items-center",children:(0,o.jsx)("h4",{className:"text-sm sm:text-md font-semibold text-cyan-500",children:e})},e))}),(0,o.jsx)("div",{className:"text-lg",children:(0,o.jsx)("ul",{className:"list-disc",children:t.details.split("|").map(e=>(0,o.jsx)("li",{children:e},e))})})]})},y=e=>{let{video:t}=e;return(0,o.jsx)("div",{className:"modal-video h-fit sm:h-full iframe-container",children:(0,o.jsx)("iframe",{src:t+"?rel=0&iv_load_policy=3&showinfo=0&origin=https://suvraneel.github.io",title:"YouTube video player",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})})},x=e=>{let{onClick:t}=e;return(0,o.jsx)(a.E.button,{className:"absolute top-0 right-0 p-5",type:"button",whileHover:{scale:1.1},whileTap:{scale:.95},onClick:t,children:(0,o.jsx)(b.x,{icon:h.YIN,brandColor:"#fff",size:"2x"})})};var S=[{id:"gssoc-website",name:"GirlScript SoC 2022 Official Website",details:"A production grade web based application developed using Next.js & TailwindCSS Frameworks intended for the 8000+ contributors participating in the annually organized opensource program.|Was indispensable in showcasing the impact & commitment of the program across student communities during the sponsor pitches & conforms to their guidelines.|Was developed using Agile methodologies & CI/CD pipeline, prototyped in Figma, built with NextJS, TailwindCSS, ChakraUI & a plethora of npm libraries, hosted in Vercel, includes a dynamically updating paginated leaderboard & on-chain certificate verification.",g

1ithub:"http://github.com/girlscript/gssoc-website-new",url:"https://gssoc.girlscript.tech",gif:"gssoc-website.webm",video:"https://www.youtube.com/embed/EKGJ-pzSEns",tech_stk:["NextJS","TailwindCSS","ChakraUI","Figma","Moralis","Solidity","Axios","Express"]},{id:"eth-commerce",name:"EthCommerce",details:"EthCommerce is an online platform that helps creators, developers, and entrepreneurs sell their products directly to their audience. |The problem EthCommerce solves is independent creators' challenges when trying to sell their products online. |EthCommerce removes all intermediaries and gives direct access to the audience. |Developed on different chains, buyers can choose to buy courses on their favourite chain. |Our platform charges minimal fees, and that too only when the creator decides to withdraw the money. |All the data is stored on IPFS, so there is no chance that the data will be lost. |EthCommerce provides full flexibility and a real connection with the audience. |With QuickNode alerts, we send messages to the audience and creators whenever a new course is created or purchased.",github:"https://github.com/Open-Sorcerer/EthCommerce",url:"https://ethcommerce.vercel.app/",gif:"video-to-be-added.webm",video:"https://www.youtube.com/embed/mBmFIWkCQIY",tech_stk:["NextJS 13","TailwindCSS","Spline.Design","Figma","QuickNode","Solidity","MongoDB","IPFS","ThirdWeb","HardHat","Wagmi"]},{id:"de-stack-overflow",name:"DeStackOverflow",details:"Decentralized version of the most popular public forum for developers: Stack Overflow|Gives freedom to all users to post their questions, doubts & error logs.| Veteran developers in that tech stack can then post their answers.|Throughout this whole process, Privacy is maintained + Crypto donations and the Karma system helps incentivize the forum & encourage more people to resolve/answer the doubts.",github:"https://github.com/Open-Sorcerer/DeStackOverflow",url:"https://destackoverflow.on.fleek.co/",gif:"destackoverflow.webm",video:"https://www.youtube.com/embed/unKt1LBCh7I",tech_stk:["IPFS","React","AntDesign","Solidity"]},{id:"solingo",name:"SoLingo",details:"Alongside the crypto boom & more big players entering, people not crypto-literate are susceptible to scams & unintentional wrong decisions at the least. Educational platforms in the crypto space are hence, a necessity.| This is a learn-to-earn project aimed at incentivising crypto-education.| This website lets you study the Solana Cookbook & attempt quizzes by module so as to gauge your new-found knowledge & showcase it with cool NFTs you earn on successful completion of each module.",github:"https://github.com/Open-Sorcerer/SoLingo",url:"#",gif:"video-to-be-added.webm",video:"https://www.youtube.com/embed/T_0E6QbSDLo",tech_stk:["Anchor","TypeScript","React","TailwindCSS","Solidity","Mocha","IPFS","Solana"]},{id:"CrewS",name:"CrewS",details:"CrewS is a No Code Tool to create Data DAOs. |With CrewS you can take your crew on chain quickly to manage data along with governance. |Features include managing proposals, on-chain voting, execution of proposals, storing data as per the voting results. |FVM enables a new kind of data-centric DAO that has heretofore been impossible. |DataDAOs are DAOs whose mission revolves around the preservation, curation, augmentation, and promotion of datasets considered valuable by their stakeholders.",github:"https://github.com/Open-Sorcerer/CrewS",url:"https://bafybeiblkpu3lbde4jgopk36e2y5ggcti6olyzgpdisgcblcem24ls5cku.ipfs.gateway.valist.io/",gif:"video-to-be-added.webm",video:"https://www.youtube.com/embed/4sabLpt37-Y",tech_stk:["NextJS","TailwindCSS","Solidity","FVM","IPFS"]},{id:"nft-haven",name:"NFT Haven",details:"A multi-chain DeFi Dashboard which allows minting & tracking of assets across multiple ecosystems (Ethereum, Binance Smart Chain, Polygon).|Allows users to mint their own NFTs or gift NFTs to their loved ones on the Polygon network via a very friendly user interface.|Soulbound Token NFT Minter - Any digital asset important to you (eg, Certificates, Important Documents) can be attached to wallet forever|Any media you hold - a Video, an Image, an Audio track can be converted to an NFT.|The gas fees for minting are minimal thanks to the Polygon Network. Currently the minter is on Polygon testnet, so the NFT collection of an wallet is also viewable on testnets.opensea.io.",github:"https://github.com/Suvraneel/Instant-Soulbound-NFT-Minter",url:"https://nft-haven.vercel.app/",gif:"nft-haven.webm",video:"https://www.youtube.com/embed/YeQI5xZn-_g",tech_stk:["React.js","Node.js","Web3.js","Solidity","Moralis","Chainlink"]},{id:"jailbreak",name:"JailBreak",details:"A 2D RPG-style Indie Adventure Game built from scratch in stock Java & simple mathematical game logic (without using JavaFx or any Game Engine/ Library).| Complete implementation is done using OOP concepts (Sprites, Classes, Inheritance, Interfaces & Threads) only.| The game is a single player game where the player has to escape from a prison & reach the treasure chest by solving puzzles, dodging security cameras & enemies' vision.| It also has a character selection screen & a main menu pane to tweak game settings.| The game is inspired by the popular game series - The Legend of Zelda (The OG version).",github:"https://github.com/Suvraneel/JavaMonsterz",url:"#",gif:"video-to-be-added.webm",video:"https://www.youtube.com/embed/ft7uN51_jCw",tech_stk:["Java 17.0.4","Object-Oriented Programming","IntelliJ IDEA 2022.2","Figma","Sprites"]},{id:"bounty-gunslinger",name:"Bounty Gunslinger",details:"Blockchain Games are the next big thing. Play to Earn is a great incentive for the gamers to get rewarded for the time they invest in a game.|Each game can create exclusive swags/air-drops such as NFTs for players which will act as trophies forever as they are on the chain. These NFTs can have a materialistic value and this way they have utility as well.|The idea consists of a website to mint limited & exclusive access NFTs. Only the people who own one fromm the collection get access to the game and/or exclusive DLCs to the game.|Once they're bored of the game, they can then sell/trade the NFT hence passing on the game access to the new owner",github:"https://github.com/Suvraneel/Bounty-Gunslinger",url:"https://open-sorcerer-nft

1-game-token.vercel.app/",gif:"bounty-gunslinger.webm",video:"https://www.youtube.com/embed/s8rwjJFZRDo",tech_stk:["IPFS","ReactJS","TailwindCSS","Polygon","Solidity","Moralis","Phaser"]},{id:"cowin-clone",name:"CoWIN Clone",details:"A fully functional clone of cowin.gov.in, built using the MERN Stack|Backend consists of an API built using Node, Express & prototyped using Postman API testing tool and the frontend consumes that API & lets the users book the vaccination slots based on availability & location of slots mass-fed by administration (ie, vaccination centers).|CoWIN API - provides API endpoints for all the components involved in a COVID-19 vaccination service|Registration of new beneficiaries, book appointments, expiry notification|Administration - CRUD vaccination centres & available slots in batches|Vaccination Centres - complete Appointments & update Doses",github:"https://github.com/Suvraneel/cowin-clone-ui",url:"https://cowin-clone-ui.vercel.app/",gif:"cowin.webm",video:"https://www.youtube.com/embed/EKGJ-pzSEns",tech_stk:["React","Redux","Bootstrap","JSSoup","Postman","Express","MongoDB","NodeJS"]},{id:"short-term-price-trend-prediction",name:"Short‑term Stock Market Price Trend Prediction",details:"Scraping stock price data of various equities from NSE website, preprocessing, normalizing, feature engineering, & finally training an LSTM model on the time-series data using a 4-layered RNN.|Evaluating the accuracy of the model using metrics (like RMSE & MAE) and comparing its hyper-parameters (optimizers & activation functions)",github:"#",url:"#",gif:"lstm-stock-pred.webm",video:"https://www.youtube.com/embed/EKGJ-pzSEns",tech_stk:["Python","Numpy","Tensorflow","Keras","BeautifulSoup"]},{id:"meteorologyly",name:"Meterologyly",details:"Minimalist Weather Forecasting Web Application Dashboard that fetches & visualizes data using a collection of APIs.|Fetches detailed current weather data or 7 day forecast using OpenWeatherMap API, GoogleMapEmbed API, and visualizations using Chart.js|Manifests all weather data by Geolocation, Top Searched Cities or City Search",github:"https://github.com/Suvraneel/Meteorologyly",url:"https://suvraneel.github.io/Meteorologyly/",gif:"meteorologyly.webm",video:"https://www.youtube.com/embed/EKGJ-pzSEns",tech_stk:["HTML5","CSS3","Javascript","BootStrap","Chart.js","APIs"]},{name:"Diablo Music App",details:"Minimalistic Music Player with a dark UI especially-curated for the nocturnal.| Utilises Firebase-authenticated login.| Doubles as local & online music player",github:"https://github.com/Suvraneel/Diablo-Music",url:"https://suvraneel.github.io/pages/diablo-music.html",gif:"video-to-be-added.webm",video:"https://www.youtube-nocookie.com/embed/u8BbvsCbQyM?rel=0&controls=0&showinfo=0",tech_stk:["Flutter","Firebase","Dart","Dart-UI","Dart-Libraries"]}];let k=()=>{let[e,t]=(0,l.useState)(S[0]),[i,s]=(0,l.useState)(!1),n=()=>s(!1),d=()=>s(!0),[h,{stop:u}]=(0,c.Z)("./sounds/snap.wav",{volume:.5}),[m]=(0,c.Z)("./sounds/pop.wav",{volume:.5});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(r(),{children:[(0,o.jsx)("title",{children:"Projects | Portfolio - Suvraneel"}),(0,o.jsx)("meta",{name:"description",content:"Projects | Official Portfolio Website | Suvraneel Bhuin"})]}),(0,o.jsxs)("div",{className:"h-screen flex flex-col items-center nav-gap",children:[!i&&(0,o.jsx)(a.E.main,{children:(0,o.jsx)("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 col-auto justify-center",children:S.map(e=>(0,o.jsxs)("div",{className:"w-full relative z-5 hover:z-10",onClick:()=>{t(e),d(),m()},onMouseEnter:()=>{h()},onMouseLeave:()=>{u()},children:[(0,o.jsx)("div",{className:"w-full h-full absolute z-0 bottom-0 left-0 bg-gradient-to-t from-black via-black/20 to-transparent text-white text-xl flex flex-col justify-end items-start p-3",children:e.name}),(0,o.jsx)(a.E.video,{whileHover:{scale:1.2},whileTap:{scale:.9},className:"save-button z-5",onClick:d,id:"my-video",preload:"auto",width:"640",height:"264","data-setup":"{}",autoPlay:!0,loop:!0,muted:!0,playsInline:!0,src:"./images/project-assets/"+e.gif})]},e.id))})}),(0,o.jsx)(C,{children:i&&(0,o.jsx)(w,{handleClose:n,project:e})})]})]})},C=e=>{let{children:t,label:i="Modal Container"}=e;return(0,o.jsx)(s.M,{initial:!1,mode:"wait",onExitComplete:()=>m(i),children:t})};var j=k}},function(e){e.O(0,[774,888,179],function(){return e(e.s=7670)}),_N_E=e.O()}]);