├── src ├── assets │ ├── css │ │ ├── code.css │ │ ├── blobz.css │ │ └── onedark.css │ └── img │ │ ├── profile.jpg │ │ ├── icons │ │ ├── azure.png │ │ ├── gmail.png │ │ ├── mongo.png │ │ ├── react.png │ │ ├── unity.png │ │ ├── blender.png │ │ ├── github.png │ │ ├── nodejs.png │ │ ├── python.png │ │ ├── spotify.png │ │ ├── twitter.png │ │ ├── youtube.png │ │ ├── codeforces.jpg │ │ ├── javaScript.png │ │ └── coffee.svg │ │ └── unescape │ │ ├── splash.jpg │ │ ├── unexp.png │ │ ├── unescape.jpg │ │ ├── splashMini.jpg │ │ └── insights │ │ ├── devquote.png │ │ ├── pinlock.png │ │ ├── brokenStar.png │ │ ├── slidepuzz.png │ │ └── suitcasePuzz.png ├── components │ ├── front │ │ ├── sponsors_data.js │ │ ├── projects.js │ │ ├── projects.css │ │ └── sponsors.js │ ├── unescape │ │ ├── prores.css │ │ ├── flowbox.js │ │ ├── responsive.css │ │ ├── progress.js │ │ ├── progress.css │ │ ├── unescape.css │ │ └── unescape.js │ ├── footer │ │ ├── footer.css │ │ └── footer.js │ └── header │ │ ├── header.css │ │ └── header.js ├── index.js ├── index.css ├── App.js ├── App.css └── cards.js ├── public ├── _redirects ├── favicon.ico ├── img │ ├── mona.png │ ├── pinlock.png │ ├── brokenStar.png │ ├── devquote.png │ ├── slidepuzz.png │ └── suitcasePuzz.png ├── logo192.png ├── logo512.png ├── robots.txt ├── .well-known │ └── brave-rewards-verification.txt ├── sitemap.xml ├── manifest.json ├── 404.html └── index.html ├── blueweb.png ├── .gitignore ├── README.md ├── .github └── workflows │ └── deploy.yml └── package.json /src/assets/css/code.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /blueweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/blueweb.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/img/mona.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/mona.png -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/img/pinlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/pinlock.png -------------------------------------------------------------------------------- /public/img/brokenStar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/brokenStar.png -------------------------------------------------------------------------------- /public/img/devquote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/devquote.png -------------------------------------------------------------------------------- /public/img/slidepuzz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/slidepuzz.png -------------------------------------------------------------------------------- /public/img/suitcasePuzz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/public/img/suitcasePuzz.png -------------------------------------------------------------------------------- /src/assets/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/profile.jpg -------------------------------------------------------------------------------- /src/assets/img/icons/azure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/azure.png -------------------------------------------------------------------------------- /src/assets/img/icons/gmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/gmail.png -------------------------------------------------------------------------------- /src/assets/img/icons/mongo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/mongo.png -------------------------------------------------------------------------------- /src/assets/img/icons/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/react.png -------------------------------------------------------------------------------- /src/assets/img/icons/unity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/unity.png -------------------------------------------------------------------------------- /src/assets/img/icons/blender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/blender.png -------------------------------------------------------------------------------- /src/assets/img/icons/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/github.png -------------------------------------------------------------------------------- /src/assets/img/icons/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/nodejs.png -------------------------------------------------------------------------------- /src/assets/img/icons/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/python.png -------------------------------------------------------------------------------- /src/assets/img/icons/spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/spotify.png -------------------------------------------------------------------------------- /src/assets/img/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/twitter.png -------------------------------------------------------------------------------- /src/assets/img/icons/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/youtube.png -------------------------------------------------------------------------------- /src/assets/img/icons/codeforces.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/codeforces.jpg -------------------------------------------------------------------------------- /src/assets/img/icons/javaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/icons/javaScript.png -------------------------------------------------------------------------------- /src/assets/img/unescape/splash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/splash.jpg -------------------------------------------------------------------------------- /src/assets/img/unescape/unexp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/unexp.png -------------------------------------------------------------------------------- /src/assets/img/unescape/unescape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/unescape.jpg -------------------------------------------------------------------------------- /src/assets/img/unescape/splashMini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/splashMini.jpg -------------------------------------------------------------------------------- /src/assets/img/unescape/insights/devquote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/insights/devquote.png -------------------------------------------------------------------------------- /src/assets/img/unescape/insights/pinlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/insights/pinlock.png -------------------------------------------------------------------------------- /src/assets/img/unescape/insights/brokenStar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/insights/brokenStar.png -------------------------------------------------------------------------------- /src/assets/img/unescape/insights/slidepuzz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/insights/slidepuzz.png -------------------------------------------------------------------------------- /src/assets/img/unescape/insights/suitcasePuzz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blueedgetechno/blueweb/HEAD/src/assets/img/unescape/insights/suitcasePuzz.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | # Perception is the reality 3 | # Robots will take over soon 4 | 5 | User-agent: * 6 | Disallow: 7 | -------------------------------------------------------------------------------- /public/.well-known/brave-rewards-verification.txt: -------------------------------------------------------------------------------- 1 | This is a Brave Rewards publisher verification file. 2 | 3 | Domain: blueedge.me 4 | Token: d30974027a9649ba8ef1c34678f4d0a3a9b7c1f1001883b23fbdff4f405665d1 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | rough* 6 | .gitignore 7 | scrap 8 | 9 | # testing 10 | /coverage 11 | 12 | rough.* 13 | backup 14 | sample.* 15 | .env 16 | .gitignore 17 | 18 | # production 19 | /build 20 | .eslintcache 21 | 22 | # misc 23 | .DS_Store 24 | .env.local 25 | .env.development.local 26 | .env.test.local 27 | .env.production.local 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://blueedge.me/ 5 | 2021-01-09 6 | daily 7 | 1.0 8 | 9 | 10 | https://blueedge.me/unescape 11 | 2021-01-09 12 | daily 13 | 0.9 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Blue Edge", 3 | "name": "Create some chaos", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Blue Edge

