Modified Project page

Sidhant-raj · Dec 26, 2022 · 77c972f · 77c972f
1 parent 5c0fd32
commit 77c972f
Show file tree

Hide file tree

Showing 6 changed files with 368 additions and 28 deletions.
diff --git a/components/Header/header.module.css b/components/Header/header.module.css
@@ -2,6 +2,7 @@
   width: 100%;
   height: 80px;
   line-height: 80px;
+  background-color: #0e1630;
 }
 
 .nav__wrapper {
@@ -23,6 +24,7 @@
   display: flex;
   align-items: center;
   column-gap: 2.8rem;
+  background-color: #0e1630;
 }
 
 .nav__menu a,

diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "next": "12.1.6",
     "next-auth": "^4.18.7",
     "react": "18.2.0",
+    "react-browser-ui": "^1.3.5",
+    "react-device-detect": "^2.2.2",
     "react-dom": "18.2.0",
     "react-slick": "^0.29.0",
     "react-terminal": "^1.3.0",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,10 +1,10 @@
-import "../styles/globals.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "remixicon/fonts/remixicon.css";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { Analytics } from "@vercel/analytics/react";
 import { SessionProvider, signIn, useSession } from "next-auth/react";
+import "../styles/globals.css";
 
 import Layout from "../components/Layout/Layout";
 import Script from "next/script";

diff --git a/pages/projects/js/tic-tac-toe.jsx b/pages/projects/js/tic-tac-toe.jsx
@@ -1,4 +1,9 @@
 import { Container, Row, Col, Button } from "reactstrap";
+import Browser, { Chrome } from "react-browser-ui";
+import { isMobile } from "react-device-detect";
+
+const { Tab } = Chrome;
+
 import { useSession, signIn } from "next-auth/react";
 const Page = () => {
   const { status } = useSession();
@@ -17,42 +22,64 @@ const Page = () => {
 
   return (
     <Container className="my-5">
-      <h3>Tic Tac Toe Game</h3>
+      <h3>Tic Tac Toe Game </h3>
       <Container className="my-3" />
 
       <Row>
-        <Col>
+        <Col sm="12" lg="6" md="6">
           <iframe
-            width="720"
+            width="100%"
             height="405"
             src="https://www.youtube.com/embed/lKe57l8sttw"
             title="YouTube video player"
             frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen={true}
+            allowfullscreen
           ></iframe>
         </Col>
-        <Col>
-          <Button color="success" style={{ height: "100%", width: "100%" }}>
-            Download
-          </Button>
+        <Col hidden={isMobile} sm="12" lg="6" md="6">
+          <div
+            style={{ background: "#fff", borderRadius: "10px", height: "100%" }}
+          >
+            <Browser activeTabKey={"main"} type={"chrome"}>
+              <Tab key={"main"} title={"Tic Tac Toe"}>
+                <div style={{ height: "100%" }}>
+                  <iframe
+                    width="100%"
+                    height="100%"
+                    src="https://ymiic3.csb.app/"
+                  />
+                </div>
+              </Tab>
+            </Browser>
+          </div>
         </Col>
       </Row>
 
-      <iframe
-        src="https://codesandbox.io/embed/frosty-lake-ymiic3?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
-        style={{
-          width: "100%",
-          height: "600px",
-          border: "1px solid",
-          margin: "40px 0px",
-          borderRadius: "4px",
-          overflow: "hidden",
-        }}
-        title="frosty-lake-ymiic3"
-        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-      ></iframe>
+      <Row>
+        <Col lg="12" sm="12" md="12">
+          <iframe
+            src="https://codesandbox.io/embed/frosty-lake-ymiic3?fontsize=14&hidenavigation=1&theme=dark&view=editor"
+            style={{
+              width: "100%",
+              height: "600px",
+              border: "1px solid",
+              margin: "40px 0px",
+              borderRadius: "4px",
+              overflow: "hidden",
+            }}
+            title="frosty-lake-ymiic3"
+            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+          ></iframe>
+        </Col>
+      </Row>
+      <h3>
+        <a href="/files/code/tic-tac-toe.zip">
+          <i className="ri-download-line"></i> Click here to download source
+          code
+        </a>
+      </h3>
     </Container>
   );
 };

diff --git a/styles/globals.css b/styles/globals.css
@@ -10,6 +10,7 @@ body {
   margin: 0;
   font-family: "Quicksand", sans-serif;
   scroll-behavior: smooth;
+  background: #0e1630;
 }
 
 .border-cool {
@@ -25,7 +26,6 @@ a {
 
 * {
   box-sizing: border-box;
-  background: #0e1630;
 }
 
 p {