Skip to content

Commit

Permalink
Templates and CSS woo
Browse files Browse the repository at this point in the history
  • Loading branch information
htv04 committed Feb 20, 2024
1 parent 9ad845b commit d87f707
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 39 deletions.
8 changes: 4 additions & 4 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@
all: root pages

# Pages
pages: root/images root/index.html
pages: root/favicon.ico root/index.html
root/%.html: src/pages/%.md root
pandoc $< -f markdown --wrap=none -t html -s -o $@
root/images: root
cp -r src/pages/images root/images
pandoc $< -f markdown --wrap=none --template=src/pages/template.html -t html -o $@
root/favicon.ico: src/pages/favicon.ico root
cp $< $@

# Website root
root:
Expand Down
File renamed without changes.
71 changes: 49 additions & 22 deletions root/index.html
Original file line number Diff line number Diff line change
@@ -1,38 +1,62 @@
<!DOCTYPE html>
<!-- htv04.com: HTV04’s Website -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="HTV04" />
<meta name="dcterms.date" content="February 18, 2024" />
<meta name="dcterms.date" content="February 20, 2024" />
<title>htv04.com</title>
<link rel="shortcut icon" href="/favicon.ico">
<!-- TODO -->
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
body {
background-color: mediumslateblue;
font-family: sans-serif;
color: beige;
}
@media screen and (orientation: landscape) {
body {
padding-left: 12.5%;
padding-right: 12.5%;
}
}
@media screen and (orientation: portrait) {
body {
padding-left: 6.25%;
padding-right: 6.25%;
}
}
body a {
color: orange;
}
body a:visited {
color: peru;
}
</style>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1 id="htv04.com."><a href="https://htv04.com">htv04.com</a>.</h1>
<p>Welcome. Things are a little WIP around these parts, but everything great starts off somewhere, right?</p>
<p>…CSS? What’s that?</p>
<span style="text-align:center">
<img src="favicon.ico" alt="htv04.com">
<nav>
<span style="background-color:slateblue;padding:5px">
<a href="/">Home</a>
</span>
</nav>
</span>
<article>
<span style="color:goldenrod">
<header id="title-block-header">
<h1 class="title"><span style="background-color:slateblue;padding:5px">HTV04’s Website</span></h1>
</span>
</header>
</span>
<h2 id="welcome.">Welcome.</h2>
<p>Things are a little WIP around these parts, but everything great starts off somewhere, right?</p>
<h2 id="me.">Me.</h2>
<p>My name is Harrison. I’m currently 19 years old, and I live in the United States. I have many hobbies, but my favorite by far is software development. Why? Honestly, I’m not too sure. I just really like working on software. The best way I can describe it is that it’s like solving a complicated puzzle, but the result is something way more rewarding than a picture.</p>
<p>I also have a knack for reverse engineering and “hacking.” I’m not a l33t haxx0r or anything, but I do have an interest in checking out the internals of some of my favorite projects or hardware, and incorporating my own stuff into them.</p>
Expand All @@ -41,16 +65,19 @@ <h2 id="me.">Me.</h2>
<h2 id="projects.">Projects.</h2>
<p><a href="https://github.com/HTV04/funkin-rewritten">Friday Night Funkin’ Rewritten</a>: Optimized rewrite of Friday Night Funkin’ built on LÖVE. Runs on the Nintendo Switch! Haven’t worked on it in some time, though. You might want to check out <a href="https://github.com/VanillaEngineDevs/Vanilla-Engine">Vanilla Engine</a>, which is based on this project.</p>
<p><a href="https://github.com/HTV04/wiilove">WiiLÖVE</a>: A proof-of-concept Lua-based game engine for the Wii, based on the API of <a href="https://love2d.org/">LÖVE</a>.</p>
<p>rusty_???: A WIP ??? ??? written in Rust. Mainly written to help me learn Rust, but turned out to be a pretty interesting project.</p>
<p>???: Explore the ??? as ??? from ???, based on ???. My first real web project!</p>
<p><a href="https://github.com/HTV04/htv04.github.io">htv04.github.io</a>: This website!</p>
<p>I’ve worked on other things too, but I’m only posting the most notable ones here. Check out my <a href="https://github.com/HTV04">GitHub</a> for more!</p>
<h3 id="upcoming">Upcoming</h3>
<p>NOTE: Names and info will be redacted until release, but try to figure them out ;)</p>
<p>rusty_???: A WIP ??? ??? written in Rust. Mainly written to help me learn Rust, but turned out to be a pretty interesting project.</p>
<p>???: Explore the ??? as ??? from ???, based on ???. My first real web project!</p>
<h2 id="socials.">Socials.</h2>
<p><a href="https://twitter.com/HTV04_">X</a> | <a href="https://www.youtube.com/channel/UCF1lnrLYXDYWOc4y3W8-lPg">YouTube</a> | <a rel="me" href="https://mastodon.gamedev.place/@HTV04">Mastodon</a> | <a href="https://bsky.app/profile/htv04.bsky.social">Bluesky</a></p>
<p>Anything not listed here… Might be me, but also might not be me. Be cautious, and don’t hesitate to ask.</p>
<p>Public email coming soon.</p>
<h2 id="the-end.">The End.</h2>
<p>The End.</p>
<p><marquee>BREAKING NEWS: Local Programmer Struggles With Web Development In a tech-savvy world where web development skills are highly sought after, one local programmer is facing challenges as they transition from native development to web development. The unnamed programmer, who primarily has experience in native app development, finds themselves grappling with the complexities of web development. According to sources close to the programmer, the transition has been met with frustration and a steep learning curve. “They’re used to working with compiled languages and developing for specific platforms,” said one colleague. “But web development requires a different mindset and skill set altogether.” The programmer’s struggle is not uncommon in an industry where technologies and frameworks are constantly evolving. With the rapid pace of change, even seasoned developers can find themselves struggling to keep up. One of the main hurdles for the programmer has been understanding the intricacies of front-end development, including HTML, CSS, and JavaScript. While they may be proficient in programming languages like C++ or Rust, the nuances of web technologies present a new set of challenges. Additionally, the programmer is navigating the vast ecosystem of web development tools and frameworks, such as React. With so many options available, it can be overwhelming to determine which ones are best suited for their projects. Despite the challenges, the programmer remains determined to master web development. “I know it’s a steep learning curve, but I’m committed to expanding my skill set and becoming proficient in web development,” said the programmer. “I believe that with dedication and perseverance, I’ll be able to overcome these challenges and excel in this new domain.” As the demand for web developers continues to grow, the programmer’s journey serves as a reminder of the importance of adaptability and continuous learning in the ever-changing field of technology. With determination and the right resources, they are well-positioned to overcome their struggles and thrive in their new role as a web developer.</marquee></p>
</article>
</body>
</html>
File renamed without changes.
26 changes: 13 additions & 13 deletions src/pages/index.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
---
pagetitle: htv04.com
title-meta: htv04.com
title: HTV04's Website
author-meta: HTV04
date-meta: February 18, 2024
document-css: false
header-includes:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
date-meta: February 20, 2024
---

