someone sent nsfw so i fixed that

components/article.js

@@ -3,6 +3,7 @@ import styles from '../styles/Article.module.css';
 export default function Article(props) {
     return (
         <>
+        <title>TheRed.SH / Article</title>
         <div className={styles.Article}>
             {props.children}
         </div>

components/background.js

@@ -0,0 +1,66 @@
+import styles from '../styles/Background.module.css';
+
+export default function Background() {
+    return (
+        <>
+        <div className={styles.actualbackgroundfunny}></div>
+        <div className={styles.main}>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'2vh', left:'0.5vw'}}>
+                function TheRed() {'{'}<br/>
+                    <span className={styles.tab}/>console.log('is this explosive?');<br/>
+                {'}'}
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{bottom:'5vh',right:'2vw'}}>
+                function Website() {'{'}<br/>
+                    <span className={styles.tab}/>console.log('Feeling absolutely great!');<br/>
+                {'}'}
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{bottom:'50vh',right:'5vw'}}>
+                // WHAT DID YOU JUST SAY TO ME
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{bottom:'15vh',left:'5vw'}}>
+                // THIS IS NOT TERRIBLE DESIGN! THIS IS INNOVATIVE!
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'20vh',right:'5vw'}}>
+                function justARandomPieceOfCode() {'{'}<br/>
+                    <span className={styles.tab}/>console.log('very funny');<br/>
+                {'}'}
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'22vh',left:'3vw'}}>
+                // please don't tell me this is not good enough for beta 2 alpha 1 ;-;
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'35vh',right:'20vw'}}>
+                // shit has went down ;-;
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'5vh',right:'5vw'}}>
+                // NO
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'10vh',right:'10vw'}}>
+                // fuck off i ain't a pedo, neither do i support them
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'3vh',right:'15vw'}}>
+                {/* <i className={['fas fa-quote-left', styles.rainbowText, styles.ownRainbow].join(' ')} style={{marginLeft:'-25px',marginTop:'10px',position:'fixed',color:'rgba(255,255,255,0.5)',scale:'.9'}}/> */}
+                // Me getting suspended over this is genuinely stupid.
+                {/* <i className={['fas fa-quote-right', styles.rainbowText, styles.ownRainbow].join(' ')} style={{marginLeft:'5px',marginBottom:'-10px',position:'fixed',color:'rgba(255,255,255,0.5)',scale:'.9'}}/> */}
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{bottom:'8vh',right:'35vw'}}>
+                // DUCKS AIN'T EXPLOSIVE, THEY NOT A NUCLEAR BOMB!!!11
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'5vh',left:'23vw'}}>
+                function cheese() {'{'}<br/>
+                    <span className={styles.tab}/>console.log('mmm cheesy');<br/>
+                {'}'}
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'27vh',left:'.5vw'}}>
+                "I am not pleased to be a bomb. Please do not make me a bomb.".toBomb();
+            </div>
+            <div className={[styles.code, styles.rainbowText, styles.ownRainbow].join(' ')} style={{top:'40vh',left:'5vw'}}>
+                let TheRed = new Developer();
+            </div>
+            <div className={[styles.code, styles.speedRainbowText, styles.ownRainbow].join(' ')} style={{color:'rgba(0,0,0,0)',opacity:'1'}}>
+                . - + ---==== WEEEEEEEE ={'>'}
+            </div>
+        </div>
+        </>
+    )
+}

components/codeblock.js

@@ -0,0 +1,10 @@
+import styles from '../styles/CodeBlock.module.css';
+
+export default function CodeBlock (props) {
+    return (
+        <div className={styles.CodeBlock} style={props.quote ? {paddingTop: '0px', paddingLeft:'0px'} : {}}>
+            {props.quote ? (<div><div className={styles.Author}><div className={`${styles.ownRainbow} ${styles.rainbowBackground}`}><span style={{zIndex:'10', color:'black', opacity:'1', display:'block'}}>{props.author} says:</span></div></div><i className='fas fa-quote-right'/></div>) : null}
+            <div style={props.quote ? {paddingLeft:'10px', paddingTop: '5px'} : {}}>{props.children}</div>
+        </div>
+    )
+}

components/content.js

@@ -1,12 +1,14 @@
 import styles from "../styles/Content.module.css";
 import Socials from "./socials";
 import Link from "next/link"
