added showcase alignment, columns, 404 page

public/index.html

@@ -6,8 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
+      name="og:description"
-      content="Web site created using create-react-app"
+      content="welcome to my website! here, you can find my portfolio and stuff about me along with any links to my socials!"
+    />
+    <meta
+      name="og:title"
+      content="thatalex.dev"
+    />
+    <meta
+      name="og:url"
+      content="https://thatalex.dev"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -29,7 +37,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>alex!</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/components/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 // components/resources
 import { NavBar } from './Nav';
-import { Footer } from './PageComponents'
+import { Footer, NotFound } from './PageComponents'
 
 // pages
 import { Home } from './Pages/Home';
@@ -17,6 +17,7 @@ export class App extends React.Component {
                 <Routes>
                     <Route path="/" element={<Home />}></Route>
                     <Route path="/contact" element={<Contact />}></Route>
+                    <Route path={"*"} element={<NotFound />}></Route>
                 </Routes>
                 <Footer/>
             </div>

src/components/MedalPlayer.jsx

@@ -7,8 +7,6 @@ export class MedalPlayer extends React.Component {
         this.state = {
             clip: null
         }
-
-        // this.state.bind(this);
     }
 
     componentDidMount() {

src/components/PageComponents.jsx

@@ -4,13 +4,54 @@ import React from 'react';
 import { MedalPlayer } from "./MedalPlayer";
 import { Href } from "./Utils";
 
-export class TopBar extends React.Component {
+export class ShowcaseBar extends React.Component {
     render() {
         return (
-            <div id={"topbar"}>
+            <div id={"bar"}>
-                <div className={"topbarcontent"}>
+                <div
-                    <h1>{this.props.headline}</h1>
+                    className={this.props.align === "right" ? "showcase_content align-showcase-right" : "showcase_content align-showcase-left"}>
-                    <p>{this.props.subheading}</p>
+                    {this.props.image ? <React.Fragment>
+                    <span id={"bar-img"} style={{verticalAlign:"right", display: "inline-block", float:this.props.alignImage}}>
+                        <img src={this.props.image} alt={"Showcase"} />
+                    </span>
+                    </React.Fragment> : <React.Fragment></React.Fragment>}
+                    <h1 style={{display:"inline-block"}}>{this.props.headline}</h1>
+                    <span id={"subheading"}><p>{this.props.subheading}</p></span>
+                </div>
+            </div>
+        )
+    }
+}
+
+export class ShowcaseColumns extends React.Component {
+    render() {
+        return (
+            <div style={{ paddingLeft: "19vw" }}>
+                <div style={{ height:"100vh", paddingRight:"0 50vw" }} id={"bar-column"} className={"row"}>
+                    <div className={"column"}>
+                        <p className={"column-header"}>
+                            {this.props.column1.title}
+                        </p>
+                        <p className={"column-subheader"}>
+                            {this.props.column1.description}
+                        </p>
+                    </div>
+                    <div className={"column"}>
+                        <p className={"column-header"}>
+                            {this.props.column2.title}
+                        </p>
+                        <p className={"column-subheader"}>
+                            {this.props.column2.description}
+                        </p>
+                    </div>
+                    <div className={"column"}>
+                        <p className={"column-header"}>
+                            {this.props.column3.title}
+                        </p>
+                        <p className={"column-subheader"}>
+                            {this.props.column3.description}
+                        </p>
+                    </div>
                 </div>
             </div>
         )
@@ -22,7 +63,7 @@ export class Footer extends React.Component {
         return (
             <div id={"footer"}>
                 <div className={"fcontent"}>
-                    <p>Made with &lt;3 by <Href url={"https://github.com/zevhr"} blank={true} content={"Alex"}></Href></p>
+                    <p>Made with &lt;3 by <Href url={"https://github.com/zevhr"} blank={true} content={"Alex"} /></p>
                     <div className={"socials"}>
                         <Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-github item" aria-hidden="true"></i>} />
                         <Href url={"https://twitter.com/zstreamss"} blank={true} content={<i className="fa fa-twitter item" aria-hidden="true"></i>} />
@@ -34,17 +75,11 @@ export class Footer extends React.Component {
     }
 }
 
-export class ClipShowcase extends React.Component {
-    render() {
-        return (
-            <div id={"clip"}>
-                <MedalPlayer />
-            </div>
-        )
-    }
-}
-
 export class ContactForm extends React.Component {
+    sendResponse() {
+        // todo: logic to send message via api endpoint
+    }
+
     render() {
         return (
             <div className={"form"}>
@@ -62,4 +97,53 @@ export class ContactForm extends React.Component {
             </div>
         )
     }
+}
+
+export class NotFound extends React.Component {
+    componentDidMount() {
+        let keys = [];
+        let count = 0;
+
+        document.addEventListener("keydown", (e) => {
+            if (e.keyCode <= 90 && e.keyCode >= 48) {
+                keys.push(e.key);
+            }
+            if (e.key.toLowerCase() === "backspace") {
+                keys.pop();
+            } else if (keys.join('') === "thisisnotadrill") {
+                if (count >= 5) {
+                    window.location.href = "/capy";
+                } else {
+                    document.getElementById("lawd").style.display = "block";
+                    document.getElementById("anim").style.display = "block";
+
+                    setTimeout(() => {
+                        document.getElementById("lawd").style.display = "none";
+                        document.getElementById("anim").style.display = "none";
+                        keys = [];
+                        count++;
+
+                        console.log("count: " + count)
+                    }, 4000)
+                }
+            }
+        })
+    }
+
+    render() {
+        return (
+            <div style={{ backgroundColor: "black", height:"100vh", textAlign: "center", color:"white" }} id={"404"}>
+                <img width={"350"} alt={"jeremi"} src={"https://im3.ezgif.com/tmp/ezgif-3-b699b91275.gif"}/>
+                <span style={{ fontSize: "20px" }}>
+                    <h3>well that's not good.</h3>
+                    <p>this page doesn't exist. you should get outta here pal, before things get bad</p>
+                </span>
+
+                <span id={"lawd"} style={{ display: "none" }}><p>oh lawd... oh lawd he comin!</p></span>
+                <div id={"anim"} style={{ display: "none" }}>
+                    <img style={{ transform: "scaleX(-1)" }} alt={"capy"} src={"https://c.tenor.com/AMMqaJ99koYAAAAC/capybara-walk.gif"} />
+                </div>
+            </div>
+        )
+    }
 }

src/components/Pages/Contact.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { TopBar, ContactForm } from "../PageComponents";
+import { ShowcaseBar, ContactForm } from "../PageComponents";
 
 export class Contact extends React.Component {
     render() {
         return (
             <div id={"container"}>
-                <TopBar headline={"you want to contact me?"} subheading={"at least take me to dinner first"} />
+                <ShowcaseBar headline={"you want to contact me?"} subheading={"at least take me to dinner first"} />
                 <div id={"contact"}>
                     <h1 style={{ textAlign: "center", color: "white" }}>hit my line, like the cool kids say</h1>
                     <ContactForm />

src/components/Pages/Home.jsx

@@ -1,14 +1,34 @@
 import React from 'react';
 
 // components
-import { TopBar, ClipShowcase } from '../PageComponents';
+import { ShowcaseBar,ShowcaseColumns } from '../PageComponents';
 
 export class Home extends React.Component {
     render() {
         return (
             <div id={"home_page"}>
-                <TopBar headline={"hi, i'm alex!"} subheading={"professional smooth brain, nodejs buillier, medal.tv whiffer"} />
+                <ShowcaseBar headline={"hi, i'm alex!"} subheading={"professional smooth brain, nodejs buillier, medal.tv whiffer"} align={"left"} />
-                <ClipShowcase />
+                <ShowcaseBar headline={"lotta cool stuff"} subheading={"what am i doin? well, workin at Medal + making stuff like this"} align={"right"} image={"https://cdn.medal.tv/assets/img/new-medal-logo-small.png"} alignImage={"left"} />
+                <ShowcaseColumns
+                    column1={
+                        {
+                            title: "wow cool stuff i've been workin on extra long too",
+                            description: "look at me go"
+                        }
+                    }
+                    column2={
+                        {
+                            title: "hooooly this is cool stuff",
+                            description: "wow why am i offcentered"
+                        }
+                    }
+                    column3={
+                        {
+                            title: "columns! pog pog pog pog pog pog pog pog pog pog pog pogpo ogpogpogpggpogogp'oi",
+                            description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks."
+                        }
+                    }
+                    />
             </div>
         )
     }

src/styling/main.css

@@ -3,6 +3,7 @@ html, body {
     padding:0;
     background-color:#3E3E3E;
     font-family: 'IBM Plex Sans', sans-serif;
+    overflow-x:hidden;
 }
 
 /* nav styling */
@@ -28,8 +29,7 @@ html, body {
     animation-duration:0.5s;
 }
 
-/* home */
+#bar {
-#topbar {
     background-color:black;
     position:relative;
     max-height:40vh;
@@ -38,20 +38,58 @@ html, body {
     vertical-align:top;
 }
 
-.topbarcontent {
+.showcase_content {
     padding:50px 15vw !important;
 }
 
-.topbarcontent p {
+.showcase_content p {
     font-size:20px;
 }
 
-#topbar * {
+#subheading {
+    max-width:100px;
+}
+
+.align-showcase-left {
+    text-align:left;
+}
+
+.align-showcase-right {
+    text-align:right;
+}
+
+#anim {
+    animation-duration: 5s;
+    animation-name: goRight;
+    animation-iteration-count: initial;
+    left: -200px;
+    position: absolute;
+}
+
+#bar * {
     padding:0;
     margin:0;
 }
 
-/* home - clip showcase */
+.column {
+    width:25%;
+    height:55vh;
+    background-color:gray;
+    border:3px black solid;
+    float:left;
+}
+
+.column-header {
+    float:left;
+    width:90%;
+    font-size:25px;
+    padding:0 1vw;
+}
+
+.column-subheader {
+    padding: 0 1vw;
+}
+
 @media screen and (min-width:900px) {
     #clip {
         padding:10vh 15vw;
@@ -75,8 +113,6 @@ html, body {
     padding-bottom:50px;
 }
 
-/* global type stuff */
-
 a {
     color:white;
     text-decoration:none;
@@ -95,6 +131,10 @@ a:hover {
     vertical-align:top;
     text-align:center;
     padding:10px;
+    bottom:0;
+    position:fixed;
+    width:100%;
+    z-index:10;
 }
 
 .fcontent {
@@ -104,4 +144,14 @@ a:hover {
 .item {
     font-size:30px;
     padding:0 10px;
+}
+
+@keyframes goRight {
+    from {
+        transform: translate(0,0);
+    }
+
+    to {
+        transform: translate(150vw,0);
+    }
 }