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

Lekcja 3 czy coś

Browse Source
This commit is contained in:
Dark Steveneq
2025-12-08 20:48:40 +01:00
parent 4a73c7e990
commit 87f330fbba
13 changed files with 142 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Header.astro
View File

@@ -1,9 +1,9 @@
--- ---
import { House, Image, Phone } from '@lucide/astro' import { House, Image, Phone, Table2 } from '@lucide/astro'
--- ---
<header class=" <header style="animation: wsun 0.1s ease-in-out" class="
flex flex-row justify-between flex flex-row justify-between z-20
mb-3 py-0.5 px-3 rounded-md h-14 mb-3 py-0.5 px-3 rounded-md h-14
bg-slate-100 drop-shadow-slate-300 drop-shadow-md bg-slate-100 drop-shadow-slate-300 drop-shadow-md
"> ">
@@ -24,6 +24,10 @@ import { House, Image, Phone } from '@lucide/astro'
<House class="mx-auto" stroke-width={1} /> <House class="mx-auto" stroke-width={1} />
Strona główna Strona główna
</a> </a>
<a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/uslugi">
<Table2 class="mx-auto" stroke-width={1} />
Uslugi
</a>
<a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/portfolio"> <a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/portfolio">
<Image class="mx-auto" stroke-width={1} /> <Image class="mx-auto" stroke-width={1} />
Portfolio Portfolio

14
src/content.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders';
const uslugi = defineCollection({
loader: glob({ pattern: "*.md", base: "./src/content/uslugi" }),
schema: z.object({
tytul: z.string().default("Domyślny tytuł"),
cena: z.number().default(-1),
jednostka: z.string().optional()
})
});
export const collections = { uslugi };

4
src/content/uslugi/dron.md Normal file
View File

@@ -0,0 +1,4 @@
---
tytul: Ujęcia z drona
---
Nie wiem co tutaj dać

5
src/content/uslugi/plener.md Normal file
View File

@@ -0,0 +1,5 @@
---
tytul: Zdjęcia plenerowe
cena: 30
---
Nie wiem co tu dać ale daje tu coś żeby coś było (logika)

4
src/content/uslugi/slublne.md Normal file
View File

@@ -0,0 +1,4 @@
---
tytul: Zdjęcia ślubne
---
lorem

17
src/layouts/Layout.astro
View File

@@ -1,6 +1,8 @@
--- ---
import Header from '../components/Header.astro' import Header from '../components/Header.astro'
import '../styles/global.css' import '../styles/global.css'
const { tytul, bezTla } = Astro.props
--- ---
<!doctype html> <!doctype html>
@@ -8,23 +10,22 @@ import '../styles/global.css'
m-0 w-svw h-svh m-0 w-svw h-svh
text-slate-950 bg-slate-200 select-none text-slate-950 bg-slate-200 select-none
" lang="pl"> " lang="pl">
<!-- dark:text-slate-100 dark:bg-slate-950 -->
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Astro Basics</title> <title>{tytul ? `${tytul} - Jakiś Fotograf` : 'Jakiś Fotograf'}</title>
</head> </head>
<body class="flex flex-col p-2"> <body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2">
<Header /> <Header />
<main class=" <main class=`
grow grow
2xl:mx-auto p-4 rounded-md mx-auto p-4 rounded-md
w-[92rem] max-w-full w-368 max-w-full
bg-slate-100 drop-shadow-slate-300 drop-shadow-md ${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}
block block
"> `>
<slot /> <slot />
</main> </main>
</body> </body>

24
src/pages/index.astro
View File

@@ -2,5 +2,27 @@
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
--- ---
<Layout> <Layout bezTla={true}>
<section class="lg:mx-10 flex flex-row justify-between">
<!-- "portret" -->
<div class="text-white bg-black drop-shadow-slate-300 drop-shadow-md rounded-md p-4 aspect-[2.5/4] w-96 hidden lg:flex">
<span class="m-auto">[ktoś]</span>
</div>
<!-- Opis/Przyciski -->
<div class="text-center lg:text-right my-auto mx-auto lg:mx-10 flex flex-col justify-start lg:justify-end">
<h1 class="text-6xl my-3">Zdjęcia na zamówienie</h1>
<pre class="font-sans text-xl lg:mr-3 text-gray-600 mx-auto lg:ml-auto lg:max-w-xl text-wrap">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt vero ipsa eaque repellat sequi, repudiandae officiis, temporibus fugiat ducimus officia iure ad voluptate aspernatur dolorum commodi iste, voluptatum voluptatem odio.
</pre>
<a class="
mx-auto py-2.5 px-4 rounded-full
drop-shadow-slate-400 drop-shadow-md text-2xl bg-slate-900 text-slate-200
hover:bg-slate-800 transition-all hover:text-white hover:underline underline-offset-4 hover:drop-shadow-slate-300
" href="/uslugi">Dostępne usługi</a>
</div>
</section>
<section class="bg-slate-100 drop-shadow-slate-300 drop-shadow-md my-8 p-4 rounded-md">
<h2 class="text-center text-2xl">Nie wiem co tu daććććć</h2>
</section>
</Layout> </Layout>

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