+import Background from "./background";
 
 export default function Content() {
     return <>
-        <div style={{zIndex: '1', position: 'relative'}}>
+        <Background/>
+        <div style={{zIndex: '2', position: 'relative'}}>
             <div className={styles.funyheader}>
-                <p className={styles.bigboiheader}>TheRed</p>
+                <div className={styles.anime}><p className={[styles.bigboiheader, styles.ownRainbow, styles.rainbowText].join(' ')}>TheRed</p></div>
                 <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 <Link href="/projects"><a className={styles.Link}>here</a></Link>.</div>

components/embed.js

@@ -0,0 +1,5 @@
+export default function embed(props) {
+    return (
+        <div style={{borderRadius:'10px',border:'0px white solid',display:'block'}}><video style={{...props.style, border:'none'}} autoPlay="autoplay" loop="loop"><source src={props.src} type="video/mp4"></source></video></div>
+    )
+}

components/imgblock.js

@@ -0,0 +1,7 @@
+export default function ImgBlock(props) {
+    return (
+        <div style={{paddingTop:"5px"}}>
+            <img src={props.url} style={{borderRadius:"20px",border:"2px #913ffc solid"}}></img>
+        </div>
+    )
+}

components/popsicle.js

@@ -3,8 +3,10 @@ import styles from "/styles/Popsicle.module.css"
 export default function Popsicle(PROPERTIES) {
     return (
         <div className={`${PROPERTIES.className ?? ''} ${styles.Popsicle}`} style={{...PROPERTIES.customStyle}}>
+            <div className={`${styles.rainbowBackground} ${styles.ownRainbow}`}>
             <i className="fas fa-info-circle" style={{scale: '1.5', paddingLeft: '10px', paddingRight: '15px'}}/>
             {PROPERTIES.children ?? "Popsicle"}<span style={{paddingRight: '10px'}}/>
+            </div>
         </div>
     )
 }

components/privacy.js

@@ -1,22 +1,22 @@
 import styles from '../styles/Privacy.module.css'
 
-(async () => {
-let ipreq = await fetch('/api/ip', {
-    method: 'POST',
-    headers: {
-        'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-        msg: 'get_ip'
-    })
-})
+// (async () => {
+// let ipreq = await fetch('/api/ip', {
+//     method: 'POST',
+//     headers: {
+//         'Content-Type': 'application/json'
+//     },
+//     body: JSON.stringify({
+//         msg: 'get_ip'
+//     })
+// })
 
-let ip;
-if (ipreq.ok) {
-    ipreq.text().then(i => {ip = i});
-};
+// let ip;
+// if (ipreq.ok) {
+//     ipreq.text().then(i => {ip = i});
+// };
 
-})();
+// })();
 
 export default function Privacy() {
     return (

components/socials.js

@@ -3,10 +3,12 @@ import styles from "../styles/Socials.module.css";
 export default function Socials() {
     return <>
         <div className={styles.Socials}>
+            <div className={[styles.ownRainbow, styles.rainbowText].join(' ')}>
             <a href="https://discord.gg/zvaU9fKdut" target="_blank"><div className={styles.Button}><i className={"fab fa-discord"}/><span style={{paddingLeft:"10px"}}>Discord</span></div></a>
             <div className={styles.Button}><i className={"fab fa-twitter"}/><span style={{paddingLeft:"10px"}}>Twitter</span></div>
             <div className={styles.Button}><i className={"fab fa-youtube"}/><span style={{paddingLeft:"10px"}}>Youtube</span></div>
             <a href="https://matrix.to/#/#thered:matrix.org" target="_blank"><div className={styles.Button}><i className={"fas fa-external-link-alt"}/><span style={{paddingLeft:"10px"}}>Matrix</span></div></a>
+            </div>
         </div>
     </>
 }

pages/_app.js

@@ -4,7 +4,15 @@ import BottomBar from '../components/bottombar'
 export default function MyApp({ Component, pageProps }) {
   return <>
     <link rel="stylesheet" href="/cdn/fontawesome/css/all.css"></link>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet"/>
+    {/* Make an embed for Discord using the meta tag so people can see a nice colorful embed message instead of just a link */}
+    <meta name="theme-color" content="#913ffc"/>
+    <meta name="og:description" content="TheRed.SH is a website of, for, and by TheRed! I'm a full-stack developer, specializing in web and app development. Further info about me goes here!"/>
+    <meta name="og:image" content="https://thered.sh/mario.png"/>
+    <meta name="og:title" content="TheRed.SH"/>
     <Component {...pageProps} />
-    <BottomBar />
+    {/* <BottomBar /> */}
   </>
 }

pages/api/submit.js

@@ -1,27 +1,32 @@
-let amogus = ['127.0.0.1', '1', '192.168.1.254']
-export default async function handle(REQ, RES) {
+const local = ['127.0.0.1', '1', '192.168.1.254'];
+const disallowRegex = /(https|http):\/\/.*/;
+const allowed_chars = /^[abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .,\/?;:'\[\]\{\}\\<>\-_+=*!#$0123456789\^]*$/;
+export default async function handle(req, res) {
     // Check if IP matches with the local IP
-    // if(!amogus.includes(REQ.socket.remoteAddress.split('::ffff:')[1])) {
-    //     return RES.status(403).send('Forbidden. IP: '+REQ.socket.remoteAddress.split('::ffff:')[1]+'; Your IP in no way is logged!');
+    // const ip = req.socket.remoteAddress.split('::ffff:')[1];
+    // if(!local.includes(ip)) {
+    //     return res.status(403).send('Forbidden. IP: ' + ip + '; Your IP in no way is logged!');
     // }
-    if(!/^[abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .,/?;:'\[\]\{\}\\<>\-_+=*!#$0123456789\^]*$/.test(""+REQ?.body?.text)) return RES.status(400).send("The message you were trying to send contains disallowed symbols!");
-    let RESPONSE = await fetch(process.env.WEBHOOK, {
+    const text = req.body?.text;
+    if(!text) return res.status(400).send("Illegal request!");
+    if(!allowed_chars.test(text)) return res.status(400).send("The message you were trying to send contains disallowed symbols!");
+    if(disallowRegex.test(text)) return res.status(400).send("Nuh-uh! You don't send links here.");
+    const webhookRes = await fetch(process.env.WEBHOOK, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
             username: "TheRed.SH / User Feedback",
-            content: REQ?.body?.text ?? "The request that was sent was an illegal request!",
+            content: text,
             avatar_url: "https://cdn.discordapp.com/avatars/574110505254256640/049c51674d7ccd748ca123556d351da5.webp?size=1024"
         })
     })
-    if(RESPONSE.ok) {
-        RES.status(200).send("Your message has been successfully sent!");
-        await RESPONSE.text().then(i => console.log(i));
-
+    if(webhookRes.ok) {
+        res.status(200).send("Your message has been successfully sent!");
+        webhookRes.text().then(i => console.log(i));
     } else {
-        RES.status(500).send("Error! The message has failed to send!");
-        await RESPONSE.text().then(i => console.log(i));
+        res.status(500).send("Error! The message has failed to send!");
+        webhookRes.text().then(i => console.log(i));
     }
-}
+}

pages/articles.js

@@ -5,11 +5,15 @@ import Link from "next/link";
 export default function Articles() {
     return (
         <>
+            <title>TheRed.SH / Articles</title>
             <Navbar />
             <span className={styles.TopText}>Latest (This is a very new part of the website, no proper automation has been implemented, all articles are written manually ^*^)</span>
             <div className={styles.Articles}>
-                <Link href="/articles/new_updates_to_thered_sh"><a className={styles.LinkText}>New updates to TheRed.SH!</a></Link><div className={styles.Time}>Published on 2022/Feb/15</div><br/>
-                <Link href="/articles/an_update_on_my_situation"><a className={styles.LinkText}>An update on my situation</a></Link><div className={styles.Time}>Published on 2022/Feb/15</div>
+                <div className={styles.ArticleBox}>
+                <Link href="/articles/beta_2_alpha_2"><a className={styles.LinkText}>Beta 2 Alpha 2!</a></Link><div className={styles.Time}>Published on 2022/Apr/11</div><br/>
+                <Link href="/articles/beta_2_alpha_1"><a className={styles.LinkText}>Beta 2 Alpha 1!</a></Link><div className={styles.Time}>Published on 2022/Feb/17</div><br/>
+                <Link href="/articles/new_updates_to_thered_sh"><a className={styles.LinkText}>New updates to TheRed.SH!</a></Link><div className={styles.Time}>Published on 2022/Feb/15</div>
+                </div>
             </div>
         </>
     )

pages/articles/an_update_on_my_situation.js

@@ -1,50 +0,0 @@
-import Article from '../../components/article';
-import Author from '../../components/author';
-import Navbar from '../../components/navbar';
-import EndQuote from '../../components/endquote';
-
-export default function AnUpdateOnMySituation() {
-    return (
-        <>
-        <Navbar />
-        <Article>
-            <Author>TheRed</Author>
-            <b style={{fontSize: "20pt"}}>An update on my situation.</b><br/>
-            Hello,<br/>
-            So, as you might already know, I've been suspended from TotalFreedom in its entirety because apparently I broke "UK law". I haven't broken any law, as I haven't participated in the forums attack itself, and all I've done is hide information that I had a very minimal amount of.<br/>
-            <br/>
-            Anyways, the situation is a mess, and I don't see how I should've been suspended, let alone indef-banned.<br/><br/>
-            I have been thinking a lot about this, and I have a feeling I might quit TotalFreedom in its entirety, even if I would get unbanned. The reason for that is because the community just feels simply unwelcoming in some regard, and there are other projects and stuff I have to do, including this website as well.<br/>
-            I've already pretty much ruined my reputation in the community, and if I wanted to try again, I don't see how my reinstatement would be accepted, if I do so decide to do that.<br/>
-            <br/>
-            The simple nature of the problem being so ridiculously oversimplified to people means that people are blind to the details that I think matter. This means that people think wrong of me and probably want me just gone out of the community, and think bad of me. In reality, I'm just a person like everyone else, and I have feelings. I'm not a robot that breaks everything no matter what. I realize that I have greatly fucked up my reputation, and I don't see how I could continue on the community.<br/>
-            It's very likely that I will leave the community as a whole and continue onto other projects.<br/><br/>
-            The problem that I have with TotalFreedom is that it's unaccepting of even the most minor of things. Like, if I decided to go on kaboom and chunkban a TF member that I didn't even know was a TF member, they can complain about me because they know that I'm a TF staff, and get me in trouble. Like, it's stupid how much responsibility you must have and how much dedication you need for TotalFreedom.<br/>
-            The whole situation I'm in is incredibly shitty, and I don't see how I could continue being on TF with these conditions. What I wanted to push with this, is a full on reform. I'm pissed at how much shit is happening with TotalFreedom, like, IBRs were literally PUBLICLY LEAKING IPS. Like, if you were just a random person just messing around, it's stupid to be IB'd and have your IP leaked because of it. Thankfully, at least that was fixed.<br/>
-            I feel like there needs to be a reform on how permissions are handled with TF administrators. I think the permissions need to be a little evened-out, as it's stupid how some actually useful commands are just not allowed. Only execs have full permission over Freedom-01. But they don't even have OP on the hub anymore. I mean, that could be good, but it's still a little bit of a problem, as I think some features are genuinely useful and great for admins. Like, /data. I'm 100% sure if there is some kind of subcommand that could be harmful, it could be removed with NM (NetworkManager).<br/>
-            It's awful how easy it is to get yourself suspended as well. Like - all I did is hide just a bit of information that I had a very minimal amount of. It's stupid. Let alone getting indef-banned for that. I think suspensions should also have some kind of reform, as I don't think I should've been indef-banned for this. Apparently I collabed with "rogue players", but I actually weren't part of the attack. No attack was done on my part and I haven't collaborated on the actual attack. All I have done is hide very minimal information on this attack.<br/>
-            The fix is so stupidly basic that I just don't see the Atlas Management Team as capable of actually taking care of the server properly, I don't even think that they know what they're doing. If a fix as basic as ONE LINE OF CODE can actually be that hard to do, then I'm sorry. I don't see how you're capable of doing your job.<br/>
-            I know an actual friend who is capable of doing all of this and actually knows what they're doing, and I bet they alone could handle the entire Atlas Management Team's job. And Ryan is just plain irresponsible - yes, he does have a job. But that doesn't mean he has a good excuse to not take care of other stuff. If you own a server, you better take care of it properly. If you can't do it, then ask someone else. This problem should've never happened at all - in fact, if people actually knew what they were doing, I think there wouldn't have been exploits like what happened with NM and the forums attack. If nobody were to step up, the forums would've probably been dying for longer. Imagine this was an actual serious attacker. They're lucky it wasn't.<br/>
-            <br/>
-            Anyways, enough on this rant lmao. Now, on where I'll actually be going if I quit TF.<br/>
-            <br/>
-            <b style={{fontSize: "20pt"}}>Where will I be going?</b>
-            <br/>
-            As I've said just now, I'm thinking of leaving TF. Yes, that's right. I've been an old member of the community, and I've been on there for a long time.<br/>
-            So, what's the deal? I wanted a reform. I'm essentially just sick of this mess that is TF. I've tried to hide the pain, but as you all saw, I wanted to do something about it. Again, just to make it clear once again, <b>I was not part of the attack in any way, shape or form. I only hid minimal information about the attackers and the attack itself.</b><br/>
-            Eventually, I decided to just say "screw it" and risk my rank over it. I knew this was going to happen deep inside, but I did it anyways. I mean, at least y'all got reformed IBRs. But problems are still there. So, I thought - why shouldn't I just leave TF entirely.<br/>
-            Thankfully, some people have the same mind. There's a new project coming up, I will not leak anything about it. What I will say is that it will be way more refined than TotalFreedom, and once the first version of it releases - I will most likely make a post about it if the creator does agree. They're good people, and I don't see how you could dismiss them.<br/>
-            Once this project does arrive, I will join the staff team once I'm able to.<br/>
-            I've been working on a project called Redstonium. As there's a very minimal amount of redstone servers at the moment, at least good ones, I've decided on taking it into my hands. Thankfully, there is another person to help me with this project. I will not reveal anything about them, as I'm not sure if they want anything revealed.<br/>
-            Some people on TF have been lucky enough to be part of another server, SMPRed. This server is a vanilla SMP server. It's pretty dead at the moment, but I'm looking forward to revive it once I can. It's a hard job maintaining this many things at once, but I have a feeling I could pull it off.<br/>
-            So, I've told you some places where I could be ending up. As always, any new projects and things and stuff like that will be posted on this website, which is also where I'll be for the time being, updating stuff and working on projects. This is why I really wanted to push the Articles feature, which is why, even if it is still in very very early stages, I've decided on using it.<br/>
-            Anyways, that's pretty much it for where I'll be going and what actually happened to me.<br/>
-            If anything new happens on this situation, as always, an article will be made on this website.<br/><br/>
-            TL;DR - I'll most likely be quitting TF for good, even if I do get unbanned. All new updates will be going on this website. (thank god I had the right mind to make this article system just in case)
-            <br/><br/>
-            <EndQuote>Thank you,<br/>
-            TheRed.</EndQuote>
-        </Article>
-        </>
-    )
-}

pages/articles/beta_2_alpha_1.js

@@ -0,0 +1,31 @@
+import Article from '../../components/article';
+import Author from '../../components/author';
+import Navbar from '../../components/navbar';
+import EndQuote from '../../components/endquote';
+import CodeBlock from '../../components/codeblock';
+import embed from '../../components/embed';
+import Link from 'next/link';
+
+export default function Beta2Alpha1 () {
+    return (
+        <>
+            <Navbar />
+            <Article>
+                <Author>TheRed</Author>
+                <b style={{fontSize: "20pt"}}>Beta 2 Alpha 1</b><br/>
+                Hello there!<br/>
+                This is a new incremental update to Beta 2, Beta 2 Alpha 1!<br/>
+                This update switched the style up a little bit, as a matte look just doesn't look that great, lets be honest!<br/>
+                I tried to keep the matte look still going, but changed up the colors and RGBified everything ;)<br/>
+                This is a very small update, for example, changing the way how quotes look!:<br/>
+                <CodeBlock author="Example" quote>This is an example! Also, links now have a little animation when you hover over them, like <Link href="/articles/big_chungus_testing"><a>this one</a></Link>!</CodeBlock>
+                This is pretty much it lol
+                <br/><br/>
+                <EndQuote>
+                    Cheers.<br/>
+                    TheRed
+                </EndQuote>
+            </Article>
+        </>
+    )
+}

pages/articles/beta_2_alpha_2.js

@@ -0,0 +1,27 @@
+import Article from '../../components/article';
+import Author from '../../components/author';
+import Navbar from '../../components/navbar';
+import EndQuote from '../../components/endquote';
+import CodeBlock from '../../components/codeblock';
+import embed from '../../components/embed';
+import Link from 'next/link';
+
+export default function Beta2Alpha2 () {
+    return (
+        <>
+            <Navbar />
+            <Article>
+                <Author>TheRed</Author>
+                <b style={{fontSize: "20pt"}}>Beta 2 Alpha 2</b><br/>
+                Oh, hi there!<br/>
+                No, I'm not dead. Unless you mean my youtube channel. Anyways, this is a (super) minor update, bringing in... literally only embeds. yep that's right.<br/>
+                I am very proud of myself thank you for the applause. Yeah but don't worry, I'll attempt to speed up development of this site, there should be some better features upcoming fairly soon.
+                <br/><br/>
+                <EndQuote>
+                    Cheers.<br/>
+                    TheRed
+                </EndQuote>
+            </Article>
+        </>
+    )
+}

pages/articles/big_chungus_testing.js

@@ -0,0 +1,16 @@
+import Article from "../../components/article";
+import CodeBlock from "../../components/codeblock";
+import Author from "../../components/author";
+import embed from "../../components/embed";
+import Navbar from "../../components/navbar";
+export default function BigChungusTesting () {
+    return (
+        <>
+        <Navbar/>
+        <Article>
+            <Author>Big Chungus</Author>
+            <CodeBlock author="Big Chungus" quote><embed style={{height:'300px',width:'min-content',border:'2px white solid',borderRadius:'10px',userSelect:'none'}} src="https://buckets.80kittens.net/memestorage/original/b429280277b87df83df20f3ab646ca722caed0a3.mp4"/></CodeBlock>
+        </Article>
+        </>
+    )
+}

pages/projects.js

@@ -3,7 +3,9 @@ import Button from '../components/button.js'
 import Redirect from '../components/redirect.js'
 
 export default function Projects() {
-    return <><title>TheRed.SH / Projects</title><div className={styles.Box}>
+    return <>
+        <title>TheRed.SH / Projects</title>
+        <div className={styles.Box}>
         <Redirect page="home"/>
         <div className={styles.ScrollBox}>
             <h1 className={styles.Header}>Here are all of my projects (Only a demo, none of the buttons work):</h1>

styles/Alert.module.css

@@ -45,11 +45,12 @@
     width: 70px;
     min-width: 70px;
     display: block;
-    /* mix-blend-mode: luminosity; */
+    mix-blend-mode: normal;
     scale: 1;
     -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15); 
     box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15);
     min-height:61px;
+    z-index:100;
 }
 .Alert>i {
     animation-name: pop;
@@ -60,6 +61,7 @@
     scale: 0;
     font-size: 12pt;
     mix-blend-mode: normal;
+    z-index:2;
 }
 .Alert>span {
     animation-name: appeartext;
@@ -69,4 +71,5 @@
     animation-timing-function: ease;
     font-size: 0pt;
     mix-blend-mode: normal;
+    z-index:2;
 }

styles/Article.module.css

@@ -8,6 +8,7 @@
         opacity:1;
     }
 }
+
 .Article {
     scale: .75;
     opacity:0;

styles/Articles.module.css

@@ -42,7 +42,7 @@
     background-color:rgb(27, 26, 36);
     padding: 10px;
     padding-left: 20px;
-    margin-top:calc(160px + 18pt - 4vw);
+    margin-top:calc(170px + 18pt - 4.5vw);
     position: absolute;
     display: block;
     border: 0px white solid;
@@ -56,9 +56,15 @@
     animation-iteration-count: 1;
     animation-direction: normal;
     animation-fill-mode: forwards;
-    padding-bottom:23px;
+    padding-bottom:13px;
     -webkit-box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.35); 
     box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.35);
