ghostfox/folporio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lekcja 4

Browse Source
This commit is contained in:
Dark Steveneq
2026-01-19 20:45:18 +01:00
parent 7538468b6e
commit 81c33e082c
4 changed files with 115 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Footer.astro
View File

@@ -1,6 +1,36 @@
---
---
<footer class="">
<footer class="flex flex-col bg-slate-100 py-4 px-6 min-h-48 rounded-t-2xl">
<div class="flex flex-row gap-2">
<ul>
<!-- <h4 class="mx-2 mb-0">Main</h4> -->
<li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/">Strona główna</a></li>
<li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/uslugi">Usługi</a></li>
<li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/portfolio">Portfolio</a></li>
<li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/kontakt">Kontakt</a></li>
</ul>
</div>
<hr class="my-1.5 border rounded-full border-slate-300" />
<div class="flex flex-row">
<!-- Credits -->
<div class="flex flex-col grow">
<span class="flex flex-row text-sm text-ctp-subtext0">
Strona stworzona przy użyciu
<a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" target="_blank" href="https://astro.build/">Astro</a>
i
<a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" target="_blank" href="https://tailwindcss.com/">Tailwind</a>
przez
<span class="ml-1 font-bold text-ctp-text">Dark Steveneq</span>.
</span>
<span class="flex flex-row text-sm text-ctp-subtext0">
Font:
<a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" href="https://fonts.google.com/specimen/Montserrat" target="_blank">Montserrat</a>
wydany na licencji
<a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" href="https://fonts.google.com/specimen/Montserrat/license" target="_blank">Open Font License</a>
</span>
</div>
</div>
</footer>

16
src/layouts/Layout.astro
View File

@@ -1,5 +1,6 @@
---
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import '../styles/global.css'
const { tytul, bezTla } = Astro.props
@@ -7,7 +8,7 @@ const { tytul, bezTla } = Astro.props
<!doctype html>
<html class="
m-0 w-svw h-svh
m-0 w-dvw h-dvh
text-slate-950 bg-slate-200 select-none
" lang="pl">
<head>
@@ -17,16 +18,17 @@ const { tytul, bezTla } = Astro.props
<meta name="generator" content={Astro.generator} />
<title>{tytul ? `${tytul} - Jakiś Fotograf` : 'Jakiś Fotograf'}</title>
</head>
<body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2">
<body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2 w-dvw h-dvh">
<Header />
<main class=`
flex flex-col
grow
mx-auto p-4 rounded-md
w-368 max-w-full
${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}
block
mb-10
`>
<slot />
<div class=`w-368 max-w-full mx-auto p-4 rounded-md ${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}`>
<slot />
</div>
</main>
<Footer />
</body>
</html>

18
src/pages/kontakt/Kafelek.astro
View File

@@ -1,13 +1,21 @@
---
const { className, tytul, tresc, ikona } = Astro.props;
const { className, tytul, tresc, link } = Astro.props;
---
<div style="animation: odwroc 1s cubic-bezier(0.16, 1, 0.3, 1)" class=`
rounded-md size-36 flex flex-col text-center p-1.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400
{link ? <a style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
rounded-md size-48 flex flex-col text-center p-1.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
${className}
`} href={link} target="_blank">
<slot/>
<h3 class="text-sky-600 hover:text-purple-600 transition-all">{tytul}</h3>
<h4 class="text-sm text-sky-800 hover:text-purple-800 transition">{tresc}</h4>
</a>: <div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
rounded-md size-48 flex flex-col text-center p-1.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
${className}
`}>
<slot/>
<h3>{tytul}</h3>
<h4 class="text-sm text-slate-700">{tresc}</h4>
</div>
</div>}

70
src/pages/kontakt/index.astro
View File

@@ -1,21 +1,71 @@
---
import Layout from "../../layouts/Layout.astro"
import { Phone, Mail } from "@lucide/astro"
import { Phone, Mail, Instagram, Facebook, Twitter } from "@lucide/astro"
import Kafelek from "./Kafelek.astro"
var alphabet: Record<string, string> = {
'a': '.-', 'b': '-...', 'c': '-.-.', 'd': '-..',
'e': '.', 'f': '..-.', 'g': '--.', 'h': '....',
'i': '..', 'j': '.---', 'k': '-.-', 'l': '.-..',
'm': '--', 'n': '-.', 'o': '---', 'p': '.--.',
'q': '--.-', 'r': '.-.', 's': '...', 't': '-',
'u': '..-', 'v': '...-', 'w': '.--', 'x': '-..-',
'y': '-.--', 'z': '--..', ' ': ' ',
'1': '.----', '2': '..---', '3': '...--', '4': '....-',
'5': '.....', '6': '-....', '7': '--...', '8': '---..',
'9': '----.', '0': '-----',
}
---
<Layout tytul="Kontakt">
<h2 class="text-xl mb-1">Kontakt</h2>
<hr>
Sposoby kontaktu ze mną
<div class="
flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
">
<Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789">
<Phone class="grow m-auto" stroke-width={1} width={32}/>
</Kafelek>
<Kafelek className="delay-100" tytul="E-mail" tresc="ja@jakisfotograf.xd">
<Mail class="grow m-auto" stroke-width={1} width={32}/>
</Kafelek>
<div class="flex flex-col my-1">
<div class="
flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
mx-auto
">
<Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789" link="https://www.ktoto.info/numer/123456789/">
<Phone class="grow m-auto" stroke-width={1} width={64}/>
</Kafelek>
<Kafelek className="delay-275" tytul="E-mail" tresc="ja@jakisfotograf.xd" link="mailto:ja@jakisfotograf.xd">
<Mail class="grow m-auto" stroke-width={1} width={64}/>
</Kafelek>
<Kafelek className="delay-675" tytul="Facebook" tresc="Jakiś fotograf" link="https://facebook.com/jakisfotografxd">
<Facebook class="grow m-auto" stroke-width={1} width={64}/>
</Kafelek>
<Kafelek className="delay-475" tytul="Instagram" tresc="@jakisfotografxd" link="https://instagram.com/jakisfotografxd">
<Instagram class="grow m-auto" stroke-width={1} width={64}/>
</Kafelek>
<Kafelek className="delay-100" tytul="Głąb" tresc="@jakisfotografxd" link="https://twitter.com/jakisfotografxd">
<Twitter class="grow m-auto" stroke-width={1} width={64}/>
</Kafelek>
</div>
</div>
Ewentualnie możesz mi wysłać list na dwa sposoby
<div class="flex flex-col my-1">
<div class="grid grid-cols-2 gap-4 mx-auto">
<div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
rounded-md w-96 flex flex-col py-2 px-2.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
`}>
<header class="text-xl font-semibold mb-1">Poczta polska</header>
Opcja dla tych dla których "kiedyś to było"
<p>Jakiś Fotograf</p>
<p>ul. Bekowa 2137</p>
<p>Zadupie dolne, Polska, Ziema, Droga mleczna</p>
</div>
<div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
rounded-md w-96 flex flex-col py-2 px-2.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
`}>
<header class="text-xl font-semibold mb-1">Gołąb pocztowy</header>
Opcja dla fanatyków ptaków, oto mój adres po gołębiemu:
<pre class="text-wrap">{btoa("\u009d¨Û\u0096,ìÏ'î¯\u0006¥\u0092ì.").split('').map(e => {
return alphabet[e.toLowerCase()].replaceAll(".", "frr ").replaceAll("-", "gurr ");
}).join(' ')}</pre>
</div>
</div>
</div>
</Layout>