Skip to content

Commit

Permalink
Update the projects list
Browse files Browse the repository at this point in the history 
- Add Cosmic Floss.
- List of the parts of each project.
- Style adjustments.
  • Loading branch information
@Gigabyte5671
Gigabyte5671 committed Jun 17, 2024
1 parent 2b3d29b commit aa13f7e
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 16 deletions.
30 changes: 29 additions & 1 deletion components/Crate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,9 @@
background-color: unset;
}
.crate.wide > .content {
min-width: 15rem;
}
.crate.wider > .content {
min-width: 20rem;
}
.crate > .content > * {
Expand All @@ -121,6 +124,31 @@
font-weight: 700;
line-height: 1em;
}
.crate > .content > .label {
position: absolute;
top: 0.5ch;
left: 0.5ch;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
gap: 0.1ch;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
filter: grayscale(1) invert(1);
opacity: 0.9;
}
.crate > .content > .label li {
margin: 0;
padding: 0 0.7ch 0.4ch;
color: white;
font-size: small;
font-weight: 100;
background-color: #000e;
border-radius: 2px;
}
.crate > .content > .stamps {
position: absolute;
top: 0.5ch;
Expand All @@ -144,7 +172,7 @@
justify-content: center;
align-content: flex-end;
gap: 1px 0.2rem;
max-width: 61rem;
max-width: 62rem;
margin: 19rem 0 0;
padding: 0 10rem;
}
Expand Down
Binary file added images/cosmic-floss.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 75 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,11 @@
:where(section.projects li a) {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 2rem 1fr;
grid-template-rows: 2rem auto auto;
align-items: center;
gap: 2ch 1ch;
width: 100%;
padding: 1ch;
padding: 1ch 1ch 2ch;
text-decoration: none;
background-color: #8892;
border-radius: 5px;
Expand All @@ -134,6 +134,10 @@
background-color: #8894;
}
:where(section.projects li a ul) {
grid-area: 3 / 1 / 4 / 3;
gap: 1ch;
}
:where(section.projects li a ul.label) {
grid-area: 2 / 1 / 3 / 3;
gap: 1ch;
}
Expand All @@ -143,6 +147,13 @@
align-items: center;
gap: 1ch;
}
:where(section.projects label li) {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 1ch;
}
:where(.visualOnly) {
display: none;
}
Expand Down Expand Up @@ -979,28 +990,57 @@ <h2>Projects</h2>
</div>