+    overflow:hidden;
+}
+.ArticleBox {
+    overflow:hidden;
+    padding-bottom:10px;
+    width:calc( 100vw - 30px * 2 - 20px );
 }
 .LinkText {
     color: #fff;
@@ -77,6 +83,7 @@
     font-family: 'Consolas';
     margin-bottom:-10px;
     margin-top:6px;
+    padding-bottom:1px;
     z-index:+10;
     position:relative;
     background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(27, 26, 36) 35%);

styles/Background.module.css

@@ -0,0 +1,102 @@
+@keyframes moveBackground {
+	from {
+		background-position-x: 0%;
+	} to {
+		background-position-x: 500%;
+	}
+}
+@keyframes moveBackgroundSPEED {
+	from {
+		background-position-x: 0%;
+        left:-2500vw;
+	} to {
+		background-position-x: 500%;
+        left:150vw;
+	}
+}
+
+@keyframes slidefunny {
+    from {
+        opacity:0;
+        filter:blur(10px);
+        scale: .9;
+    }
+    to {
+        opacity:1;
+        filter:blur(0px);
+        scale: 1;
+    }
+}
+
+.rainbowText {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackground 20s linear infinite;
+}
+
+.speedRainbowText {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackgroundSPEED 20s linear infinite;
+    bottom:19vh;
+    left:2vw;
+    overflow:hidden;
+    white-space: nowrap;
+}
+
+.ownRainbow {
+	background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%);
+}
+
+.code {
+    font-family: 'Roboto Mono';
+    z-index:0;
+    font-size:1.7vmin;
+    position:fixed;
+    margin-top:30px;
+    color: rgba(255,255,255,0.5);
+    opacity:.75;
+    pointer-events: none;
+}
+.tab {
+    margin-right: 3vmin;
+}
+
+.main {
+    opacity:0;
+    filter:blur(10px);
+    scale: .9;
+    animation-name: slidefunny;
+    animation-duration: 5s;
+    animation-timing-function: ease-in-out;
+    animation-delay: 0s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    max-width: 100vw;
+    max-height:100vh;
+    width: 100vw;
+    height:100vh;
+    display: block;
+    position:fixed;
+    z-index:1;
+    white-space: nowrap;
+}
+
+.actualbackgroundfunny {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPklEQVQYV2NkwAT/gUKM6MLoAjBFGIqRFaJLovBhCrFaB7QeLg5SiEsRzJlgeQxHY/EcSOg/sQoxgwGHiQwA+f4KCL3Y/AQAAAAASUVORK5CYII=) repeat;
+    width:100%;
+    height:100%;
+    position:fixed;
+    left:0;
+    top:0;
+    z-index:0;
+    filter:grayscale(100%);
+    opacity:.1;
+    scale:1.4;
+    display:block;
+}

