5 Commits

Author SHA1 Message Date
1d157b529f Improve on profile 2025-09-19 20:53:00 +02:00
3e3c209ac9 Finish styling index 2025-09-19 20:28:21 +02:00
4e68f393bd Links 2025-09-19 19:45:22 +02:00
fcba900a7e add fetchpriority 2025-09-19 15:37:35 +02:00
0478cb71b9 wip redesign 2025-09-18 14:44:35 +02:00
5 changed files with 139 additions and 28 deletions

View File

@@ -14,13 +14,13 @@ export class StartPagePlugin implements IPluginBuilder {
return (builderContext) => {
let htmlTemplate = readFileAsText(this.options.indexTemplatePath);
const links = builderContext.menuManifest
.map((m) => `<a href='${m.link}'>${m.name}</a>`)
.map((m) => {
const name = m.name.slice(m.name.indexOf("-") + 1).replaceAll("-", " ");
return `<div class="entry"><h2>${name}</h2><a href='${m.link}'>Read here!</a></div>`
})
.reverse();
const unorderedListItems = links.map((l) => `<li>${l}</li>`).join("\r\n");
const html = `
<ul>
${unorderedListItems}
<ul>
${links.join("")}
`;
htmlTemplate = htmlTemplate.replace("{{content}}", html);
writeTextAsFile(

BIN
src/assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/profile.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

View File

@@ -25,8 +25,14 @@ new ToolchainBuilder(paths)
{
path: "src/templates/404.html",
nameOverride: "Not Found Page",
menuEntry: true,
menuEntry: false,
},
{
path: "src/assets/profile.jpg",
},
{
path: "src/assets/favicon.ico",
}
],
}),
new StartPagePlugin({

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,48 +8,152 @@
<style>
html {
font-family: Arial, sans-serif;
font-size: 1.3em;
font-size: 17px;
line-height: 26px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: monospace;
}
a {
color: #FFF;
}
body {
max-width: 800px;
color: #fbfbfe;
background-color: #1c1b22;
background-color: #1c1b28;
display: flex;
flex-direction: column;
align-items: center;
}
ul {
list-style-type: none;
padding: 0;
.content {
display: flex;
width: 100%;
flex: 1;
flex-direction: column;
}
.content .entry {
margin-top: 1rem;
h2 {
color: #00FFFF;
text-transform: capitalize;
}
li:nth-child(1){
display: none;
h2::after {
margin-top: 1rem;
top: 8px;
border-bottom: 3px dotted #00FFFF;
border-top: 3px dotted #00FFFF;
content: "";
width: 100%;
display: block;
position: relative;
box-sizing: border-box;
height: 8px;
}
li {
margin: 1em 0;
padding: 8px;
border-radius: 8px;
border-style: solid;
h2 a {
color: white;
}
}
.profile {
border-color: #00FFFF;
border-width: 1px;
border-color: #aaa;
border-style: solid;
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: monospace;
display: flex;
flex-direction: column;
flex: 1;
}
li::before {
content: "📝";
margin-right: 8px;
.profile .picture {
border-radius: 50%;
}
a {
color: #fbfbfe;
text-decoration: none;
.profile ul {
margin: 0;
}
.profile li {}
.banner {
margin-top: 1rem;
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
align-items: center;
flex: 1;
font-family: monospace;
}
.banner .title {
display: flex;
flex-direction: row;
flex: 1;
}
.banner .title::after {
background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
content: "";
display: block;
width: 100%;
margin-left: 10px;
}
.banner .title .name {
color: #1c1b28;
background-color: #00FFFF;
white-space: nowrap;
padding: 5px;
}
</style>
</head>
<body>
<div class="banner">
<div class="title">
<div class="name">Zackarias Montell</div>
</div>
</div>
<div class="profile">
<img class="picture" src="profile.jpg" width="150" height="150" fetchpriority="high" />
<p>Software developer from Sweden. This is my place. Sometimes I publish thoughts or projects.</p>
<p>Things I do:</p>
<ul>
<li>Program things for fun. This site is built using <a href="https://git.zacke.dev/wholteza/blog">my own blog
framework</a> that generates a static website from markdown + a little bit of html templating.</li>
<li>I build physical things as well. Lately it has been <a
href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev2">keyboards</a> in multiple <a
href="https://git.zacke.dev/wholteza/5x6-split-kb/src/branch/main/rev1">revisions</a>.</li>
<li>Brew beer in my garage. <a href="/5-measuring-mash-temperatures">I find the process interesting..</a> and i
enjoy drinking beer.</li>
<li>Running and biking. You can find me on <a href="https://www.strava.com/athletes/41297534">strava</a>.
</li>
</ul>
<p><a href="https://git.zacke.dev/explore/repos">Gitea</a></p>
<p><a href="https://github.com/Wholteza">Github</a></p>
<p><a href="mailto:contact@montell.se">contact@montell.se</a> (not actually created yet but try changing out contact
for
my first name.)</p>
</div>
<div class="content">
{{content}}
</div>
</body>
</html>