commit 3ecd8fa56585d43e1d62dde5f896ccdfdce64d8a
parent e7e6bdd5814f40fa5b75ba4a09395de54bcd9a9a
Author: Shipwreckt <Shipwreckt@mailfence.com>
Date: Wed, 29 May 2024 16:06:30 +0100
made the dotfiles page, updated sidebar
Diffstat:
5 files changed, 85 insertions(+), 93 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -78,7 +78,7 @@
<p>Below is a list of all my projects, have a look around!</p>
<p>Programming
- <li><a href="projects/programs/Qtile.html">Qtile configs</a></li>
+ <li><a href="projects/programs/Dotfiles.html">Dotfiles</a></li>
<li><a href="projects/programs/Fakefetch.html#info">Fakefetch script</a></li>
</p><br>
diff --git a/public/projects/programs/Dotfiles.html b/public/projects/programs/Dotfiles.html
@@ -0,0 +1,59 @@
+<!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="../../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="Dotfiles.html">Dotfiles</a></li>
+ <li><a href="https://gitlab.com/Shipwreckt/Dotfiles">Gitlab link</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>Dotfiles</b></h2>
+ <h3>What are Dotfiles?</h3><p>
+ The reason I have dotfiles is for a few reasons. The first is that I use my PC and a
+ few laptops interchangeably, and having my configurations easily downloadable is a
+ big time saver. The second reason why I have my dotfiles up is because maybe
+ somebody is looking for a certain baseline for their configurations, and if they
+ find it well, I am more than happy to help that person. The third reason is just in
+ case something happens to one of my laptops or my PC. I suggest that if you have
+ configuration files, you should back them up on your preferred git host.</p>
+
+ <h3>What is the purpose?</h3><p>
+ The reason why I have dotfiles is for a few reasons. The first being I use my PC and
+ a few laptops, and having my configs being easilly downloadable is a big time saver.
+ The second reason why I have my Dotfiles up is because maybe somebody is looking for
+ a certain baseline for their configs and if they find mind well I am more then happy
+ to help. The third reason is just in case somehting happens to one of my laptops or
+ my PC. I suggest if you have configuration files you should back them up on your
+ prefered git host.</p>
+
+ <h3>Software that is in the install script</h3>
+ <p>Arch Linux packages: qt5ct breeze breeze-gtk redshift htop lsb-release libreoffice-fresh python-psutil ufw scrot keepassxc rofi polybar ranger unzip mpv feh redshift linux-firmware-qlogic pavucontrol picom nitrogen thunar gvfs lxappearance
+ <p>AUR: wd719x-firmware upd72020x-fw yt-dlp-drop-in librewolf-bin nuclear-player-bin
+ </p>
+ </main>
+
+ </div>
+ <script src="../../script.js"></script>
+</body>
+</html>
+
diff --git a/public/projects/programs/Fakefetch.html b/public/projects/programs/Fakefetch.html
@@ -13,6 +13,7 @@
<ul>
<li><a href="#info">Fakefetch</a></li>
<li><a href="#images">Images</a></li>
+ <li><a href="https://gitlab.com/Shipwreckt/Fakefetch">Gitlab link</a></li>
</ul>
</div>
<div class="content">
diff --git a/public/projects/programs/Qtile.html b/public/projects/programs/Qtile.html
@@ -1,77 +0,0 @@
-<!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="../../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>
- 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>
-
- <img src="../../Images/Qtile/QtileDesktop.png" width="750" height="auto" >
- <br>
- <a href="https://gitlab.com/Shipwreckt/Qtile-conf">Gitlab project</a>
- </main>
-
- </div>
- <script src="../../script.js"></script>
-</body>
-</html>
-
diff --git a/public/styles.css b/public/styles.css
@@ -9,15 +9,20 @@ body {
.sidebar {
position: fixed;
- width: 240px;
+ width: 240px; /* Default sidebar width */
height: 100%;
background-color: #141414;
padding-top: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+ transition: width 0.3s ease;
+}
+
+.sidebar:hover {
+ width: 280px; /* Width when hovered over */
}
.sidebar h2 {
- color: #d1a1d3;
+ color: #7a4d7c;
text-align: center;
}
@@ -40,16 +45,21 @@ body {
}
.sidebar ul li a:hover {
- background-color: #333333;
- color: #d1a1d3;
+ background-color: #7a4d7c;
+ color: #f9f9f9;
}
.content {
- margin-left: 250px;
+ margin-left: 240px;
padding: 20px;
+ transition: margin-left 0.3s ease;
flex: 1;
}
+.sidebar:hover ~ .content {
+ margin-left: 300px;
+}
+
header {
background-color: #1f1f1f;
padding: 10px;
@@ -88,8 +98,8 @@ nav ul li a {
}
nav ul li a:hover {
- background-color: #d1a1d3;
- color: #333333;
+ background-color: #7a4d7c;
+ color: #f9f9f9;
border-radius: 5px;
}
@@ -102,12 +112,11 @@ main {
}
main h2 {
- color: #d1a1d3;
+ color: #7a4d7c;
}
-
main h3 {
- color: #d1a1d3;
+ color: #7a4d7c;
}
main p {
@@ -115,7 +124,7 @@ main p {
}
main a {
- color:#9433ff;
+ color: #9433ff;
text-decoration: none;
}
@@ -124,8 +133,8 @@ main a:hover {
}
.center {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: 70%;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 70%;
}