2 |
3 | 4 | ![blueweb](./blueweb.png) 5 | 6 | site: [blueedge.me](https://blueedge.me) 7 | 8 | Check out the game 🎮 , **UNESCAPE** , I am working on [blueedge.me/unescape](https://blueedge.me/unescape) 9 | 10 |

UNESCAPE

11 | 12 | A 3d game 🎲, full of secrets 🔐 and puzzle 🔑🧩 to test your critical thinking throughout the way. 13 |
14 | 15 | 16 | - A still from the game unescape 17 | 18 |
19 | 20 |

21 | Subscribe ✉ 22 |

23 | -------------------------------------------------------------------------------- /src/components/front/sponsors_data.js: -------------------------------------------------------------------------------- 1 | const data = { 2 | "andrewstech": { 3 | "handle": "andrewstech", 4 | "avatar": "https://github.com/andrewstech.png" 5 | } 6 | } 7 | 8 | export default data 9 | 10 | // == Things that can be overwritten == 11 | 12 | // "name": "andrewstech", 13 | // "handle": "andrewstech", 14 | // "email": null, 15 | // "company": null, 16 | // "hireable": null, 17 | // "location": "United Kingdom", 18 | // "twitter_username": "andrewstech1" 19 | // "avatar": "https://avatars.githubusercontent.com/u/45342431?s=60&v=4", 20 | // "profile": "https://github.com/andrewstech", 21 | // "blog": "https://andrewstech.me", 22 | // "bio": "A Student and a Coder\r\n\r\nhttps://youtube.com/andrewstech", -------------------------------------------------------------------------------- /src/components/unescape/prores.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 900px) { 2 | .flowbox::after { 3 | content: ""; 4 | position: absolute; 5 | top: unset; 6 | left: 30%; 7 | width: 20px; 8 | height: 100%; 9 | background: var(--stripColor); 10 | z-index: 1; 11 | } 12 | 13 | .proContent{ 14 | top: 50% !important; 15 | left: 30%; 16 | bottom: unset; 17 | transform: translate(-40%, -40%) !important; 18 | } 19 | 20 | .proDetail{ 21 | top: 30%; 22 | left: 110%; 23 | } 24 | 25 | .flowrow:first-child .flowbox:first-child::after { 26 | top: 50%; 27 | height: 50%; 28 | } 29 | 30 | .flowbox[data-isEnd="true"]::after { 31 | height: 100%; 32 | background: linear-gradient(180deg, var(--stripColor) 0%, rgba(255, 255, 255, 0) 100%); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/components/front/projects.js: -------------------------------------------------------------------------------- 1 | import "./projects.css" 2 | 3 | import unexp from "../../assets/img/unescape/unexp.png" 4 | 5 | function Projects() { 6 | return ( 7 |
8 |
9 | Projects 10 |
11 |
12 |
13 |
14 |
15 | Blueweb : Create some chaos 16 |
17 |
18 | A personal website for self presentation. 19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 | ) 28 | } 29 | 30 | export default Projects 31 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import {createRoot} from "react-dom/client" 3 | import App from "./App" 4 | 5 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom" 6 | 7 | import Header from "./components/header/header" 8 | import Footer from "./components/footer/footer" 9 | import Unescape from "./components/unescape/unescape" 10 | 11 | import "./index.css" 12 | import "./assets/css/blobz.css" 13 | 14 | const domNode = document.getElementById("root") 15 | const root = createRoot(domNode) 16 | 17 | root.render( 18 | 19 | 20 |
21 |
22 | 23 | } /> 24 | } /> 25 | 26 |
28 |
29 |
30 | ) -------------------------------------------------------------------------------- /src/components/footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | color: #fefefe; 3 | background: #1b1b1b; 4 | position: absolute; 5 | width: 100%; 6 | } 7 | 8 | .footCont { 9 | padding: 20px 30px; 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | } 14 | 15 | .socialinks { 16 | width: 30%; 17 | display: flex; 18 | justify-content: space-around; 19 | align-items: center; 20 | font-size: 1.3em; 21 | } 22 | 23 | .socialinks a { 24 | text-decoration: none; 25 | } 26 | 27 | .socialinks span { 28 | font-size: 0.8em; 29 | } 30 | 31 | @media only screen and (max-width: 900px) { 32 | 33 | .footCont { 34 | flex-direction: column-reverse; 35 | } 36 | 37 | .socialinks { 38 | width: 100%; 39 | } 40 | 41 | .copyrightText { 42 | font-size: 14px; 43 | margin-top: 10px; 44 | padding-top: 5px; 45 | border-top: 1px solid rgba(120, 120, 120, 0.7); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/front/projects.css: -------------------------------------------------------------------------------- 1 | .projects{ 2 | height: auto; 3 | /* background: rgba(17, 17, 17, 0.25); */ 4 | } 5 | 6 | .protitle{ 7 | display: grid; 8 | place-items: center; 9 | height: 150px; 10 | } 11 | 12 | .protitle span{ 13 | color: #fefefe; 14 | font-size: 60px; 15 | font-weight: bold; 16 | font-family: inherit; 17 | } 18 | 19 | .proList{ 20 | width: 100%; 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | 25 | .projCont{ 26 | width: 100%; 27 | display: flex; 28 | justify-content: space-around; 29 | } 30 | 31 | .projText{ 32 | width: 50%; 33 | } 34 | 35 | .projtitle{ 36 | margin-bottom: 40px; 37 | } 38 | 39 | .projdesc{ 40 | color: #edeaea; 41 | font-size: 1.2em; 42 | } 43 | 44 | .projtitle span{ 45 | font-size: 48px; 46 | font-weight: bold; 47 | color: #1b1c1d; 48 | } 49 | 50 | .projImage{ 51 | width: 40%; 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | /* height: 200px; */ 56 | } 57 | 58 | .projImage img{ 59 | max-width: 80%; 60 | /* max-height: 100%; */ 61 | height: auto; 62 | } 63 | -------------------------------------------------------------------------------- /src/components/unescape/flowbox.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import './progress.css'; 3 | 4 | function FlowBox(props) { 5 | return ( 6 |
16 | {props.data || props.isStart ? ( 17 |
18 | {props.isStart?"Go":props.data.idx} 19 |
20 |
{props.isStart?"Journey starts":props.data.content}
21 |
{props.isStart?"":props.data.date}
22 |
23 |
24 | ):null} 25 |
26 | ) 27 | } 28 | 29 | export default FlowBox; 30 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | outline: none; 7 | -webkit-tap-highlight-color: transparent; 8 | } 9 | 10 | html{ 11 | scroll-behavior: smooth; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | max-width: 100vw; 17 | min-height: 100vh; 18 | padding: 0; 19 | /* overflow: hidden; */ 20 | font-family: 'Poppins', sans-serif; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | body::-webkit-scrollbar { 26 | width: 8px; 27 | background-color: #fefefe; 28 | } 29 | 30 | body[data-page="home"]::-webkit-scrollbar{ 31 | background-color: #417eff; 32 | } 33 | 34 | body[data-page="unescape"]::-webkit-scrollbar { 35 | background-color: #111111; 36 | } 37 | 38 | body::-webkit-scrollbar-thumb { 39 | width: 8px; 40 | border-radius: 4px; 41 | background-color: rgba(13, 75, 191, 0.82); 42 | } 43 | 44 | a{ 45 | color: inherit; 46 | } 47 | 48 | #root { 49 | position: relative; 50 | min-height: 100vh; 51 | /* overflow-x: hidden; */ 52 | } 53 | 54 | code { 55 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 56 | monospace; 57 | } 58 | 59 | .App { 60 | min-height: 100vh; 61 | } 62 | 63 | .sociolink:hover{ 64 | color: #58e4c8; 65 | } 66 | -------------------------------------------------------------------------------- /src/components/header/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | width: 100%; 3 | height: 80px; 4 | position: relative; 5 | z-index: 5; 6 | } 7 | 8 | .headerContainer { 9 | display: flex; 10 | justify-content: space-between; 11 | padding: 0 150px; 12 | height: 100%; 13 | } 14 | 15 | .logo, 16 | .headNav { 17 | display: flex; 18 | align-items: center; 19 | height: 100%; 20 | } 21 | 22 | .logo span { 23 | height: 100%; 24 | font-weight: bolder; 25 | font-size: 1.4em; 26 | /* height: 25px; */ 27 | height: auto; 28 | color: #f9f4f4; 29 | } 30 | 31 | a { 32 | text-decoration: none; 33 | } 34 | 35 | a:visited { 36 | color: inherit; 37 | } 38 | 39 | .headNav {} 40 | 41 | .navList { 42 | display: flex; 43 | justify-content: space-between; 44 | } 45 | 46 | .navList span { 47 | font-size: 1.2em; 48 | margin: auto 40px; 49 | color: #f9f4f4; 50 | } 51 | 52 | .sideBar { 53 | display: none; 54 | } 55 | 56 | .sideIcon { 57 | color: #fefefe; 58 | } 59 | 60 | .sideMenu .MuiPaper-root { 61 | background: var(--background);; 62 | color: #f9f4f4; 63 | z-index: 10; 64 | } 65 | 66 | @media only screen and (max-width: 900px) { 67 | .sideBar { 68 | display: block; 69 | } 70 | 71 | .headerContainer { 72 | padding: 0 30px; 73 | } 74 | 75 | .navList { 76 | display: none; 77 | } 78 | 79 | .header { 80 | height: 60px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build & deploy to GitHub 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build: 10 | name: Build 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v2 16 | 17 | - name: Install Node.js 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: 16 21 | cache: yarn 22 | 23 | - name: Install NPM packages 24 | run: yarn install --frozen-lockfile 25 | 26 | - name: Build project 27 | run: CI=false yarn build 28 | env: 29 | REACT_APP_SECRET_PUZZ: ${{ secrets.REACT_APP_SECRET_PUZZ }} 30 | REACT_APP_BLUEAPI: https://api.blueedge.me/api/ 31 | 32 | - name: Upload production-ready build files 33 | uses: actions/upload-artifact@v2 34 | with: 35 | name: production-files 36 | path: ./build 37 | 38 | deploy: 39 | name: Deploy 40 | needs: build 41 | runs-on: ubuntu-latest 42 | if: github.ref == 'refs/heads/master' 43 | 44 | steps: 45 | - name: Download artifact 46 | uses: actions/download-artifact@v2 47 | with: 48 | name: production-files 49 | path: ./build 50 | 51 | - name: Deploy to gh-pages 52 | uses: peaceiris/actions-gh-pages@v3 53 | with: 54 | github_token: ${{ secrets.GITHUB_TOKEN }} 55 | cname: blueedge.me 56 | publish_dir: ./build 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blueweb", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Blue Edge - Create some chaos", 6 | "repository": "https://github.com/blueedgetechno/blueweb", 7 | "dependencies": { 8 | "@emotion/react": "^11.11.0", 9 | "@emotion/styled": "^11.11.0", 10 | "@fortawesome/fontawesome-free": "^6.4.0", 11 | "@fortawesome/fontawesome-svg-core": "^6.4.0", 12 | "@fortawesome/free-brands-svg-icons": "^6.4.0", 13 | "@fortawesome/free-regular-svg-icons": "^6.4.0", 14 | "@fortawesome/free-solid-svg-icons": "^6.4.0", 15 | "@fortawesome/react-fontawesome": "^0.2.0", 16 | "@mui/icons-material": "^5.11.16", 17 | "@mui/material": "^5.12.3", 18 | "axios": "^1.4.0", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "react-google-recaptcha": "^2.1.0", 22 | "react-helmet": "^6.1.0", 23 | "react-loader-spinner": "^5.3.4", 24 | "react-reveal": "^1.2.2", 25 | "react-router-dom": "^6.11.1", 26 | "react-scripts": "^5.0.1" 27 | }, 28 | "scripts": { 29 | "start": "react-scripts start", 30 | "build": "react-scripts build && cp build/index.html build/404.html", 31 | "test": "react-scripts test --env=jsdom", 32 | "eject": "react-scripts eject" 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/footer/footer.js: -------------------------------------------------------------------------------- 1 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 2 | 3 | // "@fortawesome/free-regular-svg-icons": "^5.15.1", 4 | 5 | import { 6 | faGithub, 7 | faTwitter, 8 | faBehanceSquare, 9 | faCodepen, 10 | } from "@fortawesome/free-brands-svg-icons" 11 | import { faEnvelope } from "@fortawesome/free-solid-svg-icons" 12 | 13 | import "./footer.css" 14 | 15 | export default function Footer() { 16 | return ( 17 |
18 |
19 | 20 | Copyright © {new Date().getFullYear()}. Blue Edge. All rights reserved 21 | 22 |
23 | Follow me 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Blue Edge 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 25 | 26 | 27 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Blue Edge 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 26 | 27 | 28 | 44 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/assets/css/blobz.css: -------------------------------------------------------------------------------- 1 | .tk-blob { 2 | animation: blob-turn var(--time, 30s) linear infinite; 3 | fill: var(--fill, #7600f8); 4 | transform-origin: center; 5 | } 6 | 7 | .tk-blob svg { 8 | animation: blob-skew calc(var(--time, 30s) * 0.5) linear 0s infinite; 9 | transform-origin: center; 10 | } 11 | 12 | .tk-blob svg path { 13 | animation: blob-scale calc(var(--time, 30s) * 0.5) ease-in-out 0s infinite; 14 | transform-origin: center; 15 | } 16 | 17 | @keyframes blob-turn { 18 | 0% { 19 | transform: rotate(0deg); 20 | } 21 | 22 | 100% { 23 | transform: rotate(360deg); 24 | } 25 | } 26 | 27 | @keyframes blob-skew { 28 | 0% { 29 | transform: skewY(0deg); 30 | } 31 | 32 | 13% { 33 | transform: skewY(calc((1.8deg) * var(--amount, 2))); 34 | } 35 | 36 | 18% { 37 | transform: skewY(calc((2.2deg) * var(--amount, 2))); 38 | } 39 | 40 | 24% { 41 | transform: skewY(calc((2.48deg) * var(--amount, 2))); 42 | } 43 | 44 | 25% { 45 | transform: skewY(calc((2.5deg) * var(--amount, 2))); 46 | } 47 | 48 | 26% { 49 | transform: skewY(calc((2.48deg) * var(--amount, 2))); 50 | } 51 | 52 | 32% { 53 | transform: skewY(calc((2.2deg) * var(--amount, 2))); 54 | } 55 | 56 | 37% { 57 | transform: skewY(calc((1.8deg) * var(--amount, 2))); 58 | } 59 | 60 | 50% { 61 | transform: skewY(0deg); 62 | } 63 | 64 | 63% { 65 | transform: skewY(calc((-1.8deg) * var(--amount, 2))); 66 | } 67 | 68 | 68% { 69 | transform: skewY(calc((-2.2deg) * var(--amount, 2))); 70 | } 71 | 72 | 74% { 73 | transform: skewY(calc((-2.48deg) * var(--amount, 2))); 74 | } 75 | 76 | 75% { 77 | transform: skewY(calc((-2.5deg) * var(--amount, 2))); 78 | } 79 | 80 | 76% { 81 | transform: skewY(calc((-2.48deg) * var(--amount, 2))); 82 | } 83 | 84 | 82% { 85 | transform: skewY(calc((-2.2deg) * var(--amount, 2))); 86 | } 87 | 88 | 87% { 89 | transform: skewY(calc((-1.8deg) * var(--amount, 2))); 90 | } 91 | 92 | 100% { 93 | transform: skewY(0deg); 94 | } 95 | } 96 | 97 | @keyframes blob-scale { 98 | 0% { 99 | transform: scaleX(.9) scaleY(1); 100 | } 101 | 102 | 25% { 103 | transform: scaleX(.9) scaleY(.9); 104 | } 105 | 106 | 50% { 107 | transform: scaleX(1) scaleY(.9); 108 | } 109 | 110 | 75% { 111 | transform: scaleX(.9) scaleY(.9); 112 | } 113 | 114 | 100% { 115 | transform: scaleX(.9) scaleY(1); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/components/header/header.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react" 2 | import "./header.css" 3 | 4 | import DehazeIcon from '@mui/icons-material/Dehaze' 5 | 6 | import { Menu, MenuItem } from "@mui/material" 7 | 8 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 9 | import { faGamepad } from "@fortawesome/free-solid-svg-icons" 10 | 11 | import { Link } from "react-router-dom" 12 | 13 | export default function Header() { 14 | const [anchorEl, setAnchorEl] = useState(null) 15 | 16 | const handleClick = (event) => { 17 | setAnchorEl(event.currentTarget) 18 | } 19 | 20 | const handleClose = () => { 21 | setAnchorEl(null) 22 | } 23 | 24 | return ( 25 |
26 |
27 |
28 | 29 | Blue Edge 30 | 31 |
32 |
33 |
34 | 35 | Home 36 | 37 | 38 | 39 | Unescape 40 | 41 | 42 | 43 | 47 | Github 48 | 49 | 50 | 51 | 55 | Contact 56 | 57 | 58 |
59 |
60 | 61 |
62 | 70 | 71 | Home 72 | 73 | 74 | Unescape 75 | 76 | 77 | Github 78 | 79 | 80 | Contact 81 | 82 | 83 |
84 |
85 |
86 | ) 87 | } 88 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react" 2 | import "./App.css" 3 | 4 | import "./assets/css/code.css" 5 | import "./assets/css/onedark.css" 6 | 7 | import profileImg from "./assets/img/profile.jpg" 8 | 9 | import PythonIcon from "./assets/img/icons/python.png" 10 | import JavaScriptIcon from "./assets/img/icons/javaScript.png" 11 | 12 | import ReactIcon from "./assets/img/icons/react.png" 13 | import NodeJsIcon from "./assets/img/icons/nodejs.png" 14 | import UnityIcon from "./assets/img/icons/unity.png" 15 | import BlenderIcon from "./assets/img/icons/blender.png" 16 | import MongoDBIcon from "./assets/img/icons/mongo.png" 17 | import AzureIcon from "./assets/img/icons/azure.png" 18 | 19 | import { IntroCard, LangCard, SocialCard, ProjectCard } from "./cards.js" 20 | 21 | import Projects from "./components/front/projects.js" 22 | import Sponsors from "./components/front/sponsors.js" 23 | 24 | function App() { 25 | const [card1, setCard1] = useState(1) 26 | const [card2, setCard2] = useState(-2) 27 | const [card3, setCard3] = useState(-1) 28 | const [card4, setCard4] = useState(0) 29 | 30 | document.body.dataset.page = "home" 31 | 32 | const handleOnClick = () => { 33 | if (card1 == 2) setCard1(-1) 34 | else setCard1(card1 + 1) 35 | 36 | if (card2 == 2) setCard2(-1) 37 | else setCard2(card2 + 1) 38 | 39 | if (card3 == 2) setCard3(-1) 40 | else setCard3(card3 + 1) 41 | 42 | if (card4 == 2) setCard4(-1) 43 | else setCard4(card4 + 1) 44 | } 45 | 46 | const states = { 47 | "-3": "", 48 | "-2": "", 49 | "-1": "", 50 | 0: " followed", 51 | 1: " front", 52 | 2: " fall", 53 | } 54 | 55 | return ( 56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 |
64 |
65 | profile 66 |
67 | twitter 68 | github 69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |
80 | {/* */} 81 | 82 |
83 | ) 84 | } 85 | 86 | export default App 87 | -------------------------------------------------------------------------------- /src/assets/css/onedark.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{ 2 | font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; 3 | font-weight: 350; 4 | font-size: 18px; 5 | color: #abb2bf; 6 | background-color: #282c34 7 | } 8 | 9 | .CodeMirror-selected { 10 | background-color: #3e4451 11 | } 12 | 13 | .CodeMirror-gutter, .CodeMirror-gutters { 14 | border: none; 15 | background-color: #282c34 16 | } 17 | 18 | .CodeMirror-linenumber, .CodeMirror-linenumbers { 19 | color: #5c6370 !important; 20 | background-color: transparent 21 | } 22 | 23 | .CodeMirror-lines { 24 | color: #abb2bf !important; 25 | background-color: transparent 26 | } 27 | 28 | .CodeMirror-cursor { 29 | border-left: 2px solid #56b6c2 !important 30 | } 31 | 32 | .CodeMirror-matchingbracket, .CodeMirror-matchingtag { 33 | border-bottom: 2px solid #56b6c2; 34 | color: #abb2bf !important; 35 | background-color: transparent 36 | } 37 | 38 | .CodeMirror-nonmatchingbracket { 39 | border-bottom: 2px solid #e06c75; 40 | color: #abb2bf !important; 41 | background-color: transparent 42 | } 43 | 44 | .CodeMirror-foldgutter, .CodeMirror-foldgutter-folded, .CodeMirror-foldgutter-open, .CodeMirror-foldmarker { 45 | border: none; 46 | text-shadow: none; 47 | color: #5c6370 !important; 48 | background-color: transparent 49 | } 50 | 51 | .CodeMirror-activeline-background { 52 | background-color: rgba(153, 187, 255, .04) 53 | } 54 | 55 | .cm-header { 56 | color: #e06c75 57 | } 58 | 59 | .cm-quote { 60 | color: #5c6370; 61 | font-style: italic 62 | } 63 | 64 | .cm-negative { 65 | color: #e06c75 66 | } 67 | 68 | .cm-positive { 69 | color: #e06c75 70 | } 71 | 72 | .cm-strong { 73 | color: #d19a66; 74 | font-weight: 700 75 | } 76 | 77 | .cm-header .cm-strong { 78 | color: #d19a66; 79 | font-weight: 700 80 | } 81 | 82 | .cm-em { 83 | color: #c678dd; 84 | font-style: italic 85 | } 86 | 87 | .cm-header .cm-em { 88 | color: #c678dd; 89 | font-style: italic 90 | } 91 | 92 | .cm-tag { 93 | color: #e06c75 94 | } 95 | 96 | .cm-attribute { 97 | color: #d19a66 98 | } 99 | 100 | .cm-link { 101 | color: #98c379; 102 | border-bottom: solid 1px #98c379 103 | } 104 | 105 | .cm-builtin { 106 | color: #e06c75 107 | } 108 | 109 | .cm-keyword { 110 | color: #c678dd 111 | } 112 | 113 | .cm-def { 114 | color: #e5c07b 115 | } 116 | 117 | .cm-atom { 118 | color: #d19a66 119 | } 120 | 121 | .cm-number { 122 | color: #d19a66 123 | } 124 | 125 | .cm-property { 126 | color: #56b6c2 127 | } 128 | 129 | .cm-qualifier { 130 | color: #d19a66 131 | } 132 | 133 | .cm-variable { 134 | color: #e06c75 135 | } 136 | 137 | .cm-string { 138 | color: #98c379 139 | } 140 | 141 | .cm-punctuation { 142 | color: #abb2bf 143 | } 144 | 145 | .cm-operator { 146 | color: #56b6c2 147 | } 148 | 149 | .cm-meta { 150 | color: #abb2bf 151 | } 152 | 153 | .cm-bracket { 154 | color: #abb2bf 155 | } 156 | 157 | .cm-comment { 158 | color: #5c6370; 159 | font-style: italic 160 | } 161 | 162 | .cm-error { 163 | color: #e06c75 164 | } 165 | 166 | .cm-m-css.cm-variable { 167 | color: #828997 168 | } 169 | 170 | .cm-m-css.cm-property { 171 | color: #abb2bf 172 | } 173 | 174 | .cm-m-css.cm-atom { 175 | color: #56b6c2 176 | } 177 | 178 | .cm-m-css.cm-builtin { 179 | color: #56b6c2 180 | } 181 | 182 | .cm-m-lua.cm-variable { 183 | color: #56b6c2 184 | } 185 | -------------------------------------------------------------------------------- /src/components/unescape/responsive.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 900px) { 2 | .splashScreen { 3 | background-image: url(../../assets/img/unescape/splashMini.jpg); 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | min-height: 750px; 7 | } 8 | 9 | body[data-page="unescape"] .grecaptcha-badge{ 10 | display: none !important; 11 | } 12 | 13 | .splashScreen img { 14 | display: none; 15 | } 16 | 17 | .description { 18 | width: 100%; 19 | padding-top: 10px; 20 | } 21 | 22 | .description .title { 23 | height: auto; 24 | } 25 | 26 | .titleLetters { 27 | font-size: 60px; 28 | } 29 | 30 | .slogan { 31 | font-size: 42px; 32 | } 33 | 34 | .gamedesc { 35 | width: 100%; 36 | padding: 40px 0 20px 0; 37 | margin-top: 180px; 38 | } 39 | 40 | .gamedesc span { 41 | width: 90%; 42 | text-shadow: 2px 2px 2px #1f1f1f; 43 | } 44 | 45 | .subscribeCont { 46 | min-height: 100px; 47 | } 48 | 49 | .subscribe { 50 | width: 350px; 51 | /* height: 48px; */ 52 | } 53 | 54 | .thanks{ 55 | font-size: 1.2em; 56 | } 57 | 58 | .errortext{ 59 | font-size: 1.03em; 60 | } 61 | 62 | .twit{ 63 | font-size: 36px !important; 64 | padding: 0 8px; 65 | } 66 | 67 | .subtxt { 68 | position: relative; 69 | z-index: 2; 70 | background: rgba(8, 8, 8, 0.5); 71 | } 72 | 73 | .subtxt span { 74 | width: 360px; 75 | color: #dddddd; 76 | } 77 | 78 | .divider { 79 | margin-top: -125px; 80 | } 81 | 82 | .gamedetails { 83 | overflow: hidden; 84 | } 85 | 86 | .gamepara { 87 | flex-direction: column; 88 | align-items: center; 89 | height: auto; 90 | min-height: 800px; 91 | } 92 | 93 | .gamepara:nth-child(3n) { 94 | flex-direction: column-reverse; 95 | } 96 | 97 | .imagecont { 98 | width: 360px; 99 | height: 480px; 100 | padding: 0; 101 | } 102 | 103 | /* .imageframe { 104 | bottom: 0; 105 | } */ 106 | .imagecont .paratitle { 107 | display: block; 108 | } 109 | 110 | .paracol .paratitle { 111 | display: none; 112 | } 113 | 114 | .paratitle { 115 | font-size: 28px; 116 | margin-bottom: 30px; 117 | } 118 | 119 | .gamepara:nth-child(2) .paratitle { 120 | font-size: 30px; 121 | } 122 | 123 | .imageframe { 124 | width: 320px; 125 | height: 320px; 126 | } 127 | 128 | .paracol { 129 | width: 100%; 130 | height: auto; 131 | padding: 0; 132 | display: block; 133 | } 134 | 135 | .paratext { 136 | padding: 0 40px; 137 | } 138 | 139 | .paratext mark { 140 | color: #7dbaff; 141 | } 142 | 143 | .subsband { 144 | height: 150px; 145 | } 146 | 147 | .puzzleCont{ 148 | background: #1b1b1b; 149 | } 150 | 151 | .puzzIcon{ 152 | flex-direction: column; 153 | } 154 | 155 | .puzzIcon span{ 156 | margin: 20px 0 0 0; 157 | } 158 | 159 | .hiddenpuzz{ 160 | flex-direction: column; 161 | padding: 0 20px; 162 | } 163 | 164 | .hiddenpuzz span { 165 | margin-bottom: 15px; 166 | } 167 | 168 | .secretPuzz{ 169 | margin-bottom: 15px; 170 | } 171 | 172 | .textDivider{ 173 | display: block; 174 | } 175 | 176 | .videocard{ 177 | padding: 8px; 178 | } 179 | 180 | .videocard iframe{ 181 | width: 360px; 182 | height: 200px; 183 | } 184 | 185 | .extratweet{ 186 | display: none; 187 | } 188 | } 189 | -------------------------------------------------------------------------------- /src/components/unescape/progress.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import FlowBox from "./flowbox.js" 3 | import "./progress.css" 4 | import "./prores.css" 5 | 6 | import axios from "axios" 7 | 8 | var blueapi = "https://blueapi.herokuapp.com/api/" 9 | if (process.env.REACT_APP_BLUEAPI != null) { 10 | blueapi = process.env.REACT_APP_BLUEAPI 11 | } 12 | 13 | function Progress() { 14 | const [colCount, setCol] = useState(1) 15 | const [prog, setProg] = useState(null) 16 | 17 | if (prog == null) { 18 | setProg([]) 19 | var url = `${blueapi}progress` 20 | 21 | axios 22 | .get(url) 23 | .then((res) => { 24 | if (res && res.data && res.data.status == 200) { 25 | var arr = res.data.result 26 | 27 | arr.sort((a, b) => { 28 | var date1 = new Date(a.date) 29 | var date2 = new Date(b.date) 30 | 31 | if (date1 > date2) return 1 32 | else return -1 33 | }) 34 | 35 | setProg(arr) 36 | } 37 | }) 38 | .catch((err) => {}) 39 | 40 | var style = getComputedStyle(document.body) 41 | var fbox = style.getPropertyValue("--fbox") 42 | var lbox = fbox.substring(0, fbox.length - 2) 43 | 44 | if (window.innerWidth > 900) { 45 | setCol(Math.floor(window.innerWidth / lbox)) 46 | // console.log(Math.floor(window.innerWidth/lbox)); 47 | } else { 48 | setCol(1) 49 | } 50 | 51 | window.onresize = function (event) { 52 | if (event.target.innerWidth > 900) { 53 | setCol(Math.floor(event.target.innerWidth / lbox)) 54 | } else { 55 | setCol(1) 56 | } 57 | } 58 | } 59 | 60 | var flowrow = [], 61 | totRows = 0 62 | if (prog) { 63 | totRows = prog.length 64 | } 65 | 66 | if (colCount != 1) { 67 | totRows = Math.ceil(prog.length / (colCount - 2)) 68 | } 69 | 70 | for (var i = 0; i < totRows; i++) { 71 | flowrow.push(i) 72 | } 73 | 74 | return ( 75 |
76 |
Progress
77 |
78 |
79 | {flowrow.map((x, yx) => { 80 | var boxes = [] 81 | for (var i = x * colCount; i < (x + 1) * colCount; i++) { 82 | var tmpObj = {}, 83 | cellNum = colCount == 1 ? x : i - 1 - 2 * x 84 | if (cellNum < prog.length) { 85 | tmpObj.isFirst = i == x * colCount 86 | tmpObj.isLast = i + 1 == (x + 1) * colCount 87 | tmpObj.isOdd = x % 2 == 0 88 | 89 | if ((!tmpObj.isFirst && !tmpObj.isLast) || colCount == 1) { 90 | var idx = colCount == 1 ? x : i - 1 - 2 * x 91 | tmpObj.data = prog[idx] 92 | tmpObj.data.idx = idx + 1 93 | 94 | if (cellNum == prog.length - 1) { 95 | tmpObj.isEnd = true 96 | } 97 | } 98 | } else { 99 | tmpObj.isNull = true 100 | } 101 | 102 | boxes.push(tmpObj) 103 | } 104 | 105 | return ( 106 |
107 | {boxes.map((box, k) => { 108 | return ( 109 | 118 | ) 119 | })} 120 |
121 | ) 122 | })} 123 |
124 |
125 |
126 | ) 127 | } 128 | 129 | export default Progress 130 | -------------------------------------------------------------------------------- /src/components/front/sponsors.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | import sponsorsdata from "./sponsors_data" 3 | 4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 5 | 6 | // "@fortawesome/free-regular-svg-icons": "^5.15.1", 7 | 8 | import CoffeeIcon from "../../assets/img/icons/coffee.svg" 9 | import { faTwitter } from "@fortawesome/free-brands-svg-icons" 10 | 11 | import { 12 | faLink, 13 | faHeart, 14 | faExternalLink, 15 | faLocationDot, 16 | } from "@fortawesome/free-solid-svg-icons" 17 | 18 | import { faHeart as faHeartOutLined } from "@fortawesome/free-regular-svg-icons" 19 | 20 | const ghsponser = 'https://github.com/sponsors/blueedgetechno' 21 | const bmcoffee = 'https://www.buymeacoffee.com/blueedgetechno' 22 | 23 | const sponsor_api = "https://ghs.vercel.app/sponsors/blueedgetechno" 24 | 25 | function Sponsors() { 26 | const [sponsors, setSponsors] = useState([]) 27 | 28 | const fetchUsers = async () => { 29 | try { 30 | var res = await fetch(sponsor_api).then(x => x.json()) 31 | setSponsors(res.sponsors || []) 32 | } catch (err) { 33 | console.log(err) 34 | } 35 | } 36 | 37 | useEffect(() => { 38 | if (sponsors.length === 0) fetchUsers() 39 | }, [sponsors]) 40 | 41 | return ( 42 |
43 | {sponsors.length > 0 && ( 44 |
45 | GitHub Sponsors 46 | 47 |
48 | )} 49 |
50 | {sponsors 51 | .map((sp) => ({ ...sp, ...sp.details, ...sponsorsdata[sp.handle] })) 52 | .map((sp) => ( 53 |
54 | pfp 55 |
56 |

57 | {sp.name} 58 |   59 | 60 | 61 | 62 |

63 |

{sp.bio}

64 |
65 | {sp.location && ( 66 | 67 | 68 | {sp.location} 69 | 70 | )} 71 | {sp.blog && ( 72 | 73 | 74 | {sp.blog} 75 | 76 | )} 77 | {sp.twitter_username && ( 78 | 81 | 82 | @{sp.twitter_username} 83 | 84 | )} 85 |
86 |
87 |
88 | ))} 89 |
90 |
91 |
window.open(ghsponser, '_blank')}> 92 | Sponsor Me  93 | 94 | 95 |
96 | Or 97 |
window.open(bmcoffee, '_blank')}> 98 | Buy Me a Coffee 99 | coffee 100 |
101 |
102 |
103 | ) 104 | } 105 | 106 | export default Sponsors 107 | -------------------------------------------------------------------------------- /src/components/unescape/progress.css: -------------------------------------------------------------------------------- 1 | body{ 2 | --fbox: 295px; 3 | /* --stripColor: #1d5df4; */ 4 | --stripColor: #23fb71; 5 | --fcirc: #0db62b; 6 | --fcircle: calc(var(--fbox)/3 - 20px); 7 | } 8 | 9 | .progCont { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | 15 | .headTitle { 16 | font-size: 48px; 17 | color: #fefefe; 18 | margin: 10px 0 0 0; 19 | } 20 | 21 | .flowCont { 22 | width: 100%; 23 | } 24 | 25 | .pflow { 26 | display: flex; 27 | flex-direction: column; 28 | position: relative; 29 | } 30 | 31 | .flowrow { 32 | display: flex; 33 | justify-content: space-around; 34 | position: relative; 35 | } 36 | 37 | .flowrow:nth-child(even) { 38 | flex-direction: row-reverse; 39 | } 40 | 41 | .flowbox { 42 | width: 100%; 43 | /* width: var(--fbox); */ 44 | height: var(--fbox); 45 | background: none; 46 | /* border: 1px solid var(--stripColor); */ 47 | position: relative; 48 | overflow: hidden; 49 | } 50 | 51 | .proContent { 52 | display: flex; 53 | justify-content: space-around; 54 | align-items: center; 55 | transition: all 200ms ease-in-out; 56 | cursor: pointer; 57 | } 58 | 59 | .proContent::before { 60 | content: ""; 61 | position: absolute; 62 | width: 100%; 63 | height: 100%; 64 | border: solid 0 #26f53d; 65 | border-radius: 50%; 66 | transition: all 200ms ease-in-out; 67 | filter: drop-shadow(4px 2px 8px rgba(16, 48, 24, 0.7)); 68 | opacity: 0; 69 | } 70 | 71 | .proContent:hover::before, 72 | .flowrow:nth-child(1) .flowbox:nth-child(1) .proContent::before{ 73 | width: 110%; 74 | height: 110%; 75 | opacity: 1; 76 | border-width: 4px; 77 | } 78 | 79 | .proSpan { 80 | font-size: 1.6em; 81 | color: #fefefe; 82 | font-weight: 800; 83 | } 84 | 85 | .proContent { 86 | content: ""; 87 | position: absolute; 88 | top: 50%; 89 | left: 50%; 90 | width: var(--fcircle); 91 | height: var(--fcircle); 92 | background: var(--fcirc); 93 | border-radius: 50%; 94 | color: #ececec; 95 | z-index: 5; 96 | transform: translate(-50%, -40%); 97 | filter: drop-shadow(4px 2px 8px rgba(15, 47, 24, 0.7)); 98 | } 99 | 100 | .flowrow:nth-child(even) .flowbox .proContent { 101 | top: unset; 102 | bottom: 50%; 103 | transform: translate(-50%, 40%); 104 | } 105 | 106 | .proDetail { 107 | position: absolute; 108 | top: 120%; 109 | left: -60px; 110 | width: 200px; 111 | text-align: center; 112 | transform: scale(0); 113 | transform-origin: center; 114 | transition: all 200ms ease-in-out; 115 | } 116 | 117 | .proContent:hover .proDetail, 118 | .flowrow:nth-child(1) .flowbox:nth-child(1) .proDetail { 119 | transform: scale(1); 120 | } 121 | 122 | .prodesc { 123 | color: #21ff81; 124 | } 125 | 126 | .prodate { 127 | font-size: 0.8em; 128 | color: #00cd4d; 129 | } 130 | 131 | @media only screen and (min-width: 900px) { 132 | .flowbox::after { 133 | content: ""; 134 | position: absolute; 135 | top: 50%; 136 | width: 100%; 137 | height: 20px; 138 | background: var(--stripColor); 139 | z-index: 1; 140 | box-sizing: border-box; 141 | } 142 | 143 | .flowbox[data-isOdd="false"]::after { 144 | top: unset; 145 | bottom: 50%; 146 | } 147 | 148 | .flowbox[data-isSide="true"]::after { 149 | content: ""; 150 | position: absolute; 151 | width: 100%; 152 | height: 100%; 153 | top: unset; 154 | bottom: unset; 155 | background: none; 156 | border: 20px solid var(--stripColor); 157 | border-radius: calc(var(--fbox)*130/295); 158 | z-index: 1; 159 | } 160 | 161 | .flowbox[data-ornt="1"]::after { 162 | bottom: 50%; 163 | right: 50%; 164 | } 165 | 166 | .flowbox[data-ornt="2"]::after { 167 | bottom: calc(50% - 20px); 168 | left: 50%; 169 | } 170 | 171 | .flowbox[data-ornt="3"]::after { 172 | top: calc(50% - 20px); 173 | left: 50%; 174 | } 175 | 176 | .flowbox[data-ornt="4"]::after { 177 | top: 50%; 178 | right: 50%; 179 | } 180 | 181 | .flowrow:first-child .flowbox:first-child::after { 182 | top: 50%; 183 | left: 50%; 184 | width: 50%; 185 | height: 20px; 186 | background: var(--stripColor); 187 | border: none; 188 | border-radius: 0; 189 | } 190 | 191 | .flowbox[data-isEnd="true"]::after { 192 | right: unset; 193 | width: 100%; 194 | height: 20px; 195 | background: var(--stripColor); 196 | background: linear-gradient(90deg, var(--stripColor) 0%, rgba(255, 255, 255, 0) 100%); 197 | border: none; 198 | border-radius: 0; 199 | } 200 | 201 | .flowrow:nth-child(even) .flowbox[data-isEnd="true"]::after { 202 | background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--stripColor) 100%); 203 | } 204 | 205 | .flowbox[data-isNull="true"] { 206 | opacity: 0; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /src/assets/img/icons/coffee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body[data-page="home"] { 2 | overflow-x: hidden; 3 | } 4 | 5 | body[data-page="home"] .App { 6 | --background: #003bb8; 7 | background-image: linear-gradient(120deg, #003bb8 0%, #269edb 100%); 8 | } 9 | 10 | body[data-page="home"] .footer { 11 | color: #fefefe; 12 | background: #1b1b1b; 13 | } 14 | 15 | body[data-page="home"] .grecaptcha-badge { 16 | opacity: 0; 17 | pointer-events: none; 18 | } 19 | 20 | .home { 21 | width: 100%; 22 | max-width: 100vw; 23 | /* height: calc(100vh - 80px); */ 24 | /* margin-bottom: 180px; */ 25 | } 26 | 27 | .intro { 28 | position: relative; 29 | width: 100%; 30 | display: flex; 31 | justify-content: space-between; 32 | padding: 50px 0; 33 | } 34 | 35 | .intro *::selection { 36 | background: inherit; 37 | } 38 | 39 | .introCards *::selection { 40 | background: inherit; 41 | } 42 | 43 | .introCards { 44 | margin: 50px 80px; 45 | position: relative; 46 | width: 40%; 47 | max-height: 100vh; 48 | cursor: pointer; 49 | } 50 | 51 | .introCard { 52 | position: absolute; 53 | transform-origin: bottom right; 54 | transform: rotateZ(6deg); 55 | opacity: 0; 56 | z-index: 1; 57 | top: 0; 58 | display: flex; 59 | flex-direction: column; 60 | padding: 15px 13px; 61 | min-width: 560px; 62 | width: 90%; 63 | max-width: 650px; 64 | min-height: 360px; 65 | background: #2a2a32; 66 | border-radius: 10px; 67 | box-shadow: 4px 4px 20px 5px rgba(0, 0, 0, 0.3); 68 | transition: 0.5s all ease-in-out; 69 | pointer-events: none; 70 | } 71 | 72 | .followed { 73 | height: 360px; 74 | overflow: hidden; 75 | } 76 | 77 | .circles { 78 | display: flex; 79 | /* padding: 15px 0 15px 13px; */ 80 | } 81 | 82 | .navCircle { 83 | width: 12px; 84 | height: 12px; 85 | border-radius: 50%; 86 | background: #fefefe; 87 | margin: 0 4px; 88 | } 89 | 90 | .red { 91 | background: #ed4040; 92 | } 93 | 94 | .yellow { 95 | background: #ecb62c; 96 | } 97 | 98 | .green { 99 | background: #26e05a; 100 | } 101 | 102 | .procode { 103 | margin-top: 20px; 104 | /* font-size: 1.5em; */ 105 | font-size: 19.5px; 106 | line-height: 25px; 107 | color: #fefefe; 108 | } 109 | 110 | .CodeMirror-line { 111 | overflow: visible; 112 | white-space: pre-wrap; 113 | word-break: normal; 114 | margin: 0; 115 | } 116 | 117 | .front { 118 | opacity: 1; 119 | transform: rotateZ(0); 120 | z-index: 10; 121 | pointer-events: auto; 122 | } 123 | 124 | .followed { 125 | opacity: 0.5; 126 | transform-origin: bottom right; 127 | transform: rotateZ(5deg); 128 | box-shadow: none; 129 | z-index: 8; 130 | } 131 | 132 | .fall { 133 | transform-origin: bottom right; 134 | box-shadow: none; 135 | z-index: 12; 136 | animation: falldown 1s ease-in-out; 137 | } 138 | 139 | @keyframes falldown { 140 | 0% { 141 | opacity: 1; 142 | transform: rotateZ(0); 143 | } 144 | 145 | 70% { 146 | opacity: 0.5; 147 | } 148 | 149 | 90% { 150 | opacity: 0; 151 | transform: rotateZ(-90deg) scale(0.9); 152 | } 153 | 154 | 100% { 155 | opacity: 0; 156 | transform: rotateZ(-90deg) scale(0); 157 | } 158 | } 159 | 160 | .profileImage { 161 | position: relative; 162 | right: -60px; 163 | width: 900px; 164 | height: 840px; 165 | display: grid; 166 | place-items: baseline end; 167 | } 168 | 169 | .introImage { 170 | position: relative; 171 | z-index: 3; 172 | /* top: 0; */ 173 | /* left: 0; */ 174 | max-width: 100%; 175 | max-width: 500px; 176 | height: auto; 177 | border: 6px solid #f7e9e9; 178 | border-radius: 50%; 179 | filter: drop-shadow(0px 0px 20px rgba(7, 8, 18, 0.4)); 180 | transform-origin: center; 181 | animation: twiddle 5s linear infinite alternate; 182 | } 183 | 184 | @keyframes twiddle { 185 | from { 186 | transform: rotateZ(-2deg); 187 | } 188 | 189 | to { 190 | transform: rotateZ(2deg); 191 | } 192 | } 193 | 194 | .ringCircle { 195 | position: absolute; 196 | /* top: 0; */ 197 | /* left: 0; */ 198 | width: 500px; 199 | height: 500px; 200 | transform-origin: center; 201 | border: 2px solid rgba(19, 20, 33, 0.5); 202 | border-radius: 50%; 203 | } 204 | 205 | .innerCircle { 206 | transform: scale(1.3); 207 | z-index: 2; 208 | 209 | display: flex; 210 | justify-content: space-between; 211 | align-items: center; 212 | animation: wheel 10s linear infinite; 213 | } 214 | 215 | @keyframes wheel { 216 | from { 217 | transform: scale(1.3) rotateZ(0); 218 | } 219 | 220 | to { 221 | transform: scale(1.3) rotateZ(360deg); 222 | } 223 | } 224 | 225 | .planetCircle { 226 | position: relative; 227 | z-index: 2; 228 | transform-origin: center; 229 | width: 46px; 230 | height: 46px; 231 | border-radius: 50%; 232 | box-shadow: 0px 0px 10px 1px rgba(43, 43, 43, 0.3); 233 | animation: planets 10s linear infinite; 234 | } 235 | 236 | @keyframes planets { 237 | from { 238 | transform: rotateZ(0deg); 239 | } 240 | 241 | to { 242 | transform: rotateZ(-360deg); 243 | } 244 | } 245 | 246 | .innerCircle .planetCircle:nth-child(1) { 247 | margin-left: -23px; 248 | } 249 | 250 | .innerCircle .planetCircle:nth-child(2) { 251 | margin-right: -23px; 252 | } 253 | 254 | .outerCircle { 255 | transform: scale(1.8); 256 | z-index: 1; 257 | 258 | border-width: 1px; 259 | animation: wheel2 20s linear infinite; 260 | } 261 | 262 | @keyframes wheel2 { 263 | from { 264 | transform: scale(1.8) rotateZ(0); 265 | } 266 | 267 | to { 268 | transform: scale(1.8) rotateZ(360deg); 269 | } 270 | } 271 | 272 | .outerCircle .planetCircle { 273 | position: absolute; 274 | width: 33px; 275 | height: 33px; 276 | animation-duration: 20s; 277 | } 278 | 279 | .outerCircle .planetCircle:nth-child(1) { 280 | top: 50%; 281 | left: 0; 282 | margin-left: -16.5px; 283 | } 284 | 285 | .outerCircle .planetCircle:nth-child(2) { 286 | top: 0; 287 | left: 25%; 288 | margin-left: 16.5px; 289 | } 290 | 291 | .outerCircle .planetCircle:nth-child(3) { 292 | top: 0; 293 | right: 25%; 294 | margin-right: 16.5px; 295 | } 296 | 297 | .outerCircle .planetCircle:nth-child(4) { 298 | top: 50%; 299 | right: 0; 300 | margin-right: -16.5px; 301 | } 302 | 303 | .outerCircle .planetCircle:nth-child(5) { 304 | bottom: 0; 305 | right: 25%; 306 | margin-right: 16.5px; 307 | } 308 | 309 | .outerCircle .planetCircle:nth-child(6) { 310 | bottom: 0; 311 | left: 25%; 312 | margin-left: 16.5px; 313 | } 314 | 315 | .sponsors-container { 316 | display: flex; 317 | flex-direction: column; 318 | align-items: center; 319 | } 320 | 321 | .sp-title { 322 | display: flex; 323 | align-items: center; 324 | column-gap: 1.75rem; 325 | margin-bottom: 4rem; 326 | } 327 | 328 | .sp-title span { 329 | font-size: 3rem; 330 | color: #fefefe; 331 | text-shadow: 2px 2px 2px #ea4aaa; 332 | cursor: default; 333 | } 334 | 335 | .sp-title img { 336 | width: 3rem; 337 | filter: drop-shadow(2px 1px #fefefe); 338 | } 339 | 340 | .sponsor-list { 341 | display: flex; 342 | flex-direction: column; 343 | align-items: center; 344 | row-gap: 1rem; 345 | } 346 | 347 | .sponsor-card { 348 | max-width: 80vw; 349 | 350 | display: grid; 351 | grid-template-columns: 8rem auto; 352 | column-gap: 2rem; 353 | 354 | padding: 2rem; 355 | color: #efefef; 356 | border: solid 1px rgba(254, 254, 254, 0.5); 357 | border-radius: 0.5rem; 358 | } 359 | 360 | .sponsor-card img { 361 | width: 100%; 362 | height: 100%; 363 | border: solid 2px #eee; 364 | border-radius: 0.5rem; 365 | } 366 | 367 | .sponsor-info { 368 | display: grid; 369 | grid-template-rows: 3rem auto 2.75rem; 370 | } 371 | 372 | .sponsor-info h1{ 373 | text-shadow: 2px 1px 1px #ea1093; 374 | } 375 | 376 | .sponsor-info h4{ 377 | font-weight: 500; 378 | } 379 | 380 | .sp-links { 381 | display: grid; 382 | grid-template-columns: auto auto; 383 | column-gap: 1rem; 384 | } 385 | 386 | .sp-links svg{ 387 | filter: drop-shadow(2px 2px 0px #003bb8); 388 | } 389 | 390 | .sp-links a { 391 | width: fit-content; 392 | display: flex; 393 | align-items: center; 394 | column-gap: 0.5rem; 395 | } 396 | 397 | .sp-links a:hover { 398 | text-decoration: underline; 399 | } 400 | 401 | .sp-btns{ 402 | display: flex; 403 | align-items: center; 404 | column-gap: 1.5rem; 405 | 406 | color: #eee; 407 | margin: 4rem 0; 408 | } 409 | 410 | .donate-btn { 411 | position: relative; 412 | display: flex; 413 | align-items: center; 414 | column-gap: 0.5rem; 415 | 416 | color: #fefefe; 417 | font-size: 1.25rem; 418 | cursor: pointer; 419 | 420 | padding: 0.75rem 1rem; 421 | border: 2px solid #eee; 422 | border-radius: 0.325rem; 423 | 424 | transition: all 120ms ease-in-out; 425 | } 426 | 427 | .donate-btn:hover{ 428 | background: #fefefe; 429 | color: #1e2027; 430 | box-shadow: 2px 2px 4px rgba(36, 35, 50, 0.25); 431 | } 432 | 433 | .gh-btn svg:nth-child(3){ 434 | display: none; 435 | } 436 | 437 | .gh-btn:hover svg:nth-child(3){ 438 | display: block; 439 | } 440 | 441 | .gh-btn:hover svg:nth-child(2){ 442 | display: none; 443 | } 444 | 445 | @media only screen and (max-width: 900px) { 446 | .home { 447 | height: auto; 448 | overflow: hidden; 449 | } 450 | 451 | .intro { 452 | flex-direction: column-reverse; 453 | justify-content: unset; 454 | padding-top: 0; 455 | align-items: center; 456 | vertical-align: middle; 457 | } 458 | 459 | .profileImage { 460 | transform-origin: center; 461 | height: 650px; 462 | --winWidth: 0.55; 463 | transform: scale(var(--winWidth)); 464 | right: 0; 465 | place-items: baseline center; 466 | } 467 | 468 | .introCards { 469 | /* display: none; */ 470 | width: 98%; 471 | min-height: 400px; 472 | margin: 0; 473 | transform-origin: left center; 474 | transform: scale(0.65); 475 | align-self: flex-end; 476 | } 477 | 478 | .procode { 479 | font-size: 17px; 480 | } 481 | 482 | .sp-title{ 483 | column-gap: 1rem; 484 | } 485 | 486 | .sp-title span{ 487 | font-size: 2rem; 488 | } 489 | 490 | .sp-title img{ 491 | width: 2.5rem; 492 | } 493 | 494 | .sponsor-card{ 495 | padding: 1.25rem; 496 | grid-template-columns: auto; 497 | row-gap: 1rem; 498 | } 499 | 500 | .sponsor-info{ 501 | /* font-size: 0.8rem; */ 502 | padding: 0 0.5rem; 503 | grid-template-rows: auto; 504 | } 505 | 506 | .sp-links{ 507 | margin-top: 1rem; 508 | grid-template-columns: auto; 509 | } 510 | 511 | .sp-links a{ 512 | display: grid; 513 | grid-template-columns: 1.5rem auto; 514 | } 515 | 516 | .sp-links svg{ 517 | justify-self: center; 518 | } 519 | 520 | .sp-btns{ 521 | display: grid; 522 | grid-template-columns: auto; 523 | /* flex-direction: column; */ 524 | row-gap: 1rem; 525 | } 526 | 527 | .sp-divider{ 528 | text-align: center; 529 | } 530 | 531 | .donate-btn{ 532 | justify-content: center; 533 | /* width: 12.5rem; */ 534 | } 535 | } 536 | -------------------------------------------------------------------------------- /src/components/unescape/unescape.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo'); 2 | @import url('https://fonts.googleapis.com/css2?family=Bungee+Outline'); 3 | @import url('https://fonts.googleapis.com/css2?family=Monoton'); 4 | 5 | .unescapeApp { 6 | width: 100%; 7 | } 8 | 9 | body[data-page="unescape"] { 10 | --background: #111111; 11 | overflow-x: hidden; 12 | } 13 | 14 | body[data-page="unescape"] .header { 15 | background: #000; 16 | } 17 | 18 | body[data-page="unescape"] .App { 19 | background: var(--background); 20 | } 21 | 22 | body[data-page="unescape"] .grecaptcha-badge{ 23 | position: absolute !important; 24 | box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important; 25 | filter: hue-rotate(180deg) invert(0.96); 26 | transition: all 200ms ease-in-out; 27 | } 28 | 29 | .splashScreen { 30 | position: relative; 31 | width: 100%; 32 | min-height: 650px; 33 | background-repeat: no-repeat; 34 | background-size: cover; 35 | background: #000; 36 | } 37 | 38 | .splashScreen img { 39 | max-width: 100%; 40 | position: absolute; 41 | right: 0; 42 | } 43 | 44 | .subcount { 45 | color: #16c13f !important; 46 | font-weight: bold; 47 | } 48 | 49 | .physicsWin { 50 | position: absolute; 51 | top: 0; 52 | width: 100%; 53 | height: 100%; 54 | } 55 | 56 | .splashtext { 57 | position: absolute; 58 | top: 0; 59 | width: 100%; 60 | height: 100%; 61 | } 62 | 63 | .description { 64 | width: 60%; 65 | height: 100%; 66 | padding-top: 40px; 67 | display: flex; 68 | flex-direction: column; 69 | align-items: center; 70 | } 71 | 72 | .description .title { 73 | position: relative; 74 | display: flex; 75 | height: 150px; 76 | } 77 | 78 | .titleLetters { 79 | position: relative; 80 | color: #fefefe; 81 | font-size: 96px; 82 | text-align: right; 83 | font-family: 'Monoton', cursive; 84 | /* font-family: 'Bungee Outline', cursive; */ 85 | transition: 0.2s all ease-in-out; 86 | cursor: pointer; 87 | } 88 | 89 | .titleLetters:hover { 90 | margin-top: -12px; 91 | font-size: 108px; 92 | font-weight: bold; 93 | transition: 0.2s all ease-in-out; 94 | } 95 | 96 | .slogan { 97 | color: #fefefe; 98 | font-size: 56px; 99 | /* font-weight: bold; */ 100 | text-align: center; 101 | font-family: 'East Sea Dokdo', cursive; 102 | } 103 | 104 | .gamedesc { 105 | width: 75%; 106 | padding: 40px 0; 107 | display: flex; 108 | flex-direction: column; 109 | align-items: center; 110 | } 111 | 112 | .gamedesc span { 113 | width: 80%; 114 | font-size: 18px; 115 | color: #f1f1f1; 116 | text-align: left; 117 | } 118 | 119 | .divider { 120 | height: 150px; 121 | overflow: hidden; 122 | max-width: 100%; 123 | margin-top: -150px; 124 | pointer-events: none; 125 | filter: drop-shadow(0 -3px 0px rgba(74, 74, 74, 0.75)); 126 | } 127 | 128 | h1 { 129 | color: white; 130 | } 131 | 132 | .gamedetails { 133 | width: 100%; 134 | /* overflow-x: hidden; */ 135 | } 136 | 137 | .gamepara { 138 | position: relative; 139 | display: flex; 140 | min-height: 600px; 141 | margin: 30px 0; 142 | } 143 | 144 | .floaterCont { 145 | display: none; 146 | position: absolute; 147 | top: 0; 148 | left: 0; 149 | width: 100%; 150 | height: 100%; 151 | } 152 | 153 | .floater { 154 | --time: 20s; 155 | --amount: 5; 156 | --fill: #fefefe; 157 | position: absolute; 158 | right: 0; 159 | width: 300px; 160 | height: 300px; 161 | filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.82)); 162 | } 163 | 164 | .imagecont { 165 | position: relative; 166 | width: 50%; 167 | padding: 100px 0; 168 | display: flex; 169 | flex-direction: column; 170 | align-items: center; 171 | } 172 | 173 | .imagecont .paratitle { 174 | display: none; 175 | } 176 | 177 | .paraimage { 178 | position: relative; 179 | width: auto; 180 | height: 400px; 181 | max-width: 100%; 182 | max-height: 100%; 183 | /* border-radius: 5%; */ 184 | border: 2px solid #dacfcf; 185 | /* transform-origin: bottom right; */ 186 | /* transform: rotateZ(4deg); */ 187 | transition: 0.5s all ease-in-out; 188 | z-index: 1; 189 | } 190 | 191 | .imageframe { 192 | position: relative; 193 | width: 400px; 194 | height: 400px; 195 | margin-top: -8px; 196 | max-width: 100%; 197 | max-height: 100%; 198 | background: none; 199 | border: 10px solid #dacfcf; 200 | z-index: 0; 201 | transition: 0.5s all ease-in-out; 202 | } 203 | 204 | .levelintro { 205 | position: absolute; 206 | bottom: 0; 207 | width: 400px; 208 | height: 40px; 209 | margin-top: 30px; 210 | max-width: 100%; 211 | z-index: 2; 212 | color: rgba(221, 219, 219, 0.72); 213 | } 214 | 215 | #puzzleImg { 216 | cursor: pointer; 217 | } 218 | 219 | #fewords { 220 | text-align: center; 221 | } 222 | 223 | #firstCont:hover .paraimage { 224 | transform: rotateZ(10deg); 225 | } 226 | 227 | #firstCont:hover .imageframe { 228 | transform: rotateZ(-6deg); 229 | } 230 | 231 | .hiddenPhoto{ 232 | display: none; 233 | } 234 | 235 | .paracol { 236 | width: 50%; 237 | display: flex; 238 | flex-direction: column; 239 | padding: 100px; 240 | cursor: default; 241 | mix-blend-mode: difference; 242 | } 243 | 244 | .paratitle { 245 | font-size: 56px; 246 | font-weight: bold; 247 | color: #fcfcfc; 248 | } 249 | 250 | .paratext { 251 | font-size: 22px; 252 | margin: 50px 0; 253 | color: #e3e3e3; 254 | } 255 | 256 | .paratext mark { 257 | background: inherit; 258 | color: #478bf5; 259 | } 260 | 261 | .subscribeCont { 262 | width: 100%; 263 | min-height: 150px; 264 | display: grid; 265 | place-items: center; 266 | } 267 | 268 | .subscribe { 269 | position: relative; 270 | width: 500px; 271 | height: 60px; 272 | background: #090909; 273 | border-radius: 35px; 274 | display: flex; 275 | justify-content: space-between; 276 | align-items: center; 277 | padding: 5px; 278 | border: 2px solid rgba(66, 66, 66, 0.7); 279 | /* overflow: hidden; */ 280 | } 281 | 282 | .subinp { 283 | width: 70%; 284 | height: 90%; 285 | margin: auto; 286 | margin-left: 20px; 287 | background: inherit; 288 | font-size: 1.1em; 289 | font-family: inherit; 290 | color: #d8dde2; 291 | border: 0 solid #fefefe; 292 | border-bottom: 2px; 293 | } 294 | 295 | .subinp:-webkit-autofill, 296 | .subinp:-webkit-autofill:hover, 297 | .subinp:-webkit-autofill:focus, 298 | .subinp:-webkit-autofill:active { 299 | -webkit-box-shadow: 0 0 0 30px #090909 inset; 300 | -webkit-text-fill-color: #d8dde2; 301 | outline: none; 302 | } 303 | 304 | .subtn { 305 | border: none; 306 | background: #1c1a1a; 307 | width: 120px; 308 | height: 100%; 309 | border-radius: 30px; 310 | font-size: 1em; 311 | color: #3d83db; 312 | font-weight: bold; 313 | font-family: inherit; 314 | transition: 0.2s all ease-in-out; 315 | cursor: pointer; 316 | } 317 | 318 | button:disabled { 319 | cursor: not-allowed; 320 | } 321 | 322 | .subtn:enabled:hover { 323 | transform: scale(1.05); 324 | background: #1977b4; 325 | color: #fefefe; 326 | } 327 | 328 | .subtxt { 329 | width: 100%; 330 | height: 50px; 331 | display: grid; 332 | place-items: center; 333 | } 334 | 335 | .subtxt span { 336 | /* padding: 0 20px; */ 337 | width: 550px; 338 | max-width: 100%; 339 | color: rgba(196, 196, 196, 0.84); 340 | } 341 | 342 | .checkCont { 343 | position: relative; 344 | width: 60px; 345 | height: 100%; 346 | } 347 | 348 | .checkmark, .cross { 349 | z-index: 1; 350 | font-size: 42px !important; 351 | padding: 9px; 352 | color: #14ba3c; 353 | background: inherit; 354 | transform-origin: center; 355 | transform: scale(1); 356 | animation: popup 1s ease-in-out; 357 | } 358 | 359 | .cross { 360 | color: #e7272a; 361 | } 362 | 363 | .twit { 364 | z-index: 1; 365 | font-size: 42px !important; 366 | padding: 0 15px; 367 | margin-top: 5px; 368 | color: #1da1f2; 369 | background: inherit; 370 | transform-origin: center; 371 | transform: scale(1); 372 | animation: popup 1s ease-in-out; 373 | transition: 0.5s ease-in-out; 374 | } 375 | 376 | .twit:hover { 377 | transform: scale(1.1); 378 | transition: 0.5s ease-in-out; 379 | } 380 | 381 | .checkCont::before { 382 | content: ""; 383 | position: absolute; 384 | top: 0; 385 | left: 0; 386 | width: calc(100% - 8px); 387 | height: calc(100% - 8px); 388 | background: inherit; 389 | border: 4px solid #12a435; 390 | border-radius: 50%; 391 | opacity: 0; 392 | animation: popupfade 1s ease-in-out; 393 | } 394 | 395 | .crossCont::before { 396 | display: none; 397 | } 398 | 399 | @keyframes popup { 400 | 0% { 401 | transform: scale(0); 402 | } 403 | 404 | 60% { 405 | transform: scale(1); 406 | } 407 | 408 | 80% { 409 | transform: scale(0.8); 410 | } 411 | 412 | 100% { 413 | transform: scale(1); 414 | } 415 | } 416 | 417 | @keyframes popupfade { 418 | 0% { 419 | transform: scale(0.3); 420 | opacity: 1; 421 | } 422 | 423 | 100% { 424 | transform: scale(1.2); 425 | opacity: 0; 426 | } 427 | } 428 | 429 | .thankscontainer { 430 | width: calc(100% - 60px); 431 | height: 100%; 432 | display: flex; 433 | align-items: center; 434 | overflow: hidden; 435 | } 436 | 437 | .thanks, .errortext { 438 | position: relative; 439 | width: 100%; 440 | margin: 0; 441 | padding: 0 10px; 442 | font-size: 1.5em; 443 | font-family: inherit; 444 | background: inherit; 445 | color: #38e685; 446 | transform-origin: right; 447 | animation: slide 1s ease-in-out; 448 | } 449 | 450 | .errortext { 451 | color: #e63838; 452 | } 453 | 454 | .errortext a { 455 | color: #1573d2; 456 | } 457 | 458 | @keyframes slide { 459 | from { 460 | transform: translateX(-100%); 461 | } 462 | 463 | to { 464 | transform: translateX(0); 465 | } 466 | } 467 | 468 | .subsband { 469 | width: 100%; 470 | height: 180px; 471 | display: grid; 472 | place-items: center; 473 | background: #2f7de2; 474 | } 475 | 476 | .subbutton { 477 | max-width: 100%; 478 | width: 200px; 479 | padding: 15px 30px; 480 | background: #fefefe; 481 | font-size: 1.5em; 482 | color: #1560c2; 483 | text-align: center; 484 | font-weight: bold; 485 | border-radius: 10px; 486 | box-shadow: 2px 2px 20px 2px rgba(26, 42, 194, 0.66); 487 | } 488 | 489 | .subbutton a { 490 | color: inherit; 491 | text-decoration: none; 492 | } 493 | 494 | .puzzleCont { 495 | width: 100%; 496 | padding: 40px 0; 497 | /* max-height: 120px; */ 498 | display: grid; 499 | place-items: center; 500 | background: #131313; 501 | } 502 | 503 | .puzzIcon { 504 | display: flex; 505 | /* flex-direction: column; */ 506 | align-items: center; 507 | cursor: pointer; 508 | } 509 | 510 | .puzzIcon svg { 511 | fill: #fefefe; 512 | width: 1.5em; 513 | height: 1.5em; 514 | animation: rotate 4s linear infinite; 515 | } 516 | 517 | .puzzIcon span { 518 | margin: 0 10px; 519 | } 520 | 521 | @keyframes rotate { 522 | from { 523 | transform: rotateZ(0deg); 524 | } 525 | 526 | to { 527 | transform: rotateZ(360deg); 528 | } 529 | } 530 | 531 | .puzzleCont span { 532 | font-size: 1.1em; 533 | color: #fefefe; 534 | text-align: center; 535 | } 536 | 537 | .puzzleCont a { 538 | color: #1fee57; 539 | font-weight: bold; 540 | text-decoration: underline; 541 | } 542 | 543 | .hiddenpuzz { 544 | display: flex; 545 | align-items: center; 546 | justify-content: space-around; 547 | animation: fadeIn 1s ease-in-out; 548 | } 549 | 550 | @keyframes fadeIn { 551 | from { 552 | opacity: 0; 553 | } 554 | 555 | to { 556 | opacity: 1; 557 | } 558 | } 559 | 560 | .hiddenpuzz span { 561 | font-size: 1.1em; 562 | color: #fefefe; 563 | text-align: center; 564 | } 565 | 566 | .secretPuzz { 567 | width: 200px; 568 | height: 10px; 569 | margin: 0 20px; 570 | background: #121212; 571 | padding: 10px; 572 | font-size: 1.1em; 573 | font-family: inherit; 574 | color: #d8dde2; 575 | border: 2px solid #dbd3d3; 576 | border-radius: 18px; 577 | transition: 0.3s all ease-in-out; 578 | } 579 | 580 | .correctAns { 581 | border: 2px solid #0d9a45; 582 | background: rgba(39, 219, 100, 0.1); 583 | } 584 | 585 | .wrongAns { 586 | border: 2px solid #c20d0d; 587 | background: rgba(232, 71, 71, 0.1); 588 | } 589 | 590 | .hiddenpuzz button { 591 | height: 38px; 592 | background: #2f7de2; 593 | color: #fefefe; 594 | font-weight: bold; 595 | font-family: inherit; 596 | border-radius: 20px; 597 | display: grid; 598 | place-items: center; 599 | } 600 | 601 | .hiddenpuzz button:hover { 602 | background: #2f7de2; 603 | color: #fefefe; 604 | } 605 | 606 | .textDivider { 607 | display: none; 608 | } 609 | 610 | .loaderEmail { 611 | margin: 6px 12px 0 0; 612 | } 613 | 614 | .prolayout { 615 | width: 100%; 616 | height: 600px; 617 | position: relative; 618 | overflow-y: hidden; 619 | } 620 | 621 | .prolayout::after { 622 | content: ""; 623 | position: absolute; 624 | bottom: 0; 625 | left: 0; 626 | width: 100%; 627 | height: 100px; 628 | background-image: linear-gradient(rgba(17, 17, 17, 0) 0%, rgb(17, 17, 17) 100%); 629 | background-color: initial; 630 | background-repeat: no-repeat; 631 | pointer-events: none; 632 | z-index: 10; 633 | } 634 | 635 | .probtn{ 636 | position: absolute; 637 | bottom: 20px; 638 | left: 50%; 639 | padding: 8px 10px; 640 | border-radius: 10px; 641 | color: #fefefe; 642 | cursor: pointer; 643 | background: #171717; 644 | font-size: 0.8em; 645 | z-index: 20; 646 | box-shadow: 2px 2px 12px rgba(15, 15, 15, 0.4); 647 | } 648 | 649 | .videobar{ 650 | width: 100%; 651 | display: flex; 652 | margin-top: 36px; 653 | align-items: center; 654 | flex-direction: column; 655 | } 656 | 657 | .videocard{ 658 | width: auto; 659 | padding: 16px; 660 | max-width: 90%; 661 | border-radius: 12px; 662 | background: #141414; 663 | box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.6); 664 | } 665 | 666 | .videocard iframe{ 667 | width: 800px; 668 | height: 500px; 669 | } 670 | 671 | .extratweet{ 672 | position: absolute; 673 | right: -64px; 674 | filter: drop-shadow(2px 2px 12px rgba(0, 117, 255, 0.25)); 675 | } 676 | -------------------------------------------------------------------------------- /src/cards.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const IntroCard = (props)=>{ 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
const person = {"{"}                                
13 |
  pseudoName: "Blue",   
14 |
  lastname: "Edge",
15 |
  age: "little more than the age of the earth",
16 |
  gender: "Male",
17 |
  hobbies: ["Breathing",
18 |
            "Programming",
19 |
            "Playing video Games",
20 |
            "hiding dead bodies"],
21 |
  
22 |
  state: "oblivion",
23 |
  funFact: "sdrawkcab etirw nac I"
24 |
{"}"}
25 |
26 |
27 | ) 28 | } 29 | 30 | export const LangCard = (props)=>{ 31 | return ( 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
const skills = {"{"}                       
40 |
  Python : "Intermediate",    
41 |
  React: "Intermediate",
42 |
  NodeJs: "Intermediate",
43 |
  Javascript: "Expert",
44 |
  CSS: "Intermediate",
45 |
  Git: "Expert",
46 |
  Azure: "Intermediate",
47 |
  MongoDB: "Expert",
48 |
  Unity: "Beginner",
49 |
  Blender: "Intermediate",
50 |
  Life: "Beginner"
51 |
{"}"}
52 |
53 |
54 | ) 55 | } 56 | 57 | export const SocialCard = (props)=>{ 58 | const stoprop = (e)=>{ 59 | e.stopPropagation(); 60 | } 61 | 62 | return ( 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
const socialLinks = {"{"}
71 |
  github: 
 72 |           "github.com/blueedgetechno"
 74 |         ,
75 |
  twitter: 
 76 |           "twitter.com/blueedgetechno"
 78 |           
 79 |           ,
80 |
  codeforces: 
 81 |           "codeforces.com/profile/blueedge"
 83 |           
 84 |         ,
85 |
  gmail: 
 86 |           "blueedgetechno@gmail.com"
 88 |           
 89 |         ,
90 |
  spotify: 
 91 |           "../user/62axxw0etmycj09el078cock0"
 93 |           
 94 |         ,
95 |
  behance: 
 96 |           "behance.net/blueedgetechno"
 98 |           
 99 |         ,
100 |
  codepen: 
101 |           "codepen.io/blueedgetechno"
103 |           
104 |         ,
105 |
  dev: 
106 |           "dev.to/blueedgetechno"
108 |           
109 |         ,
110 |
  stackoverflow: 
111 |           "../users/12115721/blue-edge"
113 |           
114 |         ,
115 |
  discord: 
116 |           "@blueedgetechno"
118 |           
119 |         
120 |
  youtube: 
121 |           "../channel/UCozhS3MxzCGrPTffh0mqArw"
123 |           
124 |         
125 |
{"}"}
126 |
127 |
128 | ) 129 | } 130 | 131 | export const ProjectCard = (props)=>{ 132 | return ( 133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
const projects = {"{"}                               
141 |
  BlueBlogs: "A social blogging platform for nerds"
142 |
            +"made in flask",
143 |
  
144 |
  TheINTELLECTS: "A platform meant for engineering"
145 |
{" "}{" "}{"   "} +"pupils made in expressJs, ejs & mongoDB",
146 |
  
147 |
  codeblue:"Atom package to help during codeforces"
148 |
{" "}{" "}{"   "}   +"contest, made in ReactJs and Less.js",
149 |
  
150 |
  BlueChats: "A desktop messaging application"
151 |
{" "}{" "}{"   "}  +"made in Electron, expressJs & MongoDB"
152 |
{"}"} // And that's just the tip of the iceberg
153 |
154 |
155 | ) 156 | } 157 | -------------------------------------------------------------------------------- /src/components/unescape/unescape.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | import { TailSpin } from "react-loader-spinner" 3 | import axios from "axios" 4 | 5 | import "./unescape.css" 6 | import "./responsive.css" 7 | 8 | import Progress from "./progress.js" 9 | import SplashScreen from "../../assets/img/unescape/splash.jpg" 10 | import unexp from "../../assets/img/unescape/unexp.png" 11 | 12 | import Fade from "react-reveal/Fade" 13 | import Button from "@mui/material/Button" 14 | 15 | import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded" 16 | import CancelRoundedIcon from "@mui/icons-material/CancelRounded" 17 | import ExtensionIcon from "@mui/icons-material/Extension" 18 | import TwitterIcon from "@mui/icons-material/Twitter" 19 | 20 | var blueapi = "https://bluewebapi.netlify.app/.netlify/functions/index/api/" 21 | if (process.env.REACT_APP_BLUEAPI != null) { 22 | blueapi = process.env.REACT_APP_BLUEAPI 23 | } 24 | 25 | export default function Unescape() { 26 | const [email, setEmail] = useState("") 27 | const [isLegal, setLegal] = useState(false) 28 | const [emailsent, setSent] = useState(false) 29 | const [isWait, setWait] = useState(false) 30 | const [isError, setError] = useState(false) 31 | const [message, setMessage] = useState("An error occured...") 32 | const [picture, setPicture] = useState(0) 33 | const [subcount, setSubcount] = useState(0) 34 | const [proHeight, setHeight] = useState(600) 35 | 36 | useEffect(() => { 37 | var url = `${blueapi}count` 38 | try { 39 | axios 40 | .get(url) 41 | .then((res) => { 42 | if (res && res.data && res.data.status == 200) { 43 | setSubcount(res.data.result) 44 | } 45 | }) 46 | .catch(console.log) 47 | } catch (err) { 48 | console.log(err) 49 | } 50 | }, [emailsent]) 51 | 52 | const [showPuzz, setShowPuzz] = useState(() => { 53 | if (localStorage.getItem("showPuzz") == "true") { 54 | return true 55 | } else { 56 | console.log("False, I guess why") 57 | return false 58 | } 59 | }) 60 | 61 | const [isHidden, setHidden] = useState(true) 62 | const [secpuz, setSecpuz] = useState("") 63 | const [inputClass, setInputClass] = useState("") 64 | const [prompt, setPrompt] = useState("type here...") 65 | const [isCorrect, setisCorrect] = useState(false) 66 | 67 | const insights = [ 68 | "img/pinlock.png", 69 | "img/slidepuzz.png", 70 | "img/suitcasePuzz.png", 71 | "img/devquote.png", 72 | "img/brokenStar.png", 73 | ] 74 | 75 | const words = [ 76 | "The universe is the key", 77 | "Sometimes symmetry act as a helping hand", 78 | "Abstraction is the virtue of this game", 79 | "Small details that can create big pictures", 80 | "A profound sense of incompleteness", 81 | ] 82 | 83 | const msg = 84 | "Subscribe%20to%20the%20game%20Unescape%2C%20%40blueedgetechno%20is%20working%20on.%0A%0AA%203d%20game%2C%20full%20of%20secrets%20and%20puzzles%20to%20test%20your%20critical%20thinking%20throughout%20the%20way.%0A%0Asubscribe%20now%3A%20https%3A%2F%2Fblueedge.me%2Funescape%0A%0Ahttps://www.youtube.com/watch?v=m0EHSoZzHEA" 85 | 86 | const checkEmail = (ele) => { 87 | setLegal(ele.target.checkValidity() && ele.target.value != "") 88 | setEmail(ele.target.value) 89 | } 90 | 91 | const sendRequest = (e) => { 92 | if (isLegal) { 93 | e.preventDefault() 94 | console.log(email) 95 | setWait(true) 96 | 97 | var url = blueapi.replace(/\/+$/, "") 98 | 99 | const body = { 100 | email: email, 101 | token: null, 102 | } 103 | 104 | window.onCaptchaClick((token) => { 105 | url += `?email=${body.email}&token=${token}` 106 | 107 | axios 108 | .post(url, body) 109 | .then((res) => { 110 | if (res.data.status == 200) { 111 | setWait(false) 112 | setSent(true) 113 | setShowPuzz(true) 114 | if (localStorage.getItem("showPuzz") != "true") { 115 | setTimeout(() => { 116 | window.location = "/unescape#puzzContainer" 117 | }, 2000) 118 | } 119 | localStorage.setItem("showPuzz", "true") 120 | localStorage.setItem("email", body.email) 121 | } else { 122 | if (res.data.message.includes("duplicate key")) { 123 | setMessage("Email already exist") 124 | } 125 | setError(true) 126 | setWait(false) 127 | } 128 | }) 129 | .catch((err) => { 130 | setError(true) 131 | setWait(false) 132 | }) 133 | }) 134 | } 135 | } 136 | 137 | const placeSec = (ele) => { 138 | if (!isCorrect) { 139 | setSecpuz(ele.target.value) 140 | setInputClass("") 141 | setPrompt("") 142 | } 143 | } 144 | 145 | const checkSec = () => { 146 | if ( 147 | secpuz.length <= 10 && 148 | !isCorrect && 149 | secpuz.toLowerCase() == process.env.REACT_APP_SECRET_PUZZ 150 | ) { 151 | setisCorrect(true) 152 | setInputClass("correctAns") 153 | } else if (!isCorrect) { 154 | setSecpuz("") 155 | setPrompt("Wrong password") 156 | setInputClass("wrongAns") 157 | } 158 | } 159 | 160 | const incHeight = () => { 161 | var pheight = document.getElementById("progress").offsetHeight 162 | if (pheight > proHeight) { 163 | setHeight(Math.min(proHeight + 4800, pheight)) 164 | } else { 165 | setHeight(-1) 166 | } 167 | } 168 | 169 | document.body.dataset.page = "unescape" 170 | 171 | return ( 172 |
173 |
174 |
175 | 176 |
177 |
178 |
179 |
U
180 |
n
181 |
e
182 |
s
183 |
c
184 |
a
185 |
p
186 |
e
187 |
188 |
A picture of possibilities
189 |
190 | 191 | A house full of rooms with hidden secrets and competitive 192 | puzzles which will lead you to the truth of your very 193 | existence 194 | 195 |
196 |
197 |
198 | {(emailsent == false) & !isError ? ( 199 | 208 | ) : null} 209 | 210 | {(emailsent == false) & (isWait == false) & !isError ? ( 211 | 217 | ) : null} 218 | 219 | {(emailsent == false) & (isWait == true) & !isError ? ( 220 | 226 | ) : null} 227 | 228 | {emailsent & !isError ? ( 229 |
230 | 231 |
232 | ) : null} 233 | 234 | {emailsent & !isError ? ( 235 |
236 | Thanks for subscribing 237 | 246 | 247 | 248 |
249 | ) : null} 250 | 251 | {!(emailsent & !isError) ? ( 252 | 262 | 263 | 264 | ) : null} 265 | 266 | {isError ? ( 267 |
268 | 269 |
270 | ) : null} 271 | 272 | {isError ? ( 273 |
274 | 275 | {message} (click to retry) 276 | 277 |
278 | ) : null} 279 |
280 |
281 |
282 | 283 | Subscribe to the waiting list to be among the first to know 284 | when the game is available! 285 | {subcount != " " ? ( 286 | 287 |
288 | {subcount} peoples have 289 | subscribed so far. 290 |
291 | ) : null} 292 |
293 |
294 |
295 |
296 |
297 |
298 | 302 | 306 | 307 |
308 |
309 |
310 |
311 | 317 |
318 |
319 |
320 | 321 |
322 |
The realm of reality
323 |
324 | unexp 325 |
326 |
327 | - A still from the ongoing game unescape 328 |
329 |
330 |
331 | 332 |
333 |
The realm of reality
334 |
335 | A 3d game, full of{" "} 336 | secrets and puzzles to test your 337 | critical thinking throughout the way. 338 |
339 |
340 | In this immersive point & click puzzler, you will 341 | face 342 | multiples levels of growing difficulty with 343 | interactive puzzles and tasks. 344 |
345 |
346 |
347 |
348 |
349 | 350 |
351 |
The state of subjectivity
352 |
353 | The game offers a variety of puzzles and tasks 354 | that will challenge your{" "} 355 | problem-solving 356 | and lateral thinking skills. 357 |
358 |
359 | The number and difficulty of puzzles 360 | will 361 | increase as you progress through the game and 362 | some problems require you to think{" "} 363 | outside the box 📦. 364 |
365 |
366 |
367 | 368 |
369 |
The state of subjectivity
370 |
{ 373 | setPicture((picture + 1) % 5) 374 | }}> 375 | {insights.map((imgsrc, xi) => { 376 | return ( 377 | 383 | ) 384 | })} 385 |
386 |
387 | {words[picture]} 388 |
389 |
390 |
391 |
392 |
393 |
0 ? "prolayout" : ""} 395 | style={{ 396 | height: proHeight > 0 ? proHeight + "px" : "auto", 397 | maxHeight: "max-content", 398 | }}> 399 | 400 | {proHeight > 0 ? ( 401 |
402 | Expand 403 |
404 | ) : null} 405 |
406 |
407 | {isHidden && showPuzz ? ( 408 |
{ 411 | setHidden(false) 412 | }}> 413 | 414 | Click me 415 |
416 | ) : null} 417 | {!isHidden && !isCorrect ? ( 418 |
419 | 420 | If you have noticed there's is a hidden password (atmost 10 421 | letters) on this website. Find it to unlock a surprise 422 | 423 | 430 | 433 |
434 | ) : null} 435 | {isCorrect ? ( 436 | 437 | Correct !!{" "} 438 | 439 | Here you go 440 | {" "} 441 | . . . , Thanks me later 442 | 443 | ) : null} 444 |
445 |
446 | 447 |
Subscribe Now !!
448 |
449 |
450 |
451 |
452 | ) 453 | } 454 | --------------------------------------------------------------------------------