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

Created homepage

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-18 17:12:40 +02:00
parent e341a25a0b
commit 5152024002
5 changed files with 108 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/main/css/index.css
View File

@ -1,25 +1,24 @@
h1, #landing {
p { display: flex;
color: var(--text-color); height: 100%;
font-size: 20px;
text-align: center; text-align: center;
margin-top: 10px; margin: 1rem;
} }
a { .landing-title {
text-decoration: none;
color: var(--link-text-color);
}
a:hover {
text-decoration: underline;
}
.center {
margin: 0;
position: absolute; position: absolute;
top: 50%; margin: 1rem;
left: 50%; padding: 1rem;
-ms-transform: translate(-50%, -50%); left: 0;
transform: translate(-50%, -50%); right: 0;
top: 30%;
}
img {
width: 40%;
}
.text {
font-size: 3rem;
font-weight: 700;
text-align: center;
} }

7
static/main/css/layout.css
View File

@ -10,7 +10,7 @@
--clr-secondary-hover: hsl(210, 3%, 73%); --clr-secondary-hover: hsl(210, 3%, 73%);
--clr-secondary-link: hsl(212, 100%, 67%); --clr-secondary-link: hsl(212, 100%, 67%);
font-family: roboto, helvetica, arial, sans-serif; font-family: "Roboto", arial, sans-serif;
} }
html, html,
@ -24,11 +24,8 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
main {
min-height: 100%;
}
/* Utility classes */ /* Utility classes */
.flex { .flex {
display: flex; display: flex;
gap: var(--gap, 1rem); gap: var(--gap, 1rem);

45
static/main/js/typewriter.js Normal file
View File

@ -0,0 +1,45 @@
const TEXT_DISPLAY = document.getElementById("text")
const PHRASES = ["Software Developer", "Jedi"]
let i = 0
let j = 0
let current_phrase = []
let is_deleting = false
let is_end = false
typewriter = () => {
is_end = false
TEXT_DISPLAY.innerHTML = current_phrase.join("")
if (i < PHRASES.length) {
if (!is_deleting && j <= PHRASES[i].length) {
current_phrase.push(PHRASES[i][j])
j++
TEXT_DISPLAY.innerHTML = current_phrase.join("")
}
if (is_deleting && j <= PHRASES[i].length) {
current_phrase.pop(PHRASES[i][j])
j--
TEXT_DISPLAY.innerHTML = current_phrase.join("")
}
if (j == PHRASES[i].length) {
is_end = true
is_deleting = true
}
if (is_deleting && j === 0) {
current_phrase = []
is_deleting = false
i++
if (i === PHRASES.length) {
i = 0
}
}
}
const TYPING_SPEED = Math.random() * 300
const DELETE_SPEED = Math.random() * 100
const TIME = is_end ? 2000 : is_deleting ? DELETE_SPEED : TYPING_SPEED
setTimeout(typewriter, TIME)
}
window.addEventListener("load", typewriter)

8
templates/layout.html
View File

@ -5,6 +5,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="color-scheme" content="dark light"> <meta name="color-scheme" content="dark light">
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" /> <link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<title> <title>
{% block title %}{% endblock %} {% block title %}{% endblock %}
</title> </title>
@ -18,8 +22,6 @@
<script src="{% static 'main/js/navigation.js' %}" defer></script> <script src="{% static 'main/js/navigation.js' %}" defer></script>
</head> </head>
<body> <body>
<div class="page-container">
<div class="content-wrap">
<header class="primary-header flex"> <header class="primary-header flex">
<div> <div>
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">
@ -47,7 +49,5 @@
<main> <main>
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
</div>
</div>
</body> </body>
</html> </html>

13
templates/main/index.html
View File

@ -5,16 +5,19 @@
<link rel="stylesheet" <link rel="stylesheet"
type="text/css" type="text/css"
href="{% static 'main/css/index.css' %}"/> href="{% static 'main/css/index.css' %}"/>
<script src="{% static 'main/js/typewriter.js' %}" defer></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="center"> <div id="landing">
<div class="landing-title">
<div class="">
<img src="https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif" <img src="https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif"
alt="Hello there."> alt="Hello there.">
<h1> </div>
<h1 class="text">
I&#39;m <span class="highlight">Kristofers Solo</span> I&#39;m <span class="highlight">Kristofers Solo</span>
</h1> </h1>
<h1> <h1 id="text" class="text"></h1>
<span id="text-rotate">Jedi</span> </div>
</h1>
</div> </div>
{% endblock %} {% endblock %}