diff --git a/404.html b/404.html index 5aecfb2..a864045 100644 --- a/404.html +++ b/404.html @@ -1,123 +1,123 @@ - - - - - 404 - - - - - - - -
-

- Starting engine version 1.1.1-
- browser: recovering website
- browser: clean: 65535/4815162342 files, 69/420 blocks
- 404: Root website loaded successfully, but /this page does not exist.
- Bailing out, you are on your own. Good luck. -

-

- browser: can't access page; site navigation turned off
- [404page ]# reboot_ -

- -
- - - + + + + + 404 + + + + + + + +
+

+ Starting engine version 1.1.1-
+ browser: recovering website
+ browser: clean: 65535/4815162342 files, 69/420 blocks
+ 404: Root website loaded successfully, but /this page does not exist.
+ Bailing out, you are on your own. Good luck. +

+

+ browser: can't access page; site navigation turned off
+ [404page ]# reboot_ +

+ +
+ + + diff --git a/articles/stuff-i-use.html b/articles/stuff-i-use.html deleted file mode 100644 index 8a90029..0000000 --- a/articles/stuff-i-use.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - Arsalan Kazmi - - - - - - - -
- -
-

Arsalan Kazmi

-

Velocity

-
-
-

Stuff that I use

-

This is not a comprehensive list -- this is just my most-used stuff.

-

Operating system

-

Windows 11, running on a HP Victus 16-e0xxx laptop. It came with the laptop and I have no good reason to replace it right now.

-

Windows 10 and macOS Monterey, running on a late 2013 27-inch iMac.

-

Arch Linux, running on an old Sony VAIO VPCCA1S1E.

-

Terminal

-

kitty if I'm using a standalone window manager, but I'll use whatever terminal emulator is provided. On Windows, I use Windows Terminal.

-

Shell

-

zsh or fish on *nix systems, PowerShell on Windows.

-

Desktop (WMs included)

-

awesome and dwm as far as window managers go. I used to use i3-gaps.

-

Cinnamon, Xfce and Plasma for full-blown desktop environments.

-

Text editor

-

Emacs, VS Code, Vim, Micro, the list goes on. I like a lot of text editors. Honourable mention to ed, the standard text editor!

-

I use SLADE's built-in text editor whenever I'm working on Sonic: Lock & Load.

-

Browser

-

Eh, it varies. Sometimes it's a spinning Firefox, sometimes it's a big ol' Edge. . .

-

Multimedia

-

mpv for video and audio. It works really well, and it's super fast and cross-platform.

-

Image editor

-

GIMP most of the time.

-

Document editor

-

I use LaTeX with my custom preamble which requires LuaLaTeX.

-

For when I'm too lazy to do that, I write in Markdown and convert to PDF or DOCX with pandoc if needed.

-

For when I'm too lazy to do that, I give up and open LibreOffice Writer or MS Word.

- - - diff --git a/articles/web-design-philosophy.html b/articles/web-design-philosophy.html deleted file mode 100644 index f46b382..0000000 --- a/articles/web-design-philosophy.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - Arsalan Kazmi - - - - - - - -
- -
-

Arsalan Kazmi

-

Velocity

-
-
-

Web design philosophy

-

This website may look really nice and fancy, but it's really all just CSS doing that.

-

This website's content is actually relatively minimalist. If you took away the CSS, everything would still be perfectly readable and understandable.

-

Most of my web design philosophy comes from the Motherf-ing Websites: Original, Better, Best

-

I should probably mention that none of this is meant in malice. Go ahead and make your website extremely ugly if you want to.

-

Key things

- -

Mostly just text

-

HTML is plain text anyway, so text is fast, and accessible, and useful, and you should use text. That was a strange explanation.

-

Do you like scrolling through massive amounts of parallax images trying to figure out what the hell it is you're meant to be reading? Yeah? Well, you're wrong. You're not designing an app, you're writing a web document.

-

I'm supposed to make this non-offensive, aren't I?

-

Shorten that content

-

The defaults make it so text goes edge-to-edge, which sucks a lot if you're someone who uses 16:9 screens, which I'd say is most people. You should position your content in the middle of the screen for easier reading.

-

Yeah, you can just run your browser in a window, buuuut, who's actually going to do that? (Most people, I'd say, lmao)

