woops i forgot to commit these files lul

38 files changed, 2234 insertions, 0 deletions

diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 0000000..2a7c22e
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+// import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
+
+import Routes from '../routes/Routes';
+
+import NavigationBar from '../components/navigation/NavigationBar';
+import Footer from '../components/navigation/Footer';
+
+// import SEO from 'react-seo-component';
+
+export default class App extends Component {
+	state = {
+		loading: null
+	}
+	
+	render() {
+		if (this.state.loading) {
+			return(
+				<React.Fragment>
+					<div className="app-container">
+						<p>Loading</p>
+					</div>
+				</React.Fragment>
+			)
+		} else {
+			return(
+				<React.Fragment>
+					<div className="app-container">
+						<div className="wrapper">
+							<NavigationBar />
+							
+							<Routes />
+
+							<Footer />
+						</div>
+					</div>
+				</React.Fragment>
+			)
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/components/about/Hero.js b/src/components/about/Hero.js
new file mode 100644
index 0000000..453f762
--- /dev/null
+++ b/src/components/about/Hero.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br /><br />
+
+                    <div className="row">
+                        <div className="col-lg-12" data-wow-delay="1s">
+                            <h3 className="wow fadeInUp" data-wow-delay="1.2s">about me.</h3>
+                            
+                            <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.
+                                    Node.js would probably be my pick for my favourite technology seen as the wide flexability I can utilize it for. Some of which I utilize it for
+                                    is Discord bots using <a href="https://discord-akairo.github.io/#/">Akairo</a>, <a href="https://discord.js.org/#/">Discord.js</a> and feature rich and fast user interfaces using <a href="https://reactjs.org">React</a>.
+                            </p>
+                            
+                            <p className="wow fadeInUp" data-wow-delay="0.2s">
+                                    One thing you'll come to find is nothing is out of the realm of possibility for me, you'll usually see me creating what is usually referred
+                                    to as "cheats" or "hacks" in the form of CS:GO and Minecraft clients. Though, in sense, the outsiders might see this as ruining the game or something
+                                    along those lines, I see this is a exercise to my skill, with the conclusion being influenced by the amount of work and research that I have to put into these things. For instance, when
+                                    attempting to create CS:GO clients, an SDK has to be built from the ground up from what we call "offsets", offsets are the memory addresses at which
+                                    certain game features are held at. In the case of Minecraft clients, the <a href="https://en.wikipedia.org/wiki/Java_Native_Interface">JNI (Java Native Interface) </a>
+                                    needs to be utilized to be able to handle and hook
+                                    certain methods from the <a href="https://en.wikipedia.org/wiki/Java_virtual_machine">JVM (Java Virtual Machine)</a>.
+                            </p>
+
+                            <p className="wow fadeInUp" data-wow-delay="0.2s" style={{fontSize: "25px"}}>All self taught <span role="img" aria-label="praise emoji">🙌</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/about/Image.js b/src/components/about/Image.js
new file mode 100644
index 0000000..3356a72
--- /dev/null
+++ b/src/components/about/Image.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+export default class Image extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="row">
+                    <div
+                        className="col-lg-12 about image wow fadeInUp"
+                        data-wow-delay="1s"
+                    ></div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/contact/Form.js b/src/components/contact/Form.js
new file mode 100644
index 0000000..ec398fa
--- /dev/null
+++ b/src/components/contact/Form.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+const encode = (data) => {
+    return Object.keys(data)
+        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+        .join("&");
+}
+
+export default class Form extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { name: '', method: '', message: '' };
+    }
+
+    handleSubmit = e => {
+        fetch('/', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: encode({ 'form-name': 'contact-form', ...this.state })
+        });
+        
+        e.preventDefault();
+    }
+    
+    handleChange = e => this.setState({ [e.target.name]: e.target.value });
+
+    render() {
+        const { name, method, message } = this.state;
+        return(
+            <div className="container-fluid">
+                <div className="row">
+                    <div className="col-lg-8">
+                        <form name="contact-form" id="contact-form" action="/contact" onSubmit={this.handleSubmit} netlify>
+                            <ul>
+                                <li className="wow fadeInUp" data-wow-delay="1.4s">
+                                    <label htmlFor="name">Name:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="name" id="name" defaultValue={name} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                                <li className="wow fadeInUp" data-wow-delay="1.6s">
+                                    <label htmlFor="method">Email/ Discord:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="method" id="method" defaultValue={method} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                                <li className="wow fadeInUp" data-wow-delay="1.6s">
+                                    <label htmlFor="message">Message:</label>
+                                    <div className="textarea">
+                                        <input type="text" name="message" id="message" defaultValue={message} onChange={this.handleChange} required />
+                                    </div>
+                                </li>
+                            </ul>
+                            
+                            <button type="submit" name="contact-form" id="contact-form" className="send wow fadeInUp">
+                                Send Message
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/contact/Hero.js b/src/components/contact/Hero.js
new file mode 100644
index 0000000..847b27b
--- /dev/null
+++ b/src/components/contact/Hero.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="container">
+                    <div className="hero-content">
+                        <br /><br />
+                        
+                        <div className="row">
+                            <div className="col-lg-8">
+                                <h3 className="wow fadeInUp" data-wow-delay="1s">say hello <span role="img" aria-label="waving emoji">👋</span></h3>
+                                <br />
+                                <p className="wow fadeInUp" data-wow-delay="1.2s">Need something? Write me!</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/fingerprint/Fingerprint.js b/src/components/fingerprint/Fingerprint.js
new file mode 100644
index 0000000..02cc060
--- /dev/null
+++ b/src/components/fingerprint/Fingerprint.js
@@ -0,0 +1,4 @@
+export const getFingerprintGood = () => {
+    fetch("https://extreme-ip-lookup.com/json")
+        .then(res => console.log(res));
+}
diff --git a/src/components/home/FeaturedProjects.js b/src/components/home/FeaturedProjects.js
new file mode 100644
index 0000000..60cdf3b
--- /dev/null
+++ b/src/components/home/FeaturedProjects.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+// import ProjectOne from '../project/ProjectOne';
+import ProjectTwo from '../project/ProjectTwo';
+// import ProjectThree from '../project/ProjectThree';
+
+export default class FeaturedProjects extends Component {
+    render() {
+        // const itemCount = this.props.projectData.featured.length;
+        // let itemIteration = 1;
+        // let itemLast = false;
+        return(
+            <div className="container-fluid">
+                <br /><br /><br />
+                
+                <h6>selected projects</h6>
+                
+                <br />
+
+                { /* <div className="vertical"></div>
+                <br />
+                
+                <div className="whitespace"></div> */ }
+                { /* <div className="whitespace"></div> */ }
+                
+                { /* this.props.projectData.featured && this.props.projectData.featured.map((item) => {
+                        if (itemIteration >= itemCount) itemLast = true;
+                        itemIteration++;
+                        return(
+                            <React.Fragment>
+                                <ProjectOne projectData={item} />
+                                { itemLast ? '' : <br /> }
+                            </React.Fragment>
+                        )
+                    }) */ }
+                    
+                <ProjectTwo projectData={this.props.projectData.work.categories[0]} projectClass="category3" />
+                <br />
+                <p className="wow fadeInUp" data-wow-delay="1.2s" style={{fontSize: "12px"}}>
+                    i just wanna say, in this pic, they seem to be using the c++ standard<br />
+                    library, <code>iostream</code> for input/ output, imagine using <code>using namespace std;</code>, couldn't be me.
+                </p>
+                
+                { /* <div className="whitespace"></div>*/ }
+            </div>
+        )
+    }
+}
+
+FeaturedProjects.propTypes = {
+    projectData: PropTypes.object
+}
\ No newline at end of file
diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
new file mode 100644
index 0000000..92a6271
--- /dev/null
+++ b/src/components/home/Hero.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="hero">
+                    <div className="header">
+                        <h1 className="line anim-typewriter">
+                            "Under Construction"
+                        </h1>
+                    </div>
+                </div>
+                
+                { /* <div className="scroll-down"></div> */ }
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/navigation/DynamicTitle.js b/src/components/navigation/DynamicTitle.js
new file mode 100644
index 0000000..f1cdb19
--- /dev/null
+++ b/src/components/navigation/DynamicTitle.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+
+export default class DynamicTitle extends Component {
+    render() {
+        return(
+            <Helmet>
+                <title>{this.props.title ? this.props.title : "404 | Fuwn"}</title>
+            </Helmet>
+        )
+    }
+}
+
+DynamicTitle.propTypes = {
+    title: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/navigation/Footer.js b/src/components/navigation/Footer.js
new file mode 100644
index 0000000..81e691c
--- /dev/null
+++ b/src/components/navigation/Footer.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+export default class Footer extends Component {
+    render() {
+        return(
+            <div className="footer">
+                <div className="container">
+                    <br /><br />
+                    
+                    { /* <div className="collab">
+                        <div className="row">
+                            <div className="col-lg-12">
+                                <p className="wow fadeInUp">
+                                    Got an interesting project? I can help you.
+                                </p>
+                            </div>
+                        </div>
+                    </div> */ }
+                    
+                    { /* <div className="hr">
+                        <div className="row"></div>
+                    </div> */ }
+                    
+                    <br /><br />
+                    
+                    <div className="info">
+                        <div className="row">
+                            <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>
+                                </h4>
+                                <br /><br />
+                            </div>
+                            
+                            <div className="col-lg-4" id="media">
+                                <p className="wow fadeInUp" data-wow-delay="0s">links</p>
+                                
+                                <ul>
+                                    <li id="tw" className="wow fadeInUp" data-wow-delay="0.8s">
+                                        <a 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>
+                                    </li>
+                                    <li id="gh" className="wow fadeInUp" data-wow-delay="1s">
+                                        <a href="https://github.com/8cy">gh</a>
+                                    </li>
+                                </ul>
+                                <br /><br />
+                            </div>
+                            
+                            <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>
+                                <br /><br />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/navigation/NavigationBar.js b/src/components/navigation/NavigationBar.js
new file mode 100644
index 0000000..d07055b
--- /dev/null
+++ b/src/components/navigation/NavigationBar.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+
+export default class NavigationBar extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <nav>
+                    { /* <div className="blur"></div> */ }
+
+                    { /* <span id="brand">
+                        <a href="/">Fuwn</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 href="/contact">contact<span>.</span></a></li> */ }
+                    </ul>
+                    
+                    <div id="toggle">
+                        <div className="span">menu</div>
+                    </div>
+                </nav>
+                
+                <div id="resize">
+                    <div className="close-btn">close</div>
+                    
+                    <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 href="/contact">contact<span>.</span></a></li> */ }
+                    </ul>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/project/ProjectEndAll.js b/src/components/project/ProjectEndAll.js
new file mode 100644
index 0000000..56680ac
--- /dev/null
+++ b/src/components/project/ProjectEndAll.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectEndAll extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></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>
+
+                    { /* graphic3 */ }
+                    <div className={"col-lg-6 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}>
+                    </div>
+
+                    <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>
+        )
+    }
+}
+
+ProjectEndAll.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/ProjectOne.js b/src/components/project/ProjectOne.js
new file mode 100644
index 0000000..8c3b92f
--- /dev/null
+++ b/src/components/project/ProjectOne.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectOne extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    <div className="col-lg-8"></div>
+                    
+                    { /* graphic1 */ }
+                    <div className={"col-lg-4 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectOne.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/ProjectThree.js b/src/components/project/ProjectThree.js
new file mode 100644
index 0000000..079c47d
--- /dev/null
+++ b/src/components/project/ProjectThree.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectThree extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    <div className="col-lg-7"></div>
+
+                    { /* graphic3 */ }
+                    <div className={"col-lg-4 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+
+                    <div className="col-lg-1"></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectThree.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/ProjectTwo.js b/src/components/project/ProjectTwo.js
new file mode 100644
index 0000000..8e6ab8a
--- /dev/null
+++ b/src/components/project/ProjectTwo.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectTwo extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    { /* graphic2 */ }
+                    <div className={"col-lg-6 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+
+                    <div className="col-lg-6"></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectTwo.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/project-page/Project.js b/src/components/project/project-page/Project.js
new file mode 100644
index 0000000..2afbc8d
--- /dev/null
+++ b/src/components/project/project-page/Project.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectHero from './ProjectHero';
+import ProjectImage from './ProjectImage';
+
+import DynamicTitle from '../../navigation/DynamicTitle';
+
+export default class Project extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title={this.props.projectData.title + " | Fuwn"} />
+                
+                <div className="whitespace"></div>
+                <ProjectHero projectData={this.props.projectData} />
+                <ProjectImage projectData={this.props.projectData} projectClass={this.props.projectClass} />
+            </React.Fragment>
+        )
+    }
+}
+
+Project.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectHero.js b/src/components/project/project-page/ProjectHero.js
new file mode 100644
index 0000000..3d5f7ce
--- /dev/null
+++ b/src/components/project/project-page/ProjectHero.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectHero extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br />
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <br />
+                            
+                            <h1 className="wow fadeInUp" data-wow-delay="1s">"{this.props.projectData.title}"</h1>
+                            <br />
+                            <br />
+                            
+                            <div className="row">
+                                <div className="col-lg-4">
+                                    <p className="wow fadeInUp" data-wow-delay="1.2s">service:</p>
+                                    <h6 className="wow fadeInUp" data-wow-delay="1.3s">{this.props.projectData.service}</h6>
+                                </div>
+
+                                <div className="col-lg-4">
+                                    <p className="wow fadeInUp" data-wow-delay="1.6s">completed:</p>
+                                    <h6 className="wow fadeInUp" data-wow-delay="1.7s">{this.props.projectData.completed}</h6>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+ProjectHero.propTypes = {
+    projectData: PropTypes.object
+}
\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectImage.js b/src/components/project/project-page/ProjectImage.js
new file mode 100644
index 0000000..f46ef4a
--- /dev/null
+++ b/src/components/project/project-page/ProjectImage.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectImage extends Component {
+    render() {
+        return(
+            <div className="project-img">
+                <div className="container">
+                    <br />
+                    <div className="row">
+                        <div className="col-md-12">
+                            <div className={this.props.projectClass + " wow fadeInUp"} data-wow-delay="0.8s" style={{
+                                background: "url(" + this.props.projectData.image + ") no-repeat 50% 70%",
+                                backgroundSize: "cover", height: "630px"
+                            }}></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+ProjectImage.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectNavigation.js b/src/components/project/project-page/ProjectNavigation.js
new file mode 100644
index 0000000..014af21
--- /dev/null
+++ b/src/components/project/project-page/ProjectNavigation.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectNavigation extends Component {
+    render() {
+        return(
+            <div className="project-nav">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-6 prev">
+                            <a href="" id="no-h">
+                                <ion-icon name="arrow-back"></ion-icon>previous
+                            </a>
+                        </div>
+                        <div className="col-lg-6 next">
+                            <a href="" id="no-h">
+                                <ion-icon name="arrow-back"></ion-icon>next
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/projectData.js b/src/components/projectData.js
new file mode 100644
index 0000000..c0fa074
--- /dev/null
+++ b/src/components/projectData.js
@@ -0,0 +1,42 @@
+let projectData = {
+    "featured": [
+        {
+            "title": "absence.",
+            "image": "https://images.wallpaperscraft.com/",
+            "redirect": ""
+        },
+        {
+            "title": "ok",
+            "image": "https://images.wallpaperscraft.com/"
+        }
+    ],
+    "work": {
+        "categories": [
+            {
+                "title": "development.",
+                "image": "https://eldfrog.com/wp-content/uploads/2018/12/programming_languages.png",
+                "redirect": "/development"
+            },
+            {
+                "title": "videos.",
+                "image": "https://favim.com/orig/201107/04/birds-city-life-disposable-camera-grainy-indie-light-Favim.com-94114.jpg",
+                "redirect": "/videos"
+            },
+            {
+                "title": "projects/ github.",
+                "image": "https://kinsta.com/wp-content/uploads/2018/04/what-is-github-1-1.png",
+                "redirect": "https://github.com/8cy"
+            }
+        ]
+    },
+    "projects": [
+        {
+            "title": "Uwufier",
+            "service": "Development",
+            "completed": "Ongoing",
+            "image": "https://eldfrog.com/wp-content/uploads/2018/12/programming_languages.png"
+        }
+    ]
+}
+
+export default projectData;
\ No newline at end of file
diff --git a/src/components/skills/Hero.js b/src/components/skills/Hero.js
new file mode 100644
index 0000000..893e67d
--- /dev/null
+++ b/src/components/skills/Hero.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br /><br />
+                    
+                    <div className="row">
+                        <div className="col-lg-8">
+                            <h3 className="wow fadeInUp" data-wow-delay="1s">skills.</h3>
+                            <br />
+                            <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">
+                                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>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/skills/SkillListing.js b/src/components/skills/SkillListing.js
new file mode 100644
index 0000000..2164355
--- /dev/null
+++ b/src/components/skills/SkillListing.js
@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+
+export default class Skills extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br /><br />
+                    
+                    <div className="row">
+                        <div className="col-lg-8">
+                            <h5 className="wow fadeInUp" data-wow-delay="1s">achievements.</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>Various Freelance Jobs</li>
+                            </ul>
+                            <br />
+
+                            <h5 className="wow fadeInUp" data-wow-delay="1s">tech stacks.</h5>
+                            <br />
+                            <ul className="wow fadeInUp" data-wow-delay="1s">
+                                <li>
+                                    <h6>C99/ C++ 13/17.</h6>
+                                    <ul>
+                                        <li>
+                                            <h6>Various Internal Modifications ("Hacks or Cheats" if you will)</h6>
+                                            <ul>
+                                                <li>Counter Strike: Global Offensive</li>
+                                                <li>Counter Strike: Source</li>
+                                                <small>Made possibly using <em>totally legally and legitimately</em> obtained Source SDKs.</small>
+                                                <li>Among Us</li>
+                                                <li>Minecraft (1.7.10/ 1.8.9)</li>
+                                                <li>Grand Theft Auto 4/ V</li>
+                                                <li>Team Fortress 2</li>
+                                            </ul>
+                                        </li>
+                                        <br />
+
+                                        <li>DirectX and OpenGL Hooking</li>
+                                        <li><a href="https://github.com/ocornut/imgui">ImGui</a> Menu Structuring and Design</li>
+                                        <li>
+                                            <h6>Remote PE Image Injector/ Loader</h6>
+                                            <ul>
+                                                <li>TLS 1.3 Communication</li>
+                                                <li>Json Client-Server Communication w/ Packet-Struct Implementation</li>
+                                                <li>Syscalls</li>
+                                                <li>Module Patch Detection</li>
+                                                <li>Debugger Detection</li>
+                                                <li>Relocations and Imports done on server</li>
+                                                <li>Manual map everything, including dependencies</li>
+                                                <li>Security Packet Timeout</li>
+                                                <li>Unique Client Session IDs</li>
+                                                <li>Server Certificate Verification</li>
+                                            </ul>
+                                        </li>
+                                        <br />
+
+                                        <li>Client-Server Communicatory Applications</li>
+                                        <li><b>[Learning]</b> Unreal Engine 5</li>
+                                        <li>Game Boy games using <a href="https://github.com/Zal0/gbdk-2020">GBDK</a></li>
+                                        <li>Embedded x86/ x64 Assembly</li>
+                                    </ul>
+                                </li>
+                                <br />
+
+                                <li>
+                                    <h6>Node.js (both JavaScript and TypeScript).</h6>
+                                    <ul>
+                                        <li>Express API and Advanced Templating Creation</li>
+                                        <li>React 16/17 for Extensive UIs and State-Management (this site uses React)</li>
+                                        <li>Discord.js, Akairo and Eris for Discord bot Implementations</li>
+                                        <li>Use MongoDB for safe and speedy data storage with security in mind</li>
+                                        <li><a href="https://www.npmjs.com/~sinny">NPM Packages</a></li>
+                                        <li><a href="https://slog.cf">Slog.cf</a> (V2), a marketplace and transaction logger for Slipstream</li>
+                                        <li><a href="https://senpy.tk">Senpy.tk</a>, a web app and API for <a href="https://github.com/laynH/Anime-Girls-Holding-Programming-Books">Anime Girls Holding Programming Books</a></li>
+                                        <li><a href="https://strelizia.cc">Strelizia.cc</a>, a fast, private, online, file hosting service</li>
+                                        <li><a href="/development/uwufier">Uwufier</a>, a feature packed Discord bot. (I actually got the "Verified Discord Bot Developer" badge on Discord for this)</li>
+                                        <li>VexClient, a private, cheat client for <a href="https://krunker.io">Krunker.io</a></li>
+                                    </ul>
+                                </li>
+                                <br />
+
+                                <li>
+                                    <h6>Python 2.7+</h6>
+                                    <ul>
+                                        <li>Slog.cf (V1), a transaction logger for Slipstream</li>
+                                        <li>Various Discord Nitro Code Checkers</li>
+                                        <li>Various Account Checkers</li>
+                                        <li>A patcher for CS:GO which bypasses CS:GO's "Trusted Mode" Anti-Cheat of sorts, by patching a single byte (yes, a single byte, you read that right. imagine being a multi-billion dollar company and spending millions on a new anti-cheat system that gets bypassed by patching a single byte of <code>client.dll</code>, couldn't be me)</li>
+                                    </ul>
+                                </li>
+                                <br />
+
+                                <li>
+                                    <h6><b>[Learning]</b> C#</h6>
+                                    <ul>
+                                        <li>Various Account Checkers</li>
+                                        <li>DLL Loaders similar to my Remote PE Image Injector/ Loader</li>
+                                        <li><b>[Learning]</b> Unity3D</li>
+                                    </ul>
+                                </li>
+                                <br />
+                                
+                                <li>
+                                    <h6>Other</h6>
+                                    <ul>
+                                        <li>
+                                            <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>
+                                            </ul>
+                                        </li>
+                                        <br />
+
+                                        <li>
+                                            <h6>Brief knowledge of PHP</h6>
+                                            <ul>
+                                                <li>MyBB setup/ plugin creation</li>
+                                                <li>FluxBB setup/ plugin creation</li>
+                                            </ul>
+                                        </li>
+                                        <br />
+
+                                        <li>
+                                            <h6>Few Lua experience</h6>
+                                            <ul>
+                                                <li>My <a href="https://github.com/8cy/lua-discord-bot-example">Discord bot</a> example, made using the <a href="https://github.com/SinisterRectus/Discordia">Discordia</a> Lua library.</li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                            <br />
+
+                            <h5 className="wow fadeInUp" data-wow-delay="1s">application/ ci knowledge.</h5>
+                            <br />
+                            <ul className="wow fadeInUp" data-wow-delay="1s">
+                                <li>Git, GitHub, GitLab</li>
+                                <li>Vim/ Nvim, Visual Studio 2017/ 19, VSCode, Sublime, CLion and IntelliJ</li>
+                                <li>Make, CMake, VS Solutions</li>
+                                <li>Unity3D, Unreal Engine 5</li>
+                                <li>
+                                    <h6>extensive discord experience</h6>
+                                    <ul>
+                                        <li>Owner/ Lead Developer and/ or Maintainer of multiple bots</li>
+                                        <li>Owner/ Former Owner of multiple "Internet Personality" related servers</li>
+                                        <li>Head, Admin and/ or Moderator of a few "Internet Personality" related communities</li>
+                                        <li>Server Template Creator</li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/work/Categories.js b/src/components/work/Categories.js
new file mode 100644
index 0000000..09c8fb2
--- /dev/null
+++ b/src/components/work/Categories.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectOne from '../project/ProjectOne';
+import ProjectTwo from '../project/ProjectTwo';
+import ProjectThree from '../project/ProjectThree';
+import ProjectEndAll from "../project/ProjectEndAll";
+
+export default class Categories extends Component {
+    render() {
+        return(
+            <div className="container-fluid">
+                { /* <div className="whitespace"></div> */ }
+                
+                <ProjectEndAll projectData={this.props.projectData.work.categories[0]} />
+                {/* <br />
+                <p className="wow fadeInUp" data-wow-delay="1.2s" style={{fontSize: "12px"}}>
+                    i just wanna say, in this pic, they seem to be using the c++ standard<br />
+                    library, <code>iostream</code> for input/ output, imagine using <code>using namespace std;</code>, couldn't be me.
+                </p> */ }
+
+                <ProjectEndAll projectData={this.props.projectData.work.categories[1]} />
+                { /* <ProjectOne projectData={this.props.projectData.work.categories[1]} projectClass="category1" />
+                <ProjectTwo projectData={this.props.projectData.work.categories[2]} projectClass="category2" /> */ }
+
+                { /* <div className="whitespace"></div> */ }
+            </div>
+        )
+    }
+}
+
+Categories.propTypes = {
+    projectData: PropTypes.object
+}
\ No newline at end of file
diff --git a/src/components/work/Hero.js b/src/components/work/Hero.js
new file mode 100644
index 0000000..572b37e
--- /dev/null
+++ b/src/components/work/Hero.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+export default class Hero extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br /><br />
+                    
+                    <div className="row">
+                        <div className="col-lg-8">
+                            <h3 className="wow fadeInUp" data-wow-delay="1s">projects.</h3>
+                            <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>
+                            <p className="wow fadeInUp" data-wow-delay="1.4s">
+                                Disclaimer: this page is under construction, along with the entirety of the project viewer feature.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/work/categories/Development.js b/src/components/work/categories/Development.js
new file mode 100644
index 0000000..ff5b5c2
--- /dev/null
+++ b/src/components/work/categories/Development.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectEndAll from "../../project/ProjectEndAll";
+
+import DynamicTitle from "../../navigation/DynamicTitle";
+
+export default class DevelopmentCategory extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Development | Fuwn" />
+                <div className="container-fluid">
+                    <div className="whitespace"></div>
+                    
+                    <ProjectEndAll projectData={this.props.projectData.work.categories[2]} />
+
+                    { /* <ProjectOne projectData={this.props.projectData.work.categories[1]} projectClass="category1" /> */ }
+                    { /* <ProjectOne projectData={this.props.projectData.work.categories[1]} projectClass="category1" />
+                    <ProjectTwo projectData={this.props.projectData.work.categories[2]} projectClass="category2" /> */ }
+
+                    { /* <div className="whitespace"></div> */ }
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+DevelopmentCategory.propTypes = {
+    projectData: PropTypes.object
+}
\ No newline at end of file
diff --git a/src/components/work/categories/Videos.js b/src/components/work/categories/Videos.js
new file mode 100644
index 0000000..8350a32
--- /dev/null
+++ b/src/components/work/categories/Videos.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectOne from '../../project/ProjectOne';
+import ProjectTwo from '../../project/ProjectTwo';
+import ProjectThree from '../../project/ProjectThree';
+
+import DynamicTitle from "../../navigation/DynamicTitle";
+
+export default class VideosCategory extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Videos | Fuwn" />
+                <div className="container-fluid">
+                    { /* <div className="whitespace"></div> */ }
+                    
+                    { /* <ProjectTwo projectData={this.props.projectData.work.categories[0]} projectClass="category3" /> */ }
+                    
+                    <div className="whitespace"></div>
+                    
+                    <center>
+                        <iframe width="1000" height="592.5"
+                            src="https://www.youtube.com/embed/3BvvbDYif1o"
+                            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen></iframe>
+                        <br />
+                        
+                        <small>
+                            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>
+                    </center>
+
+                    { /* <ProjectOne projectData={this.props.projectData.work.categories[1]} projectClass="category1" /> */ }
+                    { /* <ProjectOne projectData={this.props.projectData.work.categories[1]} projectClass="category1" />
+                    <ProjectTwo projectData={this.props.projectData.work.categories[2]} projectClass="category2" /> */ }
+
+                    { /* <div className="whitespace"></div> */ }
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+VideosCategory.propTypes = {
+    projectData: PropTypes.object
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..a047261
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './styles/style.css'
+import './styles/projects.css';
+import './styles/work-categories.css';
+//import './styles/animate.css'
+
+import App from './components/App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/src/pages/About.js b/src/pages/About.js
new file mode 100644
index 0000000..4c3d054
--- /dev/null
+++ b/src/pages/About.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+import Image from '../components/about/Image';
+import Hero from '../components/about/Hero';
+
+import DynamicTitle from '../components/navigation/DynamicTitle';
+
+export default class About extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="About | Fuwn" />
+
+                <div className="whitespace"></div>
+                { /* <Image /> */ }
+                <Hero />
+
+                { /* <div className="whitespace"></div> */ }
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Contact.js b/src/pages/Contact.js
new file mode 100644
index 0000000..ba837d0
--- /dev/null
+++ b/src/pages/Contact.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+import Hero from '../components/contact/Hero';
+import Form from '../components/contact/Form';
+
+import DynamicTitle from '../components/navigation/DynamicTitle';
+
+export default class Contact extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Contact | Fuwn" />
+
+                <div className="whitespace"></div>
+
+                <Hero />
+                <Form />
+
+                { /* <div className="whitespace"></div> */ }
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 0000000..d7b9238
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import Hero from '../components/home/Hero';
+import FeaturedProjects from '../components/home/FeaturedProjects';
+
+import projectData from '../components/projectData';
+
+import DynamicTitle from '../components/navigation/DynamicTitle';
+
+export default class Home extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Home | Fuwn" />
+                <Hero />
+                { /* <FeaturedProjects projectData={projectData} /> */ }
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Skills.js b/src/pages/Skills.js
new file mode 100644
index 0000000..bd2d9d2
--- /dev/null
+++ b/src/pages/Skills.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import Hero from '../components/skills/Hero';
+import SkillsListing from '../components/skills/SkillListing';
+
+import DynamicTitle from '../components/navigation/DynamicTitle';
+
+export default class Skills extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Skills | Fuwn" />
+
+                <div className="whitespace"></div>
+
+                <Hero />
+                <SkillsListing />
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Work.js b/src/pages/Work.js
new file mode 100644
index 0000000..4721a03
--- /dev/null
+++ b/src/pages/Work.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+import Hero from '../components/work/Hero';
+import Categories from '../components/work/Categories';
+
+import DynamicTitle from '../components/navigation/DynamicTitle';
+
+import projectData from '../components/projectData';
+
+export default class Work extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title="Projects | Fuwn" />
+
+                <div className="whitespace"></div>
+
+                <Hero />
+                <Categories projectData={projectData} />
+            </React.Fragment>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/routes/ProjectRoutes.js b/src/routes/ProjectRoutes.js
new file mode 100644
index 0000000..e97475a
--- /dev/null
+++ b/src/routes/ProjectRoutes.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, /*Redirect, */ Route, Switch } from 'react-router-dom';
+
+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';
+
+export default class ProjectRoutes extends Component {
+    render() {
+        return(
+            <Router>
+                <Switch>
+                    <Route exact path="/development">
+                        <DevelopmentCategory projectData={projectData} />
+                    </Route>
+                    <Route exact path="/videos">
+                        <VideosCategory projectData={projectData} />
+                    </Route>
+                </Switch>
+            </Router>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Routes.js b/src/routes/Routes.js
new file mode 100644
index 0000000..3626856
--- /dev/null
+++ b/src/routes/Routes.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
+
+import ProjectRoutes from './ProjectRoutes';
+
+import Home from '../pages/Home';
+// import Contact from '../pages/Contact';
+import About from '../pages/About';
+import Work from '../pages/Work';
+import Skills from '../pages/Skills';
+
+export default class Routes extends Component {
+    render() {
+        return(
+            <Router>
+                <Switch>
+                    <Route exact path="/">
+                        <Home />
+                    </Route>
+                    { /* <Route exact path="/contact">
+                        <Contact />
+                    </Route> */ }
+                    <Route exact path="/about">
+                        <About />
+                    </Route>
+                    <Route exact path="/projects">
+                        <Work />
+                    </Route>
+                    <Route exact path="/skills">
+                        <Skills />
+                    </Route>
+                    <ProjectRoutes />
+                    <Route>
+                        <Redirect to="/" />
+                    </Route>
+                </Switch>
+            </Router>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
new file mode 100644
index 0000000..4dc52c9
--- /dev/null
+++ b/src/serviceWorker.js
@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+	window.location.hostname === 'localhost' ||
+		// [::1] is the IPv6 localhost address.
+		window.location.hostname === '[::1]' ||
+		// 127.0.0.0/8 are considered localhost for IPv4.
+		window.location.hostname.match(
+			/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+		)
+);
+
+export function register(config) {
+	if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+		// The URL constructor is available in all browsers that support SW.
+		const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+		if (publicUrl.origin !== window.location.origin) {
+			// Our service worker won't work if PUBLIC_URL is on a different origin
+			// from what our page is served on. This might happen if a CDN is used to
+			// serve assets; see https://github.com/facebook/create-react-app/issues/2374
+			return;
+		}
+
+		window.addEventListener('load', () => {
+			const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+			if (isLocalhost) {
+				// This is running on localhost. Let's check if a service worker still exists or not.
+				checkValidServiceWorker(swUrl, config);
+
+				// Add some additional logging to localhost, pointing developers to the
+				// service worker/PWA documentation.
+				navigator.serviceWorker.ready.then(() => {
+					console.log(
+						'This web app is being served cache-first by a service ' +
+							'worker. To learn more, visit https://bit.ly/CRA-PWA'
+					);
+				});
+			} else {
+				// Is not localhost. Just register service worker
+				registerValidSW(swUrl, config);
+			}
+		});
+	}
+}
+
+function registerValidSW(swUrl, config) {
+	navigator.serviceWorker
+		.register(swUrl)
+		.then(registration => {
+			registration.onupdatefound = () => {
+				const installingWorker = registration.installing;
+				if (installingWorker == null) {
+					return;
+				}
+				installingWorker.onstatechange = () => {
+					if (installingWorker.state === 'installed') {
+						if (navigator.serviceWorker.controller) {
+							// At this point, the updated precached content has been fetched,
+							// but the previous service worker will still serve the older
+							// content until all client tabs are closed.
+							console.log(
+								'New content is available and will be used when all ' +
+									'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+							);
+
+							// Execute callback
+							if (config && config.onUpdate) {
+								config.onUpdate(registration);
+							}
+						} else {
+							// At this point, everything has been precached.
+							// It's the perfect time to display a
+							// "Content is cached for offline use." message.
+							console.log('Content is cached for offline use.');
+
+							// Execute callback
+							if (config && config.onSuccess) {
+								config.onSuccess(registration);
+							}
+						}
+					}
+				};
+			};
+		})
+		.catch(error => {
+			console.error('Error during service worker registration:', error);
+		});
+}
+
+function checkValidServiceWorker(swUrl, config) {
+	// Check if the service worker can be found. If it can't reload the page.
+	fetch(swUrl, {
+		headers: { 'Service-Worker': 'script' },
+	})
+		.then(response => {
+			// Ensure service worker exists, and that we really are getting a JS file.
+			const contentType = response.headers.get('content-type');
+			if (
+				response.status === 404 ||
+				(contentType != null && contentType.indexOf('javascript') === -1)
+			) {
+				// No service worker found. Probably a different app. Reload the page.
+				navigator.serviceWorker.ready.then(registration => {
+					registration.unregister().then(() => {
+						window.location.reload();
+					});
+				});
+			} else {
+				// Service worker found. Proceed as normal.
+				registerValidSW(swUrl, config);
+			}
+		})
+		.catch(() => {
+			console.log(
+				'No internet connection found. App is running in offline mode.'
+			);
+		});
+}
+
+export function unregister() {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.ready
+			.then(registration => {
+				registration.unregister();
+			})
+			.catch(error => {
+				console.error(error.message);
+			});
+	}
+}
diff --git a/src/styles/projects.css b/src/styles/projects.css
new file mode 100644
index 0000000..604ff0e
--- /dev/null
+++ b/src/styles/projects.css
@@ -0,0 +1,200 @@
+.render1 {
+	background: url(/projects/renders/iced-out/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render1::after {
+	content: "iced out.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 8%;
+	left: -60%;
+	right: 0;
+	bottom: 0;
+}
+
+.render2 {
+	background: url(/projects/renders/rockstar/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render2::after {
+	content: "projects/ github.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+.render3 {
+	background: url(/projects/renders/allegiance/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render3::after {
+	content: "allegiance.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: -50%;
+	right: 0;
+	bottom: 0;
+}
+
+.render4 {
+	background: url(/projects/renders/?/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render4::after {
+	content: "?.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 10%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+.render5 {
+	background: url(https://strelizia.cc/HyLvUFyMOYyv6SK6lpJVUfuOLj2dBxqr.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render5::after {
+	content: "uwufier.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 8%;
+	left: -60%;
+	right: 0;
+	bottom: 0;
+}
+
+.render6 {
+	background: url(https://www.callicoder.com/assets/images/post/large/npm-package-manager-for-node-js.jpg) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render6::after {
+	content: "npm.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+.render7 {
+	background: url(https://senpy.tk/C++/Sakurajima_Mai_Holding_The_C++_Programming_Language.jpg) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.render7::after {
+	content: "senpy.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: -50%;
+	right: 0;
+	bottom: 0;
+}
+
+/* */
+.graphic1 {
+	background: url(/projects/graphics/devils-work/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.graphic1::after {
+	content: "devils work.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 8%;
+	left: -60%;
+	right: 0;
+	bottom: 0;
+}
+
+.graphic2 {
+	background: url(/projects/graphics/swavy-pfps/assets/img2.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.graphic2::after {
+	content: "swavy pfps.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+.graphic3 {
+	background: url(/projects/graphics/absence/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.graphic3::after {
+	content: "absence.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: -50%;
+	right: 0;
+	bottom: 0;
+}
+
+/*
+.graphic4 {
+	  background: url(/projects/renders/devils-work/assets/img.png) no-repeat 50% 50%;
+	  background-size: cover;
+}
+
+.render4::after {
+	  content: "devils work.";
+	  font-family: "Roboto Mono";
+	  font-size: 36px;
+	  position: relative;
+	  color: #fff;
+	  display: block;
+	  top: 10%;
+	  left: 90%;
+	  right: 0;
+	  bottom: 0;
+}
+*/
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000..d00fc49
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,593 @@
+/* ---- Basic Styling ---- */
+* {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -o-user-select: none;
+	user-select: none;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	font-family: "Roboto Mono" !important;
+	background: #0f0f0f !important;
+	color: #fff !important;
+}
+
+.whitespace {
+	width: 100%;
+	height: 100px;
+}
+
+@media(max-width: 768px) {
+	.whitespace {
+		display: none;
+	}
+}
+
+/* ---- Typewriter Effect ---- */
+.line {
+	width: 24em;
+	top: 50%;
+	margin: auto;
+	border-right: 2px solid rgba(255, 255, 255, 0.75);
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	transform: translateY(-50%);
+}
+
+.anim-typewriter {
+	animation: typewriter 4s steps(46) 1s 1 normal both,
+		blinkTextCursor 500ms steps(46) infinite normal;
+}
+
+@keyframes typewriter {
+	from {
+		width: 0;
+	} to {
+		width: 11.5em; /* 11.5em */
+	}
+}
+
+@media(max-width: 768px) {
+	@keyframes typewriter {
+		from {
+			width: 0;
+		} to {
+			width: 10.5em; /* 10.5em */
+		}
+	}
+}
+
+@keyframes blinkTextCursor {
+	from {
+		border-right-color: rgba(255, 255, 255, 0.75);
+	} to {
+		border-right-color: transparent;
+	}
+}
+
+/* ---- Navigation ---- */
+nav {
+	width: 100%;
+	background: #0f0f0f;
+	height: 80px;
+	position: fixed;
+	z-index: 1;
+}
+
+nav #brand {
+	float: left;
+	display: block;
+	margin-left: 82px;
+	line-height: 80px;
+	font-weight: bold;
+}
+
+nav #brand a {
+	color: #fff;
+	transition: all 0.3s ease-out;
+}
+
+nav #brand a:hover {
+	text-decoration: none;
+}
+
+nav #menu {
+	float: left;
+	right: 80px;
+	position: fixed;
+}
+
+nav #menu li {
+	padding-left: 40px;
+	display: inline-block;
+	cursor: pointer;
+	font-weight: 300;
+	line-height: 80px;
+	position: relative;
+	transition: all 0.3s ease-out;
+}
+
+nav #menu li span {
+	font-weight: 700;
+}
+
+nav #menu li a {
+	color: #fff;
+}
+
+nav #menu li a:hover {
+	text-decoration: none;
+}
+
+#toggle {
+	position: absolute;
+	right: 30px;
+	top: 20px;
+	font-weight: 300;
+	z-index: 2;
+	width: 30px;
+	height: 30px;
+	cursor: pointer;
+	float: right;
+	transition: all 0.3s ease-out;
+	visibility: hidden;
+	opacity: 0;
+}
+
+.close-btn {
+	position: absolute;
+	right: 16px;
+	font-weight: 300;
+	z-index: 2;
+	cursor: pointer;
+	top: -2px;
+	line-height: 80px;
+}
+
+#resize {
+	z-index: 1;
+	top: 0px;
+	position: fixed;
+	background: #0f0f0f;
+	width: 100%;
+	height: 100%;
+	visibility: hidden;
+	opacity: 0;
+	transition: all 1s ease-out;
+}
+
+#resize #menu {
+	height: 90px;
+	position: absolute;
+	left: 43%;
+	transform: translateX(-40%);
+	text-align: center;
+	display: table-cell;
+	vertical-align: center;
+}
+
+#resize #menu li {
+	display: block;
+	text-align: center;
+	padding: 10px 0;
+	font-size: 50px;
+	min-height: 50px;
+	font-weight: bold;
+	cursor: pointer;
+	transition: all 0.3s ease-out;
+}
+
+#resize li:nth-child(1) {
+	margin-top: 100px; /* 140px */
+}
+
+#resize #menu li a {
+	color: #fff;
+}
+
+#resize #menu li a:hover {
+	text-decoration: none;
+}
+
+#resize.active {
+	visibility: visible;
+	opacity: 1;
+}
+
+@media(max-width: 768px) {
+	#toggle {
+		visibility: visible;
+		opacity: 1;
+		margin-top: 6px;
+		margin-right: 4px;
+	}
+
+	nav #brand {
+		margin-left: 24px;
+	}
+
+	#menu a {
+		font-size: 20px;
+		font-weight: 300;
+	}
+
+	#resize li span {
+		font-weight: bolder;
+	}
+
+	nav #menu {
+		display: none;
+	}
+}
+
+@media(min-width: 768px) {
+	#resize {
+		visibility: hidden !important;
+	}
+}
+
+/* .blur {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	min-height: 50px;
+	margin-bottom: 20px;
+	background: rgba(15, 15, 15, 1);
+	z-index: 1010;
+	filter: blur(20px);
+} */
+
+/*--------------- Hero Section --------------- */
+.hero {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.hero h1 {
+	font-weight: lighter;
+	text-align: center;
+	letter-spacing: -2px;
+	line-height: 58px;
+}
+
+@media(max-width: 768px) {
+	.header h1 {
+		font-size: 26px;
+	}
+}
+
+/*--------------- Scroll Down Icon Animation --------------- */
+.scroll-down {
+	position: absolute;
+	left: 50%;
+	bottom: 100px;
+	display: block;
+	text-align: center;
+	font-size: 20px;
+	z-index: 0;
+	text-decoration: none;
+	text-shadow: 0;
+	width: 13px;
+	height: 13px;
+	border-bottom: 2px solid #fff;
+	border-right: 2px solid #fff;
+	-webkit-transform: translate(-50%, 0) rotate(45deg);
+	transform: translate(-50%, 0) rotate(45deg);
+	animation: fade_move_down 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
+}
+
+@keyframes fade_move_down {
+	0% {
+		transform: translate(0, -20px) rotate(45deg);
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		transform: translate(0, 20px) rotate(45deg);
+		opacity: 0;
+	}
+}
+
+/*--------------- Projects Section --------------- */
+h6 {
+	text-align: center;
+}
+
+.vertical {
+	margin-top: 40px;
+	border-left: 1px solid #fff;
+	height: 80px;
+	position: absolute;
+	left: 50%;
+}
+
+.project {
+	height: 500px;
+}
+
+/*--------------- render section --------------- */
+
+/*--------------- graphic section --------------- */
+
+/*--------------- category section --------------- */
+
+@media(max-width: 768px) {
+	.project {
+		width: 90% !important;
+		margin: 14px auto;
+	}
+
+	.vertical {
+		display: none;
+	}
+
+	.project1::after, .project2::after, .project3::after, .project4::after,
+		.graphic1::after, .graphic2::after, .graphic3::after, .graphic4::after,
+		.render1::after, .render2::after, .render3::after, .render4::after, 
+		.category1::after, .category2::after, .category3::after, .category4::after {
+			display: none;
+		}
+}
+
+/*--------------- footer section --------------- */
+.collab {
+	text-align: right;
+}
+
+.collab p {
+	font-weight: lighter !important;
+	margin-bottom: 20px;
+}
+
+.hr {
+	background: rgba(255, 255, 255, 0.2);
+	height: 1px;
+}
+
+.info h4 {
+	font-size: 18px;
+	font-weight: lighter;
+}
+
+.info p {
+	color: grey;
+	font-weight: lighter;
+}
+
+.info li {
+	font-weight: lighter;
+	color: #fff;
+	font-size: 18px;
+	padding-left: 20px;
+}
+
+#fb::before {
+	display: inline-block;
+	content: '';
+	border-radius: 100%;
+	height: 4px;
+	width: 4px;
+	margin-right: 6px;
+	background: #3b5998;
+}
+
+
+#ig::before {
+	display: inline-block;
+	content: '';
+	border-radius: 100%;
+	height: 4px;
+	width: 4px;
+	margin-right: 6px;
+	background: #fcaf45;
+}
+
+
+#tw::before {
+	display: inline-block;
+	content: '';
+	border-radius: 100%;
+	height: 4px;
+	width: 4px;
+	margin-right: 6px;
+	background: #55acee;
+}
+
+
+#yt::before {
+	display: inline-block;
+	content: '';
+	border-radius: 100%;
+	height: 4px;
+	width: 4px;
+	margin-right: 6px;
+	background: #c4302b;
+}
+
+#gh::before {
+	display: inline-block;
+	content: '';
+	border-radius: 100%;
+	height: 4px;
+	width: 4px;
+	margin-right: 6px;
+	background: #24292e;
+}
+
+#media, #address {
+	text-align: right;
+}
+
+#media ul {
+	list-style: none;
+}
+
+#media ul li {
+	display: inline-block;
+}
+
+@media(max-width: 768px) {
+	.collab, #personal, #media, #address {
+		text-align: center;
+	}
+
+	.info ul {
+		margin: 0 0 0 -22px;
+		padding: 0;
+	}
+}
+
+/* Honestly, this took way longer to figure out than it should've. I scoured the internet for so long, at one point, I think
+// I had around 20+ tabs open, no idea how I really figured it out, just tried as many solutions until it was solved. - 17:27, 10/20/2018 
+*/
+div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
+	color: inherit;
+	text-decoration: none;
+}
+
+/*--------------- Work Page --------------- */
+
+.hero-content {
+	margin-left: 0%;
+}
+
+.hero-content p {
+	font-weight: 300;
+	line-height: 36px;
+	color: grey;
+}
+
+.hero-content h6 {
+	text-align: left;
+}
+
+@media(max-width: 768px) {
+	.hero-content {
+		padding-top: 50px;
+		width: 96%;
+		margin: 0 auto;
+	}
+}
+
+/*--------------- About Page --------------- */
+
+.about {
+	height: 500px;
+	margin-top: 120px;
+}
+
+.image {
+	background: url(https://images.unsplash.com/photo-1540885762261-a2ca01f290f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2468&q=80) no-repeat 50% 70%;
+}
+
+/*--------------- Contact Form --------------- */
+
+#contact-form {
+	margin: 5% 1.4%;
+}
+
+#contact-form ul {
+	list-style: none;
+	border-radius: 5px;
+    margin-bottom: 40px;
+}
+
+#contact-form li {
+    padding: 10px;
+}
+
+#contact-form li:last-of-type {
+    border-bottom: none;
+}
+
+#contact-form label {
+    display: block;
+    font-size: .8em;
+    color: #999;
+    padding-left: 5px;
+}
+
+#contact-form input, #contact-form textarea {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    resize: vertical;
+    background: transparent;
+    color: #fff;
+    font-weight: bolder;
+}
+
+input:focus {
+    outline: none;
+    border: none;
+}
+
+textarea:focus {
+    outline: none;
+    border: none;
+}
+
+.textarea {
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.send {
+    margin-left: 50px;
+    text-transform: uppercase;
+    padding: 20px 30px;
+    background: transparent;
+    color: #dfdfdf;
+    font-size: 14px;
+    letter-spacing: 2px;
+}
+
+.send:hover {
+    background: #dfdfdf;
+    color: #101010;
+}
+
+@media(max-width: 768px) {
+    #contact-form {
+        margin: 5% -8%;
+        width: 98%;
+    }
+}
+
+/*--------------- Project Page --------------- */
+
+.prev, .next p {
+    color: grey;
+}
+
+.prev p {
+    text-align: left;
+}
+
+.next p {
+    text-align: right;
+}
+
+/*--------------- Mobile Text --------------- */
+
+@media(min-width: 768px) {
+    .mobile-txt2 {
+        display: none;
+    }
+}
+
+.mobile-txt2 {
+    content: "absence.";
+    font-family: "Roboto Mono";
+    font-size: 16px;
+    color: #fff;
+}
\ No newline at end of file
diff --git a/src/styles/work-categories.css b/src/styles/work-categories.css
new file mode 100644
index 0000000..5073016
--- /dev/null
+++ b/src/styles/work-categories.css
@@ -0,0 +1,99 @@
+.category1 {
+	background: url(https://i.pinimg.com/originals/1f/3f/fa/1f3ffa4e7f42c15cfec901d301b16e9c.jpg) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.category1::after {
+	content: "videos.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 8%;
+	left: -60%;
+	right: 0;
+	bottom: 0;
+}
+
+.category2 {
+	background: url(/projects/graphics/devils-work/assets/img.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.category2::after {
+	content: "graphics.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+.category3 {
+	background: url(https://eldfrog.com/wp-content/uploads/2018/12/programming_languages.png) no-repeat 50% 50%;
+	background-size: cover;
+}
+
+.category3::after {
+	content: "development.";
+	font-family: "Roboto Mono";
+	font-size: 36px;
+	position: relative;
+	color: #fff;
+	display: block;
+	top: 80%;
+	left: 90%;
+	right: 0;
+	bottom: 0;
+}
+
+/*
+.category3 {
+	  background: url(/projects/renders/allegiance/assets/img.png) no-repeat 50% 50%;
+	  background-size: cover;
+}
+
+.category3::after {
+	  content: "allegiance.";
+	  font-family: "Roboto Mono";
+	  font-size: 36px;
+	  position: relative;
+	  color: #fff;
+	  display: block;
+	  top: 80%;
+	  left: -50%;
+	  right: 0;
+	  bottom: 0;
+}
+
+.category4 {
+	  background: url(/projects/renders/devils-work/assets/img.png) no-repeat 50% 50%;
+	  background-size: cover;
+}
+
+.category4::after {
+	  content: "devils work.";
+	  font-family: "Roboto Mono";
+	  font-size: 36px;
+	  position: relative;
+	  color: #fff;
+	  display: block;
+	  top: 10%;
+	  left: 90%;
+	  right: 0;
+	  bottom: 0;
+}
+*/
+
+@media (max-width: 768px) {
+	.category1::after,
+	.category2::after,
+	.category3::after {
+		content: none;
+	}
+}
\ No newline at end of file