woops i forgot to commit these files lul

26 files changed, 1005 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