styles/CodeBlock.module.css

@@ -0,0 +1,62 @@
+@keyframes moveBackground {
+	from {
+		background-position-x: 0%;
+	} to {
+		background-position-x: 500%;
+	}
+}
+
+.rainbowBackground {
+	/* background-clip: text;
+	-webkit-background-clip: text; */
+	background-color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackground 20s linear infinite;
+    padding-left:10px;
+    padding-top:5px;
+    padding-bottom:3px;
+    /* margin-bottom:5px; */
+    padding-right:10px;
+    border-radius: 5px 0px 10px 0px;
+}
+
+.ownRainbow {
+	background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%);
+    filter:brightness(2);
+    font-family:'Consolas';
+    font-size:12pt;
+}
+
+.CodeBlock {
+    background-color: rgb(37, 36, 49);
+    font-family: 'Consolas';
+    color: #ccc;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top:10px;
+    margin-bottom:10px;
+    max-width: fit-content;
+}
+.Author {
+    background-color: transparent;
+    opacity:1;
+    color: rgb(0, 0, 0);
+    max-width: fit-content;
+    margin-bottom:5px;
+    border-radius: 5px 0px 10px 0px;
+    -webkit-box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.2); 
+    box-shadow: 0px 0px 25px 10px rgba(0,0,0,0.2);
+    display:block;
+}
+.CodeBlock>div>a {
+    color: #77c;
+    transition: color .2s ease;
+}
+.CodeBlock>div>a:hover {
+    color: #88f;
+}
+.CodeBlock>div>i {
+    color:rgb(51, 49, 66);
+    float:right;
+    margin-top:-23px;
+}

