Begin porting code from NJR

2025-01-02 20:34:22 +00:00
parent ccdc106ef8
commit 8cb13a4bca
27 changed files with 623 additions and 1 deletions
--- a/src/static/fonts/fontawesome/css/all.min.css
+++ b/src/static/fonts/fontawesome/css/all.min.css
--- a/src/static/fonts/fontawesome/webfonts/fa-brands-400.ttf
+++ b/src/static/fonts/fontawesome/webfonts/fa-brands-400.ttf
--- a/src/static/fonts/fontawesome/webfonts/fa-brands-400.woff2
+++ b/src/static/fonts/fontawesome/webfonts/fa-brands-400.woff2
--- a/src/static/fonts/fontawesome/webfonts/fa-regular-400.ttf
+++ b/src/static/fonts/fontawesome/webfonts/fa-regular-400.ttf
--- a/src/static/fonts/fontawesome/webfonts/fa-regular-400.woff2
+++ b/src/static/fonts/fontawesome/webfonts/fa-regular-400.woff2
--- a/src/static/fonts/fontawesome/webfonts/fa-solid-900.ttf
+++ b/src/static/fonts/fontawesome/webfonts/fa-solid-900.ttf
--- a/src/static/fonts/fontawesome/webfonts/fa-solid-900.woff2
+++ b/src/static/fonts/fontawesome/webfonts/fa-solid-900.woff2
--- a/src/static/fonts/fontawesome/webfonts/fa-v4compatibility.ttf
+++ b/src/static/fonts/fontawesome/webfonts/fa-v4compatibility.ttf
--- a/src/static/fonts/fontawesome/webfonts/fa-v4compatibility.woff2
+++ b/src/static/fonts/fontawesome/webfonts/fa-v4compatibility.woff2
--- a/src/static/images/njr-code.png
+++ b/src/static/images/njr-code.png
--- a/src/static/images/topfuel_startline.jpg.jpeg
+++ b/src/static/images/topfuel_startline.jpg.jpeg
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -0,0 +1,67 @@
+<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:wght@400..900&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:wght@400..900&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. I may write about some of the services I run in the future. For now, my code can be found on <a href="https://github.com/jcharman">GitHub</a>.</p>
+                        <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>
--- a/src/static/style/desktop.css
+++ b/src/static/style/desktop.css
@@ -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));
+    }
+}
--- a/src/static/style/mobile.css
+++ b/src/static/style/mobile.css
@@ -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);
+    height: 100vh;
+    margin: 0;
+    background-position: center;
+    background-position-x: -400px;
+}
+
+#motorsport{
+    background-image: url(../images/topfuel_startline.jpg.jpeg);
+    height: 100vh;
+    margin: 0;
+    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;
+}