mirror of
https://github.com/kristoferssolo/kristofersxyz.git
synced 2025-10-21 18:30:34 +00:00
Created homepage
This commit is contained in:
Kristofers Solo
parent
e341a25a0b
commit
5152024002
@ -1,25 +1,24 @@
|
||||
h1,
|
||||
p {
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
#landing {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-text-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0;
|
||||
.landing-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
}
|
||||
img {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
--clr-secondary-hover: hsl(210, 3%, 73%);
|
||||
--clr-secondary-link: hsl(212, 100%, 67%);
|
||||
|
||||
font-family: roboto, helvetica, arial, sans-serif;
|
||||
font-family: "Roboto", arial, sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
@ -24,11 +24,8 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: var(--gap, 1rem);
|
||||
|
||||
45
static/main/js/typewriter.js
Normal file
45
static/main/js/typewriter.js
Normal 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)
|
||||
@ -5,6 +5,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<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>
|
||||
{% block title %}{% endblock %}
|
||||
</title>
|
||||
@ -18,36 +22,32 @@
|
||||
<script src="{% static 'main/js/navigation.js' %}" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<div class="content-wrap">
|
||||
<header class="primary-header flex">
|
||||
<div>
|
||||
<a href="{% url 'home' %}">
|
||||
<img src="{% static 'main/img/icons/logo.svg' %}" alt="logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<button class="mobile-nav-toggle"
|
||||
aria-controls="primary-navigation"
|
||||
aria-expanded="false">
|
||||
<span class="sr-only">Menu</span>
|
||||
</button>
|
||||
<nav>
|
||||
<ul id="primary-navigation"
|
||||
class="primary-navigation flex"
|
||||
data-visible="false">
|
||||
<li>
|
||||
<a href="{% url 'home' %}" class="bold">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'projects' %}" class="bold">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
<header class="primary-header flex">
|
||||
<div>
|
||||
<a href="{% url 'home' %}">
|
||||
<img src="{% static 'main/img/icons/logo.svg' %}" alt="logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mobile-nav-toggle"
|
||||
aria-controls="primary-navigation"
|
||||
aria-expanded="false">
|
||||
<span class="sr-only">Menu</span>
|
||||
</button>
|
||||
<nav>
|
||||
<ul id="primary-navigation"
|
||||
class="primary-navigation flex"
|
||||
data-visible="false">
|
||||
<li>
|
||||
<a href="{% url 'home' %}" class="bold">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'projects' %}" class="bold">Projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,16 +5,19 @@
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{% static 'main/css/index.css' %}"/>
|
||||
<script src="{% static 'main/js/typewriter.js' %}" defer></script>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="center">
|
||||
<img src="https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif"
|
||||
alt="Hello there.">
|
||||
<h1>
|
||||
I'm <span class="highlight">Kristofers Solo</span>
|
||||
</h1>
|
||||
<h1>
|
||||
<span id="text-rotate">Jedi</span>
|
||||
</h1>
|
||||
<div id="landing">
|
||||
<div class="landing-title">
|
||||
<div class="">
|
||||
<img src="https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif"
|
||||
alt="Hello there.">
|
||||
</div>
|
||||
<h1 class="text">
|
||||
I'm <span class="highlight">Kristofers Solo</span>
|
||||
</h1>
|
||||
<h1 id="text" class="text"></h1>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user