Revamped website

3rd and final revamp for this year pog. Updates to Font Awesome v6, new styling etc.

public/index.html

@@ -24,10 +24,11 @@
     -->
     <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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.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=Nunito+Sans:wght@600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "thatalex.dev",
-  "name": "Alex / Zeph - my portfolio, about me & how to contact me",
+  "name": "Alex - my portfolio, about me & how to contact me",
   "icons": [],
   "start_url": ".",
   "display": "standalone",

src/App.jsx

@@ -1,26 +1,23 @@
 import React from 'react';
 import {Routes,BrowserRouter,Route} from 'react-router-dom';
 import {NavBar,Footer} from "./Components";
-import {Redirector} from './Utilities';
+import {HomePage,ContactPage,NotFound} from "./Pages";
-import {HomePage,AboutPage,NotFound} from "./Pages";
 
 const pages = [
     {
         "slug": "home",
-        "path": "/",
+        "path": "/"
-        "display": "Home"
     },
     {
-        "slug": "about",
+        "slug": "contact",
-        "path": "/about",
+        "path": "/contact"
-        "display": "About"
     }
 ]
 
 export class App extends React.Component {
     renderPageLinks() {
         return pages.map((page) => {
-            return <a href={page.path} key={page.slug} rel={"noreferrer"} target={"_self"}><li className={"nav-links"}>{page.display}</li></a>
+            return <a href={page.path} key={page.slug} rel={"noreferrer"} target={"_self"}><li className={"nav-links"}>{page.slug}</li></a>
         })
     }
 
@@ -31,8 +28,7 @@ export class App extends React.Component {
                 <BrowserRouter>
                     <Routes>
                         <Route path={"/"} element={<HomePage />} />
-                        <Route path={"/about"} element={<AboutPage />} />
+                        <Route path={"/contact"} element={<ContactPage />} />
-                        <Route path={"/capy"} element={<Redirector url={"https://www.youtube.com/watch?v=oLsVrshvOaI"} />} />
                         <Route path={"*"} element={<NotFound />} />
                     </Routes>
                 </BrowserRouter>

src/Components.jsx

@@ -1,14 +1,30 @@
 import React from 'react';
-import { socket } from './Services';
+import {Href} from './Utilities'
 
 export class NavBar extends React.Component {
     render() {
         return (
             <div id={"nav"}>
-                <ul style={{ paddingLeft:"0px" }} className={"nav-items"}>
+                <ul style={{ paddingLeft:"0px" }} id={"nav-items"}>
                     {this.props.pages}
+                    <div className={"social"}>
+                        <a href={"https://twitter.com/zstreamss"} target={"_blank"} rel={"noreferrer"}>
+                            <i className="fa-brands fa-twitter" aria-hidden="true"></i>
+                        </a>
+                        <a href={"https://social.thatalex.dev"} target={"_blank"} rel={"noreferrer"}>
+                            <i className={"fa-brands fa-mastodon"} aria-hidden={"true"} />
+                        </a>
+                        <a href={"https://github.com/azpha"} target={"_blank"} rel={"noreferrer"}>
+                            <i className="fa-brands fa-github" aria-hidden="true"></i>
+                        </a>
+                        <a href={"https://linkedin.com/in/thatalex"} target={"_blank"} rel={"noreferrer"}>
+                            <i className="fa-brands fa-linkedin-in" aria-hidden="true"></i>
+                        </a>
+                        <a href={"mailto:hi@thatalex.dev"} target={"_blank"} rel={"noreferrer"}>
+                            <i className="fa fa-envelope" aria-hidden="true"></i>
+                        </a>
+                    </div>
                 </ul>
-                <hr style={{width:"300px"}} />
             </div>
         )
     }
@@ -18,63 +34,26 @@ export class Footer extends React.Component {
     render() {
         return (
             <div id={"footer"}>
-                <p>Website by <a href={"https://github.com/zevhr/pause"} target={"_blank"} rel={"noreferrer"}>Alex</a></p>
+                <p>Made with <i style={{color:"red"}} className={"fa-solid fa-heart"} /> & <i style={{color:"gray"}} className={"fa-solid fa-music"} /> by Alex</p>
-                <div className={"footeritems"}>
+                <p><Href url={"https://github.com/azpha/website"} tab={"_blank"} content={"Source Code"} /></p>
-                    <SocialMedia />
-                </div>
             </div>
         )
     }
 }
 
-export class IFrame extends React.Component {
+export class ShowcaseCard extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            d: null,
-            userSetVolume: null
-        }
-
-        socket.emit("spotify", {"event":"listen"});
-        socket.on("api_update", async (message) => {
-            if (message) await this.setState({ d: message })
-        })
-    }
-
     render() {
-        if (!this.state.d) return (
+        if (this.props.header && this.props.paragraph) return (
-            <div />
+            <div id={"card"}>
-        )
+                <div id={"card-content"}>
-
+                    <div id={"card-header"}>
-        return (
+                        {this.props.url ? <Href url={this.props.url} tab={"_blank"} content={<h1>{this.props.header}</h1>} /> : <h1>{this.props.header}</h1>}
-            <div id={"iframe"} style={{width:"50%",top:"10%"}}>
+                    </div>
-                <div id="player" className={"player centered horizontally"}>
+                    <div id={"card-paragraph"}>
-                    <span className={"songinfo"}>
+                        <p>{this.props.paragraph}</p>
-                        { this.state.d ? <React.Fragment><p>{this.state.d.TITLE}<br />{this.state.d.ARTIST}</p><p>{this.state.d.POSITION} \\ {this.state.d.DURATION}</p></React.Fragment> : <p>Uh oh! Something went wrong.</p>}
+                    </div>
-                    </span>
                 </div>
             </div>
         )
     }
 }
-
-export class SocialMedia extends React.Component {
-    render() {
-        return (
-            <div className={"social"}>
-                <a href={"https://twitter.com/zstreamss"} target={"_blank"} rel={"noreferrer"}>
-                    <i className="fa fa-twitter-square" aria-hidden="true"></i>
-                </a>
-                <a href={"https://github.com/azpha"} target={"_blank"} rel={"noreferrer"}>
-                    <i className="fa fa-github-square" aria-hidden="true"></i>
-                </a>
-                <a href={"https://linkedin.com/in/thatalex"} target={"_blank"} rel={"noreferrer"}>
-                    <i className="fa fa-linkedin-square" aria-hidden="true"></i>
-                </a>
-                <a href={"mailto:hi@thatalex.dev"} target={"_blank"} rel={"noreferrer"}>
-                    <i className="fa fa-envelope" aria-hidden="true"></i>
-                </a>
-            </div>
-        )
-    }
-}

src/Pages.jsx

@@ -1,84 +1,124 @@
 import React from 'react';
-import {IFrame, SocialMedia} from "./Components";
+import {ShowcaseCard} from "./Components";
 
 export class HomePage extends React.Component {
     render() {
         return (
-            <div id={"home"}>
+            <div id={"home"} className={"centered horizontally vertically"} style={{paddingBottom:"10%"}}>
-                <div id={"profile"} className={"centered horizontally vertically"}>
+                <div style={{ textAlign:"center" }}>
-                    <img width={"100px"} src={"https://pbs.twimg.com/profile_images/1587882255740985346/5knCQsEd_400x400.jpg"} />
+                    <div id={"profile"}>
-                    <h1>Alex</h1>
+                        <img width={"100px"} alt={"Profile"} src={"https://pbs.twimg.com/profile_images/1587882255740985346/5knCQsEd_400x400.jpg"} />
-                    <p>QA @ <a href={"https://medal.tv"}>Medal.tv</a>, JS/Java Dev</p>
+                        <h1 style={{color:"white"}}>Alex</h1>
-                    <SocialMedia />
+                        <p style={{color:"white"}}>Just about everything QA @ <a href={"https://medal.tv"}>Medal.tv</a></p>
+                    </div>
+                    <ShowcaseCard
+                        url={"https://github.com/azpha/splitstat"}
+                        header={"SplitStat"}
+                        paragraph={"SplitStat was a Discord bot that interfaced with Tracker Network's API to return and compare SplitStat: Arena Warfare stats with others."}
+                    />
+                    <ShowcaseCard
+                        url={"https://pause.thatalex.dev"}
+                        header={"Pause!"}
+                        paragraph={"Pause my music. Website that controls my Spotify client using the full suite of controls; skip, pause, repeat, shuffle, volume, you name it!"}
+                    />
+                    <ShowcaseCard
+                        url={"https://donotbro.me"}
+                        header={"donotbrome"}
+                        paragraph={"Just don't bro me. A website that one of my friends sparked me to make from starting conversations with one word; 'bro'."}
+                    />
                 </div>
             </div>
         )
     }
 }
 
-export class AboutPage extends React.Component {
+export class ContactPage extends React.Component {
+    async sendMessage(name,email,subject,message) {
+        return fetch("https://api.zephmakes.tech/v3/tools/contact", {
+            method: "POST",
+            headers: {
+                'content-type': "application/json"
+            },
+            body: {
+                name,
+                email,
+                subject,
+                message
+            }
+        })
+            .then(result => {
+                if (result.ok) return true;
+                else return false;
+            })
+            .catch(err => {
+                console.log('Contact request failed with error "' + err.message + '"');
+                return false;
+            })
+    }
+
     render() {
         return (
-            <div id={"about"} className={"centered horizontally vertically"} style={{
+            <div id={"contact"} className={"centered horizontally vertically"}>
-                paddingTop:"10px",
+                <div id={"form-container"}>
-                padding:"10px",
+                    <div id={"form"}>
-                textAlign: "center"
+                        <div style={{textAlign:"center"}}>
-            }}>
+                            <h1 style={{fontSize:"25px"}}>great, lets talk!</h1>
-                <h1>Hi, I'm Alex!</h1>
+                            <br />
-                <p>I'm a JavaScript/Java/Python developer, currently working at Medal.tv as a Manual QA Tester!</p>
+                            <input
-                <h2>What do I like to do?</h2>
+                                id={"name"}
-                <p>Well, coding is one thing. I enjoy making random apps in any language, including this website!</p>
+                                name={"name"}
-                <p>I'm exploring the realm of test automation & getting more familiar with best practices.</p>
+                                placeholder={"your name.."}
-                <p>I also enjoy listening to music a little too much. Like, it's bad.</p>
+                                required
-                <hr style={{width:"300px"}} />
+                            />
-                <h2>What am I listening to right now?</h2>
+                            <br />
-                <p style={{}}><i>Want to screw with my music? <a href={"https://pause.thatalex.dev"} rel={"noreferrer"} target={"_blank"}>Use my 'Pause!' website!</a></i></p>
+                            <input
-                <IFrame />
+                                id={"email"}
+                                name={"email"}
+                                placeholder={"your email.."}
+                                required
+                            />
+                            <br />
+                            <input
+                                id={"subject"}
+                                name={"subject"}
+                                placeholder={"subject.."}
+                                required
+                            />
+                            <br /><br />
+                            <textarea
+                                style={{width:"30vw",height:"150px",resize:"none"}}
+                                id={"message"}
+                                name={"message"}
+                                placeholder={"'lorem ipsum' yada yada yada.."}
+                                required
+                            />
+                            <br />
+                            <button
+                                type={"button"}
+                                onClick={() => this.sendMessage(
+                                    document.getElementById("name"),
+                                    document.getElementById("email"),
+                                    document.getElementById("subject"),
+                                    document.getElementById("message")
+                                )}
+                            >Submit</button>
+                        </div>
+                    </div>
+                </div>
             </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('') === "capybara") {
-                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++;
-                    }, 3000)
-                }
-            }
-        })
-    }
-
     render() {
         return (
-            <div id={"error"} className={"centered horizontally vertically"} style={{bottom:"10%", lineHeight:"0.5"}}>
+            <div id={"error"} className={"centered horizontally vertically"} style={{bottom:"10%", lineHeight:"1.5em", color:"white", textAlign:"center"}}>
+                <video autoPlay={true} loop={true} style={{pointerEvents: "none", width:"500px"}}>
+                    <source src={"https://storage.thatalex.dev/content/polar_bear-v2.mp4"} type={"video/mp4"} />
+                </video>
                 <h1>Well, this is awkward..</h1>
-                <p>You've landed on a page that just doesn't exist.</p>
+                <p>You've landed on a page that just doesn't exist.<br />Enjoy this low-quality polar bear, traveller. You'll need it.</p>
-                <p>You should, like, <a href={"#"} onClick={() => window.history.back()}>head back now..</a></p>
-
-                <span id={"lawd"} style={{ display: "none", color:"red" }}><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/Utilities.jsx

@@ -1,6 +1,18 @@
 import React from 'react';
 import {NotFound} from './Pages';
 
+export class Href extends React.Component {
+    render() {
+        if (this.props.url && this.props.content && this.props.tab) return (
+            <a
+                href={this.props.url}
+                rel={"noreferrer"}
+                target={this.props.tab}
+            >{this.props.content}</a>
+        )
+    }
+}
+
 export class Redirector extends React.Component {
     constructor(props) {
         super(props);

src/main.css

@@ -1,68 +1,22 @@
-body,html {
+/* css reset */
-    background-color:black;
+html, body, ul, h1, h2, h3, h4 {
-    color:white;
-    font-family: 'Nunito Sans', sans-serif;
-    -ms-overflow-style:none;
-    scrollbar-width:none;
-}
-
-body::-webkit-scrollbar {
-    display:none;
-}
-
-#anim {
-    animation-duration: 5s;
-    animation-name: goRight;
-    animation-iteration-count: initial;
-    left: -200px;
-    position: absolute;
-}
-
-.nav-items ul {
-    list-style-type:none;
-    list-style-position:inside;
-}
-
-.nav-items li {
-    display:inline-block;
-    padding:10px;
-    font-size:25px;
-}
-
-#nav {
-    text-align:center;
-}
-
-.nav-links:hover {
-    animation-name: hover;
-    animation-duration:0.5s;
-    animation-fill-mode:forwards;
-}
-
-.player {
-    background:black;
-    width:fit-content;
-    line-height:1;
-    border-color:white;
-    border-style:solid;
-    border-width:5px;
-    text-align:center;
-    padding:10px;
-    border-radius:10px;
-}
-
-.songinfo {
-    color:white;
-    padding:0;
     margin:0;
+    padding:0;
 }
 
-.player img {
+html,body {
-    padding:10px 0;
+    background-color:black;
+    font-family: 'Open Sans', sans-serif;
+    overflow-x:hidden;
 }
 
-a:visited,a {
+/* global */
+a {
     color:white;
+    text-decoration:none;
+}
+a:hover {
+    color:gray;
 }
 
 .centered {
@@ -73,36 +27,114 @@ a:visited,a {
     position: absolute;
     z-index:-1;
 }
-
 .horizontally {
     margin-left:auto;
     margin-right:auto;
     left:0;
     right:0;
 }
-
 .vertically {
     margin-top:0;
     margin-bottom:0;
     top:0;
     bottom:0;
 }
-
+input,textarea {
-#profile {
+    border-width:2px;
-    bottom:5%;
+    border-radius:20px;
-    font-size:20px;
+    border-color:white;
-    line-height:0;
+    text-align:center;
+}
+input::placeholder, textarea::placeholder {
+    padding-left:5px;
 }
 
-.social {
+/*components*/
+#form-container {
+    padding-bottom:5%;
+}
+#form {
+    width:30vw;
+    padding:110px 100px;
+    background-color:gray;
+    border-radius:50px;
+    border-color:white;
+    border-style:solid;
+}
+#card {
+    display:inline-block;
+    margin:auto;
     padding:10px;
-    font-size:30px;
+    text-align:center;
+    vertical-align: top;
+}
+#card-content {
+    background-color:black;
+    border-radius:50px;
+    border-style:solid;
+    color:#bfbfbf;
+    width:300px;
+    height:200px;
+}
+#card-header {
+    padding-top:20px;
+    font-size:15px;
+}
+#card-paragraph {
+    font-size:15px;
+    padding:0 10px;
 }
 
+@media only screen and (max-width:655px) {
+    #profile {
+        padding-top:10%;
+    }
+}
+
+/* nav bar */
+#nav {
+    background-color:black;
+    text-align:left;
+    padding-left:15px;
+    overflow-y:hidden;
+}
+#nav-items ul {
+    list-style-type:none;
+    list-style-position:inside;
+}
+#nav-items li {
+    display:inline-block;
+    padding:10px;
+    font-size:20px;
+}
+#nav-items a {
+    color:white;
+}
+#nav-items a:hover {
+    color:gray;
+}
+.social {
+    padding:6px;
+    float:right;
+    font-size:25px;
+}
 .social a {
     padding:10px 8px;
+    color:white;
+}
+.social a:hover {
+    color:gray;
+}
+@media only screen and (max-width:500px) {
+    .social {
+        display:none;
+    }
+    #nav {
+        padding-left:15px;
+    }
 }
 
+/* footer */
 #footer {
     text-align:center;
     color:white;
@@ -114,30 +146,20 @@ a:visited,a {
     right:0;
     line-height:0.1;
 }
-
+#footer a {
-#about {
+    color:white;
-    line-height:0;
+    text-decoration:none;
-    bottom:30%;
+}
-}
+#footer a:hover {
-
+    color:gray;
-@media only screen and (max-width:705px) {
+    text-decoration:underline;
-    #about {
+}
-        line-height:1;
+#footer a:visited {
-        bottom:20%;
+    color:white;
-    }
 }
 
+/* animations */
 @keyframes hover {
     from { opacity:1; }
     to { opacity:0.5; }
 }
-
-@keyframes goRight {
-    from {
-        transform: translate(-250px,0);
-    }
-
-    to {
-        transform: translate(150vw,0);
-    }
-}