# [htv04.com](https://htv04.com).
Welcome. Things are a little WIP around these parts, but everything great starts off somewhere, right?

...CSS? What's that?
## Welcome.
Things are a little WIP around these parts, but everything great starts off somewhere, right?

## Me.
My name is Harrison. I'm currently 19 years old, and I live in the United States. I have many hobbies, but my favorite by far is software development. Why? Honestly, I'm not too sure. I just really like working on software. The best way I can describe it is that it's like solving a complicated puzzle, but the result is something way more rewarding than a picture.
Expand All @@ -23,18 +18,23 @@ Finally, I'm a huge Linux and OSS enthusiast. Wherever I can, I run Linux (i use
...In other words, I'm a huge nerd. LOL

## Projects.

[Friday Night Funkin' Rewritten](https://github.com/HTV04/funkin-rewritten): Optimized rewrite of Friday Night Funkin' built on LÖVE. Runs on the Nintendo Switch! Haven't worked on it in some time, though. You might want to check out [Vanilla Engine](https://github.com/VanillaEngineDevs/Vanilla-Engine), which is based on this project.

[WiiLÖVE](https://github.com/HTV04/wiilove): A proof-of-concept Lua-based game engine for the Wii, based on the API of [LÖVE](https://love2d.org/).

rusty_???: A WIP ??? ??? written in Rust. Mainly written to help me learn Rust, but turned out to be a pretty interesting project.

???: Explore the ??? as ??? from ???, based on ???. My first real web project!

[htv04.github.io](https://github.com/HTV04/htv04.github.io): This website!

I've worked on other things too, but I'm only posting the most notable ones here. Check out my [GitHub](https://github.com/HTV04) for more!

### Upcoming

NOTE: Names and info will be redacted until release, but try to figure them out ;)

rusty_???: A WIP ??? ??? written in Rust. Mainly written to help me learn Rust, but turned out to be a pretty interesting project.

???: Explore the ??? as ??? from ???, based on ???. My first real web project!

## Socials.
[X](https://twitter.com/HTV04_) | [YouTube](https://www.youtube.com/channel/UCF1lnrLYXDYWOc4y3W8-lPg) | <a rel="me" href="https://mastodon.gamedev.place/@HTV04">Mastodon</a> | [Bluesky](https://bsky.app/profile/htv04.bsky.social)

Expand Down
114 changes: 114 additions & 0 deletions src/pages/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<!-- htv04.com: $title$ -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
$for(author-meta)$
<meta name="author" content="$author-meta$" />
$endfor$
$if(date-meta)$
<meta name="dcterms.date" content="$date-meta$" />
$endif$
$if(keywords)$
<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
$endif$
$if(description-meta)$
<meta name="description" content="$description-meta$" />
$endif$
<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
<link rel="shortcut icon" href="/favicon.ico">
<!-- TODO -->
<style>
body {
background-color: mediumslateblue;
font-family: sans-serif;
color: beige;
}
@media screen and (orientation: landscape) {
body {
padding-left: 12.5%;
padding-right: 12.5%;
}
}
@media screen and (orientation: portrait) {
body {
padding-left: 6.25%;
padding-right: 6.25%;
}
}
body a {
color: orange;
}
body a:visited {
color: peru;
}
</style>
$for(css)$
<link rel="stylesheet" href="$css$" />
$endfor$
$for(header-includes)$
$header-includes$
$endfor$
$if(math)$
$if(mathjax)$
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
$endif$
$math$
$endif$
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<span style="text-align:center">
<img src="favicon.ico" alt="htv04.com">
<nav>
<span style="background-color:slateblue;padding:5px">
<a href="/">Home</a>
</span>
</nav>
</span>
$for(include-before)$
$include-before$
$endfor$
$if(title)$
<article>
<span style="color:goldenrod">
<header id="title-block-header">
<h1 class="title"><span style="background-color:slateblue;padding:5px">$title$</span></h1>
$if(subtitle)$
<p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
<p class="author">$author$</p>
$endfor$
$if(date)$
<p class="date">$date$</p>
$endif$
$if(abstract)$
<div class="abstract">
<div class="abstract-title">$abstract-title$</div>
$abstract$
</div>
$endif$
</span>
</header>
</span>
$endif$
$if(toc)$
<nav id="$idprefix$TOC" role="doc-toc">
$if(toc-title)$
<h2 id="$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
$endif$
$body$
</article>
$for(include-after)$
$include-after$
$endfor$
</body>
</html>

0 comments on commit d87f707

Please sign in to comment.