feat: utils, contact page + form, medalplayer etc

public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <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=IBM+Plex+Sans&display=swap" rel="stylesheet">

src/components/App.jsx

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

src/components/Contact.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export class Contact extends React.Component {
-    render() {
-        return (
-            <div id={"contact"}>
-                <p>Contact works!</p>
-            </div>
-        )
-    }
-}

src/components/Home.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export class Home extends React.Component {
-    render() {
-        return (
-            <div id={"home"}>
-                <div className={"homecontent"}>
-                    <h1>hi, i'm alex!</h1>
-                    <p>professional smooth brain, nodejs buillier, medal.tv whiffer</p>
-                </div>
-            </div>
-        )
-    }
-}

src/components/MedalPlayer.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export class MedalPlayer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            clip: null
+        }
+
+        // this.state.bind(this);
+    }
+
+    componentDidMount() {
+        fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
+            method: 'get',
+            headers: {
+                'content-type': "application/json",
+                'accept': "application/json",
+                'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
+            }
+        }).then(async response => {
+            let j = await response.json();
+            await this.setState({
+                clip: j.contentObjects[0]
+            })
+        })
+    }
+
+    playerRenderer() {
+        if (this.state.clip) {
+            return (
+                <div id={"player"}>
+                    <div id={"iframe"}>
+                        <iframe
+                            width={"640"}
+                            height={"360"}
+                            style={{maxWidth: "100vw"}}
+                            title={"MedalPlayer"}
+                            src={this.state.clip.directClipUrl}
+                            frameBorder={"0"}
+                            allow={"autoplay"}
+                            allowFullScreen
+                        >
+                        </iframe>
+                    </div>
+                    <p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
+                </div>
+            )
+        } else {
+            return (
+                <div id={"player"}>
+                    <p>wasn't able to get response</p>
+                </div>
+            )
+        }
+    }
+
+    render() {
+        if (this.state.clip !== null) return this.playerRenderer()
+    }
+}

src/components/PageComponents.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+// components
+import { MedalPlayer } from "./MedalPlayer";
+import { Href } from "./Utils";
+
+export class TopBar extends React.Component {
+    render() {
+        return (
+            <div id={"topbar"}>
+                <div className={"topbarcontent"}>
+                    <h1>{this.props.headline}</h1>
+                    <p>{this.props.subheading}</p>
+                </div>
+            </div>
+        )
+    }
+}
+
+export class Footer extends React.Component {
+    render() {
+        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>
+                    <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>} />
+                        <Href url={"https://github.com/zevhr"} blank={true} content={<i className="fa fa-spotify item" aria-hidden="true"></i>} />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export class ClipShowcase extends React.Component {
+    render() {
+        return (
+            <div id={"clip"}>
+                <MedalPlayer />
+            </div>
+        )
+    }
+}
+
+export class ContactForm extends React.Component {
+    render() {
+        return (
+            <div className={"form"}>
+                <span className={"field-item"}>
+                    <input type={"text"} className={"fields"} name={"name"} placeholder={"Name.."} />
+                </span>
+                <span className={"field-item"}>
+                    <input type={"email"} className={"fields"} name={"email"} placeholder={"Email.."} />
+                </span>
+                <br />
+                <br />
+                <span>
+                    <textarea name={"message"} style={{ textAlign: "center", }} className={"fields message"} placeholder={"Message.."}></textarea>
+                </span>
+            </div>
+        )
+    }
+}

src/components/Pages/Contact.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { TopBar, 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"} />
+                <div id={"contact"}>
+                    <h1 style={{ textAlign: "center", color: "white" }}>hit my line, like the cool kids say</h1>
+                    <ContactForm />
+                </div>
+            </div>
+        )
+    }
+}

src/components/Pages/Home.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+// components
+import { TopBar, ClipShowcase } 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"} />
+                <ClipShowcase />
+            </div>
+        )
+    }
+}

src/components/Utils.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export class Href extends React.Component {
+    render() {
+        return (
+            <a
+                href={this.props.url}
+                target={this.props.blank ? "_blank" : "_self"}
+                rel={"noreferrer"}
+            >{this.props.content}</a>
+        )
+    }
+}

src/index.jsx

@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom'
 import { App } from './components/App';
 import './styling/anims.css';
 import './styling/main.css';
+import './styling/forms.css';
 
 // "sitemap" for react components
 export const pages = [

src/styling/forms.css

@@ -0,0 +1,36 @@
+.form {
+    display:table;
+    text-align:center;
+    margin:auto;
+    padding:20px;
+    background-color:#cfcfcf;
+    border-radius:30px;
+}
+
+.fields {
+    display: table-cell;
+    background-color:black;
+    border-radius:50px;
+    outline:none;
+    caret-color:white;
+    color:white;
+}
+
+.fields::placeholder {
+    color:white;
+}
+
+.fields input[type=text] {
+    padding:0 50px;
+}
+
+.message {
+    /*max-width:50%;*/
+    resize:vertical;
+    width:100%;
+    max-height:200px;
+}
+
+.field-item {
+    padding:0 20px;
+}

src/styling/main.css

@@ -29,27 +29,52 @@ html, body {
 }
 
 /* home */
-#home {
+#topbar {
     background-color:black;
     position:relative;
     max-height:40vh;
+    max-width:100vw;
     color:white;
     vertical-align:top;
 }
 
-.homecontent {
+.topbarcontent {
     padding:50px 15vw !important;
 }
 
-.homecontent p {
+.topbarcontent p {
     font-size:20px;
 }
 
-#home * {
+#topbar * {
     padding:0;
     margin:0;
 }
 
+/* home - clip showcase */
+@media screen and (min-width:900px) {
+    #clip {
+        padding:10vh 15vw;
+    }
+}
+
+#iframe {
+    position:relative;
+}
+
+
+.cliptitle {
+    color:white;
+}
+
+.medaltv {
+    color:orange;
+}
+
+#contact {
+    padding-bottom:50px;
+}
+
 /* global type stuff */
 
 a {
@@ -61,3 +86,22 @@ a:hover {
     color:#81A2A1;
     animation:fadein;
 }
+
+#footer {
+    background-color:black;
+    max-height:40vh;
+    max-width:100vw;
+    color:white;
+    vertical-align:top;
+    text-align:center;
+    padding:10px;
+}
+
+.fcontent {
+    padding-bottom:10px;
+}
+
+.item {
+    font-size:30px;
+    padding:0 10px;
+}