kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added name swap

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-19 19:34:51 +02:00
parent 1815429e2c
commit f6d02095ff
4 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/main/js/text_swap.js Normal file
View File

@ -0,0 +1,10 @@
const DISPLAY_NAME = document.getElementById("swap-text")
DISPLAY_NAME.addEventListener("click", () => {
const NAMES = ["Kristofers Solo", "Kristiāns Francis Cagulis"]
if (DISPLAY_NAME.innerHTML == NAMES[0]) {
DISPLAY_NAME.innerHTML = NAMES[1]
} else {
DISPLAY_NAME.innerHTML = NAMES[0]
}
})

34
static/projects/css/projects.css
View File

@ -81,39 +81,21 @@
z-index: 2;
}
/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
h1,
h2,
h3,
h4,
span {
.card-content > * {
color: var(--color-fg-default);
font-weight: 400;
margin: 0px;
margin: 1rem;
}
.card-info-wrapper {
align-items: center;
display: flex;
flex-grow: 1;
justify-content: flex-start;
padding: 0px 20px;
.card-info-title > h2 {
font-weight: 700;
font-size: 1.5rem;
line-height: 2rem;
}
.card-info {
align-items: flex-start;
display: flex;
gap: 10px;
.card-info-text {
margin-top: 1rem;
}
.card-info-title > h3 {
font-size: 1.1em;
line-height: 20px;
}
/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
@media (max-width: 1000px) {
body {
align-items: flex-start;

3
templates/main/index.html
View File

@ -9,6 +9,7 @@
rel="stylesheet"
type="text/css">
<script src="{% static 'main/js/typewriter.js' %}" defer></script>
<script src="{% static 'main/js/text_swap.js' %}" defer></script>
{% endblock %}
{% block content %}
<div id="landing">
@ -18,7 +19,7 @@
alt="Hello there.">
</div>
<h1 class="text">
I&#39;m <span class="highlight">Kristofers Solo</span>
I&#39;m <span id="swap-text">Kristofers Solo</span>
</h1>
<h1 id="rotating-text" class="text">&nbsp;</h1>
<!-- ICONS -->

39
templates/projects/projects.html
View File

@ -14,48 +14,65 @@
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>KARBS</h3>
<h2>KARBS</h2>
</div>
<div class="card-info-text">
<p>Kristofers Auto-Rice Bootstrapping Script (KARBS).</p>
</div>
</div>
</div>
</a>
<a class="card" href="https://github.com/kristoferssolo/SoloVim">
<a class="card"
href="https://github.com/kristoferssolo/SoloVim"
target="_blank">
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>SoloVim</h3>
<h2>SoloVim</h2>
</div>
<div class="card-info-text">
<p>This is my attempt for a Neovim IDE.</p>
</div>
</div>
</div>
</a>
<a class="card" href="https://github.com/kristoferssolo/kristofersxyz">
<a class="card"
href="https://github.com/kristoferssolo/kristofersxyz"
target="_blank">
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>kristofersxyz</h3>
<h2>kristofersxyz</h2>
</div>
<div class="card-info-text">
<p>This site.</p>
</div>
</div>
</div>
</a>
<a class="card"
href="https://github.com/kristoferssolo/Traffic-Light-Detector">
href="https://github.com/kristoferssolo/Traffic-Light-Detector"
target="_blank">
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>Traffic-Light-Detector</h3>
<h2>Traffic-Light-Detector</h2>
</div>
<div class="card-info-text">
<p>Traffic Light recognition and color detection.</p>
</div>
</div>
</div>
</a>
<a class="card" href="https://github.com/kristoferssolo/donut-rs">
<a class="card"
href="https://github.com/kristoferssolo/donut-rs"
target="_blank">
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>donut-rs</h3>
<h2>donut-rs</h2>
</div>
<div class="card-info-text">
<p>ASCII spinning donut rewrite in Rust.</p>
</div>
</div>
@ -65,7 +82,9 @@
<div class="card-content">
<div class="card-info-wrapper">
<div class="card-info-title">
<h3>Surprise me</h3>
<h2>Surprise me</h2>
</div>
<div class="card-info-text">
<p>CSS Lightsaber.</p>
</div>
</div>