Add interests to interests page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
09f8eda192
commit
9058bb89d9
GPG key ID:
B67D7410F33A0F61
10 changed files with 262 additions and 123 deletions
46
src/components/interest.html
Normal file
46
src/components/interest.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
onclick: props.onclick || '',
|
||||
titlestyle: props.titlestyle || '',
|
||||
headerstyle: props.headerstyle || '',
|
||||
person: props.person,
|
||||
}
|
||||
</script>
|
||||
<div class="interest">
|
||||
<a href="/src/who_we_are.html#{{person}}" hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html#{{person}}"
|
||||
hx-swap="innerHtml show:#{{person}}:top">
|
||||
<div class="figure">
|
||||
<img src="/assets/{{person}}.jpg" class="person">
|
||||
</div>
|
||||
</a>
|
||||
<svg height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;">
|
||||
<circle cx="2" cy="2" r="2" fill="#484848"></circle>
|
||||
</svg>
|
||||
<x-project onclick="{{onclick}}" titlestyle="{{titlestyle}}" headerstyle="{{headerstyle}}">
|
||||
<if condition="$slots.img?.filled">
|
||||
<fill:img>
|
||||
<slot:img></slot:img>
|
||||
</fill:img>
|
||||
</if>
|
||||
<if condition="$slots.title?.filled">
|
||||
<fill:title>
|
||||
<slot:title></slot:title>
|
||||
</fill:title>
|
||||
</if>
|
||||
<if condition="$slots.links?.filled">
|
||||
<fill:links>
|
||||
<slot:links></slot:links>
|
||||
</fill:links>
|
||||
</if>
|
||||
<if condition="$slots.subtitle?.filled">
|
||||
<fill:subtitle>
|
||||
<slot:subtitle></slot:subtitle>
|
||||
</fill:subtitle>
|
||||
</if>
|
||||
<if condition="$slots.description?.filled">
|
||||
<fill:description>
|
||||
<slot:description></slot:description>
|
||||
</fill:description>
|
||||
</if>
|
||||
</x-project>
|
||||
</div>
|
||||
30
src/components/project.html
Normal file
30
src/components/project.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
onclick: props.onclick || '',
|
||||
titlestyle: props.titlestyle || '',
|
||||
headerstyle: props.headerstyle || '',
|
||||
}
|
||||
</script>
|
||||
<div class="project">
|
||||
<if condition="$slots.img?.filled || $slots.links?.filled">
|
||||
<div class="project-title" style="{{titlestyle}}">
|
||||
<if condition="$slots.img?.filled">
|
||||
<div class="figure">
|
||||
<slot:img></slot:img>
|
||||
</div>
|
||||
</if>
|
||||
<slot:title></slot:title>
|
||||
<if condition="$slots.links?.filled">
|
||||
<div class="links">
|
||||
<slot:links></slot:links>
|
||||
</div>
|
||||
</if>
|
||||
</div>
|
||||
</if>
|
||||
<div class="description">
|
||||
<div onclick="{{onclick}}" style="{{headerstyle}}">
|
||||
<slot:subtitle></slot:subtitle>
|
||||
</div>
|
||||
<slot:description></slot:description>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
onclick: props.onclick || '',
|
||||
titlestyle: props.titlestyle || '',
|
||||
headerstyle: props.headerstyle || '',
|
||||
}
|
||||
</script>
|
||||
<div class="project">
|
||||
<div class="project-title" style="{{titlestyle}}">
|
||||
<if condition="$slots.img?.filled">
|
||||
<div class="figure">
|
||||
<slot:img></slot:img>
|
||||
</div>
|
||||
</if>
|
||||
<slot:title></slot:title>
|
||||
<if condition="$slots.links?.filled">
|
||||
<div class="links">
|
||||
<slot:links></slot:links>
|
||||
</div>
|
||||
</if>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div onclick="{{onclick}}" style="{{headerstyle}}">
|
||||
<slot:subtitle></slot:subtitle>
|
||||
</div>
|
||||
<slot:description></slot:description>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,20 +4,62 @@
|
|||
That's crazy
|
||||
</x-blockquote>
|
||||
</x-section-head>
|
||||
<x-project>
|
||||
<x-interest person="isaac">
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I love listening to the **works** albums from **Diverse System** while I'm working! Here's a 24-hour livestream
|
||||
from them
|
||||
</markdown>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/HXB5A7Psifk" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</fill:description>
|
||||
</x-interest>
|
||||
<x-interest class="project-alt" person="richard">
|
||||
<fill:img>
|
||||
<x-project.text>?</x-project.text>
|
||||
<img src="/assets/dancerush.png">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
# Coming soon to theaters
|
||||
# Dance Rush
|
||||
</markdown>
|
||||
</fill:title>
|
||||
<fill:subtitle>
|
||||
<markdown>
|
||||
## This website is under construction
|
||||
## Very good game
|
||||
</markdown>
|
||||
</fill:subtitle>
|
||||
<fill:description>We'll get to it, trust</fill:description>
|
||||
</x-project>
|
||||
<fill:description>
|
||||
<!-- <markdown> -->
|
||||
<!-- I love going over to Round One in Provo, Utah and tearing it up on the dance floor! -->
|
||||
<!-- </markdown> -->
|
||||
</fill:description>
|
||||
</x-interest>
|
||||
<x-interest person="isaac">
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I also love listening to Diverse System's **AD:** albums in my free time as well. This is a highlight reel of
|
||||
one of my
|
||||
favorites.
|
||||
</markdown>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/gNGcEwi2e5M" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</fill:description>
|
||||
</x-interest>
|
||||
<x-interest class="project-alt" person="isaac">
|
||||
<fill:person>
|
||||
<img src="/assets/isaac.jpg" class="person">
|
||||
</fill:person>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
My favorite artist under Diverse System has gotta be **xi**. This is a highlight reel of my favorite album
|
||||
by them.
|
||||
</markdown>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/ii8t_TZluvA?si=-PrfEwqZqAbMeFWS" title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</fill:description>
|
||||
</x-interest>
|
||||
</x-tab.content>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</fill:title>
|
||||
<fill:links>
|
||||
<x-link.github href="richgrov/simulo"></x-link.github>
|
||||
<x-link.website href="https://simulo.grover.sh" referencing="Simulo"></x-link.website>
|
||||
<x-link.website href="https://simulo.tech" referencing="Simulo"></x-link.website>
|
||||
</fill:links>
|
||||
<fill:subtitle>
|
||||
<markdown>
|
||||
|
|
|
|||
|
|
@ -29,16 +29,12 @@
|
|||
Tyson, let's get out of here
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- I have a passion for helping entertainment find it's place in the world. Where some people see brains rotting, I -->
|
||||
<!-- see oppurtunities for generations to be brought closer together, empowered with critical thinking. I've been -->
|
||||
<!-- writing code -->
|
||||
<!-- since I was -->
|
||||
<!-- 12, -->
|
||||
<!-- and creating value since I was 17. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I think the rest of the card explains enough about me ngl. I don't think another bit of text would add much
|
||||
value
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project class="project-alt" id="tyson">
|
||||
<fill:img>
|
||||
|
|
@ -134,11 +130,11 @@
|
|||
You only live once, die trying
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️ -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
<fill:description>
|
||||
<markdown>
|
||||
Just a guy making cool stuff for the love of the game. Like fast beep boops too 🎶⚡️
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
<x-project id="isaac">
|
||||
<fill:img>
|
||||
|
|
@ -165,12 +161,12 @@
|
|||
Pog
|
||||
</x-blockquote>
|
||||
</fill:subtitle>
|
||||
<!-- <fill:description> -->
|
||||
<!-- <markdown> -->
|
||||
<!-- I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems! -->
|
||||
<!-- Ever since I was 7, my specialization has always been in looking for problems to solve, and working with people -->
|
||||
<!-- to solve them. -->
|
||||
<!-- </markdown> -->
|
||||
<!-- </fill:description> -->
|
||||
<fill:description>
|
||||
<markdown>
|
||||
I'm a software engineer and computer scientist who loves harnessing the power of technology to solve problems!
|
||||
Ever since I was 7, my specialization has always been in looking for problems to solve, and working with people
|
||||
to solve them.
|
||||
</markdown>
|
||||
</fill:description>
|
||||
</x-project>
|
||||
</x-tab.content>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@custom-media --tablet only screen and (max-width: 1200px);
|
||||
@custom-media --phone only screen and (max-width: 700px);
|
||||
@custom-media --phone only screen and (max-width: 800px);
|
||||
@custom-media --smaller-phone only screen and (max-width: 500px);
|
||||
|
||||
:root {
|
||||
|
|
@ -39,7 +39,6 @@ center:has(> blockquote) {
|
|||
margin: 10px auto;
|
||||
font-size: min(5vw, 22pt);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -91,12 +90,23 @@ blockquote {
|
|||
padding: 0 40;
|
||||
}
|
||||
|
||||
.project-alt {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.project {
|
||||
background-color: #484848;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 32px;
|
||||
padding: 24px;
|
||||
border-radius: 5rem;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 16pt 0;
|
||||
}
|
||||
|
||||
&>div {
|
||||
padding: 16px;
|
||||
|
|
@ -104,22 +114,67 @@ blockquote {
|
|||
|
||||
@media (--phone) {
|
||||
flex-direction: column;
|
||||
padding: 18px;
|
||||
padding: 32px;
|
||||
|
||||
&>div {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--smaller-phone) {
|
||||
margin: 8px;
|
||||
|
||||
p {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin: 14pt 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.interest {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.person {
|
||||
width: 128px;
|
||||
margin: 25px;
|
||||
}
|
||||
|
||||
.project {
|
||||
border-radius: 5rem;
|
||||
padding: 36px;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 18px;
|
||||
|
||||
&.project-alt {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--smaller-phone) {
|
||||
.project {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-title {
|
||||
min-width: 275px;
|
||||
|
||||
@media (--smaller-phone) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24pt;
|
||||
margin: 0;
|
||||
|
|
@ -160,7 +215,7 @@ blockquote {
|
|||
border-bottom: solid 6px #eee;
|
||||
}
|
||||
|
||||
@media (--smaller-phone) {
|
||||
@media only screen and (max-width: 550px) {
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
|
|
@ -189,9 +244,6 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
.project-alt {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.person {
|
||||
clip-path: circle(50%);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue