brulijam/introduction-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: brulijam:main
Branches Tags
brulijam:main
brulijam:minimal
..
compare: brulijam:38c3
Branches Tags
brulijam:main
brulijam:minimal

No commits in common. "main" and "38c3" have entirely different histories.
main ... 38c3

5 changed files with 40 additions and 81 deletions
Show Stats Expand all files Collapse all files

27
src/content/links.json
View File

@ -56,7 +56,7 @@
},
{
"name": "Matrix",
"href": "https://brulijam.com/mtrx/#/@brulijam:brulijam.com?web-instance[element.io]=app.element.io",
"href": "https://brulijam.com/mtrx/#/@brulijam:brulijam.com?web-instance[element.io]=app.element.io&client=element.io",
"icon": "https://simpleicons.org/icons/matrix.svg",
"group": 1
},
@ -125,31 +125,6 @@
"href": "https://youtube.com/@brulijam",
"icon": "https://simpleicons.org/icons/youtube.svg",
"group": 2
},
{
"name": "source code",
"href": "https://git.brulijam.com/brulijam/introduction-website",
"group": "footer"
},
{
"name": "links json",
"href": "content/links.json",
"group": "footer"
},
{
"name": "status",
"href": "https://status.brulijam.com/status/brulijam",
"group": "footer"
},
{
"name": "files",
"href": "https://brulijam.com/files",
"group": "footer"
},
{
"name": "music",
"href": "https://brulijam.com/music",
"group": "footer"
}
],
"groupNames": {

19
src/css/main.css
View File

@ -82,31 +82,22 @@ h2 {
}
}
.text-link::before {
content: "[";
}
.text-link::after {
content: "]";
}
.text-link {
color: var(--secondary-color);
text-decoration: none;
text-decoration: underline solid var(--secondary-color2) 1px;
position: relative;
padding: 5px;
white-space: nowrap;
display: inline-block;
padding: 0 2px;
}
.text-link:hover {
text-decoration: underline solid var(--secondary-color) 1px;
filter: drop-shadow(0 0 5px var(--secondary-color2)) brightness(1.02);
top: -2px;
}
/* Links Container */
.links {
padding: 0 10px;
padding: 10px;
}
/* Link Group */
@ -172,7 +163,7 @@ h2 {
}
.links:hover .hoverHighlight:not(:hover) {
@media only screen and (min-width: 480px) {
filter: brightness(0.8);
filter: brightness(0.5);
}
}

21
src/index.html
View File

@ -23,13 +23,20 @@
<br>
<section class="description">
<p>css is pain and I used way too much math to implement that fuzzy search.</p>
<p>One day I will write something meaningful in this paragraph.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet.</p>
</section>
<br>
<br><br>
<section class="fuzzysearch">
<input type="text" id="link-search" placeholder="fuzzy search">
</section>
<br>
<section class="links">
<noscript>
<p>javascript is not available. You can still see a list of my links <a class="text-link" href="content/links.json">here</a>.</p>
@ -54,7 +61,13 @@
</noscript>
</section>
<br>
<footer></footer>
<footer>
<a class="text-link" href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
<a class="text-link" href="content/links.json" target="_blank">links.json</a>
<a class="text-link" href="https://status.brulijam.com/status/brulijam">status</a>
<a class="text-link" href="https://brulijam.com/files" target="_blank">files</a>
<a class="text-link" href="https://brulijam.com/music" target="_blank">music</a>
</footer>
</main>
</body>
</html>

20
src/js/links.js
View File

@ -13,31 +13,12 @@ function createLinkDiv(link) {
return linkDiv;
}
function createFooterLink(link) {
const footerLink = document.createElement('a');
footerLink.className = 'text-link';
footerLink.href = link.href;
footerLink.target = '_blank';
footerLink.textContent = link.name;
return footerLink;
}
function createGroups(linksData, groupNames) {
const container = document.querySelector('.links');
const footer = document.querySelector('footer');
const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
groups.forEach((group, index) => {
if (group === "footer") {
linksData
.filter(link => link.group === "footer")
.forEach(link => {
const footerLink = createFooterLink(link);
footer.appendChild(footerLink);
});
} else {
// Handle regular links
const groupContainer = document.createElement('div');
groupContainer.className = 'linkGroup';
@ -58,7 +39,6 @@ function createGroups(linksData, groupNames) {
const br = document.createElement('br');
container.appendChild(br);
}
}
});
}

4
src/js/main.js
View File

@ -1,12 +1,12 @@
let hue = Math.floor(Math.random() * 360);
const colorChangeInterval = 150;
const colorChangeInterval = 100;
function setRainbowColor() {
const color = `hsl(${hue}, 80%, 80%)`;
document.documentElement.style.setProperty('--secondary-color', color);
document.documentElement.style.setProperty('--secondary-color2', `hsl(${hue}, 40%, 40%)`);
document.documentElement.style.setProperty('--secondary-color-bg', `hsl(${hue}, 20%, 5%)`);
document.documentElement.style.setProperty('--secondary-color-bg', `hsl(${hue}, 40%, 5%)`);
hue = (hue + 1) % 360;
}