--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>About Skullhead</title>
+ <meta name="description" content="About Skullheadx">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="icon" href="/favicon.ico">
+ <link rel="preload" as="image" href="banner.webp">
+ <link rel="preload" as="image" href="pfp.webp">
+ </head>
+ <body>
+ <div class = "content-wrapper">
+ <header class="main-head">
+ <a href="/">
+ <img src="banner.webp" class="banner" alt="Skullheadx">
+ </a>
+ </header>
+ <nav class="main-nav">
+ <section>
+ <h2>General</h2>
+ <ul>
+ <li><a href="index.html">Index</a></li>
+ <li><a href="about.html">About</a></li>
+ <li><a href="now.html">Now</a></li>
+ <li><a href="links.html">Links</a></li>
+ </ul>
+ </section>
+ <section>
+ <h2>Blog</h2>
+ <ul>
+ <li><a href="tech/index.html">/tech/</a></li>
+ <li><a href="phil/index.html">/phil/</a></li>
+ <li><a href="life/index.html">/life/</a></li>
+ <li><a href="music/index.html">/music/</a></li>
+ </ul>
+ </section>
+ <section>
+ <h2>Projects</h2>
+ <ul>
+ <li><a href="projects/dotfiles.html">Nixos Config</a></li>
+ <li><a href="projects/suckless.html">Suckless</a></li>
+ </ul>
+ </section>
+ <section>
+ <h2>Contact</h2>
+ <a href="mailto:skull@skullheadx.com">Email</a>
+ </section>
+ </nav>
+ <main class="content">
+ <article>
+ <h2>About</h2>
+ <div class="center-vertical">
+ <figure class="push-left"><img src="pfp.webp" alt="pfp"></figure>
+ <p>I'm interested in living a life without regrets, so I'm diving deep into religion, philosophy, independence and freedom. I'll try to keep this site updated with my thoughts, since articulating the ideas helps me solidify my understanding. Below are a summary of my thoughts:</p>
+ </div>
+ </article>
+ <article>
+ <h3>Digital Sovereignty</h3>
+ <p>When you use cloud services or SaaS products, you inevitably are relying on their service to not only survive, but also not betray you. Since most of these companies will probably not be around in 10-20 years, this takes away the sovereignty of your data and ability to do the task you want to do. This is why I think that minimal and suckless software is perfect for reclaiming independence from these temporary and often evil companies.</p>
+ <div class="center-vertical">
+ <div>
+ <blockquote cite="https://suckless.org/">
+ <p>Home of dwm, dmenu and other quality software with a focus on simplicity, clarity, and frugality.</p>
+ </blockquote>
+ <p><a href="https://suckless.org/philosophy/">—Suckless Philosophy</a></p>
+ </div>
+
+ <div>
+ <blockquote>
+ <p>An idiot admires complexity, a genius admires simplicity...</p>
+ </blockquote>
+ <p>—Terry A. Davis</p>
+ </div>
+ </div>
+ <p>Notice how they don't mention anything about how much RAM or disk the software uses? Minimal software is about creating simple software that does one thing well. This is the core of why the unix philosophy is great for achieving sovereignty from complex bloated proprietary systems. The low system resource usage is just a byproduct of making simple extensible software, not the goal.</p>
+ <p>We should care about simplicity in software since it lets us be free from the complexities and churn of normie software. Simple software is easy to maintain and thus makes your system more reliable, meaining you have to spend less time trying to fix strange edge cases and incompatibilities. The ancients saw freedom in the sense that when you become closer to God, you become free from sin because those kinds of things don't enslave you anymore. In a similar way, the more reliable your software is, the less you are enslaved to dealing with random system outages and breakage.</p>
+ </article>
+ <article>
+ <h3>Religion and Worldview</h3>
+ <p>I will mostly be keeping quiet on this part until I'm more qualified and experienced to talk about this subject. I am Christian, and I reject the atheistic materialist worldview.</p>
+ </article>
+ <article>
+ <h3>Coding and Engineering</h3>
+ <p>I enjoy coding because I can channel all the things that I enjoy into a single project that others can enjoy. I find that operating within limited conditions to compute meaningful results deeply satisfies me, which is part of the reason why I chose to study Electrical Engineering. I know how to code in C, C++, Python, Go, HTML, CSS, SQL, Nix, Zig, Lua, and RISC-V ASM. I usually edit text in Neovim, and my preferred operating system is NixOS, but I also like OpenBSD and use it to host this website.</p>
+ </article>
+ <article>
+ <h2>Things I enjoy</h2>
+ <ul>
+ <li><details><summary>Reading</summary>I enjoy reading about religion, philosophy, politics, economics and tech. I would like to have my own library one day.</details></li>
+ <li><details><summary>Playing Piano</summary>I started self learning the piano in 2023. I usually play songs from movies and games that I enjoy. I used to play the trumpet, trombone and tuba.</details></li>
+ <li><details><summary>Game Dev</summary>When I was 13, I wanted to play a game I didn't have, so I thought it would be easier to code it than buy it. Classic programmer mistake, but that's my coding origin story.</details></li>
+ </ul>
+ </article>
+
+ </main>
+ <footer class="main-footer">
+ <a href="https://skullheadx.com">https://skullheadx.com</a>
+ </footer>
+ </div>
+ </body>
+</html>
<link rel="preload" as="image" href="pfp.webp">
</head>
<body>
- <div class = "wrapper">
+ <div class = "main-wrapper">
<header class="main-head">
<a href="/">
<img src="banner.webp" class="banner" alt="Skullheadx">
<h2>Bio</h2>
<ul>
<li><img src="pfp.webp" alt="pfp"></li>
- <li><p>Skullheadx</p></li>
+ <li><strong>Skullheadx</strong></li>
<li><a href="about.html">About Me</a></li>
<li><a href="now.html">Now</a></li>
</ul>
<article>
<h1>Welcome to my webpage</h1>
<p>This is my site where I share my projects, and my thoughts on philosophy and tech.</p>
- <p>I'm interested in Orthodox Christianity, computing, electrical engineering and reading, so a lot of the content of my site will focus on these topics.</p>
+ <p>I'm interested in Christianity, computing, Electrical Engineering and reading, so a lot of the content of my site will focus on these topics.</p>
<p>Send me an email if you'd like to talk about any topic I discuss on my site:
<a href="mailto:skull@skullheadx.com">skull@skullheadx.com</a></p>
</article>
text-decoration: 2px dotted underline var(--space-indigo);
}
+/* images */
+img {
+ border-radius: 7px;
+}
+
+
+/* list items */
+ul {
+ padding: 0;
+}
+
+li {
+ list-style: none;
+ margin: 2px 0;
+}
/* grid stuff */
.main-head {
grid-area: footer;
}
-.wrapper {
+.main-wrapper, .content-wrapper {
display: grid;
gap: 20px;
grid-template-areas:
"footer";
}
+/* grid layout for header, nav, content, aside and footer */
@media (width >= 500px) {
- .wrapper {
+ .main-wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
}
@media (width >= 700px) {
- .wrapper {
+ .main-wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
}
}
+/* grid layout for header, nav, content, and footer */
+@media (width >= 500px) {
+ .content-wrapper {
+ grid-template-columns: 1fr 3fr;
+ grid-template-areas:
+ "header header"
+ "nav nav"
+ "content content"
+ "footer footer";
+ }
+ nav ul {
+ display: flex;
+ justify-content: space-between;
+ }
+}
+
+@media (width >= 700px) {
+ .content-wrapper {
+ grid-template-columns: 1fr 4fr 1fr;
+ grid-template-areas:
+ "header header header"
+ "nav content content"
+ "nav content content"
+ "footer footer footer";
+ }
+ nav ul {
+ flex-direction: column;
+ }
+}
+
/* header */
.banner {
object-fit: contain;
}
-main, section, nav section, aside section {
+ main, section, nav section, aside section {
background: #fff;
border-radius: 7px;
padding: 0.5em;
align-self:start;
}
+main {
+ padding: 1em;
+}
+
+main article {
+ clear: both;
+ display: block;
+ width: 100%;
+}
+
nav section, aside section, main article {
margin-bottom: 5px;
h2 {
}
}
+
/* nav */
nav ul, aside ul{
padding: 0;
gap: 0.5rem;
margin: 0 0;
- li{
- list-style: none;
- margin: 2px 0;
- }
}
nav section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
- li img {
- border-radius: 7px;
- }
- li p {
- margin: 0 0 0.5rem 0;
- }
}
}
color: var(--almond-silk);
}
}
+
+
+
+/* quote */
+div:has(> blockquote) {
+ background-color: #ededed;
+ margin: 10px auto;
+ padding: 15px;
+ border-radius: 5px;
+ max-width: 500px;
+}
+
+blockquote p::before {
+ content: "\201C";
+}
+
+blockquote p::after {
+ content: "\201D";
+}
+
+blockquote + p {
+ text-align: right;
+}
+
+/* figure */
+.push-left {
+ display: block;
+ float:left;
+ clear: both;
+ padding: 10px;
+ max-width:400px;
+}
+
+
+/* center elements side by side centered */
+.center-vertical {
+ display:flex;
+ align-items: center;
+ gap: 15px;
+}
+
+
+/* details and summary boxes */
+details {
+ border: 1px solid #aaaaaa;
+ border-radius: 4px;
+ padding: 0.5em 0.5em 0;
+}
+
+summary {
+ font-weight: bold;
+ margin: -0.5em -0.5em 0;
+ padding: 0.5em;
+}
+
+details[open] {
+ padding: 0.5em;
+}
+
+details[open] summary {
+ border-bottom: 1px solid #aaaaaa;
+ margin-bottom: 0.5em;
+}
+
projects / skullheadx.com.git / commitdiff