Skip to content

Instantly share code, notes, and snippets.

@alonzathompson

alonzathompson/index.html

Created December 21, 2016 02:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alonzathompson/376c8c21dc2f6521d54cfbed004154e1 to your computer and use it in GitHub Desktop.
Save alonzathompson/376c8c21dc2f6521d54cfbed004154e1 to your computer and use it in GitHub Desktop.
Download ZIP
RoYyWz
Raw
index.html
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Molle:400i|Quicksand" rel="stylesheet">
<body>
<div id="root">
</div>
</body>
Raw
script.babel
"use strict";
const {Router, Route, IndexRoute, IndexLink, Link, hashHistory} = ReactRouter;
class Nav extends React.Component{
constructor(){
super();
this.state = {
width: '0px',
meClass: 'navStyleA'
};
}
_handleClick = ()=>{
if(this.state.width !== '100%'){
this.setState({
width: '100%'
});
}else{
this.setState({
width: '0px'
});
}
};
_hasClicked = ()=>{
this.setState({
width: '0px'
});
};
componentDidMount(){
window.addEventListener('scroll', this._handleScroll);
};
componentWillUnmount(){
window.removeEventListener('scroll', this._handleScroll);
};
_handleScroll = () => {
let y = window.pageYOffset;
let theTop = document.body.scrollTop;
if(y > 100){
this.setState({
meClass: 'navbar navbar-default navbar-fixed-top showA'
});
}else{
this.setState({
meClass: 'hideB'
});
}
};
render() {
return(
<nav className={this.state.meClass} onScroll={this._handleScroll}>
<Link to="/" className="Brand pull-left"><li className="navbar-brand brandStyle">Ar-traun</li></Link>
<div className="menuButton pull-right" onClick={this._handleClick.bind(this)}>
<div className="icons"></div>
<div className="icons"></div>
<div className="icons"></div>
</div>
<div className="dropBack">
<div className="myDrop" style={this.state}>
<IndexLink to="/" onClick={this._hasClicked.bind(this)}>Home</IndexLink>
<Link to="/about" onClick={this._hasClicked.bind(this)} activeClassName="about">About</Link>
<Link to="/projects" onClick={this._hasClicked.bind(this)} activeClassName="Projects">Projects</Link>
<Link to="/contact" onClick={this._hasClicked.bind(this)} activeClassName="Products">Contact</Link>
</div>
</div>
</nav>
);
}
}
class Layout extends React.Component {
render(){
return (
<div className="wrapper">
<Nav />
<main>
{this.props.children}
</main>
<Footer />
</div>
);
}
}
class ParallaxLogo extends React.Component{
constructor(){
super();
this.state = {
top: '200'
};
};
componentDidMount(){
window.addEventListener('scroll', this._handleScroll2);
};
componentWillUnmount(){
window.removeEventListener('scroll', this._handleScroll2);
};
_handleScroll2 = () =>{
let y2 = window.pageYOffset;
let scrollSpeed = -(y2 / 2.5)+200;
if(y2 > 200){
this.setState({
top: scrollSpeed,
});
}else{
this.setState({
top: '200'
});
}
};
render(){
let myLogoStyle = {
fontFamily: 'Quicksand',
color: '#333',
textShadow: '1px 3px 7px rgba(150, 150, 150, 1)',
position: 'fixed',
fontSize: '300%',
padding: '2%',
top: this.state.top,
zIndex: '2'
};
return(
<div className="text-center">
<div className="myBorder">
<h1 className='header fixedLogo' onScroll={this._handleScroll2} style={myLogoStyle}>{this.props.name}</h1>
</div>
</div>
);
}
}
class Header extends React.Component {
render(){
return(
<div>
<div className="myHeaderBackground">
<ParallaxLogo name={this.props.name}/>
</div>
</div>
);
}
}
class Body extends React.Component{
render(){
var bodyStyle = {
position: 'relative',
width: '100%',
backgroundColor: '#f8f8f8',
zIndex: '4'
};
const tools = [
{
name: 'IDE',
description: 'Sublime, Linux Unbuntu, NPM, Node Js'
},
{
name: 'Languages',
description: "Javascript ES6 Fullstack, Bash, HTML5, CSS3"
},
{
name: 'FrameWorks',
description: 'Socket.io, React, Angular, '
}
];
const toolsList = tools.map((tool) => {
return <li className="toolsList">{tool.name}: <span>{tool.description}</span></li>
});
return(
<div style={bodyStyle}>
<div className="row text-center">
<div className="col-md-6 myPad">
<div className="mySplit sec1">
<i className="fa fa-mobile fa-3x"></i>
<h3>
Mobile
</h3>
</div>
<div className="mySplit sec2">
<i className="fa fa-desktop fa-3x"></i>
<h3>
Desktop
</h3>
</div>
<div className="midSec">
<h2>
Responsive
</h2>
<h3>
Design.Mobile.Desktop
</h3>
<p className="paragraph">
Look good across mobile and Desktop with a responsive design that will adjust to fit all window screens.
</p>
<i className="fa fa-gears fa-4x" aria-hidden="true"></i>
</div>
</div>
<div className="col-md-6 myPad">
<div className="mySplit sec3">
<i className="fa fa-road fa-3x"></i>
<h3>
Destiny
</h3>
</div>
<div className="mySplit sec4">
<i className="fa fa-bullseye fa-3x"></i>
<h3>
Target
</h3>
</div>
<div className="midSec">
<h2>
Precision
</h2>
<h3>
Consulting.SEO.Performance
</h3>
<p className="paragraph">
Don't just look good, reach your full audience. Data Structuring with UML diagrams. Frontend built with React for rapid speed.
</p>
<i className="fa fa-users fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
<div className="header text-center banner1">
<div className="bannerPic text-center" >
<i className="fa fa-power-off fa-3x bannerPicInside" aria-hidden="true"></i>
</div>
</div>
<div className="Para2 text-center">
<h2>Tools</h2>
<ul className="list-group">
{toolsList}
</ul>
</div>
</div>
);
}
}
class Home extends React.Component {
render(){
return(
<div>
<Header name="Alonza Thompson"/>
<Body />
<About />
<Projects />
<Contact />
</div>
);
}
}
class About extends React.Component {
render(){
var divStyle = {
backgroundColor: '#f3f3f3',
paddingBottom: '50px'
};
return(
<div>
<div className="myHeaderBackground text-center">
<div className="otherLogos">All About Me</div>
</div>
<div className="myBackground text-center" style={divStyle}>
<div className="banner2 sec2">
<div className="myPic"></div>
</div>
<div className="row text-center">
<div className="col-md-6 myPad">
<div className="sec2">
<h1>I like to Draw</h1>
</div>
<div className="midSec">
<div className="drawing">
</div>
</div>
</div>
<div className="col-md-6 myPad">
<div className="sec1">
<i className="fa fa-pencil fa-3x"></i>
</div>
<div className="midSec">
<p className="paragraph">
I am a junior developer that builds JavaScript full-stack applications. I also have experience in cat 6 and fiber cabling, understanding the osi model, and working with Linux(UNIX systems are my os choice). My goal is to be apart of a team that builds compliant, reliable applications that scale well.
Money at the moment is not more important than the progression of data turning into wisdom. Willing to put in as much time as it takes outside of work to meet any criteria or requirements needed to service my knowledge and to be a great fit for the organization.
</p>
<p className="paragraph">
Along the way I picked up some networking skills from Professor Messor who is a certified instructor in Networking, Security+, A+, and Linux. I try to stay creative and seek new ways to increase my math and programmatic skills.
</p>
</div>
</div>
</div>
<div className="row text-center">
<div className="col-md-6 myPad">
<div className="sec2">
<h1>I Code</h1>
</div>
</div>
<div className="col-md-6 myPad">
<div className="sec1">
<i className="fa fa-laptop fa-3x"></i>
</div>
</div>
</div>
<div className="container text-center">
<h2>Passions + Goals</h2>
<p className="paragraph list-group-item">
I am currently learning react, redux, three.js, and more about webrtc. I have dabbled with php and apache, and I must say I love Node JS. Devevloping applications in the I.O.T ecosphere is my ultimate goal.
</p>
</div>
</div>
</div>
);
}
}
class ProductList extends React.Component {
render(){
var projects = [
{
id: 1,
name: "MongoDB Final",
description: "This project, a MongoDB store, was for my final at MongoDB University for the Nodejs course that they have. The course overall gave me great insite into DB's and Wiring it up to your application.",
url: "https://github.com/alonzathompson/MongoDB_final_exam/tree/master"
},
{
id: 2,
name: "React-To-Do",
description: "This project is nothing fancy just a to-do list. Our premier must have to-do application. Not the first one and definitely will not be the last.",
url: "https://github.com/alonzathompson/react-to-do"
},
{
id: 3,
name: "Bare-Bones Chat App",
description: "This is a bare bones chat application which uses websockets of course. There is no background but you can pull up two browsers on your network while the server is running and type messages back and fourth.",
url: "https://github.com/alonzathompson/chat"
},
{
id: 4,
name: "Node Express and NodeMailer",
description: "This gave me a chance to dabble with e-mail automation. A basic site setup with Nodejs, Express and NodeMailer that automatically sends out an email.",
url: "https://github.com/alonzathompson/express_basic_website_with_nodemailer"
},
{
id: 5,
name: "Angular.js barebones Photo App",
description: "This was the start of a photo storing application done with angular 1. follows basic crud principles with create, read, update, delete. It allows you to create a photo album and then upload images to it.",
url: "http://s.codepen.io/ar-traunworks/debug/RGwqvO"
}
];
const projectList = projects.map((project) => {
return <a href={project.url} className="projectListCss">
<li className="list-group-item ">
<h3>{project.name}</h3>
<p>{project.description}</p>
</li>
</a>
});
return(
<div className="container-fluid">
<ul className="list-group">
{projectList}
</ul>
</div>
);
}
}
class Projects extends React.Component {
render(){
var divStyle = {
backgroundColor: '#f3f3f3'
};
return(
<div>
<div className="myHeaderBackground text-center">
<div className="otherLogos">My Projects</div>
</div>
<div style={divStyle}>
<ProductList />
</div>
</div>
);
}
}
class Contact extends React.Component {
render(){
var divStyle = {
backgroundColor: '#f3f3f3',
height: '700px',
paddingTop: '100px',
paddingLeft: '25%',
paddingRight: '25%'
};
return(
<div>
<div className="myHeaderBackground text-center">
<div className="otherLogos">Contact Me</div>
</div>
<div className="contact">
<div className="container text-center">
<h1>Lets work on your Project</h1>
<p>
If you want to get in touch with me or I can help assist you with any part of your project (Even if it's documentation), Please don't hesitate to get in contact with me.
</p>
</div>
</div>
</div>
);
}
}
class Footer extends React.Component{
render(){
return(
<footer className="foot">
<div className="footer-container">
<a className="footer-content" href="https://www.linkedin.com/in/alonza-thompson-507169108" target="_blank"><i className="fa fa-linkedin fa-3x" aria-hidden="true"></i></a>
<a className="footer-content" href="https://twitter.com/Ar_traun_Works" target="_blank"><i className="fa fa-twitter fa-3x" aria-hidden="true"></i></a>
<a className="footer-content" href="https://github.com/alonzathompson" target="_blank"><i className="fa fa-github fa-3x" aria-hidden="true"></i></a>
</div>
</footer>
);
}
}
var mainElement = document.getElementById("root");
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Home} />
<Route path="/about" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/contact" component={Contact} />
</Route>
</Router>
), mainElement);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
Raw
style.scss
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 16pt;
overflow-x:hidden;
}
h2{
font-weight: 700;
font-size: 250%;
}
a:link, a:visited, a:active{
text-decoration: none;
}
.myHeaderBackground{
position: relative;
width: 100%;
z-index: -1;
height: 500px;
padding-top: 100px;
overflow-x: hidden;
background:
linear-gradient(
rgba(253,227,167, 0.55),
rgba(253,227,167, 0.55)
),
/* bottom, image */
url('https://static.pexels.com/photos/131667/pexels-photo-131667.jpeg');
/*background-color: #FDE3A7;*/
background-size: cover;
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
}
.hideB{
transition:all 2s ease-out;
}
.showA{
height: 60px;
box-shadow: 2px 2px 5px #665B58;
margin-bottom: 0;
}
.navbar{
transition: all .5s ease-in-out;
}
.navbar-brand {
color: #333 !important;
}
.brandStyle{
font-family: 'Molle', cursive;
font-size: 150%;
color: #333;
position: fixed;
left: 16px;
margin-top: 8px;
margin-left: 16px;
list-style: none;
}
.fixedLogo{
font-family: 'Quicksand';
position: fixed;
font-size: 300%;
top: 200px;
width: 100%;
height: 300px;
z-index: 2;
padding: 2%;
transition: position 1s ease-in-out;
}
.otherLogos{
font-family: 'Quicksand';
position: relative;
top: 200px;
font-size: 300%;
width: 100%;
height: 300px;
z-index: 2;
padding: 2%;
transform: translatey(-120px);
transition: top 1s, transform 0.5s ease;
}
.headerPic2{
/*background-image: url('http://pngimg.com/upload/jewelry_PNG6729.png');*/
background-position: top center;
background-repeat: no-repeat;
position: fixed;
width: 100%;
top: -20px;
left: 50%;
margin-left: -600px;
height: 100%;
z-index: 1;
}
.menuButton{
position: fixed;
z-index: 10;
right: 40px;
margin: auto;
width: 40px;
height: 40px;
cursor: pointer;
display: inline-block;
border-radius: 2px;
padding: 5px 2.5px 2.5px 2.5px;
margin-top: 10px;
.icons{
width: 30px;
height: 4px;
background-color: #333;
text-shadow: 1px 3px 3px rgba(150, 150, 150, 1);
border-radius: 5px;
margin: 5px auto 0 auto;
.icons-last-child {
margin-bottom: 5px;
}
}
}
.menuButton:hover{
background-color: rgba(240,245,250,0.5);
box-shadow: 2px 6px 12px 0px rgba(50, 50, 50, 0.75);
transition: box-shadow 500ms ease-in-out;
&::after{
box-shadow: 1px 2px 7px 0px rgba(50, 50, 50, 0.75);
transition: box-shadow 500ms ease-out;
}
}
.myDrop{
width: 300px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
color:#fff;
z-index: 7;
background-color: rgba(1,1,1,0.9);
overflow: hidden;
padding-top: 60px;
transition: 0.5s;
font-size: 1.2em;
}
.myDrop a{
padding: 8px 8px 8px 50px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
a:hover{
text-decoration: none;
color: #f1f1f1;
}
.headerBackground{
position:relative;
overflow:hidden;
}
.myBackground{
background-color: transparent;
}
.paragraph{
text-indent: 5%;
text-align: justify;
font-size: 100%;
line-height: 150%;
margin: 3% 0;
padding: 2%;
}
.midSec{
padding: 5%;
h2{
font-weight: 600;
margin: 2.5% 0 2.5% 0;
}
p{
color: #777;
margin: 5% 0 5% 0;
}
}
.mySplit{
width: 50%;
display: inline-block;
float: left;
padding: 5%;
margin-bottom: 10%;
border-top: solid 1px #ffffff;
}
.sec1{
background-color: #C8F7C5;
color: #22313F;
}
.sec2{
background-color: #EC644B;
color: #22313F;
}
.sec3{
background-color: #336E7B;
color: #22313F;
}
.sec4{
background-color: #C5EFF7;
color: #22313F;
}
.myPad{
padding: 0;
}
.banner1{
height: 200px;
width: 100%;
background-color: #336E7B;
color: #f1f1f1;
padding-top: 25px;
border-bottom: solid 4px #b1b1b1;
.bannerPic{
border-radius: 50%;
background-color: #81E2E6;
width: 150px;
height: 150px;
margin: auto;
color: #EC644B;
box-shadow: inset 0px 2px 10px 3px rgba(100, 100, 100, 0.75);
.bannerPicInside{
margin: 25% auto;
}
}
}
.Para2{
width: 100%;
height: 500px;
background-color: #f3f3f3;
z-index: -1;
position: relative;
bottom: 0;
}
.banner2 {
padding: 5px 0 5px 0;
margin-bottom: 10px;
}
.myPic{
width: 150px;
height: 150px;
margin: auto auto;
padding: 5px;
border-radius: 50%;
background-image: url('https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAgeAAAAJDliMTk2Yjg3LWFjMDUtNDA0OS1hZDhkLWNjYmU2YmI1MWVjNA.jpg');
background-size: cover;
box-shadow: inset 0px 2px 10px 3px rgba(100, 100, 100, 0.75);
}
.drawing{
width: 100%;
height: 600px;
background-image: url('https://s29.postimg.org/h8n5obh3r/girlinhoodiefinala.png');
background-size: 425px 600px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 10% 0px;
margin: auto;
}
.toolsList{
width: 100%;
height: 100px;
background-color: #C5EFF7;
margin: 5% 0;
padding: 2.5%;
span{
color: #777;
}
}
.projectListCss{
margin: 1% auto;
color: #333;
padding: 3%;
p{
color: #777;
}
h3{
color: #333;
}
:hover{
background-color: rgb(197,239,247);
}
}
.contact{
background-color: #666;
color: #f5f5f5;
padding: 2.5%;
}
.foot{
display: block;
background: #444;
height: 100px;
width: 100%;
border-top: 1px solid #e1e1e1;
}
.footer-container{
max-width: 300px;
padding: 10px;
margin: 10px auto 0 auto;
text-align: center;
}
.footer-content{
margin-right: 20px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment