Implemented first stage of visual overhaul
This commit is contained in:
403
index.html
403
index.html
@@ -1,200 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Laura Bootstrap Theme</title>
|
||||
<meta name="description" content="Free Bootstrap Theme by BootstrapMade.com">
|
||||
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
|
||||
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="author" content="enpaul@enpaul.net"/>
|
||||
<meta name="description" content="ENPaul personal landing page and Network Services website"/>
|
||||
<meta name="keywords" content="enpaul, network, operations, networking, plex, media, server, adds, active, directory, wpi, worcester, polytechnic, institute, boston, mechanical, engineering, solidworks, home, lab, homelab, solid, works, autocad, cad, domain, windows, server"/>
|
||||
<meta name="robots" content="index,follow"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans|Roboto:300,400|Questrial|Satisfy">
|
||||
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
|
||||
<meta property="og:title" content="ENPaul"/>
|
||||
<meta property='og:locale' content="en_US"/>
|
||||
<meta property='og:description' content="ENPaul personal landing page and Network Services website"/>
|
||||
<meta property="og:type" content="Website"/>
|
||||
<meta property='og:site_name' content="ENPaul Network"/>
|
||||
<meta property="og:url" content="https://enpaul.net/"/>
|
||||
<!-- =======================================================
|
||||
Theme Name: Laura
|
||||
Theme URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
|
||||
Author: BootstrapMade.com
|
||||
Author URL: https://bootstrapmade.com
|
||||
======================================================= -->
|
||||
</head>
|
||||
|
||||
<title>ENPaul</title>
|
||||
|
||||
<link rel="shortcut icon" href="img\e-b.png">
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/hexagons.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/hexagons.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
|
||||
|
||||
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
|
||||
<span class="light">MENU</span><!--<i class="fa fa-bars"></i>-->
|
||||
</button>
|
||||
<a class="navbar-brand page-scroll" href="#page-top"><span class="light"><img src="img/e-w.png" width="32"> Home</span></a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="hidden"><a href="#page-top"></a></li>
|
||||
<!--<li><a class="page-scroll" href="#projects">Projects</a></li>-->
|
||||
<li><a class="page-scroll" href="#services">Services</a></li>
|
||||
<!--<li><a class="page-scroll" href="#network">Network</a></li>-->
|
||||
<li><a class="page-scroll" href="#about">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="intro">
|
||||
<div class="intro-body">
|
||||
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" onload="myFunction()">
|
||||
<div class="header">
|
||||
<div class="bg-color">
|
||||
<header id="main-header">
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lauraMenu">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Laura</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="lauraMenu">
|
||||
<ul class="nav navbar-nav navbar-right navbar-border">
|
||||
<li class="active"><a href="#main-header">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#portfolio">Portfolio</a></li>
|
||||
<li><a href="#testimonial">Testimonial</a></li>
|
||||
<li><a href="#contact">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="brand-heading">
|
||||
<img class="heading_large" style="max-width: 512px;" src="img/logo.png"/>
|
||||
<img class="heading_small" style="max-width: 128px;" src="img/e-w.png"/>
|
||||
</h1>
|
||||
<hr>
|
||||
<p>Student - Tinkerer - Programmer - <i style="color: #808080;">(aspiring)</i> Engineer</p>
|
||||
<hr>
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm"><i class="fa fa-envelope-o"></i></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://download.enpaul.net/enpaul-resume.pdf" target="_blank"><span class="hb hb-sm"><i class="fa fa-file-text-o"></i></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://twitter.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-twitter"></i></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm"><i class="fa fa-google-plus"></i></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm"><i class="fa fa-linkedin"></i></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-md-12 wow fadeIn delay-05s">
|
||||
<div class="banner-text">
|
||||
<h2>Hi, I am <span>Laura</span> Thomson,</h2>
|
||||
<p>A Creative Photographer <br>& Designer</p>
|
||||
</div>
|
||||
<div class="overlay-detail text-center">
|
||||
<a href="#about"><i class="fa fa-angle-down"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!--<hr class="section-divider">
|
||||
|
||||
<section id="projects" class="container content-section text-center">
|
||||
</div>
|
||||
</div>
|
||||
<section id="about" class="section-padding wow fadeIn delay-05s">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<h2>Personal Projects</h2>
|
||||
<i class="fa fa-folder-open fa-5x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p>
|
||||
The underlying infrastructure of the ENPaul Network (ENPN) helps to facilitate a number of pet-projects that are constantly cycled from under development, to abandoned, to broken, and back to under development. These projects are, at best, curiosities and should be seen as such.
|
||||
<br>
|
||||
Enter at your own risk.
|
||||
<br>
|
||||
</p>
|
||||
<ul class="list-inline banner-social-buttons">
|
||||
<div class="col-md-6 text-right">
|
||||
<h2 class="title-text">
|
||||
Meet<br><span class="deco">Laura</span> Thomson
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-md-6 text-left">
|
||||
<div class="about-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
<p> </p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p> </p>
|
||||
<ul class="abt-list">
|
||||
<li>- Excepteur sint occaecat cupidatat non proident.</li>
|
||||
<li>- Duis aute irure dolor in reprehenderit.</li>
|
||||
<li>- Ask the experts.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="portfolio" class="section-padding wow fadeInUp delay-05s">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2 class="title text-center">Let's <span class="deco">See</span> My Work</h2>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div id="myGrid" class="grid-padding">
|
||||
<div class="col-md-4 col-sm-4 padding-right-zero">
|
||||
<img src="img/portfolio01.jpg" class="img-responsive">
|
||||
<img src="img/port01.jpg" class="img-responsive">
|
||||
<img src="img/port02.jpg" class="img-responsive">
|
||||
<img src="img/portfolio01.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4 padding-right-zero">
|
||||
<img src="img/portfolio02.jpg" class="img-responsive">
|
||||
<img src="img/port01.jpg" class="img-responsive">
|
||||
<img src="img/port02.jpg" class="img-responsive">
|
||||
<img src="img/portfolio01.jpg" class="img-responsive">
|
||||
<img src="img/port03.jpg" class="img-responsive">
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-4 padding-right-zero">
|
||||
<img src="img/port01.jpg" class="img-responsive">
|
||||
<img src="img/portfolio01.jpg" class="img-responsive">
|
||||
<img src="img/portfolio02.jpg" class="img-responsive">
|
||||
<img src="img/port03.jpg" class="img-responsive">
|
||||
<img src="img/portfolio02.jpg" class="img-responsive">
|
||||
<img src="img/port02.jpg" class="img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="testimonial" class="section-padding wow fadeInUp">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h2 class="title text-center">See What Our <span class="deco">Client</span> Are Saying ?</h2>
|
||||
<div class="test-sec">
|
||||
<div class="col-sm-4">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
||||
</blockquote>
|
||||
<div class="carousel-info">
|
||||
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
||||
</blockquote>
|
||||
<div class="carousel-info">
|
||||
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diamsed commodo nibh ante facilisis bibendum dolor feugiat at. </p>
|
||||
</blockquote>
|
||||
<div class="carousel-info">
|
||||
<div class="pull-left"> <span class="testimonials-name">John Doe</span> <span class="testimonials-post">CEO, Company Inc.</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section-padding wow fadeIn delay-05s">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="contact-sec text-center">
|
||||
<h2>Want To <span class="deco">Hire</span> Me?</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 col-md-push-2">
|
||||
<div id="sendmessage">Your message has been sent. Thank you!</div>
|
||||
<div id="errormessage"></div>
|
||||
<form action="" method="post" role="form" class="contactForm">
|
||||
<div class="form-group">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-center"><button type="submit" class="btn btn-primary btn-lg">Send Message</button></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer-2 text-center-xs bg--white">
|
||||
<div class="container">
|
||||
<!--end row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="footer">
|
||||
© Copyright Laura Theme. All Rights Reserved
|
||||
<div class="credits">
|
||||
<!--
|
||||
All the links in the footer should remain intact.
|
||||
You can delete the links only if you purchased the pro version.
|
||||
Licensing information: https://bootstrapmade.com/license/
|
||||
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Laura
|
||||
-->
|
||||
Designed by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<ul class="social-list">
|
||||
<li>
|
||||
<a href="/network" class="btn btn-default btn-lg"><i class="fa fa-arrow-circle-o-right"></i> <span class="network-name"><b>Learn More</b></span></a>
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-dribbble"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-vimeo"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fa fa-instagram"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>-->
|
||||
<!--end row-->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<hr class="section-divider">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.bxslider.min.js"></script>
|
||||
<script src="js/wow.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
<script src="contactform/contactform.js"></script>
|
||||
|
||||
<section id="services" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<h2>Network Services</h2>
|
||||
<i class="fa fa-cogs fa-5x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p>
|
||||
Providing useful network services is the primary goal of the ENPaul Network (ENPN). These services provide means of entertainment, data management, and security for the network users.
|
||||
<br><br>
|
||||
The full list of services provided by the ENPN can be found at the link below. Alternatively, use one of the other links to directly access specific service web-interfaces.
|
||||
<br>
|
||||
</p>
|
||||
<ul class="list-inline banner-social-buttons">
|
||||
<li>
|
||||
<a href="/services" class="btn btn-default btn-lg"><i class="fa fa-arrow-circle-o-right"></i> <span class="network-name"><b>Learn More</b></span></a>
|
||||
</li>
|
||||
<br><br><p><i>Direct service links</i></p>
|
||||
<li>
|
||||
<a href="https://plex.enpaul.net" class="btn btn-default btn-lg"><i class="fa fa-ticket"></i> <span class="network-name"><b>Plex Media Server</b></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://enpaul.net/services/vpn" class="btn btn-default btn-lg"><i class="fa fa-lock"></i> <span class="network-name"><b>VPN</b></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://storage.enpaul.net" class="btn btn-default btn-lg"><i class="fa fa-cloud"></i> <span class="network-name"><b>Storage</b></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gitlab.enpaul.net" class="btn btn-default btn-lg"><i class="fa fa-gitlab"></i> <span class="network-name"><b>GitLab</b></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<!--<hr class="section-divider">
|
||||
|
||||
<section id="network" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<h2>The ENPaul Network</h2>
|
||||
<i class="fa fa-sitemap fa-5x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<p>
|
||||
The ENPaul Network (ENPN) is a <a href="https://www.reddit.com/r/homelab/">home-lab environment</a> maintained by ENPaul for the purposes of fun, curiosity, experimentation, and support for his <a href="#projects">personal projects</a>.
|
||||
<br><br>
|
||||
The ENPN hosts two VMWare ESXi hypervisors, a Microsoft Active Directory Domain, federated authentication services including LDAP and RADIUS, NAS systems, and a plethora of applications and utilities.
|
||||
</p>
|
||||
<ul class="list-inline banner-social-buttons">
|
||||
<li>
|
||||
<a href="/network" class="btn btn-default btn-lg"><i class="fa fa-arrow-circle-o-right"></i> <span class="network-name"><b>Learn More</b></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>-->
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section id="about" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<h2>About E.N.Paul</h2>
|
||||
<img id="logo_about" src="img\e-w.png" width="128">
|
||||
<br><br>
|
||||
<p>
|
||||
EN Paul is a Mechanical Engineering student at <a target="_blank" href="https://wpi.edu">Worcester Polytechnic Institute</a> in Worcester Massachusets with way too much time on his hands. He works at <a target="_blank" href="http://www.wpi.edu/+netops">WPI Network Operations</a>, plays around with <a target="_blank" href="http://www.solidworks.com">3DS SolidWorks</a>, and runs this website when he's bored.
|
||||
<br><br>
|
||||
He doesn't want donations, but asks that if you have a joke or funny story to share that you send it to him.
|
||||
<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container text-center">
|
||||
<p style="color: #606060;"><i>©2017 E.N.Paul - 2017-11-29</i></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user