32 lines
3.9 KiB
HTML
32 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PaulW.XYZ /</title>
|
||
<meta name="description" content="Paul's Homepage. I do things. Sporadically.">
|
||
<link rel="stylesheet" href="/stylesheets/persia.css">
|
||
</head>
|
||
<body>
|
||
<svg class="m-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.733332 67.733331"><g fill="#fff"><path d="M-.00000352 20.32 9.0311079 33.86667-.00000352 47.41334v13.54667L18.06222 33.86667-.00000352 6.77333Z" fill-opacity=".2"/><path d="M4.5155513 0 27.093332 33.86667 4.5155524 67.73334h9.0311116l22.57778-33.86667L13.546664 0z" fill-opacity=".73333333"/><path d="m13.546665 0 22.57778 33.86667-22.57778 33.86667h9.031111L40.640001 40.64l18.062224 27.09334h9.031113L45.155557 33.86667 22.577776 0Z"/><path d="m36.124444 47.41334 13.546667 20.32h9.031113L40.64 40.64Z" fill-opacity=".73333333"/><path d="M-.00000352 6.77333 18.06222 33.86667-.00000352 60.96001v6.77333H4.5155524L27.093333 33.86667 4.5155524 0H-.00000352ZM31.608889 54.18667l9.03111 13.54667h9.031112l-13.546667-20.32z" fill-opacity=".46666667"/><path d="m27.093332 60.96001 4.515557 6.77333H40.64l-9.031111-13.54667z" fill-opacity=".2"/></g></svg>
|
||
<nav>
|
||
<h1 class="title">PaulW.XYZ</h1>
|
||
<div class="fuzzynav">
|
||
<input class="search" type="text" id="search" placeholder="Go to ... (Try typing `help` or `?`)">
|
||
<div id="results" class="results">
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<footer>
|
||
© 2021 Paul W.
|
||
</footer>
|
||
<script src="/scripts/fuzzy.js"></script>
|
||
<script type="text/javascript">
|
||
const results = `<p><strong>Press any key to clear this message...</strong> To see this message again, visit <code>about</code><p>This is a draft of the rationale behind writing pages the way I have. I do not like the traditional web conventions so this is where I experiment the most with interfacing elements. The navigation pane-based design works when they are simple and easy to understand. When they get too complex, people rely on using search bars to get where they want. My goal is to find a method to eliminate the visual noise of the complex navigation panes and find a reasonable alternative them while being easy to use.<h2 id=page-categorization>Page Categorization</h2><p>The home page or the index page solely acts as a gateway to all the other pages on the site. The accessible pages are categorized on a need-based system. Since I currently do not have multiple pages, I have them all under a single directory.<h2 id=design-principles>Design Principles</h2><p>The goal of my home page’s design is to keep this minimal. There is no need for unnecessary content to waste people’s time. The rule is simple: only waste one’s time if they willingly do so.<p>Modern webpages tend to be bulky. This entire site should retain the modern design while being as minimal and static as possible.<ul><li>minimal: a page should not overly rely on programming logic unless the focus is programming logic<li>static: informational pages should not be dynamically changing as the focus is on the content itself</ul><h3 id=design-problems>Design Problems</h3><p>A new user would never understand how this site works. My ideal navigation system would involve having as few navigation elements as possible. This is the reason why I chose to add solely the fuzzy-search bar. However, I have not been able to find a good way to give users of my pages a good way to interact in case they do not use the search bar. I previously used to list them all but it was not easy on the eyes and looked lazy. Maybe a command system that does not use symbols (considering touch devices do not support non-Latin character insertions easily). Maybe something similar to *nix commands. The site somewhat vaguely follows the basic file-system structure. However, this goes against my goal of “ease-of-use” which is why I have not done it yet.`;
|
||
|
||
document.body.onload = () => {
|
||
document.querySelector("#results").innerHTML = results;
|
||
};
|
||
</script>
|
||
</body>
|
||
</html> |