-

This is of course optional (technically all of this is, but this more so), you don't need to do something like this.

-
-
body {
-    margin: auto;
-    max-width: 500px;
-}
-
-

Give the text some space

-

By default, line spacing is kind of. . . really tight. If you adjust the line height, it helps for readability.

-
-
body {
-    line-height: 1.8;
-}
-    h1, h2, h3 {
-    /* Headings should have tighter spacing */
-    line-height: 1;
-}
-
-

Beef it up

-

It's a good idea to make the font size at least 16px, though I would personally go with 18px. The more readable it is, the better.

-

Have a consistent appearance

-

Ideally, your website should look the same across all browsers and all platforms.

-

Having the website be just text makes this extremely easy.

-

You will probably need to set the viewport, unless you're one of those people who dislike mobile devices:

-
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
-

You're basically done after that.

-

You might want to add media queries to set the width smaller so it doesn't look odd on mobile devices, but otherwise no further setup is required.

-

Dark mode

-

If you're, uh, anyone, and you don't want your eyes bleeding with the fury of a thousand suns every time you open your computer. . . you probably use dark mode.

-

And you probably want to have a dark mode for your website.

-

Whether you want to just make your website dark and only dark or have it change depending on the user's preference, it's easy to do both.

-

For the latter, you should use @media (prefers-color-scheme: dark), like this:

-
-
@media (prefers-color-scheme: dark) {
-    body {
-        color: #ffffff;
-        background-color: #000000;
-    }
-}
-
-

This changes the colour scheme to white on black if your browser detects dark mode from your system settings.

-

In case you want to have it dark by default (so that users of browsers that don't support prefers-color-scheme can still have it be dark), you can do the opposite:

-
body {
-    color: #ffffff;
-    background-color: #000000;
-}
-@media (prefers-color-scheme: light) {
-    body {
-        color: #000000;
-        background-color: #ffffff;
-    }
-}
-

1 almost any browser, because chances are your website isn't going to render well on a Tamagotchi. You should try to aim for cross-browser compatibility where possible, though.

- - diff --git a/background-light.jpg b/background-light.jpg deleted file mode 100644 index b340d57..0000000 Binary files a/background-light.jpg and /dev/null differ diff --git a/background.jpg b/background.jpg deleted file mode 100644 index b7013bd..0000000 Binary files a/background.jpg and /dev/null differ diff --git a/index-naked.html b/index-naked.html index c50d90f..a2ab860 100644 --- a/index-naked.html +++ b/index-naked.html @@ -9,7 +9,7 @@
- +

Arsalan Kazmi

Velocity

diff --git a/index.html b/index.html index 277ba20..ff976ad 100644 --- a/index.html +++ b/index.html @@ -10,31 +10,30 @@
- +
-

Arsalan Kazmi

-

Velocity

+

Velocity

+

Arsalan Kazmi

-

About me

-

Hi, I'm Arsalan, or Velocity. I'm at least 20 years old and I'm technically a software developer, but I prefer to call myself a professional computer breaker.

-

My username for the most part is That1M8Head, and I use my old one, SpeedStriker243, if it can't be changed.

-

You can find me on GitHub, Twitter, YouTube and Mastodon.

-

I'm British (specifically, I'm a Londoner), and I'm currently a student at the University of Hertfordshire.

-

I like spending my time writing code, messing around with computers, playing games, making random edits, watching YouTube videos and sleeping.

-

Sonic: Lock & Load is currently my main project, and what I work on in most of my time.

-

Projects

- -

More stuff

- +
+

EmailGitHubTwitterYouTubeMastodon

+
+
+

About me

+

Hi, I'm Arsalan, or Velocity. I'm at least 20 years old and I'm technically a software developer, but I prefer to call myself a professional computer breaker.

+

My username for the most part is That1M8Head, and I use my old one, SpeedStriker243, if it can't be changed.

+

I'm British (specifically, I'm a Londoner), and I'm currently a student at the University of Hertfordshire.

+

I like spending my time writing code, messing around with computers, playing games, making random edits, watching YouTube videos and sleeping.

+

Sonic: Lock & Load is currently my main project, and what I work on in most of my time.

+

Projects