styles/Content.module.css

@@ -25,19 +25,39 @@
     }
 }
 
+@keyframes moveBackground {
+	from {
+		background-position-x: 0%;
+	} to {
+		background-position-x: 500%;
+	}
+}
+
+.rainbowText {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackground 20s linear infinite;
+}
+
+.ownRainbow {
+	background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%);
+}
+
 .Quote {
     margin: auto;
     margin-top: 30px;
     padding: 20px;
     /* padding-top:15px; */
     /* padding-left:20px; */
-    background-color: #17171f;
+    background-color: #1e1e2b;
     color: white;
     font-size: 14pt;
     font-family: 'Consolas';
-    -webkit-box-shadow: 0px 5px 0px 0px #121218;
-    -moz-box-shadow: 0px 5px 0px 0px #121218;
-    box-shadow: 0px 5px 0px 0px #121218;
+    -webkit-box-shadow: 0px 5px 0px 0px #1a1a25;
+    -moz-box-shadow: 0px 5px 0px 0px #1a1a25;
+    box-shadow: 0px 5px 0px 0px #1a1a25;
 
     border: 0px white solid;
     border-radius: 10px;
@@ -77,13 +97,25 @@
 }
 .bigboiheader {
     display: block;
-    color: #fff;
+    /* color: #fff; */
     font-size: 18vmin;
     line-height: 1;
     margin: 0;
     margin-top: 10vmin;
-    margin-left: 25vw;
+    /* margin-left: 25vw; */
     font-family: 'Mangabey';
+    /* animation-name: slide1;
+    animation-duration: 1s;
+    animation-delay: .2s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards; */
+    /* opacity: 0;
+    filter: blur(5px); */
+    user-select: none;
+    z-index: 1;
+    color: rgba(255,255,255,0.5);
+}
+.anime {
     animation-name: slide1;
     animation-duration: 1s;
     animation-delay: .2s;
@@ -91,8 +123,7 @@
     animation-fill-mode: forwards;
     opacity: 0;
     filter: blur(5px);
-    user-select: none;
-    z-index: 1;
+    margin-left: 25vw;
 }
 
 .funyheader {
@@ -104,7 +135,7 @@
 
 .Link {
     color: #fff;
-    background-color: #555;
+    background-color: #353549;
     padding-top: 2.5px;
     padding-bottom: 2.5px;
     padding-left: 10px;
@@ -114,12 +145,6 @@
     transition: all .2s ease;
 }
 .Link:hover {
-    color: #fff;
-    background-color: #555;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 15px;
-    padding-right: 15px;
-    border-radius: 10px;
-    line-height: 1.25;
+    color: #000;
+    background-color: #626286;
 }

styles/Navbar.module.css

@@ -7,7 +7,7 @@
     }
 }
 .NavBarBackbone {
-    background-color: #9a45fa;
+    background-color: #1f1f2e;
     /* border-bottom: 2px solid #ddd; */
     width: 100%;
     height: 41px;
@@ -52,6 +52,6 @@
     font-size: 10pt;
 }
 .NavBar>a>button:hover {
-    background-color: rgba(255,255,255,0.1);
-    border-bottom: 2px solid #bfbfff;
+    background-color: rgba(255,255,255,0.15);
+    border-bottom: 2px solid #dfd3ff;
 }