@@ -1,12 +1,12 @@
--- ---
import { type AstroComponent } from "@lucide/astro" const { className, tytul, tresc, ikona } = Astro.props;
const { tytul, tresc, ikona } = Astro.props;
--- ---
<div class=" <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 rounded-md size-36 flex flex-col text-center p-1.5
bg-slate-100 drop-shadow-md drop-shadow-slate-400 bg-slate-100 drop-shadow-md drop-shadow-slate-400
"> ${className}
`}>
<slot/> <slot/>
<h3>{tytul}</h3> <h3>{tytul}</h3>
<h4 class="text-sm text-slate-700">{tresc}</h4> <h4 class="text-sm text-slate-700">{tresc}</h4>

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

@@ -4,16 +4,17 @@ import { Phone, Mail } from "@lucide/astro"
import Kafelek from "./Kafelek.astro" import Kafelek from "./Kafelek.astro"
--- ---
<Layout> <Layout tytul="Kontakt">
<h2 class="text-xl mb-1">Kontakt</h2> <h2 class="text-xl mb-1">Kontakt</h2>
<hr> <hr>
Sposoby kontaktu ze mną
<div class=" <div class="
flex flex-row flex-wrap m-3 gap-5 flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
"> ">
<Kafelek tytul="Telefon" tresc="+48 123 456 789"> <Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789">
<Phone class="grow m-auto" stroke-width={1} width={32}/> <Phone class="grow m-auto" stroke-width={1} width={32}/>
</Kafelek> </Kafelek>
<Kafelek tytul="E-mail" tresc="ja@jakisfotograf.xd"> <Kafelek className="delay-100" tytul="E-mail" tresc="ja@jakisfotograf.xd">
<Mail class="grow m-auto" stroke-width={1} width={32}/> <Mail class="grow m-auto" stroke-width={1} width={32}/>
</Kafelek> </Kafelek>
</div> </div>

2
src/pages/portfolio/Img.astro
View File

@@ -2,6 +2,6 @@
const { src } = Astro.props const { src } = Astro.props
--- ---
<div class="inline-block w-full"> <div style="animation: wsun 0.5s ease-in-out" class="inline-block w-full">
<img class="block w-full rounded-md" src={src}> <img class="block w-full rounded-md" src={src}>
</div> </div>

2
src/pages/portfolio/index.astro
View File

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro"
import Img from "./Img.astro" import Img from "./Img.astro"
--- ---
<Layout> <Layout tytul="Portfolio">
<h2 class="text-2xl mb-1">Portfolio</h2> <h2 class="text-2xl mb-1">Portfolio</h2>
<hr> <hr>
Przejrzyj galerie ze zdjęciami które dotychczas zrobiłem Przejrzyj galerie ze zdjęciami które dotychczas zrobiłem

35
src/pages/uslugi/index.astro Normal file
View File

@@ -0,0 +1,35 @@
---
import Layout from "../../layouts/Layout.astro"
import { getCollection, render } from 'astro:content';
const uslugi = await getCollection('uslugi');
---
<Layout tytul="Usługi">
<h2 class="text-2xl mb-1">Usługi</h2>
<hr>
<div class="flex flex-col gap-4">
Lista udzielanych przezemnie usług
{uslugi.map(async (usluga, indeks) => {
const { Content } = await render(usluga);
return (
<div class={`
rounded-md min-h-80 p-2
bg-slate-100 drop-shadow-md drop-shadow-slate-400
text-left flex-col
flex ${indeks % 2 ? "lg:flex-row-reverse lg:text-right" : "lg:flex-row lg:text-left"}
`}>
<div class="mx-auto text-white bg-black drop-shadow-slate-300 drop-shadow-md rounded-md p-4 aspect-[2.5/4] w-54 flex">
<span class="m-auto">[coś]</span>
</div>
<div class="grow lg:mx-4 flex flex-col">
<h1 class="text-2xl my-1">{usluga.data.tytul}</h1>
<div class="mx-0.5">
<h3 class="text-xl"><span class="font-medium">Cena:</span> <span class="text-gray-700">{usluga.data.cena}</span> zł</h3>
<Content />
</div>
</div>
</div>
)
})}
</div>
</Layout>

30
src/styles/global.css
View File

@@ -3,4 +3,34 @@
@theme { @theme {
--default-font-family: "Montserrat" --default-font-family: "Montserrat"
}
@keyframes wsun {
0% {
opacity: 40%;
transform: translate(0px, 4rem);
}
100% {
opacity: 100%;
transform: translate(0px, 0px);
}
}
@keyframes odwroc {
0% {
opacity: 40%;
scale: 0.85;
transform: rotateY(165deg);
}
100% {
opacity: 100%;
scale: 1;
transform: rotateY(0deg);
}
}
p {
font-family: var(--font-serif);
font-size: var(--text-lg);
line-height: var(--tw-leading), var(--text-lg--line-height);
} }