First draft
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
*.jpeg filter=lfs diff=lfs merge=lfs -text
|
||||
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.png filter=lfs diff=lfs merge=lfs -text
|
||||
+6
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,77 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Jake Charman</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Orbitron:[email protected]&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style/mobile.css" />
|
||||
<link rel="stylesheet" href="style/desktop.css" />
|
||||
<link rel="stylesheet" href="fonts/fontawesome/css/all.min.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="logo">
|
||||
<h1>Jake Charman</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="technology">
|
||||
<div class="gradient gradient-left">
|
||||
<div class="text text-left">
|
||||
<div>
|
||||
<h2>Technology</h2>
|
||||
<hr>
|
||||
<p>Working with technology is my day job, I currently specialise in:</p>
|
||||
<ul>
|
||||
<li>Linux (primarily RHEL & Debian based)</li>
|
||||
<li>SCM with Git and Subversion</li>
|
||||
<li>Big Data (Hadoop & Cloud storage)</li>
|
||||
<li>Programming (Python, Bash & C#)</li>
|
||||
</ul>
|
||||
<p>I also run some services for personal use and occasionally write software. My "homelab" currently includes:</p>
|
||||
<ul>
|
||||
<li>pfSense</li>
|
||||
<li>Proxmox</li>
|
||||
<li>Docker</li>
|
||||
<li>FreeIPA</li>
|
||||
<li>Nextcloud</li>
|
||||
<li>Jenkins</li>
|
||||
<li>Ansible</li>
|
||||
<li>Redash</li>
|
||||
</ul>
|
||||
<div class="social">
|
||||
<a class="button" href="https://www.linkedin.com/in/jakecharman/"><i class="fa-brands fa-linkedin-in"></i></a>
|
||||
<a class="button" href="https://github.com/jcharman/"><i class="fa-brands fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="motorsport">
|
||||
<div class="gradient gradient-right">
|
||||
<div class="text text-right">
|
||||
<div>
|
||||
<h2>Racing</h2>
|
||||
<hr />
|
||||
<p>When not working on tech, I can usually be found at <a href="https://santapod.com">Santa Pod Raceway</a> working on my Dad's <a href="https://nitrojunkie.uk">NitroJunkie.UK</a> "All In" Top Fuel Bike. The bike is purpose built from the ground up with a supercharged, nitromethane injected engine capable of producing approximately 1000 horsepower. </p>
|
||||
<p>The photo for this section was taken by <a href="https://www.facebook.com/BlackettPhotography">Blackett Photography</a></p>
|
||||
<p>You can read more about our racing at <a href="https://nitrojunkie.uk">nitrojunkie.uk</a></p>
|
||||
<div class="social">
|
||||
<a class="button" href="https://nitrojunkie.uk"><i class="fa-solid fa-globe"></i></a>
|
||||
<a class="button" href="https://www.youtube.com/@NitroJunkieUK"><i class="fa-brands fa-youtube"></i></a>
|
||||
<a class="button" href="https://www.facebook.com/nitrojunkie.uk"><i class="fa-brands fa-facebook"></i></a>
|
||||
<a class="button" href="https://instagr.am/nitrojunkieuk"><i class="fa-brands fa-instagram"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© 2024 Jake Charman. This site uses cookies.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
@media (min-width: 1000px) {
|
||||
#technology{
|
||||
background-position-x: 35vw;
|
||||
height: 75vh;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#motorsport{
|
||||
background-position-y: -180px;
|
||||
background-position-x: -200px;
|
||||
background-size: auto;
|
||||
min-height: 75vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.text{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.text-right{
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.text-left{
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.gradient-left{
|
||||
background-image: linear-gradient(to right, rgba(23, 22, 20, 1), rgba(23, 22, 20, 1), rgba(23, 22, 20, 0));
|
||||
}
|
||||
|
||||
.gradient-right{
|
||||
background-image: linear-gradient(to left, rgba(23, 22, 20, 1), rgba(23, 22, 20, 1), rgba(23, 22, 20, 0));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
body{
|
||||
margin: 0;
|
||||
color: #e5e5e5;
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
font-family: "Orbitron", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: 4c4c4c;
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: 4c4c4c;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#logo{
|
||||
text-align: center;
|
||||
margin: 0 auto 0 auto;
|
||||
}
|
||||
|
||||
footer h2, section h2{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#technology{
|
||||
background-image: url(../images/njr-code.png);
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-position: center;
|
||||
background-position-x: -400px;
|
||||
}
|
||||
|
||||
#motorsport{
|
||||
background-image: url(../images/topfuel_startline.jpg.jpeg);
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-position: center;
|
||||
background-position-x: -65px;
|
||||
background-position-y: -90px;
|
||||
background-size: 200%;
|
||||
}
|
||||
|
||||
.gradient{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to top, rgba(23, 22, 20, 1) 70%, rgba(23, 22, 20, 0));
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.text{
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text>div{
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.button{
|
||||
padding: 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.button:hover{
|
||||
color: rgba(23, 22, 20, 1);
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.social{
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #e5e5e5;
|
||||
}
|
||||
Reference in New Issue
Block a user