styles/Popsicle.module.css

@@ -19,11 +19,33 @@
     }
 }
 
+@keyframes moveBackground {
+	from {
+		background-position-x: 0%;
+	} to {
+		background-position-x: 500%;
+	}
+}
+
+.rainbowBackground {
+	background-clip: background;
+	-webkit-background-clip: background;
+	background-color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackground 20s linear infinite;
+    padding: 10px;
+    border-radius: 10px;
+    opacity:.5;
+}
+
+.ownRainbow {
+	background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%);
+}
+
 .Popsicle {
-    background-color: #753aff;
+    background-color: #ffffff;
     border-radius: 10px;
     font-size: 12pt;
-    padding: 10px;
     font-family: 'Manrope';
     position: absolute;
     display: block;

styles/Socials.module.css

@@ -23,6 +23,27 @@
         filter: blur(0px);
     }
 }
+@keyframes moveBackground {
+	0% {
+		background-position-x: 0%;
+	}
+    100% {
+		background-position-x: 500%;
+	}
+}
+
+.rainbowText {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	background-size: 500%, 100%;
+	animation: moveBackground 20s linear infinite;
+}
+
+.ownRainbow {
+	background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%) 30%, hsl(214, 100%, 60%) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 90%);
+}
+
 .Socials {
     animation-name: appeartext;
     animation-duration: 2s;
@@ -45,8 +66,8 @@
     user-select: none;
 }
 .Button {
+    color: rgba(255,255,255,0.5);
     cursor: pointer;
-    color: #aaa;
     display: inline-block;
     padding-left: 20px;
     transition: all .2s;
@@ -57,7 +78,8 @@
     user-select: none;
 }
 .Button:hover {
-    color: #7650ff;
+    color: rgba(0,0,0,0);
+    filter: blur(0px);
     mix-blend-mode: normal;
     /* mask-image: linear-gradient(to right, transparent, #666); */
     scale: 1.08;

styles/Textbox.module.css

@@ -11,7 +11,7 @@
 }
 
 .Textbox {
-    background-color: #17171f;
+    background-color: #1a1a25;
     border-radius: 10px;
     font-family: 'Manrope';
     color: white;
@@ -28,6 +28,9 @@
     -webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15); 
     box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.15);
     min-width: 50vw;
+    mix-blend-mode: normal;
+    z-index: 2;
+    position:relative;
 }
 .Textbox::placeholder {
     color: #8b8ba8;

styles/globals.css

@@ -28,7 +28,7 @@ body {
   padding: 0;
   margin: 0;
   font-family: 'Manrope';
-    background-color: #21212c;
+    background-color: #14141d;
     color: white;
   overflow-x: hidden;
 }