commit a65705b92b5fb688d2f8dc03bb97b745c2cfee27
parent f1f4e43eae2ba1110dec96643dc5c7ee917b6541
Author: Shipwreckt <Shipwreckt@mailfence.com>
Date: Sun, 12 May 2024 16:28:43 +0100
added the website files
Diffstat:
5 files changed, 234 insertions(+), 29 deletions(-)
diff --git a/public/Images/Background.jpg b/public/Images/Background.jpg
Binary files differ.
diff --git a/public/index.html b/public/index.html
@@ -1,23 +1,84 @@
-<!DOCTYPE html>
+<!doctype html>
<html>
<head>
<meta charset="utf-8">
- <meta name="generator" content="GitLab Pages">
- <title>Plain HTML site using GitLab Pages</title>
- <link rel="stylesheet" href="style.css">
+ <title>Shipwreckt</title>
+
+ <!-- styles -->
+ <link href="style.css" rel="stylesheet" type="text/css" />
+
+ <!-- jQuery -->
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+
</head>
+
+<!-------------------------------------------------------------->
<body>
- <div class="navbar">
- <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
- <a href="https://gitlab.com/pages/plain-html/">Repository</a>
- <a href="https://gitlab.com/pages/">Other Examples</a>
- </div>
- <h1>Hello World!</h1>
+ <header id="header">
+ <img src="logo.jpg">
+ <h1>Shipwreckt</h1>
+
+ <!-- Menu selection -->
+ <ul class="main-menu">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#projects">Projects</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+
+</header>
+
+ <div id="container">
+ <div class="inner">
+ <div id="content">
+
+ <div id="home" class="content-region hide">
+ <h2>Home</h2>
+ <p>
+ Hello there welcome to my website personal! This is just a simple website I have thrown together
+ for your pleasure, so have a look around! I will add some pages about projects I have done soon so
+ be patiant please.
+ </p>
- <p>
- This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
- </p>
+ <p>
+
+ </p>
+ </div>
+
+ <div id="about" class="content-region hide">
+ <h2>About</h2>
+ <p>
+ Hello there! I am Shipwreckt, a 15-year-old dude who lives in the UK. I would describe
+ myself as an outgoing person, and I enjoy talking to people even if I do not know them well.
+ </p>
+
+ <p>I have enjoyed programming for a number of years now, ever since early
+ 2022, but I only really delved into programming fully in late 2023, when I
+ fully switched from Windows to Linux. The reason why I made the switch
+ was because even though I can see Windows is not all that great, I wanted
+ to challenge myself and also give myself a reason to program again, so I
+ switched over to Linux, and it has been amazing. It has given me the
+ freedom to be creative with my desktop and config files. But I am
+ currently learning the C programming language, and I am planning on
+ making some more programs, so keep your eyes peeled for when I do!
+ </p>
+ </div>
+
+ <div id="contact" class="content-region hide">
+ <h2>Contact</h2>
+ <p>You can contact me here for any querys or suggestions.<br>
+ Email: shipwreckt@mailfence.com<br><br>
+ Code, mostly use gitlab: <a href="https://gitlab.com/Shipwreckt">Gitlab</a> <a href="https://github.com/Shipwrecktt">Github</a>
+ </p>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Load additional JS scripts here -->
+ <script type="text/javascript" src="script.js"></script>
+
</body>
</html>
-
diff --git a/public/logo.jpg b/public/logo.jpg
Binary files differ.
diff --git a/public/script.js b/public/script.js
@@ -0,0 +1,29 @@
+// Wait for the document to load before running the script
+(function ($) {
+
+ // We use some Javascript and the URL #fragment to hide/show different parts of the page
+ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page
+ $(window).on('load hashchange', function(){
+
+ // First hide all content regions, then show the content-region specified in the URL hash
+ // (or if no hash URL is found, default to first menu item)
+ $('.content-region').hide();
+
+ // Remove any active classes on the main-menu
+ $('.main-menu a').removeClass('active');
+ var region = location.hash.toString() || $('.main-menu a:first').attr('href');
+
+ // Now show the region specified in the URL hash
+ $(region).show();
+
+ // Highlight the menu link associated with this region by adding the .active CSS class
+ $('.main-menu a[href="'+ region +'"]').addClass('active');
+
+ // Alternate method: Use AJAX to load the contents of an external file into a div based on URL fragment
+ // This will extract the region name from URL hash, and then load [region].html into the main #content div
+ // var region = location.hash.toString() || '#first';
+ // $('#content').load(region.slice(1) + '.html')
+
+ });
+
+})(jQuery);
diff --git a/public/style.css b/public/style.css
@@ -1,24 +1,139 @@
+/**
+ * Typography & Text styles
+ */
+html {
+ font-size: 62.5%;
+}
body {
- font-family: sans-serif;
- margin: auto;
- max-width: 1280px;
+ font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+ line-height: 1.6;
+ font-weight: 400;
+ font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #FFFFFF;
+}
+
+/**
+ * Links
+ */
+a {
+ font-weight: normal;
+ text-decoration: none;
+ color:#6738a5;
+}
+a:focus {
+ outline: thin dotted;
+}
+
+small {
+ font-size: 75%;
+}
+
+/**
+ * Headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: 1;
+ text-rendering: optimizeLegibility; /* voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */
+ margin-top: 0;
+ margin-bottom: 2rem;
+ font-weight: 300;
}
+h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h2 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
+h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h4 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
+h5 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
+h6 { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; }
-.navbar {
- background-color: #313236;
- border-radius: 2px;
- max-width: 800px;
+/**
+ * Paragraphs
+ */
+p {
+ margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */
}
+p + p {
-.navbar a {
- color: #aaa;
- display: inline-block;
- font-size: 15px;
- padding: 10px;
- text-decoration: none;
}
-.navbar a:hover {
- color: #ffffff;
+/**
+ * Quotes & Blockquotes
+ */
+q {
+ quotes: '\00201C' '\00201D';
}
+q:before {
+ content: open-quote;
+}
+q:after {
+ content: close-quote;
+}
+
+blockquote {
+ /*background-color: #F8F8F8;*/
+ border-left: 2px solid #AFC0D2;
+ margin: 1.6em 10%;
+ padding: .75em 1em;
+ font-size:1.8rem;
+}
+blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+/**
+ * Layout styles
+ */
+
+/* Full size background image */
+html, #container, .inner { background-color:transparent;}
+html {
+ background:url(Images/Background.jpg) center center no-repeat fixed;
+ background-size:cover;
+}
+body {
+ max-width:800px;
+ margin:25px auto;
+}
+header, #content, footer {
+ background: rgba(0,0,0,.8);
+ padding:25px;
+ color:#FFFFFF;
+}
+
+/* Menu Links */
+ul.main-menu {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: left;
+ list-style: none;
+}
+ul.main-menu li a {
+ margin-right:20px;
+ font-size:2.0rem;
+ border-bottom: solid transparent 3px;
+ color:#cfd2da;
+}
+ul.main-menu li a:hover {
+ color:#FFFFFF;
+}
+ul.main-menu li a.active {
+ color:#FFFFFF;
+ border-bottom-color:#6129aa;
+}
+
+/* Utility classes */
+.hide {
+ display:none;
+}
+.show {
+ display:block;
+}
+
+
