commit 1cfeaa83cd59c1d5b8ffbaa16f2385c6b2f84e4d
parent c9df72b87c8715ac1d7bbf5a88ccdc0ab75d4e88
Author: Shipwreckt <Shipwreckt@mailfence.com>
Date: Mon, 27 May 2024 22:07:54 +0100
style overhaul
Diffstat:
24 files changed, 607 insertions(+), 778 deletions(-)
diff --git a/public/Images/Background.jpg b/public/Images/Background.jpg
Binary files differ.
diff --git a/public/Images/Fakefetch.png b/public/Images/Fakefetch/Fakefetch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/bluearch.png b/public/Images/Fakefetch/bluearch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/greenarch.png b/public/Images/Fakefetch/greenarch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/orangearch.png b/public/Images/Fakefetch/orangearch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/plumarch.png b/public/Images/Fakefetch/plumarch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/purplearch.png b/public/Images/Fakefetch/purplearch.png
Binary files differ.
diff --git a/public/Images/Fakefetch/redarch.png b/public/Images/Fakefetch/redarch.png
Binary files differ.
diff --git a/public/Images/Qtile/QtileDesktop.png b/public/Images/Qtile/QtileDesktop.png
Binary files differ.
diff --git a/public/Images/QtileDesktop.png b/public/Images/QtileDesktop.png
Binary files differ.
diff --git a/public/logo.jpg b/public/Images/logo.jpg
Binary files differ.
diff --git a/public/about/hardware b/public/about/hardware
@@ -1,38 +1,34 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../index#home">Home</a></li>
- <li><a href="../index#about">About</a></li>
- <li><a href="../index#projects">Projects</a></li>
- <li><a href="../index#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
- <h3>Hardware</h3>
+ <link rel="icon" href="../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="../index.html#welcome">Welcome</a></li>
+ <li><a href="../index.html#about">About Me</a></li>
+ <li><a href="../index.html#contact">Reach out</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../index.html">Home</a></li>
+ <li><a href="../index.html#projects">projects</a></li>
+ <li><a href="../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h3>Hardware</h3>
<p>I am daily driving a <a href="https://www.notebookcheck.net/Review-Lenovo-ThinkPad-L440-Notebook.107632.0.html">ThinkPad
L440</a> made in 2013, its keyboard feels like heaven, definitely the best keyboard I have
ever used my hands just glide over it. It is durable as hell, I have dropped this thing a
@@ -40,12 +36,9 @@
me forever. I have 8GB of RAM in this laptop
which I will upgrade at some point and im using a I5-4200M CPU. Overall it is an amazing
laptop and I believe I can use this laptop for the rest of my life.</p>
- </div>
- </div>
+ </main>
</div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../script.js"></script>
-
- </body>
+ <script src="script.js"></script>
+</body>
</html>
+
diff --git a/public/about/software b/public/about/software
@@ -1,95 +1,86 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../index.html#home">Home</a></li>
- <li><a href="../index.html#about">About</a></li>
- <li><a href="../index.html#projects">Projects</a></li>
- <li><a href="../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h2>Software</h2>
- <p><b>Linux distro</b><br>
+ <link rel="icon" href="../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="../index.html#welcome">Welcome</a></li>
+ <li><a href="../index.html#about">About Me</a></li>
+ <li><a href="../index.html#contact">Reach out</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../index.html">Home</a></li>
+ <li><a href="../index.html#projects">projects</a></li>
+ <li><a href="../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h2>Software</h2>
+ <h3>Linux distro</h3>
I use arch, mainly because I am making my own work environment and I can pick what
applications I want to install instead of some linux distro that does it for me, the
beauty of Arch Linux is that you're held responsible nothing happens unless you let it
happen. There is a learning curve but when you break it, it is more than worth it for
the amount of freedom you get from Arch.
- <p><b>Web browser</b><br>
- For my web browser is <a href "https://librewolf.net/">librewolf</a> the only browser that
+ <h3>Web browser</h3>
+ <p>For my web browser is <a href "https://librewolf.net/">librewolf</a> the only browser that
really cares about your privacy, whilst yes it is annoying being logged out of everything
each time I close it, small sacrifices need to be made for privacy and this is why password managers
- exist I just log on in a matter of seconds. I don't use many extensions but the ones I do use are
+ exist I just log on in a matter of seconds. I don't use many extensions but the ones I do use are
<a href "https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">ublock</a> ,
<a href "https://addons.mozilla.org/en-US/firefox/addon/keepassxc-browser/">KeePassXC</a> ,
<a href "https://addons.mozilla.org/en-US/firefox/addon/darkreader/">Dark reader</a>.</p>
- <p><b>IDE</b><br>My IDE is Vim, it is a good all around program to use, it is fast to work with and is very
+ <h3>IDE</h3>
+ <p>My IDE is Vim, it is a good all around program to use, it is fast to work with and is very
customizable which I love personally, I would recommend vim for anybody who wants a
terminal based text editor and to anybody who wants to get into programming or anybody
who is programming currently.</p>
- <p><b>Password manager</b><br>
- I use <a href="https://keepassxc.org/">KeePassXC</a> for managing my passwords, I
+ <h3>Password manager</h3>
+ <p>I use <a href="https://keepassxc.org/">KeePassXC</a> for managing my passwords, I
used to use bitwarden but after a while I just thought I did not want my passwords in
somebody else's server so I switched to KeePassXC because it is offline, I use syncthing
to sync all my passwords from my laptop to my phone.</p>
- <p><b>File manager</b><br>
- For my file manager, I use <a href ="https://github.com/ranger/ranger">Ranger</a>.
+ <h3>File manager</h3>
+ <p>For my file manager, I use <a href ="https://github.com/ranger/ranger">Ranger</a>.
The main reason I use Ranger is because it uses Vim keybinds,
which I love. I first tested it out to see if it was any good, and after using it for about a
day, I decided to fully switch over to it, and it is a good file manager. I would suggest it to
anybody who likes the vim keybinds. </p>
- <p><b>Status bar</b><br>
- <a href "https://github.com/polybar">Polybar</a>
+ <h3>Status bar</h3>
+ <p><a href "https://github.com/polybar">Polybar</a>
is the software that I use for my status bar because it is very customizable and it has all
the features I look for in a status bar, it it also has a clean and modern look by
deafult. Sometimes I just mess around with my polybar and see what looks the best.</p>
- <p><b>App launcher</b><br>
- I use <a href "https://github.com/davatorium/rofi">rofi</a> for my app launcher because
+ <h3>App launcher</h3>
+ <p>I use <a href "https://github.com/davatorium/rofi">rofi</a> for my app launcher because
it is customizable and easy to use, it also comes with a bunch of default options which
I sometimes use as a template for my rofi configs.</p>
- <p><b>Xorg or Wayland?</b><br>
- I like Wayland; it is smooth and modern. But I do not think it is fully there yet, so for
+ <h3>Xorg or Wayland?</h3>
+ <p>I like Wayland; it is smooth and modern. But I do not think it is fully there yet, so for
now I am staaying with Xorg, because it just works and I have no issues with it. In the future,
in about a year, I will switch to Wayland because it is more modern, but for now, Xorg is my go-to.</p>
-
- </div>
-
- </div>
- </div>
+ </main>
</div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="script.js"></script>
-
- </body>
+ <script src="script.js"></script>
+</body>
</html>
+
diff --git a/public/index.html b/public/index.html
@@ -1,103 +1,94 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="logo.jpg" type="image/x-icon">
-
- <!-- styles -->
- <link href="style.css" rel="stylesheet" type="text/css" />
+ <link rel="icon" href="Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="#welcome">Welcome</a></li>
+ <li><a href="#about">About Me</a></li>
+ <li><a href="#contact">Reach out</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="#projects">projects</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <section id="welcome">
+ <h2>Welcome To Shipwreckt</h2>
+ <p>Hello and welcome to my personal website! For the most part this website is
+ mostly about my programming work I have done, you can find all my coding projects on
+ the projects page. I do a weekly news artical called the weekly byte where I do a
+ Linux distro of the week and some software and hardware suggestions, also the odd
+ bit of news. But that is mostly it for this website have a look around and see what
+ you like!</p>
+ <br>
+ <p>Also quick note this website is still being made so please be patiant</p>
+ </section>
- <!-- jQuery -->
- <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+ <section id="about" style="display: none;">
+ <h2>About Me</h2>
+ <p>Hello there! I am Shipwreckt, a 15-year-old dude who lives in the UK, if you
+ cannot tell I like to program!</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>
+ <hr>
+ <li><a href="about/hardware">Hardware I am using</a></li>
+ <li><a href="about/software">Software I use</a></li>
+ </section>
- </head>
-
- <body>
+ <section id="contact" style="display: none;">
+ <h2>Contact</h2>
+ <p>You can contact me here for any querys or suggestions.<br>
+ Email: shipwreckt@mailfence.com</p><br>
- <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>
+ <p>Code, mostly use gitlab:
+ <a href="https://gitlab.com/Shipwreckt">Gitlab</a>
+ <a href="https://github.com/Shipwrecktt">Github</a>
+ <br>
+ Social:
+ <a rel="me" href="https://mastodon.online/@shipwreckt">Mastodon</a>
+ </p>
+ </section>
-</header>
+ <section id="projects" style="display: none;">
+ <h2>Projects!</h2>
+ <p>Below is a list of all my projects, have a look around!</p>
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <div id="home" class="content-region hide">
- <h2>Home</h2>
- <p>Hello and welcome to my personal website! For the most part this website is mostly
- about my programming work I have done, you can find all my coding projects
- on the <a href="#projects">projects page</a>. I do a weekly news artical called
- <a href="projects/WeeklyByte/WeeklyByte.html">the weekly byte</a> where I do a Linux distro of the week
- and some software and hardware suggestions, also the odd bit of news. But that is mostly
- it for this website have a look around and see what you like!
+ <p>Programming
+ <li><a href="projects/programs/Qtile.html">Qtile configs</a></li>
+ <li><a href="projects/programs/Fakefetch.html">Fakefetch script</a></li>
+ </p><br>
- <p>Also quick note this website is still being made so please be patiant</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>Written works
+ <li><a href="projects/WeeklyByte/WeeklyByte.html">Weekly Byte</a></li>
</p>
+ </section>
- <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>
-
- <hr>
- <li><a href="about/hardware">Hardware I am using</a></li>
- <li><a href="about/software">Software I use</a></li>
-
- </div>
-
- <div id="projects" class="content-region hide">
- <h2>Projects!</h2>
- <p>Below is a list of my projects, have a look around!</p>
-
- <li>Programming</li>
- <li><a href="projects/programs/Qtile.html">Qtile configs</a></li>
- <li><a href="projects/programs/Fakefetch.html">Fakefetch script</a></li><br>
-
- <li>Written works</li>
- <li><a href="projects/WeeklyByte/WeeklyByte.html">Weekly Byte</a></li>
- </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><br>
- Social:
- <a rel="me" href="https://mastodon.online/@shipwreckt">Mastodon</a>
- </p>
- </div>
-
- </div>
- </div>
+ </main>
</div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="script.js"></script>
-
- </body>
+ <script src="script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/WeeklyByte/2024/issue0WB.html b/public/projects/WeeklyByte/2024/issue0WB.html
@@ -1,52 +1,45 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../../../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../../../index.html#home">Home</a></li>
- <li><a href="../../../index.html#about">About</a></li>
- <li><a href="../../../index.html#projects">Projects</a></li>
- <li><a href="../../../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
+ <link rel="icon" href="../../../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="../WeeklyByte.html">Weekly byte</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../../../index.html">Home</a></li>
+ <li><a href="../../../index.html#projects">projects</a></li>
+ <li><a href="../../../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h2>Weekly byte<br> by shipwreckt<br> </h2>
+ <h2>Linux distro of the week: Arch Linux</h2>
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h3>Weekly byte<br> by shipwreckt<br> </h3>
- <p><b>Linux distro of the week: Arch Linux</b></p>
-
- <p> Personal experience<br>
- I have Arch Linux on all my computers, and, to put it bluntly, I love it. This is due
+ <h3> Personal experience</h3>
+ <p>I have Arch Linux on all my computers, and, to put it bluntly, I love it. This is due
to the fact that I am able to customise it to be whatever I want, and I know what is
on my computer instead of It grows bloated over time, like windows. While I have had
some trouble in the past with Arch, where all my faults and all of the problems I had
were easily fixed. Overall, I just like having full control over my computer and making
it look nice.</p>
-
+
<hr>
- <p>Pros<br>
- Arch Linux is very custimizable. Linux distro: no two Arch Linux systems are alike because
+ <h3>Pros</h3>
+ <p>Arch Linux is very custimizable. Linux distro: no two Arch Linux systems are alike because
you have to tailor your arch Linux to your needs, this means you have more space on your
computer because you don't have programmes you do not use. There is a large catalogue of
programmes in the official Arch Linux repository, and there is also even more in the
@@ -61,19 +54,19 @@
soon as it has been approved to be working. You do get updates daily, but I suggest updating
your computer every week.</p>
<hr>
- <p>Cons<br>
- This con is subjective, but Arch Linux has a steep learning curve. At the start, things are
+ <h3>Cons</h3>
+ <p>This con is subjective, but Arch Linux has a steep learning curve. At the start, things are
hard, and You are very confused, but over time, you learn more and more. But if you enjoy
learning how to use I would suggest Arch because I have learned so much from it.</p>
-
+
<p>Arch is not the most beginner-friendly distro, and when I started using Arch, I thought
I knew how to use Linux through the command line pretty well, but I was proven so wrong,
so fast, there were lots of failed when I started with arch, but I learned and tried again
and looked at sources, while it is not the most beginner-friendly, you need to dive yourself
into the deep and try if you want to get anywhere in Arch Linux.</p>
<hr>
- <p><b>Who would I suggest Arch to?<br></b>
- I would suggest Arch Linux to somebody who is willing to learn and wants more power over their
+ <h3>>Who would I suggest Arch to?</h3>
+ <p>I would suggest Arch Linux to somebody who is willing to learn and wants more power over their
computer's software<br><br>
Arch Linux website link: archlinux.org
@@ -82,30 +75,30 @@
you Install it; I did, and it went well. After that, you can develop your own method. Here is the
<a href="https://www.youtube.com/watch?v=_JYIAaLrwcY">link to the video</a> </p>
<hr>
- <p><b>Suggestion of the Week!<br><br>
+ <h3><b>Suggestion of the Week!</h3>
- Hardware</b><br>
- This week's hardware suggestion I have for you is that if you are looking for a spare laptop to
+ <h3>Hardware</h3>
+ <p>This week's hardware suggestion I have for you is that if you are looking for a spare laptop to
work on or try out Linux. I suggest you look for second-hand ThinkPad; they are very durable and
are recommended for There are amazing keyboards, and I can back that up. If you look hard enough,
you will find one that is Pretty cheep. I got my ThinkPad for £40 ($50), and it has an I5 in it.
I use it more than my PC, so I would say it was worth every penny that I paid for it.</p>
-
- <p><b>Software</b>
- I suggest you learn how to use VIM. It is free and easy to learn the basics of, but it gives
+
+ <h3>Software</h3>
+ <p>This week's hardware suggestion I have for you is that if you are looking for a spare laptop to
+ <p>I suggest you learn how to use VIM. It is free and easy to learn the basics of, but it gives
you a lot of power. I suggest it, especially if you want to learn or are learning programming
due to the fact that it is really efficient for programming, I use it for programming and typing
up. these newsletters. </p>
<hr>
- <p><b>Conclusion</b><br>
+ <h3>Conclusion<h3>
That is all for this week. I will post these on Fridays from now on; I only posted this today.
because I have been given permission to actually do this, and I am grateful. But if you read
all of this, thank you; it does mean a lot to me!</p>
+ </main>
- </div>
- </div>
</div>
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../../../script.js"></script>
- </body>
+ <script src="../../script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/WeeklyByte/2024/issue1WB.html b/public/projects/WeeklyByte/2024/issue1WB.html
@@ -1,47 +1,40 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../../../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../../../index.html#home">Home</a></li>
- <li><a href="../../../index.html#about">About</a></li>
- <li><a href="../../../index.html#projects">Projects</a></li>
- <li><a href="../../../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h3>Weekly byte<br> by shipwreckt<br> </h3>
+ <link rel="icon" href="../../../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../../../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="../WeeklyByte.html">Weekly byte</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../../../index.html">Home</a></li>
+ <li><a href="../../../index.html#projects">projects</a></li>
+ <li><a href="../../../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h2>Weekly byte<br> by shipwreckt<br> </h2>
<p>Hello there and welcome to the weekly byte, where I just write a bunch of information
about Linux and other projects, so if you are interested, keep reading!</p>
- <p><b>Linux distro of the week: Ubuntu</b></p>
-
+ <h3>Linux distro of the week: Ubuntu</h3>
<p>Ubuntu is a distro that many people start off with in the linux world and for good reasons it has everything you need. My personal experience with ubuntu was alright it was my second Linux distro, my first being MX Linux, this was when I was distro hopping and my experience was alright I could use the software manager to download and delete software and use that software and at the end of the day that is what a operating system is made for, I did not face any bugs or anything.</p>
-
+
<hr>
- <p>Pros<br>
+ <h3>Pros</h3>
<p>Ubuntu is rather easy to install and use, from my experience when I installed it there were no issues and the setup was seamless, all the default software worked and the Ubuntu store installed apps. In terms of usability it is very usable and I can see why many people use it.
</p>
<p>Ubuntu has been alive for 19 years as of today and overtime it has amassed a giant community of people world wide, it is available in over languages even obscure languages like Irish Gaelic.
@@ -50,16 +43,12 @@
<p>Since Ubuntu has a large community this means that there are a lot of support, if you have an issue there is a high chance somebody else has encountered the same problem and has posted it online and you can see the solution yourself.</p>
<hr>
- <p>Cons<br>
- The Ubuntu Snap Store is proprietary; this is bad for a Linux app store because Linux is supposed to
-be an outlier in a sea of proprietary operating systems. Over time, Canonical has been starting to force
-snap packages instead of apt packages. This is bad because snaps run slower and have a larger
-footprint. Just because of this, I personally would not use Ubuntu and instead use something like
-Linux Mint.</p>
+ <h3>Cons</h3>
+ <p>The Ubuntu Snap Store is proprietary; this is bad for a Linux app store because Linux is supposed to be an outlier in a sea of proprietary operating systems. Over time, Canonical has been starting to force snap packages instead of apt packages. This is bad because snaps run slower and have a larger footprint. Just because of this, I personally would not use Ubuntu and instead use something like Linux Mint.</p>
<p>In the past, Ubuntu has been known to spy on its users. They also have a lot of proprietary code in the
distro, so we don't even know what that code is doing</p>
-
+
<p>Ubuntu comes with a lot; some might say too much. While it is not as bloated as Windows, it still
comes with a lot of software that the normal user does not need, but at the same time, if you don't
care about space and you have optimised systemd on Ubuntu, this should not be a problem.
@@ -67,35 +56,27 @@ care about space and you have optimised systemd on Ubuntu, this should not be a
<hr>
- <p><b>Who would I suggest Ubuntu to?<br></b>
- I would suggest ubuntu for people who are new to the linux world and need a bit of hand holding to
-see if they like linux or not. I would also suggest ubuntu to people who just want to use and old
-computer but don't really care about Linux.</p>
+ <h3>Who would I suggest Ubuntu to?</h3>
+ <p>I would suggest ubuntu for people who are new to the linux world and need a bit of hand holding tosee if they like linux or not. I would also suggest ubuntu to people who just want to use and old computer but don't really care about Linux.</p>
- Arch Linux website link: <a href "https://ubuntu.com/">Ubuntu.com </a>
+ Ubuntu website link: <a href "https://ubuntu.com/">Ubuntu.com </a>
<hr>
- <p><b>Suggestion of the Week!<br><br>
+ <h3>Suggestion of the Week!</h3>
+
+ <h3>Hardware</h3>
+ <p>This weeks hardware is the keyboard I have been using since Christmas so for a couple of months now and it is called the "Ducky one mini" whilst the sound is average it has a really nice feeling and you do not need to install any dumb software to change the colours you can just change then on the keyboard by pressing the function and alt key. There are also different modes you can put it in like random colours and such but I prefer solid colours, I would recommend the ducky one mini to anyone who wants an alright keyboard, I got mine for £20 ($24) second hand and I love it so if you are in the market for a keyboard have a look at the Ducky one mini.</p>
- Hardware</b><br>i
- This weeks hardware is the keyboard I have been using since Christmas so for a couple of months now and it is called the "Ducky one mini" whilst the sound is average it has a really nice feeling and you do not need to install any dumb software to change the colours you can just change then on the keyboard by pressing the function and alt key. There are also different modes you can put it in like random colours and such but I prefer solid colours, I would recommend the ducky one mini to anyone who wants an alright keyboard, I got mine for £20 ($24) second hand and I love it so if you are in the market for a keyboard have a look at the Ducky one mini.</p>
-
- <p><b>Software</b>
- This weeks software is a piece of software is F-droid the one stop shop for all your libre and free
+ <h3><b>Software</h3>
+ <p>This weeks software is a piece of software is F-droid the one stop shop for all your libre and free
software applications F-droid can be installed on any android phone and as mentioned is an app
store for free and libre code, personally I would suggest "table habit" it lets you forge good
-habits and break old ones!
-</p>
+habits and break old ones!</p>
<hr>
- <p><b>Conclusion</b><br>
- Thank you for reading this weeks byte I will see you next week, keep safe.</p>
+ </main>
- </div>
- </div>
</div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../script.js"></script>
-
- </body>
+ <script src="../../script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/WeeklyByte/WeeklyByte.html b/public/projects/WeeklyByte/WeeklyByte.html
@@ -1,48 +1,40 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../../index.html#home">Home</a></li>
- <li><a href="../../index.html#about">About</a></li>
- <li><a href="../../index.html#projects">Projects</a></li>
- <li><a href="../../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h3>Weekly Byte </h3>
+ <link rel="icon" href="../../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="#info">Weekly byte</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../../index.html">Home</a></li>
+ <li><a href="../../index.html#projects">projects</a></li>
+ <li><a href="../../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h3>Weekly Byte </h3>
<p>The weekly byte is a kind of news thing I do each week, it covers some software and hardware I like and a weekly distro. There is also the odd bit of news if I think it is intresting but overall this is just so I can learn more about the Linux and programming world. </p>
-
+
<li><a href="2024/issue0WB.html">Issue 0</a></li>
<li><a href="2024/issue1WB.html">Issue 1</a></li>
- </div>
- </div>
- </div>
+ </main>
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../../script.js"></script>
-
- </body>
+ </div>
+ <script src="../../script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/notes/programming_notes b/public/projects/notes/programming_notes
@@ -1,49 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>Shipwreckt</title>
- <link rel="icon" href="../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../index.html#home">Home</a></li>
- <li><a href="../index.html#about">About</a></li>
- <li><a href="../index.html#projects">Projects</a></li>
- <li><a href="../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h2>Programming notes</h2>
- <p>Hello there, this page is dedicated to my programming notes I have took overtime.
- But I do hope you enjoy and maybe learn something from my notes.</p>
-
- </div>
- </div>
- </div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../script.js"></script>
-
- </body>
-</html>
diff --git a/public/projects/programs/Fakefetch.html b/public/projects/programs/Fakefetch.html
@@ -1,85 +1,88 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../../index.html#home">Home</a></li>
- <li><a href="../../index.html#about">About</a></li>
- <li><a href="../../index.html#projects">Projects</a></li>
- <li><a href="../../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
+ <link rel="icon" href="../../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="Fakefetch.html">Fakefetch</a></li>
+ <li><a href="#images">images</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../../index.html">Home</a></li>
+ <li><a href="../../index.html#projects">projects</a></li>
+ <li><a href="../../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h2>Fakefetch</h2>
+ <h3><b>Background</b></h3>
+ <p>
+ Fakefetch is the first real program I have ever created that I use daily apart from config
+ files. I made fakefetch when I saw people complaining about neofetch being slow that is why
+ I have called it fakefetch. In the start it was just 10 lines of bash echo commands which is
+ like printing in python, so it was bascially bare theminimun, and I was not proud of this
+ program I was like ok thats done just add it to my .bashrc and continue using Linux. After
+ about a day I wanted to see if I could add more to it like the uptime, then comes what
+ package manager im using and after a while I have made my own mini neofetch program that I
+ can use on all of my computers.
+ </p>
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h2>Fakefetch</h2>
- <p>
- <h3><b>Background</b></h3>
- Fakefetch is the first real program I have ever created that I use daily apart from
- config files. I made fakefetch when I saw people complaining about neofetch being slow that is why
- I have called it fakefetch. In the start it was just 10 lines of bash echo commands which is
- like printing in python, so it was bascially bare theminimun, and I was not proud of this
- program I was like ok thats done just add it to my .bashrc and continue using Linux.
- After about a day I wanted to see if I could add more to it like the uptime, then comes
- what package manager im using and after a while I have made my own mini neofetch program
- that I can use on all of my computers.
- </p>
+ <h3><b>What is Fakefetch</b></h3>
+ <p>Fakefetch is alternative to neofetch, it is written in bash script like neofetch
+ but is not a billion lines long or bloated.
- <h3><b>What is Fakefetch</b></h3>
- <p>Fakefetch is alternative to neofetch, it is written in bash script like neofetch
- but is not a billion lines long or bloated.
+ <h3><b>Why Fakefetch?</b></h3>
+ <p>The main reason why you should use Fakefetch is because it is a very flexible program
+ being written in bash script; it is not a large program, only being one file large and does
+ not slow down your computer at all unlike Neofetch. Fakefetch is also very hackable thanks
+ to how I have commented on the code, meaning you can make your own Fakefetch versions and
+ make it do whatever you want thanks to it being licensed under the GPL, so you have the
+ right to redistribute it if you make your own versions that you can share with anybody.</p>
- <h3><b>Why Fakefetch?</b></h3>
- <p>The main reason why you should use Fakefetch is because it is a very flexible
- program being written in bash script; it is not a large program, only being one file
- large and does not slow down your computer at all unlike Neofetch. Fakefetch is also
- very hackable thanks to how I have commented on the code, meaning you can make your own
- Fakefetch versions and make it do whatever you want thanks to it being licensed under the
- GPL, so you have the right to redistribute it if you make your own versions that you can share
- with anybody.</p>
+ <h3><b>How to install</b></h3>
+ <li>Step one: The first thing you want to do is clone the gitlab project, you can do
+ this from the following command.<br>$ git clone https://gitlab.com/Shipwreckt/fakefetch</li></p>
- <h3><b>How to install</b></h3>
- <p>I have made it very easy to install fakefetch by automating most of it for you.
- <li>Step one: The first thing you want to do is clone the gitlab project, you can do
- this from the following command.<br>
- $ git clone https://gitlab.com/Shipwreckt/fakefetch</li>
- <li>Step two: after cloneing the project you want to run the setup.sh with ./setup.sh</li>
- <li>To configure Fakefetch the file is located at /bin/fakefetch</p>
+ <p><li>Step two: after cloneing the project you want to run the setup.sh with
+ ./setup.sh</li></p>
- <p>Here is an example of fakefetch!</p>
- <img src="../Images/Fakefetch.png" alt="An example of fakefetch!" width="750" height="auto" >
- <a href="https://gitlab.com/Shipwreckt/fakefetch">Gitlab</a>
-
-
+ <p><li>To configure Fakefetch the file is located at /bin/fakefetch</p>
+ <p>Here is an example of fakefetch!</p>
+ <img src="../../Images/Fakefetch/Fakefetch.png" alt="An example of fakefetch!" width="750" height="auto" >
+ <br>
+ <a href="https://gitlab.com/Shipwreckt/fakefetch">Source code on Gitlab</a>
+ <section id="images">
+ <img src="../../Images/Fakefetch/purplearch.png" width="900" height="auto" class="center">
+ <br>
+ <img src="../../Images/Fakefetch/bluearch.png" width="900" height="auto" class="center">
+ <br>
+ <img src="../../Images/Fakefetch/greenarch.png" width="900" height="auto" class="center">
+ <br>
+ <img src="../../Images/Fakefetch/orangearch.png" width="900" height="auto" class="center">
+ <br>
+ <img src="../../Images/Fakefetch/redarch.png" width="900" height="auto" class="center">
+ <br>
+ <img src="../../Images/Fakefetch/plumarch.png" width="900" height="auto" class="center">
+
- </div>
- </div>
- </div>
+ </section>
+ </main>
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../../script.js"></script>
-
- </body>
+ </div>
+ <script src="../../script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/programs/Qtile.html b/public/projects/programs/Qtile.html
@@ -1,86 +1,77 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipwreckt</title>
- <link rel="icon" href="../../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../../index.html#home">Home</a></li>
- <li><a href="../../index.html#about">About</a></li>
- <li><a href="../../index.html#projects">Projects</a></li>
- <li><a href="../../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h2><b>Qtile config</b></h2>
- <p>
- Qtile is a desktop environment that is written in the Python programming language. If you
- have any knowledge of programming, you might think, how slow is that? Well, it is not really
- slow. I have not had any issues with Qtile, and I have only had good experiences with it. It
- has been very fun customising it over the time I have been there and making it my own little
- by little! If you know how to programme in Python, it is very fun just to toy around with and
- customise, so if you want a really hackable desktop environment for Linux, I would suggest Qtile
- a thousand times over!
- </p>
+ <link rel="icon" href="../../Images/logo.jpg" type="image/x-icon">
+ <link rel="stylesheet" href="../../styles.css">
+</head>
+<body>
+ <div class="sidebar">
+ <h2>Table of Contents</h2>
+ <ul>
+ <li><a href="Qtile.html">Qtile</a></li>
+ </ul>
+ </div>
+ <div class="content">
+ <header>
+ <h1>Shipwreckt</h1>
+ <nav>
+ <ul>
+ <li><a href="../../index.html">Home</a></li>
+ <li><a href="../../index.html#projects">projects</a></li>
+ <li><a href="../../index.html#contact">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main id="main-content">
+ <h2><b>Qtile config</b></h2>
+ <h3>Overview</h3><p>
+ Qtile is a desktop environment that is written in the Python programming language. If you
+ have any knowledge of programming, you might think, how slow is that? Well, it is not really
+ slow. I have not had any issues with Qtile, and I have only had good experiences with it. It
+ has been very fun customising it over the time I have been there and making it my own little
+ by little! If you know how to programme in Python, it is very fun just to toy around with and
+ customise, so if you want a really hackable desktop environment for Linux, I would suggest Qtile
+ a thousand times over!
+ </p>
+
+ <h2>Install scripts</h2>
+ <p>
+ In the gitlab repo there is two files, an install.sh and an autoinstall.sh. The
+ install.sh asks you if you what programs you want to download whilst the autoinstall
+ installs without asking. These scripts just install software and fireware I use. If
+ you want to modify the scripts it should be easy since it is written in bash, all
+ you really need to do is put in package names you want.
+ </p>
+
+ <h2>Software</h2>
+ <p>
+ Some of my favourite software I have in the my install scripts is Mpv and youtube-dl, this is
+ because it allows me to watch youtube videos in my terminal. This is further enhanced
+ by the ytfzf command that allows me to browes videos in my terminal. The reason why I
+ like this is because youtube has became very annoying. They have games on that website now and
+ whenever I serch something it only shows like 4 valid resaults, whilst ytfzf shows me
+ nothing but valid resaults.
+ </p>
- <p>
- In both my Qtile configs, laptop and Pc configs I have it set out rather simpily,
- I have an install script that sets up my config.py for qtile and asks you if you want
- to install some of software that I use. I also have an auto install script that I use
- most of the time. These install scripts are written in bash script because they are one
- use and it is easier to just do it in bash if its a one use thing that I will delete
- afterwards.
- </p>
+ <p>
+ Another good bit of software my install scripts is librewolf, a privacy centered brower
+ that acctually cares about your privacy unlike firefox. Whilst I do like firefox it has
+ decended from what it once was and you need to install a custom user.js to become really
+ secsure. Whilst with librewolf iy just does it for you and gives you settings on what
+ you want to enable. I like librewolf because I know that the brower is designed to keep
+ ne safe and that makes me feel well safe.
+ </p><br>
- <p>
- Some of my favourite software I have in the install.sh is Mpv and youtube-dl, this is
- because it allows me to watch youtube videos in my terminal. This is further enhanced
- by the ytfzf command that allows me to browes videos in my terminal. The reason why I
- like this is because youtube has became very annoying. They have games on that website now and
- whenever I serch something it only shows like 4 valid resaults, whilst ytfzf shows me
- nothing but valid resaults.
- </p>
+ <img src="../../Images/Qtile/QtileDesktop.png" width="750" height="auto" >
+ <br>
+ <a href="https://gitlab.com/Shipwreckt/Qtile-conf">Gitlab project</a>
+ </main>
- <p>
- Another good bit of software my install.sh installs is librewolf, a privacy centered brower
- that acctually cares about your privacy unlike firefox. Whilst I do like firefox it has
- decended from what it once was and you need to install a custom user.js to become really
- secsure. Whilst with librewolf iy just does it for you and gives you settings on what
- you want to enable. I like librewolf because I know that the brower is designed to keep
- ne safe and that makes me feel well safe.
- </p>
-
- <p>Here is an example of my current desktop</p>
- <img src="../Images/QtileDesktop.png" alt="Silly desktop" width="750" height="auto" >
- <a href="https://gitlab.com/Shipwreckt/Qtile-conf">Gitlab project</a>
- </div>
- </div>
</div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../../script.js"></script>
-
- </body>
+ <script src="../../script.js"></script>
+</body>
</html>
+
diff --git a/public/projects/template.html b/public/projects/template.html
@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>Shipwreckt</title>
- <link rel="icon" href="../logo.jpg" type="image/x-icon">
-
- <!-- 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>
-
- <header id="header">
- <img src="../logo.jpg">
- <h1>Shipwreckt</h1>
-
- <!-- Menu selection -->
- <ul class="main-menu">
- <li><a href="../index.html#home">Home</a></li>
- <li><a href="../index.html#about">About</a></li>
- <li><a href="../index.html#projects">Projects</a></li>
- <li><a href="../index.html#contact">Contact</a></li>
- </ul>
-
-</header>
-
- <div id="container">
- <div class="inner">
- <div id="content">
-
- <h2>future</h2>
-
- </div>
- </div>
- </div>
-
- <!-- Load additional JS scripts here -->
- <script type="text/javascript" src="../script.js"></script>
-
- </body>
-</html>
diff --git a/public/script.js b/public/script.js
@@ -1,29 +1,27 @@
-// 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');
+document.addEventListener("DOMContentLoaded", function() {
+ function loadSection() {
+ // Hide all sections
+ document.querySelectorAll('main > section').forEach(section => {
+ section.style.display = 'none';
+ });
+
+ // Show the section based on the hash
+ const hash = window.location.hash.substring(1);
+ if (hash) {
+ const section = document.getElementById(hash);
+ if (section) {
+ section.style.display = 'block';
+ }
+ } else {
+ // Default to showing the welcome section if no hash is present
+ document.getElementById('welcome').style.display = 'block';
+ }
+ }
+
+ // Load the correct section on initial page load
+ loadSection();
+
+ // Load the correct section when the hash changes
+ window.addEventListener('hashchange', loadSection);
+});
- // 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,139 +0,0 @@
-/**
- * Typography & Text styles
- */
-html {
- font-size: 62.5%;
-}
-body {
- 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:#9433ff;
-}
-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; }
-
-/**
- * Paragraphs
- */
-p {
- margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */
-}
-p + p {
-
-}
-
-/**
- * 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;
-}
-
-
-
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,131 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #141414;
+ color: #ffffff;
+ display: flex;
+}
+
+.sidebar {
+ position: fixed;
+ width: 240px;
+ height: 100%;
+ background-color: #141414;
+ padding-top: 20px;
+ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.sidebar h2 {
+ color: #d1a1d3;
+ text-align: center;
+}
+
+.sidebar ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.sidebar ul li {
+ padding: 10px;
+ text-align: center;
+}
+
+.sidebar ul li a {
+ color: #ffffff;
+ text-decoration: none;
+ display: block;
+ padding: 10px 0;
+}
+
+.sidebar ul li a:hover {
+ background-color: #333333;
+ color: #d1a1d3;
+}
+
+.content {
+ margin-left: 250px;
+ padding: 20px;
+ flex: 1;
+}
+
+header {
+ background-color: #1f1f1f;
+ padding: 10px;
+ text-align: center;
+ top: 0;
+ z-index: 1000;
+}
+
+header h1 {
+ margin: 0;
+ color: #ffffff;
+}
+
+header h1 span {
+ color: #d1a1d3;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 0;
+ text-align: center;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+nav ul li {
+ margin: 0 10px;
+}
+
+nav ul li a {
+ color: #ffffff;
+ text-decoration: none;
+ padding: 10px 20px;
+ display: block;
+}
+
+nav ul li a:hover {
+ background-color: #d1a1d3;
+ color: #333333;
+ border-radius: 5px;
+}
+
+main {
+ background-color: #1f1f1f;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ margin-top: 20px;
+}
+
+main h2 {
+ color: #d1a1d3;
+}
+
+
+main h3 {
+ color: #d1a1d3;
+}
+
+main p {
+ margin: 10px 0;
+}
+
+main a {
+ color:#9433ff;
+ text-decoration: none;
+}
+
+main a:hover {
+ text-decoration: underline;
+}
+
+.center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 70%;
+}