+
    +
  • Sonic: Lock & Load, a Sonic the Hedgehog first-person shooter DOOM mod and fan game, which uses the GZDoom source port. My passion project.
  • +
  • This website.
  • +
  • sued, a line editor similar to the standard editor, ed, but significantly worse and slightly more user-friendly. Includes basic editing functionality, with writing, line replacing and line deleting, as well as the ability to run programs.
  • +
  • QVSED, or Qt-based Volatile Small Editor, a graphical editor built using the PyQt5 framework which is entirely stateless and doesn't store any file metadata.
  • +
  • Take it and Like it Public License, a non-legally binding, not-accepted-by-any-courts super permissive software licence for works that you don't care about. Basically an informal version of the MIT/X licence.
  • +
+
diff --git a/m8.css b/m8.css index fffaf17..e865903 100644 --- a/m8.css +++ b/m8.css @@ -1,101 +1,155 @@ /* m8.css - CSS for my website */ + @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=JetBrains+Mono&family=Nunito&display=swap'); + +/* Define the accent color */ :root { - --accent: #aa86ee; + --accent: #aa86ee; } + +/* Adjust accent color based on color scheme preference */ @media (prefers-color-scheme: light) { - :root { - --accent: #6c61c5; - } + :root { + --accent: #6c61c5; + } } +/* Apply styles to HTML and body */ html { - background-image: url("background-light.jpg"); + background-color: #222222; background-attachment: fixed; background-size: cover; background-position: center; } + body { - font-size: 18px; + font-size: 20px; font-family: 'Nunito', sans-serif; font-weight: 500; - color: #000000; - background: #ddddddf0; line-height: 1.8; +} + +/* Common styles for boxes and headers */ +.box, .header, .box h2, .box h3 { + color: #ffffff; + background: #272727; max-width: 600px; - margin: auto; - padding: 50px; + margin: 50px auto; + padding: 20px 50px; + border: 5px solid var(--accent); + border-radius: 24px; + box-shadow: 0px 0px 9px 5px #00000054; } -@media (prefers-color-scheme: dark) { + +/* Adjust colors for light color scheme */ +@media (prefers-color-scheme: light) { html { - background-image: url("background.jpg"); + background: #ddd; } - body { - color: #ffffff; - background: #222222f0; + .box, .header, .box h2, .box h3 { + color: #272727; + background: #ddd; } } + +/* Header styles */ .header { font-family: 'JetBrains Mono', monospace; align-items: center; gap: 10px; + padding: 40px 50px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; - margin: 5px 50px; } + +/* Style for the avatar */ +.avatar { + height: 150px; + width: auto; + border: 3px solid var(--accent); + border-radius: 24px; + box-shadow: 0px 0px 9px 5px #00000054; +} + .header-text { display: grid; grid-template-rows: auto auto; gap: 20px; margin: 15px auto; + text-align: center; } + .header-text h1, .header-text h2 { margin: 0; } + .avatar { - height: 125px; + height: 150px; border: 3px solid var(--accent); - border-radius: 10px; + border-radius: 24px; + box-shadow: 0px 0px 9px 5px #00000054; } + .header:after { clear: both; } -@media (max-width: 700px) { - body { - padding: 5%; - max-width: initial; - } -} -@media (max-width: 525px) { + +/* Responsive design */ +@media (max-width: 527px) { .avatar { display: none; } + .header { + display: block; + } + .box { + padding: 25px; + } +} + +/* Social links */ +#socials { + font-size: 22px; + font-family: "JetBrains Mono", monospace; + text-align: center; + padding: 5px 50px; +} + +/* Links and headings */ +a { + color: var(--accent); } -a { color: var(--accent); } -h1, h2, h3 { +h1, h2, h3, .box h2, .box h3 { text-align: center; color: var(--accent); line-height: 1; font-family: 'JetBrains Mono', monospace; } +/* Code and preformatted text */ code, pre { font-family: "Source Code Pro", monospace; } + .src { overflow-x: auto; margin: 0 6%; } +/* Scrollbar styles */ * { scrollbar-color: var(--accent) black; scrollbar-width: thin; } + *::-webkit-scrollbar { background: black; width: 8px; height: 8px; } -*::-webkit-scrollbar-thumb { background-color: var(--accent); } + +*::-webkit-scrollbar-thumb { + background-color: var(--accent); +} \ No newline at end of file