<ul class="crateStack">
<li class="crate separate">
<li class="crate wider separate">
<span></span>
<span></span>
<a class="content" href="https://github.com/vircadia/vircadia-web" target="_blank">
<img src="https://raw.githubusercontent.com/vircadia/vircadia-assets/master/images/branding/vircadia-icon.svg" alt="" width="30">
<h3>Vircadia Web</h3>
<a class="content" href="https://cascades.app/" target="_blank">
<img src="images/logo-2-small.webp" alt="" width="30">
<h3>Cascades</h3>
<ul class="label">
<li>Webapp</li>
<li>Branding</li>
<li>Framework</li>
<li>Backend</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/firebase/black" alt="Firebase" title="Firebase" class="icon" style="width: 1rem;"><span class="fallbackOnly">Firebase</span></li>
<li><img src="https://cdn.simpleicons.org/googlecloud/black" alt="Google Cloud Functions" title="Google Cloud Functions" class="icon" style="width: 1rem;"><span class="fallbackOnly">Cloud Functions</span></li>
<li><img src="https://cdn.simpleicons.org/githubactions/black" alt="GitHub Actions" title="GitHub Actions" class="icon" style="width: 1rem;"><span class="fallbackOnly">GitHub Actions</span></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Babylon_logo_v4.svg" alt="BabylonJS Engine" title="BabylonJS Engine" style="width: 1rem;"><span class="fallbackOnly">Babylon JS</span></li>
<li><img src="https://cdn.simpleicons.org/vue.js/black" alt="Vue Framework" title="Vue Framework" class="icon" style="width: 1rem;"><span class="fallbackOnly">Vue</span></li>
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
</ul>
</a>
<span></span>
<span></span>
</li>
<li class="crate wide">
<span></span>
<span></span>
<a class="content" href="https://cosmicfloss.co.nz/" target="_blank">
<img src="images/cosmic-floss.png" alt="" width="30">
<h3>Cosmic Floss</h3>
<ul class="label">
<li>Website</li>
<li>Branding</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
<li><img src="https://cdn.simpleicons.org/node.js/black" alt="Node" title="Node" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node</span></li>
</ul>
</a>
<span></span>
<span></span>
</li>
<li class="crate">
<span></span>
<span></span>
<a class="content" href="https://www.npmjs.com/package/ta-client-api/" target="_blank">
<img src="https://github.com/wilderzone/ta-client-api/raw/main/logo.svg" alt="" width="30">
<h3>TA CLient API</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
Expand All @@ -1016,6 +1056,9 @@ <h3>TA CLient API</h3>
<a class="content" href="https://www.npmjs.com/package/@css-canvas/editor" target="_blank">
<img src="https://github.com/Cascades-CSS/CSS-Editor/raw/main/src/assets/branding/logo.svg" alt="" width="30">
<h3>CSS Editor</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
<li><img src="https://cdn.simpleicons.org/githubactions/black" alt="GitHub Actions" title="GitHub Actions" class="icon" style="width: 1rem;"><span class="fallbackOnly">GitHub Actions</span></li>
Expand All @@ -1032,6 +1075,9 @@ <h3>CSS Editor</h3>
<a class="content" href="https://autotype.zakweb.dev/" target="_blank">
<img src="https://autotype.zakweb.dev/favicon.svg" alt="" width="30">
<h3>AutoType</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/javascript/black" alt="JavaScript" title="JavaScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">JavaScript</span></li>
</ul>
Expand All @@ -1045,6 +1091,9 @@ <h3>AutoType</h3>
<a class="content" href="https://www.npmjs.com/package/css-to-html" target="_blank">
<img src="https://github.com/Cascades-CSS/CSS-to-HTML/raw/main/assets/logo.svg" alt="" width="30">
<h3>CSS to HTML</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
<li><img src="https://cdn.simpleicons.org/githubactions/black" alt="GitHub Actions" title="GitHub Actions" class="icon" style="width: 1rem;"><span class="fallbackOnly">GitHub Actions</span></li>
Expand All @@ -1055,12 +1104,15 @@ <h3>CSS to HTML</h3>
<span></span>
<span></span>
</li>
<li class="crate wide">
<li class="crate">
<span></span>
<span></span>
<a class="content" href="https://www.npmjs.com/package/ta-network-api/v/2.0.0-alpha.2" target="_blank">
<img src="https://github.com/wilderzone/ta-network-api/raw/main/logo.svg" alt="" width="30">
<h3>TA Network API</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
Expand All @@ -1070,16 +1122,18 @@ <h3>TA Network API</h3>
<span></span>
<span></span>
</li>
<li class="crate wide">
<li class="crate wider">
<span></span>
<span></span>
<a class="content" href="https://cascades.app/" target="_blank">
<img src="images/logo-2-small.webp" alt="" width="30">
<h3>Cascades</h3>
<a class="content" href="https://github.com/vircadia/vircadia-web" target="_blank">
<img src="https://raw.githubusercontent.com/vircadia/vircadia-assets/master/images/branding/vircadia-icon.svg" alt="" width="30">
<h3>Vircadia Web</h3>
<ul class="label">
<li>Webapp</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/firebase/black" alt="Firebase" title="Firebase" class="icon" style="width: 1rem;"><span class="fallbackOnly">Firebase</span></li>
<li><img src="https://cdn.simpleicons.org/googlecloud/black" alt="Google Cloud Functions" title="Google Cloud Functions" class="icon" style="width: 1rem;"><span class="fallbackOnly">Cloud Functions</span></li>
<li><img src="https://cdn.simpleicons.org/githubactions/black" alt="GitHub Actions" title="GitHub Actions" class="icon" style="width: 1rem;"><span class="fallbackOnly">GitHub Actions</span></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Babylon_logo_v4.svg" alt="BabylonJS Engine" title="BabylonJS Engine" style="width: 1rem;"><span class="fallbackOnly">Babylon JS</span></li>
<li><img src="https://cdn.simpleicons.org/vue.js/black" alt="Vue Framework" title="Vue Framework" class="icon" style="width: 1rem;"><span class="fallbackOnly">Vue</span></li>
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
</ul>
Expand All @@ -1093,6 +1147,9 @@ <h3>Cascades</h3>
<a class="content" href="https://www.npmjs.com/package/micro-test-runner" target="_blank">
<img src="https://github.com/Gigabyte5671/micro-test-runner/raw/main/logo.svg" alt="" width="30">
<h3>Micro Test-Runner</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/typescript/black" alt="TypeScript" title="TypeScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">TypeScript</span></li>
<li><img src="https://cdn.simpleicons.org/npm/black" alt="Node Package Manager" title="Node Package Manager" class="icon" style="width: 1rem;"><span class="fallbackOnly">Node Package Manager</span></li>
Expand All @@ -1107,14 +1164,17 @@ <h3>Micro Test-Runner</h3>
<a class="content" href="https://dom-particles.zakweb.dev/" target="_blank">
<img src="https://github.com/Gigabyte5671/DOM-Particles/blob/main/favicon.webp?raw=true" alt="" width="30">
<h3>DOM Particles</h3>
<ul class="label">
<li>Library</li>
</ul>
<ul class="stamps">
<li><img src="https://cdn.simpleicons.org/javascript/black" alt="JavaScript" title="JavaScript" class="icon" style="width: 1rem;"><span class="fallbackOnly">JavaScript</span></li>
</ul>
</a>
<span></span>
<span></span>
</li>
<li class="crate wide">
<li class="crate wider">
<span></span>
<span></span>
<a class="content" href="https://github.com/Gigabyte5671?tab=repositories" target="_blank">
Expand Down

0 comments on commit aa13f7e

Please sign in to comment.