Fixed the previous PR as well as add some new things

README.md

@@ -2,6 +2,12 @@
 
 This is a personal website made by TheRed, all of the source code is available!
 
+## All PRs are welcome! Thanks for the nice people who make them.
+
+### This website can be used for basically anything you want. However, you must comply with the current license!
+
+### As of right now, there is no license, but GPLv3 will be implemented soon.
+
 This website uses `Next.JS`.
 
 You can run the website in dev mode using:
@@ -16,4 +22,6 @@ Then run it using:
 
 - `yarn start` or `npm start`
 
-Pretty simple.
+Pretty simple.
+
+~ Now in BETA!

components/content.js

@@ -2,6 +2,7 @@ import styles from "../styles/Content.module.css";
 import Image from "next/image";
 import Socials from "./socials";
 import TrianglesBG from "./trianglesbg";
+import Link from "next/link"
 
 export default function Content() {
     return <>
@@ -10,7 +11,7 @@ export default function Content() {
                 <p className={styles.bigboiheader}>TheRed</p>
                 <Socials />
             </div>
-            <div className={styles.Quote}>Hey there! Welcome to my website. I'm a full-stack developer, mostly specializing in web and app development. I'm currently working on a project called Chatsy, as well as some others! You can check them out <a href="/projects" className={styles.Link}>here</a>.</div>
+            <div className={styles.Quote}>Hey there! Welcome to my website. I'm a full-stack developer, mostly specializing in web and app development. I'm currently working on a project called Chatsy, as well as some others! You can check them out <Link href="/projects"><a className={styles.Link}>here</a></Link>.</div>
         </div>
     </>
 }

components/navbar.js

@@ -5,9 +5,9 @@ export default function Navbar() {
     return <>
         <div className={styles.NavBarBackbone}></div>
         <div className={styles.NavBar}>
-            <a href="/"><button>Home</button></a>
-            <a href="/projects"><button>Projects</button></a>
-            <a href="/privacy"><button>Privacy</button></a>
+            <Link href="/"><a><button>Home</button></a></Link>
+            <Link href="/projects"><a><button>Projects</button></a></Link>
+            <Link href="/privacy"><a><button>Privacy</button></a></Link>
         </div>
     </>
 }

components/redirect.js

@@ -1,11 +1,14 @@
 import styles from '../styles/Redirect.module.css'
+import Link from "next/link"
 
 export default function Redirect(props) {
     {
         switch(props.page) {
             case 'home':
                 return <div className={styles.Home}>
-                    <a href='/' className={styles.Link}><i className="fas fa-home" style={{paddingRight: "10px"}}/>Go back to {(props.page+'').split('')[0].toUpperCase()+(props.page+'').substring(1,props.page.length)}<span style={{padding:"10px"}}/>|<span style={{padding:"10px"}}/>TheRed</a>
+                    <Link href="/">
+                    <a className={styles.Link}><i className="fas fa-home" style={{paddingRight: "10px"}}/>Go back to {(props.page+'').split('')[0].toUpperCase()+(props.page+'').substring(1,props.page.length)}<span style={{padding:"10px"}}/>|<span style={{padding:"10px"}}/>TheRed</a>
+                    </Link>
                 </div>
         }
     }

components/trianglesbg.js

@@ -1,15 +1,7 @@
 export default function TrianglesBG() {
     return (
         <div style={{width: '100vw', height: '100vh', position: 'absolute', top: '0', left: '0', zIndex: '0', color: 'white'}} className="steve">
-            {/* <script defer>
-                const scene = new THREE.Scene();
-                const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-
-                const renderer = new THREE.WebGLRenderer();
-                renderer.setSize( window.innerWidth, window.innerHeight );
-                document.getElementsByClassName('steve')[0].appendChild( renderer.domElement );
-            </script> */}
-            <div width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw'}}/>
+            <div className="whatIsItLikeInsideSteve" width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw', backgroundPositionX: '0px'}}/>
         </div>
     )
 }

pages/index.js

@@ -11,6 +11,7 @@ import Textbox from '../components/textbox'
 export default function Home() {
   return (
     <>
+      <script src='/scripts/bg.js' defer></script>
       <Head>
       <title>TheRed.SH / Home</title>
       </Head>

public/scripts/bg.js

@@ -0,0 +1,4 @@
+setInterval(function() {
+    console.log(document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style)
+    document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style['background-position-x'] = parseInt(document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style['background-position-x'].split('px')[0])+100+'px';
+}, 10);

styles/globals.css

@@ -46,6 +46,9 @@ a {
   scale: 1.4;
   user-select: none;
 }
+.whatIsItLikeInsideSteve {
+  background-position-x: 0px
+}
 
 * {
   box-sizing: border-box;