jake/jc-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First draft

Browse Source
This commit is contained in:
jake
2024-11-01 19:56:43 +00:00
parent 4be603becd
commit 16db262ff1
17 changed files with 132 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+2
View File
@@ -0,0 +1,2 @@
FROM httpd:2.4
COPY --chown=apache:apache src/ /usr/local/apache2/htdocs
index.html
-42
View File
@@ -1,42 +0,0 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jake Charman</title>
<link rel="stylesheet" href="style/mobile.css" />
<link rel="stylesheet" href="style/desktop.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
</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>
</div>
</div>
</div>
</section>
<section id="motorsport">
<div class="gradient gradient-right">
<div class="text text-right">
<div>
<h2>Racing</h2>
</div>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
.gitattributes → src/.gitattributes
View File
src/fonts/fontawesome/css/all.min.css
Vendored
+6
View File
File diff suppressed because one or more lines are too long
src/fonts/fontawesome/webfonts/fa-brands-400.ttf
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-brands-400.woff2
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-regular-400.ttf
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-regular-400.woff2
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-solid-900.ttf
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-solid-900.woff2
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-v4compatibility.ttf
BIN
View File
Binary file not shown.
src/fonts/fontawesome/webfonts/fa-v4compatibility.woff2
BIN
View File
Binary file not shown.
images/njr-code.png → src/images/njr-code.png
View File
images/topfuel_startline.jpg.jpeg → src/images/topfuel_startline.jpg.jpeg
View File
src/index.html
+77
View File
@@ -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>&copy 2024 Jake Charman. This site uses cookies.</p>
</footer>
</body>
</html>
style/desktop.css → src/style/desktop.css
+2 -2
View File
@@ -30,10 +30,10 @@
}
.gradient-left{
background-image: linear-gradient(to right, rgba(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0));
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(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0));
background-image: linear-gradient(to left, rgba(23, 22, 20, 1), rgba(23, 22, 20, 1), rgba(23, 22, 20, 0));
}
}
style/mobile.css → src/style/mobile.css
+45 -20
View File
@@ -1,5 +1,14 @@
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{
@@ -7,8 +16,13 @@ header{
height: 25vh;
display: flex;
align-items: center;
background-color: black;
opacity: 70%;
background-color: 4c4c4c;
}
footer{
background-color: 4c4c4c;
padding: 30px;
text-align: center;
}
#logo{
@@ -16,19 +30,8 @@ header{
margin: 0 auto 0 auto;
}
#logo>h1{
font-family: "Orbitron", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
color: white;
letter-spacing: rem;
}
section h2{
footer h2, section h2{
margin: 0;
color: white;
font-family: "Orbitron", sans-serif;
}
#technology{
@@ -44,25 +47,47 @@ section h2{
margin: 0;
min-height: 100vh;
background-position: center;
background-position-x: -150px;
background-position-y: -100px;
background-size: 300%;
background-position-x: -65px;
background-position-y: -90px;
background-size: 200%;
}
.gradient{
width: 100%;
height: 100%;
background-image: linear-gradient(to top, rgba(31, 31, 31, 1), rgba(31, 31, 31, 1), rgba(31, 31, 31, 0));
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: 50%;
height: 70%;
width: 100%;
}
.text>div{
padding: 10px;
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;
}