diff --git a/src/components/EmailLink.astro b/src/components/EmailLink.astro new file mode 100644 index 0000000..d267701 --- /dev/null +++ b/src/components/EmailLink.astro @@ -0,0 +1,15 @@ +--- +interface Props { + email: string +} + +const { email } = Astro.props; + +function getMailtoLink(email: string) { + return "mailto:" + email.split('').map(char => `&#${char.charCodeAt(0)};`).join(''); +} +--- + +`} /> + +`} /> diff --git a/src/components/Emcrypt.astro b/src/components/Emcrypt.astro new file mode 100644 index 0000000..f0ccb42 --- /dev/null +++ b/src/components/Emcrypt.astro @@ -0,0 +1,53 @@ +--- +interface Props { + email: string +} + +const { email } = Astro.props; + +function generate(mail: string) { + let segments = randomSplit(mail), arr = []; + let i = 0; + while (segments.length) { + if ((i-2)%5 == 0 || (i)%2 == 0) arr.push(randAlphabet()); + else arr.push(segments.shift()); + i++; + } + return arr; +} + +function randomSplit(input: string) { + let segments = []; + while (input.length > 0) { + const segmentLength = Math.floor(Math.random() * 3) + 1; + segments.push(input.slice(0, segmentLength)); + input = input.slice(segmentLength); + } + return segments; +} + +function randAlphabet() { + let c = Math.floor(Math.random() * 3) + 1; + let chars = []; + for (let i = 0; i < c; i++) { + let rcc = Math.floor(Math.random() * 26) + 97; + chars.push(String.fromCharCode(rcc)); + } + return chars.join(''); +} + +const parts = generate(email); +--- + + + { parts.map(part => + { part } + ) } + + + diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 829a8da..f4ee592 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,5 +1,17 @@ +--- +import { Icon } from "astro-icon/components"; +--- +
- © CodeSpace { new Date().getFullYear() } +
+ © CodeSpace { new Date().getFullYear() } +
+
-
\ No newline at end of file + diff --git a/src/i18n/common/cs.json b/src/i18n/common/cs.json index 8eea1dd..98daf05 100644 --- a/src/i18n/common/cs.json +++ b/src/i18n/common/cs.json @@ -71,6 +71,8 @@ }, "contact": { "title": "Kontakt", - "description": "Způsoby, kterými nás můžete kontaktovat." + "description": "Způsoby, kterými nás můžete kontaktovat.", + "email": "Hlavní e-mail", + "noc": "Vše, co nepočká" } } \ No newline at end of file diff --git a/src/i18n/common/en.json b/src/i18n/common/en.json index f9ed2b5..b3eb509 100644 --- a/src/i18n/common/en.json +++ b/src/i18n/common/en.json @@ -71,6 +71,8 @@ }, "contact": { "title": "Contact", - "description": "Ways you can contact us." + "description": "Ways you can contact us.", + "email": "Main email address", + "noc": "Important things" } } \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index caddd32..01d3f38 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,24 +13,49 @@ const meta = {
-
-
-

-

{ t("home.header.description") }

-
+
+ +

+

{ t("home.header.description") }

-

{ t("home.services.title") }

-

{ t("home.services.description") }

+
+

{ t("home.services.title") }

+

{ t("home.services.description") }

+
{ [...public_services, ...invite_services].slice(0, 6).map(service => ) }
-

+

+ + diff --git a/src/pages/kontakt.astro b/src/pages/kontakt.astro index 7cd6c33..e096453 100644 --- a/src/pages/kontakt.astro +++ b/src/pages/kontakt.astro @@ -1,18 +1,39 @@ --- +import { Icon } from 'astro-icon/components'; +import EmailLink from '../components/EmailLink.astro'; +import Emcrypt from '../components/Emcrypt.astro'; import Layout from '../layouts/Layout.astro'; import { t } from "astro-i18n"; const meta = { title: t("contact.title"), - desc: t("contact.desc") + desc: t("contact.description") }; + +const emails = [ + {icon: "tabler:at", title: "contact.email", email: "hello@codespace.cz"}, + {icon: "tabler:headset", title: "contact.noc", email: "noc@codespace.cz"} +]; ---

{ t("contact.title") }

-

email: hello@codespace.cz

+

{ t("contact.description") }

+
+
+ { emails.map(item => + + +
+
{ t(item.title) }
+ +
+ + ) } +
+
diff --git a/src/styles/global.css b/src/styles/global.css index e370764..312a769 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -7,25 +7,12 @@ header.centered {text-align: center;} -header.main {background-image: radial-gradient(max(50vh, 60vw) at -30vw 70vh, var(--brand-color-2), transparent), radial-gradient(max(50vh, 60vw) at 110vw -10vh, var(--brand-color-1), transparent); background-color: #000;} - -header.main .grid {display: grid; grid-template-columns: 600px 1fr;} - -header.main h1 {font-weight: 900; font-size: 40px;} -header.main h1 span:nth-child(1) {color: var(--brand-color-1);} -header.main h1 span:nth-child(2) {color: var(--brand-color-2);} - -@media screen and (max-width: 650px) { - header.main > .inner {margin: 50px auto; text-wrap: balance; text-align: center;} - header.main .grid {grid-template-columns: 1fr;} - header.main h1 {font-size: 30px;} -} - /* Footer */ footer {border-top: 1px solid var(--border-color);} -footer > .inner {margin: 30px auto;} +footer > .inner {margin: 30px auto; display: flex; justify-content: space-between;} +footer a {text-decoration: none; display: flex; align-items: center; gap: 7px;} /* Services */ @@ -49,3 +36,14 @@ footer > .inner {margin: 30px auto;} .label {padding: 2px 10px; background-color: var(--alt-bg-color); border-radius: 50px;} + + +/* Contact */ + +.contacts {display: flex; flex-direction: column; gap: 20px;} +.contacts > a {display: flex; align-items: center; gap: 20px; text-decoration: none;} +.contacts > a > div {display: flex; flex-direction: column; gap: 8px; line-height: 1;} + +.contacts svg {font-size: 34px; background-color: var(--alt-bg-color); border-radius: 100%; padding: 15px;} +.contacts .title {color: var(--title-color); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;} +.contacts .emcrypt {font-size: 24px;}