readme update, cleanup files

arron21 · Dec 4, 2024 · 5a58295 · 5a58295
1 parent dbfbdfd
commit 5a58295
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 99 deletions.
diff --git 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
@@ -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/[email protected]
+
+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
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -4,23 +4,19 @@
 
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
-import * as $api_joke from "./routes/api/joke.ts";
-import * as $greet_name_ from "./routes/greet/[name].tsx";
+import * as $about_index from "./routes/about/index.tsx";
 import * as $index from "./routes/index.tsx";
-import * as $Counter from "./islands/Counter.tsx";
 import * as $Gallery from "./islands/Gallery.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
-    "./routes/api/joke.ts": $api_joke,
-    "./routes/greet/[name].tsx": $greet_name_,
+    "./routes/about/index.tsx": $about_index,
     "./routes/index.tsx": $index,
   },
   islands: {
-    "./islands/Counter.tsx": $Counter,
     "./islands/Gallery.tsx": $Gallery,
   },
   baseUrl: import.meta.url,

diff --git a/img-opt.js b/img-opt.js
@@ -1,6 +1,8 @@
 import { Image } from "https://deno.land/x/[email protected]/mod.ts";
 import { join } from "https://deno.land/[email protected]/path/mod.ts";
 
+const imgQuality = 70;
+const thumbWidth = 300;
 const inputDir = join(Deno.cwd(), "static", "gallery");
 const outputDir = join(Deno.cwd(), "static", "gallery-opt");
 
@@ -47,7 +49,7 @@ async function optimizeImages() {
 async function optimizeImgForWeb(
   inputPath,
   outputPath,
-  quality = 70,
+  quality = imgQuality,
   fileName,
 ) {
   try {
@@ -58,7 +60,8 @@ async function optimizeImgForWeb(
     const image = await Image.decode(inputBuffer);
     const widthFull = image.width;
     const heightFull = image.height;
-    image.resize(300, Image.RESIZE_AUTO);
+
+    image.resize(thumbWidth, Image.RESIZE_AUTO);
 
     const outputImg = await image.encodeJPEG(quality);
 

diff --git a/islands/Counter.tsx b/islands/Counter.tsx
diff --git 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<any>) {
   useEffect(() => {

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -6,7 +6,7 @@ export default function Error404() {
       <Head>
         <title>404 - Page not found</title>
       </Head>
-      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="px-4 py-8 mx-auto">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <img
             class="my-6"

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -7,9 +7,23 @@ export default function App({ Component }: PageProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>photo-ez</title>
         <link rel="stylesheet" href="/styles.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com"></link>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        </link>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+          rel="stylesheet"
+        >
+        </link>
       </head>
-      <body>
-        <Component />
+      <body class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white leading-loose">
+        <div class="px-4 py-8 mx-auto ">
+          <nav class="text-center flex gap-3 justify-center">
+            <a href="/">Home</a>
+            <a href="/about">About</a>
+          </nav>
+          <Component />
+        </div>
       </body>
     </html>
   );

diff --git a/routes/about/index.tsx b/routes/about/index.tsx
@@ -0,0 +1,15 @@
+import { RouteContext } from "$fresh/server.ts";
+
+export default function MyPage(req: Request, ctx: RouteContext) {
+  return (
+    <>
+      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+        <h1 class="text-4xl py-4">
+            About
+        </h1>
+        <p>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.</p>
+<p>I try to capture the balance between our human existence and the existence of Earth itself.</p>
+      </div>
+    </>
+  );
+}
diff --git a/routes/api/joke.ts b/routes/api/joke.ts
diff --git a/routes/greet/[name].tsx b/routes/greet/[name].tsx
diff --git 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 (
     <>
-      <Head>
-        <link rel="preconnect" href="https://fonts.googleapis.com"></link>
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        </link>
-        <link
-          href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
-          rel="stylesheet"
-        >
-        </link>
-      </Head>
-      <div class="px-4 py-8 mx-auto bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
-        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
-          <h1 class="text-4xl py-4">
-            {SiteName ?? "Arron McCrory Photography"}
-          </h1>
-          <Gallery />
-        </div>
+      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+        <h1 class="text-4xl py-4">
+          {SiteName ?? "Photography Portfolio"}
+        </h1>
+        <Gallery />
       </div>
     </>
   );

diff --git a/static/styles.css b/static/styles.css
@@ -2,18 +2,34 @@
 @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;
   font-weight: 400;
   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;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,5 +40,3 @@ jobs:
		project: "arronmccror-photography-89"
		entrypoint: "main.ts"
		root: ""