hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: hippoz:5e667d67382b26d5ddc2ce19aa3318e11c5a9c4c
Branches Tags
hippoz:master
..
compare: hippoz:134e1a98c4f20a89d6e3f37bb26882b734b3b736
Branches Tags
hippoz:master

No commits in common. "5e667d67382b26d5ddc2ce19aa3318e11c5a9c4c" and "134e1a98c4f20a89d6e3f37bb26882b734b3b736" have entirely different histories.
5e667d6738 ... 134e1a98c4

4 changed files with 90 additions and 58 deletions
Show stats Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,5 +1,4 @@
node_modules/ node_modules/
testing/
# the only files that need to be generated are .html, so just exclude them # the only files that need to be generated are .html, so just exclude them
out/*.html out/*.html

106
out/res/style.css
View file

@ -6,8 +6,8 @@
--button-accent-color: #3d3d3d; --button-accent-color: #3d3d3d;
--selected-bg-color: #2e2e2e; --selected-bg-color: #2e2e2e;
--hover-bg-color: #4d4d4d; --hover-bg-color: #4d4d4d;
--card-border-radius: 14px; --card-border-radius: 0.5rem;
--button-border-radius: 12px; --button-border-radius: 0.5rem;
--main-font-weight: 500; --main-font-weight: 500;
--cards-length: 675px; --cards-length: 675px;
@ -16,90 +16,108 @@
body { body {
background-color: var(--body-bg-color); background-color: var(--body-bg-color);
background-image: url(wave.svg);
background-size: 100% auto;
background-repeat: no-repeat;
font-family: var(--fonts-regular); font-family: var(--fonts-regular);
font-weight: var(--main-font-weight); font-weight: var(--main-font-weight);
color: #000000; color: #000000;
} }
* { br {
box-sizing: border-box; display: block;
content: "";
margin-top: 2px;
} }
/* Card */ .card {
.Card {
margin: 6px; margin: 6px;
padding: 8px; padding: 8px;
background: var(--accent-bg-color); background: var(--accent-bg-color);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
} }
.Card.Card-layout { .card.inner-card {
margin: 28px auto;
padding: 24px;
width: clamp(200px, 100%, var(--cards-length));
}
.Card.Card-inner {
margin: 4px; margin: 4px;
margin-bottom: 24px; margin-bottom: 28px;
padding: 16px; padding: 18px;
border: solid var(--accent-color) 1px;
} }
/* Navigation */ .card.layout-card {
margin: 36px auto;
.Navigation { padding: 26px;
display: flex; width: var(--cards-length);
flex-direction: row; box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
} }
.Navigation-branding { .grayed-out {
color: var(--grayed-text-color);
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.navigation-branding-text {
text-decoration: none;
display: inline-block; display: inline-block;
user-select: none;
padding: 8px; padding: 8px;
font-size: 18px;
white-space: nowrap; white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
} }
.Navigation .Button { .noselect {
margin-left: 14px; user-select: none;
} }
.Navigation .Button:first-of-type { .button-default {
margin-left: auto; display: inline-block;
}
/* Button */
.Button {
display: block;
text-decoration: none; text-decoration: none;
border: none; border: none;
background-color: var(--accent-bg-color); background-color: var(--accent-bg-color);
border-radius: var(--button-border-radius); border-radius: var(--button-border-radius);
padding: 10px; padding: 8px;
font-size: 18px;
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
color: var(--button-accent-color); color: var(--button-accent-color);
cursor: pointer; cursor: pointer;
outline: none;
min-width: 56px;
text-align: center; text-align: center;
} }
.Button:hover:not(.Button-selected) { .button-default:hover:not(.button-selected) {
color: var(--accent-bg-color); color: var(--accent-bg-color);
background-color: var(--hover-bg-color); background-color: var(--hover-bg-color);
} }
.Button.Button-selected { .button-selected {
color: var(--accent-bg-color); color: var(--accent-bg-color);
background-color: var(--selected-bg-color); background-color: var(--selected-bg-color);
} }
/* Project */ .input {
border: none;
.Project-top { outline: none;
display: flex; border-radius: 4px;
flex-direction: row; padding: 3px;
align-items: center; margin: 8px;
} }
.Project-top-view { @media screen and (max-width: 768px) {
margin-left: auto; .card.layout-card {
width: 80%;
}
} }

4
out/res/wave.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" preserveAspectRatio="none" version="1.1">
<rect x="0" y="0" width="900" height="600" fill="#2E2E2E"/>
<path style="filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.4));" filter="url(#dropShadow)" d="M0 128L21.5 119.5C43 111 86 94 128.8 93.7C171.7 93.3 214.3 109.7 257.2 112.2C300 114.7 343 103.3 385.8 96.3C428.7 89.3 471.3 86.7 514.2 101C557 115.3 600 146.7 642.8 147.2C685.7 147.7 728.3 117.3 771.2 108.5C814 99.7 857 112.3 878.5 118.7L900 125L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#d4d3d3" stroke-linecap="round" stroke-linejoin="miter"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 810 B

35
index.js → src/index.js
View file

@ -41,13 +41,17 @@ const data = {
}; };
const linkButton = ({ link, text, selected=false }) => ` const linkButton = ({ link, text, selected=false }) => `
<a href="${link}" class="${selected ? "Button Button-selected" : "Button"}">${text}</a> <a href="${link}" class="button-default${selected ? " button-selected" : ""}">${text}</a>
`; `;
const navigation = ({currentName}) => ` const navigation = ({currentName}) => `
<nav class="Navigation Card Card-layout"> <nav class="card layout-card noselect">
<b class="Navigation-branding">${data.navigationBrandingText}</b> <div class="float-left">
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")} <b class="navigation-branding-text">${data.navigationBrandingText}</b>
</div>
<div class="align-right">
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
</div>
</nav> </nav>
`; `;
@ -63,7 +67,7 @@ const makePage = ({ name, description, title }) => content => [`
</head> </head>
<body> <body>
${navigation({currentName: name})} ${navigation({currentName: name})}
<main class="Card Card-layout"> <main class="card layout-card" id="content">
${content} ${content}
</main> </main>
</body> </body>
@ -90,10 +94,10 @@ const projectsPage = async () => makePage({
.filter(a => !a.archived) .filter(a => !a.archived)
.map( .map(
repo =>` repo =>`
<div class="Card Card-inner"> <div class="card inner-card">
<div class="Project-top"> <div>
<b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b> <b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
<a class="Button Project-top-view" href=${repo.html_url}>view >></a> <a class="button-default float-right" href=${repo.html_url}>view >></a>
</div> </div>
${repo.description ? `<p>${repo.description}</p>` : ""} ${repo.description ? `<p>${repo.description}</p>` : ""}
</div>` </div>`
@ -106,13 +110,16 @@ const pages = {
"projects.html": projectsPage, "projects.html": projectsPage,
"index.html": indexPage "index.html": indexPage
}; };
let renderedPageCache = null;
const renderPages = async () => { const renderPages = async () => {
let renderedPages = {}; if (renderedPageCache) return renderedPageCache;
renderedPageCache = {};
for (const [pageName, builder] of Object.entries(pages)) { for (const [pageName, builder] of Object.entries(pages)) {
renderedPages[pageName] = await builder(); renderedPageCache[pageName] = await builder();
} }
return renderedPages; return renderedPageCache;
}; };
const deployPages = async () => { const deployPages = async () => {
@ -126,4 +133,8 @@ const deployPages = async () => {
} }
}; };
deployPages(); const deployAll = async () => {
await deployPages();
};
deployAll();