make site "r e t r o"

17 files changed, 139 insertions, 54 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 2a7c22e..198311f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -30,7 +30,7 @@ export default class App extends Component {
 							<NavigationBar />
 							
 							<Routes />
-
+							
 							<Footer />
 						</div>
 					</div>
diff --git a/src/components/about/Hero.js b/src/components/about/Hero.js
index 453f762..2744b90 100644
--- a/src/components/about/Hero.js
+++ b/src/components/about/Hero.js
@@ -10,6 +10,12 @@ export default class Hero extends Component {
                     <div className="row">
                         <div className="col-lg-12" data-wow-delay="1s">
                             <h3 className="wow fadeInUp" data-wow-delay="1.2s">about me.</h3>
+                            <a href="https://strelizia.cc/ZooX36Lt9pmchjbjpiu8HzY0MYqfcZ41.txt">
+                                <img className="wow fadeInUp" data-wow-delay="1.25s"
+                                    src="https://web.archive.org/web/20091027134504/http://geocities.com/developmentcom/dr_recommended.gif"
+                                    alt="doctor recommended click here" />
+                            </a>
+                            <br /><br />
                             
                             <p className="wow fadeInUp">
                                     Hi, I'm Sin. I'm a fullstack developer from Oregon. Some of my favourite languages and technologies to work with are Node.js, C++ and MERN.
diff --git a/src/components/error/Hero.js b/src/components/error/Hero.js
new file mode 100644
index 0000000..9b25d7e
--- /dev/null
+++ b/src/components/error/Hero.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="hero">
+                    <div className="header">
+                        <img className="wow fadeInUp" data-wow-delay="1s"
+                            src="https://web.archive.org/web/20090830171432im_/http://geocities.com/gapc/lgm-nosmovimos.gif"
+                            alt="lost gif" />
+                        <br /><br />
+
+                        <h6 className="wow fadeInUp" data-wow-delay="1.2s">wow, you seem to be <span style={{"letterSpacing": "4px", "fontStyle": "italic", "fontWeight": "bold"}}>lost</span> ...</h6>
+                        <br />
+
+                        <center>
+                            <a href="/">
+                                <center>
+                                    <img className="wow fadeInUp" data-wow-delay="1s"
+                                        src="https://web.archive.org/web/20091021193614/http://www.geocities.com/moz_compilation/homeswrl_e0.gif"
+                                        alt="home gif" />
+                                </center>
+                            </a>
+                        </center>
+                    </div>
+                </div>
+                
+                { /* <div className="scroll-down"></div> */ }
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
index 92a6271..e3c0a45 100644
--- a/src/components/home/Hero.js
+++ b/src/components/home/Hero.js
@@ -6,9 +6,10 @@ export default class Hero extends Component {
             <React.Fragment>
                 <div className="hero">
                     <div className="header">
-                        <h1 className="line anim-typewriter">
-                            "Under Construction"
-                        </h1>
+                        <img className="wow fadeInUp" data-wow-delay="1s" src= "https://web.archive.org/web/20090830101531/http://geocities.com/SiliconValley/Lab/9783/images/Undercon-flash.gif"
+                            alt="1990s era under constriction gif" />
+                        <br />
+                        <small className="wow fadeInUp" data-wow-delay="1.2s">last updated: 1991. 10. 12</small>
                     </div>
                 </div>
                 
diff --git a/src/components/navigation/Footer.js b/src/components/navigation/Footer.js
index 81e691c..ff260b1 100644
--- a/src/components/navigation/Footer.js
+++ b/src/components/navigation/Footer.js
@@ -28,7 +28,7 @@ export default class Footer extends Component {
                             <div className="col-lg-4" id="personal">
                                 <p className="wow fadeInUp">copyleft</p>
                                 <h4 className="wow fadeInUp" data-wow-delay="0.2s">
-                                    <a href="/">fuwn 2020</a>
+                                    <a id="info-item-1" href="/">fuwn 2020</a>
                                 </h4>
                                 <br /><br />
                             </div>
@@ -38,13 +38,13 @@ export default class Footer extends Component {
                                 
                                 <ul>
                                     <li id="tw" className="wow fadeInUp" data-wow-delay="0.8s">
-                                        <a href="https://twitter.com/_fuwn">tw</a>
+                                        <a id="media-item-1" href="https://twitter.com/_fuwn">tw</a>
                                     </li>
                                     <li id="yt" className="wow fadeInUp" data-wow-delay="1s">
-                                        <a href="https://youtube.com/Fuwny">yt</a>
+                                        <a id="media-item-2" href="https://youtube.com/Fuwny">yt</a>
                                     </li>
                                     <li id="gh" className="wow fadeInUp" data-wow-delay="1s">
-                                        <a href="https://github.com/8cy">gh</a>
+                                        <a id="media-item-3" href="https://github.com/8cy">gh</a>
                                     </li>
                                 </ul>
                                 <br /><br />
@@ -52,7 +52,13 @@ export default class Footer extends Component {
                             
                             <div className="col-lg-4" id="address">
                                 <p className="wow fadeInUp" data-wow-delay="0s">need me ?</p>
-                                <h4 className="wow fadeInUp" data-wow-delay="0.2s"><a href="mailto: [email protected]">[email protected]</a></h4>
+                                <h4 className="wow fadeInUp" data-wow-delay="0.2s">
+                                    { /* <a id="address-item-1" href="mailto: [email protected]">[email protected]</a> */ }
+                                    <a href="mailto: [email protected]">
+                                        <img src="https://web.archive.org/web/20091025033811/http://geocities.com/uspa.geo/email007.gif"
+                                            alt="" />
+                                    </a>
+                                </h4>
                                 <br /><br />
                             </div>
                         </div>
diff --git a/src/components/navigation/NavigationBar.js b/src/components/navigation/NavigationBar.js
index d07055b..a757b71 100644
--- a/src/components/navigation/NavigationBar.js
+++ b/src/components/navigation/NavigationBar.js
@@ -7,15 +7,20 @@ export default class NavigationBar extends Component {
                 <nav>
                     { /* <div className="blur"></div> */ }
 
-                    { /* <span id="brand">
-                        <a href="/">Fuwn</a>
-                    </span> */ }
+                    <span id="brand">
+                        <a href="/">::</a>
+                    </span>
                     
                     <ul id="menu">
-                        <li><a href="/">home<span>.</span></a></li>
-                        <li><a href="/skills">skills<span>.</span></a></li>
-                        <li><a href="/projects">projects<span>.</span></a></li>
-                        <li><a href="/about">about me<span>.</span></a></li>
+                        <li><a id="menu-item-1" href="/">/home</a></li>
+                        <li>
+                            <a id="menu-item-2" href="/skills">/skills &nbsp;
+                                <img src="https://web.archive.org/web/20091027081341/http://geocities.com/serbianchog/new1.gif"
+                                    alt="new" />
+                            </a>
+                        </li>
+                        <li><a id="menu-item-3" href="/projects">/projects</a></li>
+                        <li><a id="menu-item-4" href="/about">/about me</a></li>
                         { /* <li><a href="/contact">contact<span>.</span></a></li> */ }
                     </ul>
                     
diff --git a/src/components/project/ProjectEndAll.js b/src/components/project/ProjectEndAll.js
index 56680ac..c850a68 100644
--- a/src/components/project/ProjectEndAll.js
+++ b/src/components/project/ProjectEndAll.js
@@ -7,6 +7,14 @@ export default class ProjectEndAll extends Component {
             <React.Fragment>
                 <div className="whitespace"></div>
 
+                <div className="row mobile-txt3">
+                    <div className="col-lg-5"></div>
+                    <div className="col-lg-5">
+                        <h4 className="wow fadeInUp" data-wow-delay="1.6s">{this.props.projectData.title}</h4>
+                    </div>
+                    <div className="col-lg-5"></div>
+                </div>
+
                 <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
                 <div className="row">
                     <div className="col-lg-5"></div>
@@ -22,15 +30,6 @@ export default class ProjectEndAll extends Component {
 
                     <div className="col-lg-1"></div>
                 </div>
-                <br />
-
-                <div className="row">
-                    <div className="col-lg-5"></div>
-                    <div className="col-lg-5">
-                        <h4 className="wow fadeInUp" data-wow-delay="1.6s">{this.props.projectData.title}</h4>
-                    </div>
-                    <div className="col-lg-5"></div>
-                </div>
             </React.Fragment>
         )
     }
diff --git a/src/components/skills/Hero.js b/src/components/skills/Hero.js
index 893e67d..a47d987 100644
--- a/src/components/skills/Hero.js
+++ b/src/components/skills/Hero.js
@@ -10,11 +10,14 @@ export default class Hero extends Component {
                     <div className="row">
                         <div className="col-lg-8">
                             <h3 className="wow fadeInUp" data-wow-delay="1s">skills.</h3>
+                            <img className="wow fadeInUp" data-wow-delay="1.15s"
+                                src="https://web.archive.org/web/20090809234237/http://www.geocities.com/lateralusspiraleyes/neo_coding_flash.gif"
+                                alt="neo" />
                             <br />
-                            <p className="wow fadeInUp" data-wow-delay="1.2s">
+                            { /* <p className="wow fadeInUp" data-wow-delay="1.2s">
                                 A list and a few examples of my various skills/ interests.
-                            </p>
-                            <p className="wow fadeInUp" data-wow-delay="1.4s">
+                            </p> */ }
+                            <p className="wow fadeInUp" data-wow-delay="1.2s">
                                 Disclaimer: despite working in fullstack, I not only have a mild distaste for frontend, I'm subpar at it, so don't expect much in that field.
                             </p>
                         </div>
diff --git a/src/components/skills/SkillListing.js b/src/components/skills/SkillListing.js
index 2164355..9cf2b5e 100644
--- a/src/components/skills/SkillListing.js
+++ b/src/components/skills/SkillListing.js
@@ -9,14 +9,15 @@ export default class Skills extends Component {
                     
                     <div className="row">
                         <div className="col-lg-8">
-                            <h5 className="wow fadeInUp" data-wow-delay="1s">achievements.</h5>
+                            <h5 className="wow fadeInUp" data-wow-delay="1s">acknowledgements.</h5>
                             <br />
                             <ul className="wow fadeInUp" data-wow-delay="1s">
-                                <li><b>Discord:</b> Verified Bot Developer, Verified Discord Bots</li>
-                                <li><b>Current Occupation:</b> Fullstack Node.js Technician</li>
-                                <li>Multiple Lead Development positions on various CS:GO Clients (Jade, Maldrama, Rees, Guppy, etc.)</li>
-                                <li>Lead Developer of the Minecraft Ghost Client; Vespertine</li>
+                                <li><b>Discord:</b> Verified Bot Developer, Verified Discord Bot(s)</li>
+                                { /* <li><b>Current Occupation:</b> Fullstack Node.js Technician</li> */ }
+                                <li>Multiple Lead Development positions on various CS:GO Clients (Jade, Maldrama, Rees, Guppy, Sprite, etc.)</li>
+                                <li>Lead Developer and Proprietor of the Minecraft Ghost Client; Vespertine</li>
                                 <li>Various Freelance Jobs</li>
+                                <li>Multi-langual</li>
                             </ul>
                             <br />
 
@@ -112,9 +113,11 @@ export default class Skills extends Component {
                                             <h6>Assembly</h6>
                                             <p>Not that great at it, but decent nonetheless...</p>
                                             <ul>
-                                                <li>MASM x86/ x64</li>
-                                                <li>NASM x86/ x64</li>
-                                                <li>Z80 GBDK</li>
+                                                <li>MASM x86/ x64 (Windows API)</li>
+                                                <li>NASM x86/ x64 (Linux Kernal)</li>
+                                                <li>FASM 16/ 32 Bit (MS-DOS)</li>
+                                                <li>Z80 GBDK (Game Boy)</li>
+                                                <li>6502 (Micro-controllers, NES)</li>
                                             </ul>
                                         </li>
                                         <br />
diff --git a/src/components/work/Categories.js b/src/components/work/Categories.js
index 09c8fb2..a3f1eac 100644
--- a/src/components/work/Categories.js
+++ b/src/components/work/Categories.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import ProjectOne from '../project/ProjectOne';
+/* import ProjectOne from '../project/ProjectOne';
 import ProjectTwo from '../project/ProjectTwo';
-import ProjectThree from '../project/ProjectThree';
+import ProjectThree from '../project/ProjectThree'; */
 import ProjectEndAll from "../project/ProjectEndAll";
 
 export default class Categories extends Component {
diff --git a/src/components/work/Hero.js b/src/components/work/Hero.js
index 572b37e..06885a3 100644
--- a/src/components/work/Hero.js
+++ b/src/components/work/Hero.js
@@ -11,6 +11,10 @@ export default class Hero extends Component {
                         <div className="col-lg-8">
                             <h3 className="wow fadeInUp" data-wow-delay="1s">projects.</h3>
                             <br />
+                            <img className="wow fadeInUp" data-wow-delay="1.5s"
+                            src="https://web.archive.org/web/20091027135032/http://geocities.com/ikiteiruna_yume/coding.gif"
+                                alt="matrix flowing" />
+                            <br /><br />
                             <p className="wow fadeInUp" data-wow-delay="1.2s">
                                 I usually do a couple little projects every now and then to exercise my skills. Here are a few.
                             </p>
diff --git a/src/components/work/categories/Videos.js b/src/components/work/categories/Videos.js
index 8350a32..7f66476 100644
--- a/src/components/work/categories/Videos.js
+++ b/src/components/work/categories/Videos.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import ProjectOne from '../../project/ProjectOne';
+/* import ProjectOne from '../../project/ProjectOne';
 import ProjectTwo from '../../project/ProjectTwo';
-import ProjectThree from '../../project/ProjectThree';
+import ProjectThree from '../../project/ProjectThree'; */
 
 import DynamicTitle from "../../navigation/DynamicTitle";
 
@@ -20,13 +20,14 @@ export default class VideosCategory extends Component {
                     <div className="whitespace"></div>
                     
                     <center>
-                        <iframe width="1000" height="592.5"
+                        <iframe width="1000" height="592.5" title="video"
+                            className="wow fadeInUp" data-wow-delay="1.2s"
                             src="https://www.youtube.com/embed/3BvvbDYif1o"
                             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                            allowfullscreen></iframe>
+                            allowfullscreen="1"></iframe>
                         <br />
                         
-                        <small>
+                        <small className="wow fadeInUp" data-wow-delay="1.4s">
                             Heres, my most recent video. I'll probably end up fetching my videos from the YouTube<br />
                             API and displaying them based on date released, but I'm too lazy for it right now.
                         </small>
diff --git a/src/pages/About.js b/src/pages/About.js
index 4c3d054..ca5cf3d 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Image from '../components/about/Image';
+// import Image from '../components/about/Image';
 import Hero from '../components/about/Hero';
 
 import DynamicTitle from '../components/navigation/DynamicTitle';
diff --git a/src/pages/Home.js b/src/pages/Home.js
index d7b9238..6a6f2ce 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 
 import Hero from '../components/home/Hero';
-import FeaturedProjects from '../components/home/FeaturedProjects';
+// import FeaturedProjects from '../components/home/FeaturedProjects';
 
-import projectData from '../components/projectData';
+// import projectData from '../components/projectData';
 
 import DynamicTitle from '../components/navigation/DynamicTitle';
 
diff --git a/src/routes/ProjectRoutes.js b/src/routes/ProjectRoutes.js
index e97475a..4290428 100644
--- a/src/routes/ProjectRoutes.js
+++ b/src/routes/ProjectRoutes.js
@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, /*Redirect, */ Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
-import Project from '../components/project/project-page/Project';
+// import Project from '../components/project/project-page/Project';
 import VideosCategory from "../components/work/categories/Videos";
 import DevelopmentCategory from "../components/work/categories/Development";
 
 import projectData from '../components/projectData';
 
+import ErrorHero from "../components/error/Hero";
+
 export default class ProjectRoutes extends Component {
     render() {
         return(
@@ -18,6 +20,9 @@ export default class ProjectRoutes extends Component {
                     <Route exact path="/videos">
                         <VideosCategory projectData={projectData} />
                     </Route>
+                    <Route exact path="/*">
+                        <ErrorHero />
+                    </Route>
                 </Switch>
             </Router>
         )
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
index 3626856..cf4c024 100644
--- a/src/routes/Routes.js
+++ b/src/routes/Routes.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import ProjectRoutes from './ProjectRoutes';
 
@@ -30,9 +30,6 @@ export default class Routes extends Component {
                         <Skills />
                     </Route>
                     <ProjectRoutes />
-                    <Route>
-                        <Redirect to="/" />
-                    </Route>
                 </Switch>
             </Router>
         )
diff --git a/src/styles/style.css b/src/styles/style.css
index d00fc49..2ebfa8c 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -104,7 +104,7 @@ nav #menu {
 }
 
 nav #menu li {
-	padding-left: 40px;
+	padding-left: 30px; /* 40px */
 	display: inline-block;
 	cursor: pointer;
 	font-weight: 300;
@@ -119,12 +119,19 @@ nav #menu li span {
 
 nav #menu li a {
 	color: #fff;
+	transition: 0.5s;
 }
 
 nav #menu li a:hover {
 	text-decoration: none;
+	transition: 0.5s;
 }
 
+#menu-item-1:hover { letter-spacing: 1px; font-family: cursive; }
+#menu-item-2:hover { font-weight: bold; font-family: monospace; }
+#menu-item-3:hover { font-style: italic; font-family: Arial, Helvetica, sans-serif; }
+#menu-item-4:hover { text-decoration: underline !important; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+
 #toggle {
 	position: absolute;
 	right: 30px;
@@ -453,8 +460,15 @@ h6 {
 div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
 	color: inherit;
 	text-decoration: none;
+	transition: 0.5s;
 }
 
+#info-item-1:hover { font-weight: bold; font-family: monospace; }
+#media-item-1:hover { text-decoration: underline !important; font-family: Arial, Helvetica, sans-serif; }
+#media-item-2:hover { font-style: italic; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; }
+#media-item-3:hover { letter-spacing: 1px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#address-item-1:hover {font-style: italic; font-family: cursive; }
+
 /*--------------- Work Page --------------- */
 
 .hero-content {
@@ -585,9 +599,17 @@ textarea:focus {
     }
 }
 
+@media(max-width: 768px) {
+    .mobile-txt3 {
+        display: none;
+    }
+}
+
 .mobile-txt2 {
     content: "absence.";
     font-family: "Roboto Mono";
     font-size: 16px;
     color: #fff;
-}
\ No newline at end of file
+}
+
+/* ---- Extra ---- */
\ No newline at end of file