mirror of
https://github.com/kristoferssolo/kristofersxyz.git
synced 2025-10-21 18:30:34 +00:00
Added social links
This commit is contained in:
Kristofers Solo
parent
9338a3477f
commit
99da301a45
@ -1,3 +1,10 @@
|
||||
:root {
|
||||
--clr-purple: hsl(251, 91%, 63%);
|
||||
--clr-blue: hsl(201, 85%, 55%);
|
||||
--clr-dark-blue: hsl(201, 100%, 35%);
|
||||
--clr-black: hsl(248, 16%, 10%);
|
||||
}
|
||||
|
||||
#landing {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@ -22,3 +29,61 @@ img {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-icons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
margin: 3rem auto 0 auto;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-link > i {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--clr-secondary);
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
border-radius: 100px;
|
||||
margin: auto 0.5rem 1rem 0.5rem;
|
||||
font-size: 2rem;
|
||||
width: 3rem;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.social-link:hover > i {
|
||||
background-color: var(--clr-secondary);
|
||||
}
|
||||
|
||||
.email:hover > i {
|
||||
color: var(--clr-purple);
|
||||
border: 2px solid var(--clr-purple);
|
||||
background-image: none;
|
||||
}
|
||||
.telegram:hover > i {
|
||||
color: var(--clr-blue);
|
||||
border: 2px solid var(--clr-blue);
|
||||
background-image: none;
|
||||
}
|
||||
.linkedin:hover > i {
|
||||
color: var(--clr-dark-blue);
|
||||
border: 2px solid var(--clr-dark-blue);
|
||||
background-image: none;
|
||||
}
|
||||
.github:hover > i {
|
||||
color: var(--clr-black);
|
||||
border: 2px solid var(--clr-black);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.social-link .label {
|
||||
display: none;
|
||||
color: var(--clr-secondary);
|
||||
}
|
||||
|
||||
.social-link:hover .label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
:root {
|
||||
font-size: 16px;
|
||||
--clr-primary: hsl(216, 28%, 7%);
|
||||
--clr-primary-100: hsla(215, 21%, 11%, 0.9);
|
||||
--clr-primary-200: hsla(215, 21%, 11%, 0.5);
|
||||
@ -68,6 +69,7 @@ body {
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-navigation {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
const PRIMARY_NAV = document.querySelector(".primary-navigation")
|
||||
const NAV_TOGGLE = document.querySelector(".mobile-nav-toggle")
|
||||
const EMAIL = document.querySelector(".mobile-nav-toggle")
|
||||
|
||||
NAV_TOGGLE.addEventListener("click", () => {
|
||||
const visibility = PRIMARY_NAV.getAttribute("data-visible") === "false"
|
||||
if (visibility) {
|
||||
EMAIL.addEventListener("click", () => {
|
||||
const VISIBILITY = PRIMARY_NAV.getAttribute("data-visible") === "false"
|
||||
if (VISIBILITY) {
|
||||
PRIMARY_NAV.setAttribute("data-visible", true)
|
||||
NAV_TOGGLE.setAttribute("aria-expanded", true)
|
||||
EMAIL.setAttribute("aria-expanded", true)
|
||||
} else {
|
||||
PRIMARY_NAV.setAttribute("data-visible", false)
|
||||
NAV_TOGGLE.setAttribute("aria-expanded", false)
|
||||
EMAIL.setAttribute("aria-expanded", false)
|
||||
}
|
||||
})
|
||||
|
||||
@ -34,6 +34,7 @@ typewriter = () => {
|
||||
if (i === PHRASES.length) {
|
||||
i = 0
|
||||
}
|
||||
TEXT_DISPLAY.innerHTML = " " // prevent element movement
|
||||
}
|
||||
}
|
||||
const TYPING_SPEED = Math.random() * 300
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
<link rel="stylesheet"
|
||||
type="text/css"
|
||||
href="{% static 'main/css/index.css' %}"/>
|
||||
<link href="{% static 'fontawesomefree/css/all.min.css' %}"
|
||||
rel="stylesheet"
|
||||
type="text/css">
|
||||
<script src="{% static 'main/js/typewriter.js' %}" defer></script>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
@ -17,7 +20,34 @@
|
||||
<h1 class="text">
|
||||
I'm <span class="highlight">Kristofers Solo</span>
|
||||
</h1>
|
||||
<h1 id="text" class="text"></h1>
|
||||
<h1 id="text" class="text"> </h1>
|
||||
<!-- ICONS -->
|
||||
<div class="landing-icons">
|
||||
<a class="social-link email"
|
||||
target="_blank"
|
||||
href="mailto:kristians.cagulis@pm.me">
|
||||
<i class="fa-sharp fa-solid fa-envelope"></i>
|
||||
<span class="label">E-Mail</span>
|
||||
</a>
|
||||
<a class="social-link telegram"
|
||||
target="_blank"
|
||||
href="https://telegram.me/kristofers_solo">
|
||||
<i class="fa-sharp fa-solid fa-paper-plane"></i>
|
||||
<span class="label">Telegram</span>
|
||||
</a>
|
||||
<a class="social-link linkedin"
|
||||
target="_blank"
|
||||
href="https://www.linkedin.com/in/kristians-francis-cagulis">
|
||||
<i class="fa-brands fa-linkedin-in"></i>
|
||||
<span class="label">LinkedIn</span>
|
||||
</a>
|
||||
<a class="social-link github"
|
||||
target="_blank"
|
||||
href="https://github.com/kristoferssolo">
|
||||
<i class="fa-brands fa-github "></i>
|
||||
<span class="label">GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user