mirror of
https://asciireactor.com/otho/industry-website.git
synced 2025-10-31 18:58:03 +00:00
201 lines
8.0 KiB
HTML
201 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Otho Ulrich</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
|
|
.w3-row-padding img {margin-bottom: 12px}
|
|
.bgimg {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url('images/orchard.jpg');
|
|
min-height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Sidebar with image -->
|
|
<nav class="w3-sidebar w3-hide-medium w3-hide-small" style="width:40%">
|
|
<div class="bgimg"></div>
|
|
</nav>
|
|
|
|
<!-- Hidden Sidebar (reveals when clicked on menu icon)-->
|
|
<nav class="w3-sidebar w3-black w3-animate-right w3-xxlarge" style="display:none;padding-top:150px;right:0;z-index:2" id="mySidebar">
|
|
<a href="javascript:void(0)" onclick="closeNav()" class="w3-button w3-black w3-xxxlarge w3-display-topright" style="padding:0 12px;">
|
|
<i class="fa fa-remove"></i>
|
|
</a>
|
|
<div class="w3-bar-block w3-center">
|
|
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Otho Ulrich</a>
|
|
<a href="#do" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">What I Do</a>
|
|
<a href="#about" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">About</a>
|
|
<a href="#contact" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<div class="w3-main w3-padding-large" style="margin-left:40%">
|
|
|
|
<!-- Menu icon to open sidebar -->
|
|
<span class="w3-button w3-top w3-white w3-xxlarge w3-text-grey w3-hover-text-black" style="width:auto;right:0;" onclick="openNav()"><i class="fa fa-bars"></i></span>
|
|
|
|
<!-- Header -->
|
|
<header class="w3-container w3-center" style="padding:128px 16px" id="home">
|
|
<h1 class="w3-jumbo"><b>Otho Ulrich</b></h1>
|
|
<p></p>
|
|
<img src="images/mirror.png" class="w3-image w3-hide-small w3-round" style="display:block;width:60%;margin:auto;">
|
|
<img src="images/mirror.png" class="w3-image w3-hide-large w3-hide-medium w3-round" width="100%" height="100%">
|
|
<button class="w3-button w3-light-grey w3-padding-large w3-margin-top" type="submit" onclick="window.open('othoulrich-cv.pdf')">
|
|
<i class="fa fa-download"></i> Curriculum Vitae
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Do Section -->
|
|
<div class="w3-padding-32 w3-content" id="do">
|
|
<h2 class="w3-text-grey">What I Do</h2>
|
|
<hr class="w3-opacity">
|
|
<p>I build, automate, and maintain systems of many types. Mostly computers.
|
|
Professionally, I combine devops, site reliability, and systems engineering
|
|
to leverage state-of-the-art development and deployment practices across
|
|
many projects.
|
|
</p>
|
|
|
|
<div style="text-align:center">
|
|
<a style="display:inline-block" href="https://code.othoulrich.com/explore/repos" class="w3-button w3-light-grey w3-padding-large w3-margin-top">
|
|
Code Samples
|
|
</a>
|
|
<div style="font-size:8pt">
|
|
<p>I've included a few older software projects on this Gitea server,
|
|
but most are currently trade secrets.
|
|
</p>
|
|
<p>
|
|
E.G.,
|
|
<a href="https://code.othoulrich.com/Otho/industry-website">Otho/industry-website</a>
|
|
is the repo responsible for this website.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gallery -->
|
|
<div class="w3-row-padding" style="margin:0 -16px">
|
|
<div class="w3-half">
|
|
<figure>
|
|
<img src="images/servers.jpg" style="width:100%">
|
|
<figcaption>Some of my cloud hosts. All sorts of projects going on here.</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="images/servers-tall.jpg" style="width:100%">
|
|
<figcaption>For a while they were in my brother's basement.</figcaption>
|
|
</figure>
|
|
|
|
<figure>
|
|
<img src="images/msu-accelerator-control.jpg" style="width:100%">
|
|
<figcaption>Observation and control room at MSU's linear particle
|
|
accelerator. This is one of the coolest monitoring
|
|
setups I've seen in person. But they all use windows!
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<figure>
|
|
<img src="images/cranium.jpg" style="width:100%">
|
|
<figcaption>Yes: I fell into this fad, too. Over winter 2020-2021,
|
|
I lived in my small cottage in rural southwest Michigan, and
|
|
heated it almost entirely with this.
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="w3-half">
|
|
<figure>
|
|
<img src="images/young-otho.jpg" style="width:100%">
|
|
<figcaption>Me at 4 with my first computer.</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="images/battlestation.jpg" style="width:100%">
|
|
<figcaption>My computer now. Not quite on par with MSU's
|
|
accelerator lab. Yet.
|
|
</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="images/orchard.jpg" style="width:100%">
|
|
<figcaption>Back there is my little orchard. Fresh fruit is the best.</figcaption>
|
|
</figure>
|
|
|
|
<figure>
|
|
<img src="images/earl.jpg" style="width:100%">
|
|
<figcaption>One time my wife took me snorkling and I got far too
|
|
close to a Spotted Eagle Ray.
|
|
</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="images/blast-furnace.jpg" style="width:100%">
|
|
<figcaption>A blast furnace in Dearborn, MI. I like to
|
|
drive around and take pictures of cool stuff.
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<figure>
|
|
<img src="images/old-lab.jpg" style="width:100%">
|
|
<figcaption>My office in college. I've been like this for a long time.</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- End Gallery -->
|
|
</div>
|
|
<!-- End Do Section -->
|
|
|
|
|
|
<!-- About Section -->
|
|
<div class="w3-content w3-justify w3-text-grey w3-padding-32" id="about">
|
|
<h2>About Me</h2>
|
|
<hr class="w3-opacity">
|
|
<p>Grew up in Michigan. Lived a few other places. Studied astrophysics in
|
|
college. Been programming since I learned to read. Play some music.
|
|
I've tried a lot of things and computers are my favorite. Farming is
|
|
second. I run servers out of my barn and produce my own electricity.
|
|
My wife and I had our first baby and now everything I do is for them.
|
|
</p>
|
|
</div>
|
|
<!-- End About Section -->
|
|
|
|
<div style="text-align:center">
|
|
<button class="w3-button w3-light-grey w3-padding-large w3-margin-top" type="submit" onclick="window.open('othoulrich-cv.pdf')">
|
|
<i class="fa fa-download"></i> Curriculum Vitae
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contact Section -->
|
|
<div class="w3-padding-32 w3-content w3-text-grey" id="contact" style="margin-bottom:64px">
|
|
<h2>Contact Me</h2>
|
|
<hr class="w3-opacity">
|
|
|
|
<div class="w3-section">
|
|
<!-- <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> No addr</p> -->
|
|
<p><i class="fa fa-phone fa-fw w3-large w3-margin-right"></i> (734) 272-3363</p>
|
|
<p><i class="fa fa-envelope fa-fw w3-large w3-margin-right"> </i> <a href="mailto:otho@othoulrich.com">otho@othoulrich.com</a> </p>
|
|
<p><i class="fa fa-id-card fa-fw w3-large w3-margin-right"> </i> GPG: <a href="https://othoulrich.com/othoulrich-gpg.txt">51375D7EA61E966B</a> </p>
|
|
</div>
|
|
</div>
|
|
<!-- End Contact Section -->
|
|
|
|
</div>
|
|
<!-- END PAGE CONTENT -->
|
|
|
|
<script>
|
|
// Open and close sidebar
|
|
function openNav() {
|
|
document.getElementById("mySidebar").style.width = "60%";
|
|
document.getElementById("mySidebar").style.display = "block";
|
|
}
|
|
|
|
function closeNav() {
|
|
document.getElementById("mySidebar").style.display = "none";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |