From 5a58295320b8b05b44816929daa7172f5c369824 Mon Sep 17 00:00:00 2001 From: Arron McCrory Date: Wed, 4 Dec 2024 15:59:33 -0500 Subject: [PATCH] readme update, cleanup files --- .github/workflows/deploy.yml | 2 -- README.md | 24 +++++++++++++++--------- components/Button.tsx | 12 ------------ fresh.gen.ts | 8 ++------ img-opt.js | 7 +++++-- islands/Counter.tsx | 16 ---------------- islands/Gallery.tsx | 3 --- routes/_404.tsx | 2 +- routes/_app.tsx | 18 ++++++++++++++++-- routes/about/index.tsx | 15 +++++++++++++++ routes/api/joke.ts | 21 --------------------- routes/greet/[name].tsx | 5 ----- routes/index.tsx | 25 ++++++------------------- static/styles.css | 18 +++++++++++++++++- 14 files changed, 77 insertions(+), 99 deletions(-) delete mode 100644 components/Button.tsx delete mode 100644 islands/Counter.tsx create mode 100644 routes/about/index.tsx delete mode 100644 routes/api/joke.ts delete mode 100644 routes/greet/[name].tsx diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 3154fbf..a184449 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -40,5 +40,3 @@ jobs: project: "arronmccror-photography-89" entrypoint: "main.ts" root: "" - - diff --git a/README.md b/README.md index ec0e33e..3d9a8f2 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,22 @@ -# Fresh project +# Photograph Portfolio + +[![Made with Fresh](https://fresh.deno.dev/fresh-badge-dark.svg)](https://fresh.deno.dev) + +An easy to deploy photography portfolio -Your new Fresh project is ready to go. You can follow the Fresh "Getting -Started" guide here: https://fresh.deno.dev/docs/getting-started ### Usage -Make sure to install Deno: https://deno.land/manual/getting_started/installation +Put all your high resolution photo files into the `/static/gallery folder` + +run `deno task img` + +Your photo files will have thumbnails created using https://deno.land/x/imagescript@1.3.0 + +The thumbnails are saved to `/static/gallery-opt` -Then start the project: +A `static/gallery-opt/images.ts` will also be generated that contains an array of all your images. You can import the `images` variable from this file into any UI file. -``` -deno task start -``` +### Gallery.tsx +The Gallery.tsx island uses https://github.com/dimsemenov/photoswipe -This will watch the project directory and restart as necessary. diff --git a/components/Button.tsx b/components/Button.tsx deleted file mode 100644 index f1b80a0..0000000 --- a/components/Button.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { JSX } from "preact"; -import { IS_BROWSER } from "$fresh/runtime.ts"; - -export function Button(props: JSX.HTMLAttributes) { - return ( - -

{props.count}

- - - ); -} diff --git a/islands/Gallery.tsx b/islands/Gallery.tsx index 4efc732..4cf5e8e 100644 --- a/islands/Gallery.tsx +++ b/islands/Gallery.tsx @@ -1,10 +1,7 @@ import { JSX } from "preact"; import { useEffect } from "preact/hooks"; import { images } from "../static/gallery-opt/images.ts"; - -// import { IS_BROWSER } from "$fresh/runtime.ts"; import PhotoSwipeLightbox from "photoswipe/lightbox"; -// import 'photoswipe/style.css'; export function Gallery(props: JSX.HTMLAttributes) { useEffect(() => { diff --git a/routes/_404.tsx b/routes/_404.tsx index c63ae2e..e2efee8 100644 --- a/routes/_404.tsx +++ b/routes/_404.tsx @@ -6,7 +6,7 @@ export default function Error404() { 404 - Page not found -
+
photo-ez + + + + + - - + +
+ + +
); diff --git a/routes/about/index.tsx b/routes/about/index.tsx new file mode 100644 index 0000000..4a87a3c --- /dev/null +++ b/routes/about/index.tsx @@ -0,0 +1,15 @@ +import { RouteContext } from "$fresh/server.ts"; + +export default function MyPage(req: Request, ctx: RouteContext) { + return ( + <> +
+

+ About +

+

My photography is often what catches my eye. The juxtaposition of nature and human made objects is what I find interesting. We build tall sky scrapers so we can see beyond the trees. We build televisions so we can watch birds inside of a box.

+

I try to capture the balance between our human existence and the existence of Earth itself.

+
+ + ); +} diff --git a/routes/api/joke.ts b/routes/api/joke.ts deleted file mode 100644 index db17edd..0000000 --- a/routes/api/joke.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { FreshContext } from "$fresh/server.ts"; - -// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/ -const JOKES = [ - "Why do Java developers often wear glasses? They can't C#.", - "A SQL query walks into a bar, goes up to two tables and says “can I join you?”", - "Wasn't hard to crack Forrest Gump's password. 1forrest1.", - "I love pressing the F5 key. It's refreshing.", - "Called IT support and a chap from Australia came to fix my network connection. I asked “Do you come from a LAN down under?”", - "There are 10 types of people in the world. Those who understand binary and those who don't.", - "Why are assembly programmers often wet? They work below C level.", - "My favourite computer based band is the Black IPs.", - "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.", - "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.", -]; - -export const handler = (_req: Request, _ctx: FreshContext): Response => { - const randomIndex = Math.floor(Math.random() * JOKES.length); - const body = JOKES[randomIndex]; - return new Response(body); -}; diff --git a/routes/greet/[name].tsx b/routes/greet/[name].tsx deleted file mode 100644 index 9c06827..0000000 --- a/routes/greet/[name].tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { PageProps } from "$fresh/server.ts"; - -export default function Greet(props: PageProps) { - return
Hello {props.params.name}
; -} diff --git a/routes/index.tsx b/routes/index.tsx index fddac2d..e285f91 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -1,28 +1,15 @@ -import { Gallery } from "../islands/Gallery.tsx"; import "jsr:@std/dotenv/load"; -import { Head } from "$fresh/runtime.ts"; +import { Gallery } from "../islands/Gallery.tsx"; export default function Home() { const SiteName = Deno.env.get("SITE_NAME"); return ( <> - - - - - - - -
-
-

- {SiteName ?? "Arron McCrory Photography"} -

- -
+
+

+ {SiteName ?? "Photography Portfolio"} +

+
); diff --git a/static/styles.css b/static/styles.css index 3bee9c4..737d8ff 100644 --- a/static/styles.css +++ b/static/styles.css @@ -2,6 +2,11 @@ @tailwind components; @tailwind utilities; +:root { + --text-glow-color: hsl(211, 100%, 40%); + --text-glow-color-outer: hsl(216, 100%, 17%); +} + .edu-au-vic-wa-nt-pre-font { font-family: "Edu AU VIC WA NT Pre", cursive; font-optical-sizing: auto; @@ -9,11 +14,22 @@ font-style: normal; } body { - font-family: "Edu AU VIC WA NT Pre", cursive; + font-family: "Noto Sans", serif; font-weight: 400; } +h1,h2,h3 { + font-family: "Edu AU VIC WA NT Pre", cursive; + font-weight: 900; + text-shadow: -2px 0 10px rgba(0, 0, 0, 0.4), 0 0 5px var(--text-glow-color), + 0 0 10px var(--text-glow-color), 0 0 15px var(--text-glow-color), + 0 0 20px var(--text-glow-color), 0 0 25px var(--text-glow-color), + 0 0 30px var(--text-glow-color), 0 0 35px var(--text-glow-color-outer), + 0 0 50px var(--text-glow-color-outer), + 0 0 60px var(--text-glow-color-outer); +} .gallery-container { + margin-top: 1em; gap: 0; column-count: 4; }