created basic website
This commit is contained in:
parent
eb762fd49f
commit
43750baeef
130
src/content/links.json
Normal file
130
src/content/links.json
Normal file
@ -0,0 +1,130 @@
|
||||
{
|
||||
"links": [
|
||||
{
|
||||
"name": "Chess.org",
|
||||
"href": "https://www.chess.com/member/brulijam",
|
||||
"icon": "https://simpleicons.org/icons/chessdotcom.svg",
|
||||
"group": 2
|
||||
},
|
||||
{
|
||||
"name": "Credit Card",
|
||||
"href": "mastercard.html",
|
||||
"icon": "https://simpleicons.org/icons/mastercard.svg",
|
||||
"group": 5
|
||||
},
|
||||
{
|
||||
"name": "Discord",
|
||||
"href": "https://discordapp.com/users/144893706514726913",
|
||||
"icon": "https://simpleicons.org/icons/discord.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Folding@home",
|
||||
"href": "https://stats.foldingathome.org/donor/id/72929244",
|
||||
"icon": "",
|
||||
"group": 5
|
||||
},
|
||||
{
|
||||
"name": "Github",
|
||||
"href": "https://github.com/Brulijam",
|
||||
"icon": "https://simpleicons.org/icons/github.svg",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Gitea",
|
||||
"href": "https://git.brulijam.com/brulijam",
|
||||
"icon": "https://simpleicons.org/icons/gitea.svg",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Instagram",
|
||||
"href": "https://instagram.com/julian.brammer",
|
||||
"icon": "https://simpleicons.org/icons/instagram.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Lichess",
|
||||
"href": "https://lichess.org/@/brulijam",
|
||||
"icon": "https://simpleicons.org/icons/lichess.svg",
|
||||
"group": 2
|
||||
},
|
||||
{
|
||||
"name": "Mastodon",
|
||||
"href": "https://mstdn.brulijam.dev/@brulijam",
|
||||
"icon": "https://simpleicons.org/icons/mastodon.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Matrix",
|
||||
"href": "https://brulijam.dev/mtrx/#/@brulijam:brulijam.dev?web-instance[element.io]=chat.brulijam.dev&client=element.io",
|
||||
"icon": "https://simpleicons.org/icons/matrix.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Obsidian",
|
||||
"href": "https://md.brulijam.com",
|
||||
"icon": "https://simpleicons.org/icons/obsidian.svg",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Osu!",
|
||||
"href": "https://osu.ppy.sh/users/3490953",
|
||||
"icon": "https://simpleicons.org/icons/osu.svg",
|
||||
"group": 2
|
||||
},
|
||||
{
|
||||
"name": "PayPal",
|
||||
"href": "https://www.paypal.com/paypalme/julianbrammer/",
|
||||
"icon": "https://simpleicons.org/icons/paypal.svg",
|
||||
"group": 5
|
||||
},
|
||||
{
|
||||
"name": "Screeps",
|
||||
"href": "https://screeps.com/a/#!/profile/Brulijam",
|
||||
"icon": "",
|
||||
"group": 2
|
||||
},
|
||||
{
|
||||
"name": "Signal",
|
||||
"href": "https://signal.me/#eu/Bt1D65df5FOnAZVB0u9WHJG5wAz2WLnS_ALOiTAUmXHbs66TAjdHZ4YJi_wbyJnq",
|
||||
"icon": "https://simpleicons.org/icons/signal.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Snapchat",
|
||||
"href": "https://www.snapchat.com/add/julian.brammer",
|
||||
"icon": "https://simpleicons.org/icons/snapchat.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Soundcloud",
|
||||
"href": "https://soundcloud.com/brulijam",
|
||||
"icon": "https://simpleicons.org/icons/soundcloud.svg",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Spotify",
|
||||
"href": "https://open.spotify.com/user/giibu0t7te5mchiu2ugisudnv",
|
||||
"icon": "https://simpleicons.org/icons/spotify.svg",
|
||||
"group": 1
|
||||
},
|
||||
{
|
||||
"name": "Steam",
|
||||
"href": "https://steamcommunity.com/id/Brulijam/",
|
||||
"icon": "https://simpleicons.org/icons/steam.svg",
|
||||
"group": 2
|
||||
},
|
||||
{
|
||||
"name": "Telegram",
|
||||
"href": "https://t.me/julian_brammer",
|
||||
"icon": "https://simpleicons.org/icons/telegram.svg",
|
||||
"group": 0
|
||||
},
|
||||
{
|
||||
"name": "Youtube",
|
||||
"href": "https://youtube.com/@brulijam",
|
||||
"icon": "https://simpleicons.org/icons/youtube.svg",
|
||||
"group": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
src/content/video.mp4
Normal file
BIN
src/content/video.mp4
Normal file
Binary file not shown.
158
src/css/main.css
Normal file
158
src/css/main.css
Normal file
@ -0,0 +1,158 @@
|
||||
:root {
|
||||
--bg-color: rgb(16, 16, 16);
|
||||
--primary: rgb(240, 240, 240);
|
||||
|
||||
--secondary-color: rgb(0, 138, 216);
|
||||
|
||||
--font-weight: 400;
|
||||
--font-family: "Lucida Console";
|
||||
|
||||
--link-font-weight: 1000;
|
||||
--link-border-radius: 10px;
|
||||
|
||||
--page-max-width: 800px;
|
||||
}
|
||||
|
||||
/* General */
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--primary);
|
||||
font-family: var(--font-family), monospace;
|
||||
font-weight: var(--font-weight);
|
||||
overflow-x: hidden;
|
||||
margin: 20px;
|
||||
|
||||
& a {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& h1, p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header*/
|
||||
header {
|
||||
text-align: center;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
|
||||
& .names {
|
||||
/*margin: 0 auto;*/
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
|
||||
& h1, p {
|
||||
|
||||
text-align: left;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
border-radius: 50%;
|
||||
max-width: 300px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.linkGroup {
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* if wide */
|
||||
@media only screen and (min-width: 480px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
& .link {
|
||||
height: fit-content;
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: top ease 100ms;
|
||||
|
||||
/* if slim */
|
||||
@media only screen and (max-width: 480px) {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
/* if wide */
|
||||
@media only screen and (min-width: 480px) {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.linkButton {
|
||||
font-weight: var(--link-font-weight);
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: var(--secondary-color);
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--link-border-radius);
|
||||
|
||||
/* if slim */
|
||||
@media only screen and (max-width: 480px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
filter: drop-shadow(0px 0px 5px var(--secondary-color)) brightness(1.05);
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.links:hover .link:not(:hover) a {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* Timers */
|
||||
.timer p {
|
||||
/* if slim */
|
||||
@media only screen and (max-width: 480px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.timer p span {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
65
src/index.html
Normal file
65
src/index.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Brulijam</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/timer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<img src="https://brulijam.dev/assets/img/1_1713277032.jpga" alt="<profile picture>"></img>
|
||||
<div class="names">
|
||||
<h1>Julian Brammer</h1>
|
||||
<p>@brulijam</p>
|
||||
</div>
|
||||
</header>
|
||||
<br>
|
||||
<section class="description">
|
||||
<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>
|
||||
<script src="js/links.js"></script>
|
||||
<section class="links">
|
||||
<noscript>
|
||||
<p>javascript is not available. You can still see a list of my links <a href="content/links.json">here</a>.</p>
|
||||
</noscript>
|
||||
</section>
|
||||
<br>
|
||||
<section class="timer">
|
||||
<p class="js-required">alive for <span id="timer-alive-since-s"></span><span id="timer-alive-since-ms"></span> seconds.</p>
|
||||
<p class="js-required">next birthday in <span id="timer-until-birthday-s"></span><span id="timer-until-birthday-ms"></span> seconds.</p>
|
||||
<p class="js-required">employed at <a href="https://subshell.com/">subshell</a> for <span id="timer-employed-since-s"></span><span
|
||||
id="timer-employed-since-ms"></span>
|
||||
seconds.
|
||||
</p>
|
||||
<noscript>
|
||||
<p>alive since <span>1999-07-20T00:00:00</span>.</p>
|
||||
<p>working at <a href="https://subshell.com/">subshell</a> since <span>2024-05-02T09:00:00</span>.</p>
|
||||
<style>
|
||||
.js-required {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
</section>
|
||||
<br>
|
||||
<footer>
|
||||
<a href="https://git.brulijam.dev/brulijam/introduction-website" target="_blank">source code</a>
|
||||
<a href="content/links.json" target="_blank">links.json</a>
|
||||
<a href="https://status.brulijam.dev/status/brulijam">status</a>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
45
src/js/links.js
Normal file
45
src/js/links.js
Normal file
@ -0,0 +1,45 @@
|
||||
function createLinkDiv(link) {
|
||||
const linkDiv = document.createElement('div');
|
||||
linkDiv.className = 'link';
|
||||
|
||||
const anchor = document.createElement('a');
|
||||
anchor.className = 'linkButton';
|
||||
anchor.href = link.href;
|
||||
anchor.target = '_blank';
|
||||
anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${link.name} icon">${link.name}` : link.name;
|
||||
|
||||
linkDiv.appendChild(anchor);
|
||||
return linkDiv;
|
||||
}
|
||||
|
||||
function createGroups(linksData) {
|
||||
const container = document.querySelector('.links');
|
||||
|
||||
const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
|
||||
|
||||
groups.forEach((group, index) => {
|
||||
const groupContainer = document.createElement('div');
|
||||
groupContainer.className = 'linkGroup';
|
||||
|
||||
linksData
|
||||
.filter(link => link.group === group)
|
||||
.forEach(link => {
|
||||
const linkElement = createLinkDiv(link);
|
||||
groupContainer.appendChild(linkElement);
|
||||
});
|
||||
|
||||
container.appendChild(groupContainer);
|
||||
|
||||
if (index < groups.length - 1) {
|
||||
const br = document.createElement('br');
|
||||
container.appendChild(br);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fetch('content/links.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
createGroups(data.links);
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
22
src/js/main.js
Normal file
22
src/js/main.js
Normal file
@ -0,0 +1,22 @@
|
||||
const secondaryColors = [
|
||||
// "rgb(240, 240, 240)",
|
||||
// "rgb(136, 139, 141)",
|
||||
"rgb(224, 231, 34)",
|
||||
"rgb(255, 173, 0)",
|
||||
"rgb(244,54,76)",
|
||||
// "rgb(219, 62, 177)",
|
||||
"rgb(250, 150, 250)",
|
||||
"rgb(250, 150, 150)",
|
||||
"rgb(242, 172, 185)",
|
||||
"rgb(0, 138, 216)",
|
||||
"rgb(0, 178, 169)",
|
||||
"rgb(88, 188, 64)",
|
||||
"rgb(173, 223, 179)"
|
||||
];
|
||||
|
||||
function setRandomSecondaryColor() {
|
||||
const randomColor = secondaryColors[Math.floor(Math.random() * secondaryColors.length)];
|
||||
document.documentElement.style.setProperty('--secondary-color', randomColor);
|
||||
}
|
||||
|
||||
setRandomSecondaryColor();
|
||||
55
src/js/timer.js
Normal file
55
src/js/timer.js
Normal file
@ -0,0 +1,55 @@
|
||||
const birthdate = new Date("1999-07-20T00:00:00");
|
||||
const employedSince = new Date("2024-05-02T09:00:00");
|
||||
|
||||
window.onload = startTimer;
|
||||
|
||||
function startTimer() {
|
||||
calculateTime();
|
||||
setInterval(calculateTime, 42);
|
||||
}
|
||||
|
||||
function calculateTime() {
|
||||
const now = new Date();
|
||||
|
||||
// timer-alive-since
|
||||
const aliveSinceMs = now - birthdate;
|
||||
let aliveSinceTenthOfASecond = Math.floor((aliveSinceMs % 1000) / 10);
|
||||
aliveSinceTenthOfASecond = aliveSinceTenthOfASecond.toString().padStart(2, "0");
|
||||
const aliveSinceS = Math.floor(aliveSinceMs / 1000);
|
||||
|
||||
// timer-until-birthday
|
||||
const nextBirthday = new Date(now.getFullYear(), birthdate.getMonth(), birthdate.getDate(),
|
||||
birthdate.getHours(), birthdate.getMinutes(), birthdate.getSeconds());
|
||||
if (nextBirthday < now) {
|
||||
nextBirthday.setFullYear(now.getFullYear() + 1);
|
||||
}
|
||||
const nextBirthdayMs = nextBirthday - now;
|
||||
let nextBirthdayTenthOfASecond = Math.floor((nextBirthdayMs % 1000) / 10);
|
||||
nextBirthdayTenthOfASecond = nextBirthdayTenthOfASecond.toString().padStart(2, "0");
|
||||
const nextBirthdayS = Math.floor(nextBirthdayMs / 1000);
|
||||
|
||||
// timer-employed-since
|
||||
const employedSinceMs = now - employedSince;
|
||||
let employedSinceTenthOfASecond = Math.floor((employedSinceMs % 1000) / 10);
|
||||
employedSinceTenthOfASecond = employedSinceTenthOfASecond.toString().padStart(2, "0");
|
||||
const employedSinceS = Math.floor(employedSinceMs / 1000);
|
||||
|
||||
// Update Document
|
||||
updateDocument("timer-alive-since-s", `${formatNumber(aliveSinceS)}`)
|
||||
updateDocument("timer-alive-since-ms", `.${formatNumber(aliveSinceTenthOfASecond)}`)
|
||||
updateDocument("timer-until-birthday-s", `${formatNumber(nextBirthdayS)}`)
|
||||
updateDocument("timer-until-birthday-ms", `.${formatNumber(nextBirthdayTenthOfASecond)}`)
|
||||
updateDocument("timer-employed-since-s", `${formatNumber(employedSinceS)}`)
|
||||
updateDocument("timer-employed-since-ms", `.${formatNumber(employedSinceTenthOfASecond)}`)
|
||||
}
|
||||
|
||||
function updateDocument(id, value) {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.innerHTML = value;
|
||||
}
|
||||
}
|
||||
|
||||
function formatNumber(number) {
|
||||
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
27
src/mastercard.html
Normal file
27
src/mastercard.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Brulijam</title>
|
||||
<meta name="author" content="Brulijam">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<video autoplay loop width="100%">
|
||||
<source src="content/video.mp4" type="video/mp4">
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
<script>
|
||||
function redirect() {
|
||||
window.location.href = "content/video.mp4";
|
||||
}
|
||||
|
||||
function onload() {
|
||||
redirect();
|
||||
}
|
||||
|
||||
window.onload = onload();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
15
src/timers.html
Normal file
15
src/timers.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="application/json;">
|
||||
<script src="js/timer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="js/timer.js"></script>
|
||||
<pre>
|
||||
<span id="timer-alive-since-s"></span>
|
||||
<span id="timer-until-birthday-s"></span>
|
||||
<span id="timer-employed-since-s"></span>
|
||||
</pre>
|
||||
</body>
|
||||
Loading…
Reference in New Issue
Block a user