<!DOCTYPE html>
<html>
<head>
<title>SalvatorSahagun.com: A Lifestyle, Current Events, and Entrepuership Blog.</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>
</head>
<style>
body{
background-image: url("Spacedust.jpeg");
background-color: #CCCCCC;
background-repeat: repeat;
}
div.content{
width: 760px;
height: 250px;
position: absolute;
overflow: scroll;
}
ul.header{
width: 800px;
position: relative;
}
h1, h2, p, ul, li{
font-family: Helvetica, Arial, sans-serif;
}
ul.header li{
display: inline;
list-style: none;
margin: 0;
}
ul.header {
background-color: #111;
padding: 0;
}
ul.header li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
padding: 20px;
display: inline-block;
text-align: center;
border-bottom: 1px solid #555;
}
.content{
background-color: #FFF;
padding: 20px;
}
.content h2 {
padding: 0;
margin: 0;
}
.content li{
margin-bottom: 10px;
}
.active{
background-color: #0099FF;
}
.Lifestyle_Dropdown{
position:relative;
}
.Lifestyle_Dropdown: after {
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 38%;
right: 12%;
}
.Lifestyle_DropNav{
position: absolute;
display: none;
}
.Lifestyle_DropNav li{
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.Lifestyle_Dropdown: hover > .Lifestyle_DropNav{
display: block;
}
.CurrentEvents_Dropdown{
position:relative;
}
.CurrentEvents_Dropdown: after {
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 38%;
right: 12%;
}
.CurrentEvents_DropNav{
position: absolute;
display: none;
}
.CurrentEvents_DropNav li{
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.CurrentEvents_Dropdown: hover > .CurrentEvents_DropNav{
display: block;
}
</style>
<body>
<div id = "container">
</div>
<script type="text/babel">
var {
Router,
Route,
IndexRoute,
IndexLink,
Link
} = ReactRouter;
var destination = document.querySelector("#container");
var About = React.createClass({
render: function(){
return(
<div>
<h2><i>About Salvator</i></h2>
<p>
My name is Salvator Sahagun. I was born in San Fransico California, September 26th 1991.
The reason I created this blog is for two reasons.
The main one is to sharpen my web development skills, the second reason is because I am talk-oholic
and I would like to have my own place where I can chat about what ever I want.
</p>
</div>
);
}
});
var Contact = React.createClass({
render: function(){
return(
<div>
<h2>Lets Talk!</h2>
<p>The easiest thing to do is post on our <a href="http://forum.kirupa.com">forums</a>.</p>
</div>
);
}
});
var CurrentEvents = React.createClass({
render: function(){
return(
<div>
<h2>Current Events</h2>
<p>This is where we discuss current events, what is happening now. Topics include but not limited to</p>
<ul>
<li><i>Politics and History</i>:</li>
<li><i>Science and Innovation</i>:</li>
<li><i>Sports and Entertainment</i>:</li>
</ul>
</div>
);
}
});
var Lifestyle = React.createClass({
render: function(){
return(
<div>
<h2><i>Life Style</i></h2>
<p>Lifestyle is something I am very passionate about. It is one of those things that everyone can talk about
</p>
<ul>
<li><i>Culinary Arts</i>:<p> Food is universal, yet style is so diverse. This section is where we will
explore the complex and diverse world of food. European, Oriental, African, Latin American, and fusion we
are here explore this thing we do with our hands and mouth.</p></li>
<li><i>Spirits, Wine and Beer</i>:<p>The world of alcohol is unlike any other narcotic. Each distillery, brewery, or winery
has history. The products are helped together by style and tradition. As we know tradition is the core building block
of any civilzation or culture. </p></li>
<li><i>Cinema</i>:</li><p>Originally words painted pictures in our head. Thanks to Thomas Edison we now have motion pictures
Movies have done for the fine arts, what Mixed Martial Arts has done for Combat Sports. No art combines words, colors and music
so beautifully the way movies do.</p>
<li><i>Literature</i>:<p>The foundation of any society is literature. From Illiad in Greece to Fifty Shades of Grey in Seattle.
Literature is one of the great arts of our time and a wonderful reflection of human life. Pyscology tells us that the heroes we idolize as children shape the personalitys we develop as adults.
Alexander the Great was the boy who loved Achilles, He traveled East and died grief strucked from his lover. Emma Watson loved the bookish and Belle went on to play Hermoine Granger. </p></li>
</ul>
</div>
);
}
});
//Life style sub categories
var CulinaryArts = React.createClass({
render:function(){
return(
<div>
<h2>Culinary Arts</h2>
<p> Food is universal, yet style is so diverse. This section is where we will
explore the complex and diverse world of food. European, Oriental, African, Latin American, and fusion we
are here explore this thing we do with our hands and mouth. </p>
</div>
);
}
});
var SpiritsWineBeer = React.createClass({
render:function(){
return(
<div>
<h2>Spirits, Wine and Beer</h2>
<p>The world of alcohol is unlike any other narcotic. Each distillery, brewery, or winery
has history. The products are helped together by long style and tradition. As we know tradition is the core building block
of any civilzation or culture.</p>
</div>
);
}
});
var Cinema = React.createClass({
render:function(){
return(
<div>
<h2>Cinema</h2>
<p>Originally words painted pictures in our head. Thanks to Thomas Edison we now have motion pictures.
Movies have done for the fine arts, what Mixed Martial Arts has done for Combat Sports. No art combines words, colors and music
so beautifully the way movies do.</p>
</div>
);
}
});
var literature = React.creatClass({
render:function() {
return(
<div>
<h2>Literature</h2>
<p>The foundation of any society is literature. From Homers Illiad to Fifty Shades of Grey. Literature is one of
great arts of time and wonderful reflection of human life.
Pyscology tells us that the heroes we idolize as children shape the personalitys we develop as adults.</p>
</div>
);
}
})
var Ventures = React.createClass({
render:function() {
return(
<div>
<h2>Ventures</h2>
<p>While I am young and ambitous. This section of the blog will be to focus on my entrepreneurial endeavours.
</p>
<ul>
<li>New.type Labs</li>
<li>LeBonBoutique.com</li>
<li>Ouut</li>
</ul>
</div>
);
}
});
// Current Events Sub Categories
var PoliticsHistory = React.createClass({
render: function(){
return(
<div>
<h2>Politics and History</h2>
<p> Politics represents the now. History represents then. It is
the duty of every citizen to the be engadged in Politics. Not all
laws are just. But having the ability to engadge in current events
and understand why things are the way they are, is vital to any group of civilians
in a thriving Republic.
</p>
</div>
)
}
});
var ScienceInnovation = React.createClass({
render: function(){
return (
<div>
<h2> Technology and Innovation</h2>
<p>A steel mill was once as innovative as the iPhone. In this section we will keep
close tabs on the Technology and innovation. The current state of science and the possibilties of tomorrow.
</p>
</div>
)
}
});
var App = React.createClass({
render: function(){
return(
<div>
<h1>Salvator Sahagun</h1>
<ul className="header">
<li><IndexLink to="/About" activeClassName="active">About</IndexLink></li>
<li><Link to="/Lifestyle" activeClassName="active" className ="Lifestyle_Dropdown">Life Style</Link></li>
<ul class = "Lifestyle_DropNav">
<li><link to="/CulinaryArts" activeClassName="active">Culinary Arts</link></li>
<li><link to="/Spirits, Wine and Beer" activeClassName="active">Spirits, Wine and Beer</link></li>
<li><link to="/Cinema" activeClassName ="active">Cinema</link></li>
<li><link to="/Literature" activeClassName ="active">Literature</link></li>
</ul>
<li><Link to="/CurrentEvents" activeClassName="active" className ="CurrentEvents_Dropdown">Current Events</Link></li>
<ul class = "CurrentEvents_DropNav">
<li><link to="/PoliticsHistory" activeClassName="active">Politics and History</link></li>
<li><link to="/ScienceInnovation" activeClassName="active">Science and Innovation</link></li>
<li><link to="/SportsEntertainment" activeClassName="active">Sports and Entertainment</link></li>
</ul>
<li><Link to="/Ventures" activeClassName="active">Ventures</Link></li>
<li><Link to="/Contact" activeClassName="active">Contact</Link></li>
</ul>
<div className="content">
{this.props.children}
</div>
)
}
});
ReactDOM.render(
<Router>
<Route path="/" component={App}> </Route>
<IndexRoute path ="About" component={About} /> </IndexRoute>
<Route path ="Lifestyle" component={Lifestyle} /> </Route>
<Route path ="CulinaryArts" component={CulinaryArts} /> </Route>
<Route path ="SpiritsWineBeer" component={SpiritsWineBeer} /> </Route>
<Route path ="Cinema" component={Cinema} /> </Route>
<Route path ="Literature" component={Literature} /> </Route>
<Route path ="CurrentEvents" component={CurrentEvents} /> </Route>
<Route path ="PoliticsHistory" component={PoliticsHistory} /> </Route>
<Route path ="ScienceInnovation" component={ScienceInnovation} /> </Route>
<Route path ="SportsEntertainment" component={SportsEntertainment} /> </Route>
<Route path ="Ventures" component={Ventures} /> </Route>
<Route path ="Contact" component={Contact} />
</Route>
</Router>,
destination
);
</script>
</body>
</html>
