mirror of
https://github.com/danbulant/design
synced 2026-05-19 04:08:46 +00:00
better contact info
This commit is contained in:
Daniel Bulant
parent
ca27819b84
commit
7464a45efb
7 changed files with 89 additions and 41 deletions
|
|
@ -1,68 +1,94 @@
|
|||
<script>
|
||||
import darkmode from "../stores/darkmode";
|
||||
import { DateTime } from "luxon";
|
||||
import { onMount } from "svelte";
|
||||
import Location from "./icons/location.svelte";
|
||||
|
||||
let time = DateTime.now();
|
||||
onMount(() => {
|
||||
let i = setInterval(() => {
|
||||
time = DateTime.now();
|
||||
}, 1000);
|
||||
return () => clearInterval(i);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="contact" class:dark={$darkmode}>
|
||||
<div class="address">Prague, Czech Republic</div>
|
||||
<div class="rounded-lg bg-dark-800 text-gray-300 max-w-100 m-auto mb-5 mt-15 p-5">
|
||||
<a href="https://goo.gl/maps/pM3bGyx9u5uBuqqv5" class="flex items-center justify-center w-full p-5" rel="noreferrer noopener" target="_blank">
|
||||
<div class="text-gray-400 h-7 w-7">
|
||||
<Location />
|
||||
</div>
|
||||
Prague, Czech Republic
|
||||
</a>
|
||||
<div class="profiles">
|
||||
<a href="https://github.com/danbulant" rel="noreferrer noopener" target="_blank">
|
||||
<div class="github" title="GitHub">
|
||||
<img src="/tech/github.png" alt="Github Icon" draggable={false}>
|
||||
<span>danbulant</span>
|
||||
<span class="platform">GitHub</span>
|
||||
<div class="main">
|
||||
<img src="/tech/github.png" alt="" draggable={false}>
|
||||
<span class="name">danbulant</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/danbulant/" rel="noreferrer noopener" target="_blank">
|
||||
<span class="platform">LinkedIn</span>
|
||||
<div class="main">
|
||||
<img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
|
||||
<span class="name">danbulant</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://discord.gg/XKPbz5xRuK" rel="noreferrer noopener" target="_blank">
|
||||
<div class="discord" title="Discord">
|
||||
<img src="/tech/discord.png" alt="Discord Icon" draggable={false}>
|
||||
<span>TechmandanCZ#3372</span>
|
||||
<span class="platform">Discord</span>
|
||||
<div class="main">
|
||||
<img src="/tech/discord.png" alt="" draggable={false}>
|
||||
<span class="name">TechmandanCZ#3372</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://twitter.com/danbulant" rel="noreferrer noopener" target="_blank">
|
||||
<span class="platform">Twitter</span>
|
||||
<div class="main">
|
||||
<img src="/tech/twitter.png" alt="" draggable={false}>
|
||||
<span class="name">danbulant</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:me@danbulant.eu">
|
||||
<span class="platform">Email</span>
|
||||
<div class="main">
|
||||
<img src="/tech/mail.svg" alt="" draggable={false}>
|
||||
<span class="name">me@danbulant.eu</span>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<div class="platform">Time</div>
|
||||
<div class="main">
|
||||
<img src="/tech/clock.svg" alt="" draggable={false}>
|
||||
<div class="name">GMT+1 - {time.setZone("Europe/Prague", { keepLocalTime: true }).toFormat("HH:mm:ss")}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.contact {
|
||||
text-align: center;
|
||||
margin: 120px 0;
|
||||
.platform {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
.address {
|
||||
color: #202020d5;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.dark .address {
|
||||
color: rgba(191, 191, 191, 0.835);
|
||||
.main {
|
||||
@apply flex gap-3 pt-1;
|
||||
}
|
||||
.profiles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 2em;
|
||||
@apply max-w-80 m-auto flex flex-col;
|
||||
}
|
||||
.profiles a {
|
||||
height: 100%;
|
||||
a:active, a:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
.profiles a div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a:active .main, a:hover .main {
|
||||
@apply underline;
|
||||
}
|
||||
.profiles a div span {
|
||||
padding: 0 5px;
|
||||
.profiles > * {
|
||||
@apply py-1.5;
|
||||
}
|
||||
.profiles a:hover {
|
||||
text-decoration: none;
|
||||
.profiles > div {
|
||||
@apply m-0 p-0;
|
||||
}
|
||||
img {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
}
|
||||
.github {
|
||||
color: #333333;
|
||||
}
|
||||
.dark .github {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
.discord {
|
||||
color: #7289DA;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1
src/lib/components/icons/location.svelte
Normal file
1
src/lib/components/icons/location.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg class="max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 574 B |
1
static/tech/clock.svg
Normal file
1
static/tech/clock.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM232 256C232 264 236 271.5 242.7 275.1L338.7 339.1C349.7 347.3 364.6 344.3 371.1 333.3C379.3 322.3 376.3 307.4 365.3 300L280 243.2V120C280 106.7 269.3 96 255.1 96C242.7 96 231.1 106.7 231.1 120L232 256z" fill="white"/></svg>
|
||||
|
After Width: | Height: | Size: 572 B |
BIN
static/tech/linkedin.png
Normal file
BIN
static/tech/linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
1
static/tech/mail.svg
Normal file
1
static/tech/mail.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z" fill="white"/></svg>
|
||||
|
After Width: | Height: | Size: 574 B |
BIN
static/tech/twitter.png
Normal file
BIN
static/tech/twitter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
19
windi.config.js
Normal file
19
windi.config.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// @ts-check - enable TS check for js file
|
||||
import { defineConfig } from 'windicss/helpers';
|
||||
|
||||
export default defineConfig({
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
github: "#fafafa",
|
||||
discord: "#7289da"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
require('windicss/plugin/filters'),
|
||||
require('windicss/plugin/aspect-ratio'),
|
||||
require('windicss/plugin/line-clamp'),
|
||||
]
|
||||
})
|
||||
Loading…
Reference in a new issue