├── .eleventy.js ├── .eleventyignore ├── .github └── FUNDING.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── netlify.toml ├── package-lock.json ├── package.json └── src ├── 404.njk ├── _data ├── gallery.json └── site.json ├── _includes ├── css │ ├── mixins │ │ └── screen-reader-only.css.map │ ├── reset.css │ ├── reset.css.map │ ├── style.css │ └── style.css.map ├── js │ └── email.js ├── layouts │ ├── base.njk │ └── main.njk ├── partials │ ├── feature-gallery.njk │ ├── footer.njk │ ├── home-gallery.njk │ └── nav.njk └── sass │ ├── mixins │ ├── _index.scss │ └── _screen-reader-only.scss │ ├── partials │ ├── _404.scss │ ├── _about.scss │ ├── _featured-image.scss │ ├── _footer.scss │ ├── _gallery.scss │ ├── _index.scss │ └── _nav.scss │ ├── reset.scss │ ├── style.scss │ └── vars │ ├── _index.scss │ └── _variables.scss ├── about.njk ├── favicon_data ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico └── site.webmanifest ├── feature.njk ├── gallery.njk ├── images ├── benches-1024.jpeg ├── benches-1024.webp ├── benches-320.jpeg ├── benches-320.webp ├── benches-360.jpeg ├── benches-360.webp ├── benches-480.jpeg ├── benches-480.webp ├── benches-640.jpeg ├── benches-640.webp ├── benches.jpg ├── boardwalk-1024.jpeg ├── boardwalk-1024.webp ├── boardwalk-320.jpeg ├── boardwalk-320.webp ├── boardwalk-360.jpeg ├── boardwalk-360.webp ├── boardwalk-480.jpeg ├── boardwalk-480.webp ├── boardwalk-640.jpeg ├── boardwalk-640.webp ├── boardwalk.jpg ├── business-center-1024.jpeg ├── business-center-1024.webp ├── business-center-320.jpeg ├── business-center-320.webp ├── business-center-360.jpeg ├── business-center-360.webp ├── business-center-480.jpeg ├── business-center-480.webp ├── business-center-640.jpeg ├── business-center-640.webp ├── business-center.jpg ├── empty-road-1024.jpeg ├── empty-road-1024.webp ├── empty-road-320.jpeg ├── empty-road-320.webp ├── empty-road-360.jpeg ├── empty-road-360.webp ├── empty-road-480.jpeg ├── empty-road-480.webp ├── empty-road-640.jpeg ├── empty-road-640.webp ├── empty-road.jpg ├── gas-station-1024.jpeg ├── gas-station-1024.webp ├── gas-station-320.jpeg ├── gas-station-320.webp ├── gas-station-360.jpeg ├── gas-station-360.webp ├── gas-station-480.jpeg ├── gas-station-480.webp ├── gas-station-640.jpeg ├── gas-station-640.webp ├── gas-station.jpg ├── glass-jar-1024.jpeg ├── glass-jar-1024.webp ├── glass-jar-320.jpeg ├── glass-jar-320.webp ├── glass-jar-360.jpeg ├── glass-jar-360.webp ├── glass-jar-480.jpeg ├── glass-jar-480.webp ├── glass-jar-640.jpeg ├── glass-jar-640.webp ├── glass-jar.jpg ├── highrises-night-1024.jpeg ├── highrises-night-1024.webp ├── highrises-night-320.jpeg ├── highrises-night-320.webp ├── highrises-night-360.jpeg ├── highrises-night-360.webp ├── highrises-night-480.jpeg ├── highrises-night-480.webp ├── highrises-night-640.jpeg ├── highrises-night-640.webp ├── highrises-night.jpg ├── highway-water-1024.jpeg ├── highway-water-1024.webp ├── highway-water-320.jpeg ├── highway-water-320.webp ├── highway-water-360.jpeg ├── highway-water-360.webp ├── highway-water-480.jpeg ├── highway-water-480.webp ├── highway-water-640.jpeg ├── highway-water-640.webp ├── highway-water.jpg ├── light-streaks-1024.jpeg ├── light-streaks-1024.webp ├── light-streaks-320.jpeg ├── light-streaks-320.webp ├── light-streaks-360.jpeg ├── light-streaks-360.webp ├── light-streaks-480.jpeg ├── light-streaks-480.webp ├── light-streaks-640.jpeg ├── light-streaks-640.webp ├── light-streaks.jpg ├── music-hall-1024.jpeg ├── music-hall-1024.webp ├── music-hall-320.jpeg ├── music-hall-320.webp ├── music-hall-360.jpeg ├── music-hall-360.webp ├── music-hall-480.jpeg ├── music-hall-480.webp ├── music-hall-640.jpeg ├── music-hall-640.webp ├── music-hall.jpg ├── terrace-window-1024.jpeg ├── terrace-window-1024.webp ├── terrace-window-320.jpeg ├── terrace-window-320.webp ├── terrace-window-360.jpeg ├── terrace-window-360.webp ├── terrace-window-480.jpeg ├── terrace-window-480.webp ├── terrace-window-640.jpeg ├── terrace-window-640.webp ├── terrace-window.jpg ├── water-drop-1024.jpeg ├── water-drop-1024.webp ├── water-drop-320.jpeg ├── water-drop-320.webp ├── water-drop-360.jpeg ├── water-drop-360.webp ├── water-drop-480.jpeg ├── water-drop-480.webp ├── water-drop-640.jpeg ├── water-drop-640.webp └── water-drop.jpg └── index.njk /.eleventy.js: -------------------------------------------------------------------------------- 1 | const CleanCSS = require("clean-css"); 2 | const { minify } = require("terser"); 3 | const metagen = require("eleventy-plugin-metagen"); 4 | const eleventyNavigation = require("@11ty/eleventy-navigation"); 5 | const Image = require("@11ty/eleventy-img"); 6 | 7 | module.exports = (eleventyConfig) => { 8 | 9 | eleventyConfig.addPlugin(metagen); 10 | eleventyConfig.addPlugin(eleventyNavigation); 11 | 12 | eleventyConfig.setTemplateFormats([ 13 | "md", 14 | "njk" 15 | ]); 16 | 17 | markdownTemplateEngine: "njk"; 18 | 19 | // Perform manual passthrough file copy to include directories in the build output _site 20 | eleventyConfig.addPassthroughCopy("./src/images"); 21 | eleventyConfig.addPassthroughCopy("./src/photos"); 22 | eleventyConfig.addPassthroughCopy("./src/css"); 23 | eleventyConfig.addPassthroughCopy("./src/js"); 24 | eleventyConfig.addPassthroughCopy("./src/favicon_data"); 25 | 26 | // Create css-clean CSS Minifier filter 27 | eleventyConfig.addFilter("cssmin", function (code) { 28 | return new CleanCSS({}).minify(code).styles; 29 | }); 30 | 31 | // Create terser JS Minifier async filter (Nunjucks) 32 | eleventyConfig.addNunjucksAsyncFilter("jsmin", async function ( 33 | code, 34 | callback 35 | ) { 36 | try { 37 | const minified = await minify(code); 38 | callback(null, minified.code); 39 | } catch (err) { 40 | console.log(`Terser error: ${err}`); 41 | callback(null, code); 42 | } 43 | }); 44 | 45 | // Configure image in a template paired shortcode 46 | eleventyConfig.addPairedShortcode("image", (srcSet, src, alt, sizes = "(min-width: 400px) 33.3vw, 100vw") => { 47 | return `${alt}`; 48 | }); 49 | 50 | // Configure outgoing Pexels anchor elements in a template paried shortcode 51 | eleventyConfig.addPairedShortcode("link", (href, cls = "image-link", rel = "noopener", target = "_blank", btnTxt = "Pexels") => { 52 | return `${btnTxt}`; 53 | }); 54 | 55 | // Get the current year 56 | eleventyConfig.addShortcode("getYear", function () { 57 | const year = new Date().getFullYear(); 58 | return year.toString(); 59 | }); 60 | 61 | eleventyConfig.addShortcode("img", async function ({ src, alt, width, height, widths, className, imgDir, sizes = "100vw"}) { 62 | if (alt === undefined) { 63 | throw new Error(`Missing \`alt\` on responsive image from: ${src}`); 64 | } 65 | 66 | const IMAGE_DIR = imgDir || "./src/images/"; 67 | const metadata = await Image(IMAGE_DIR + src, { 68 | widths: widths || [300, 480, 640, 1024], 69 | formats: ["webp", "jpeg"], 70 | urlPath: "/img/", 71 | outputDir: "_site/img", 72 | defaultAttributes: { 73 | loading: "lazy", 74 | decoding: "async" 75 | } 76 | }); 77 | 78 | let lowsrc = metadata.jpeg[0]; 79 | let highsrc = metadata.jpeg[metadata.jpeg.length - 1]; 80 | 81 | const sources = Object.values(metadata).map((imageFormat) => { 82 | const srcType = imageFormat[0].sourceType; 83 | const srcset = imageFormat.map(entry => entry.srcset).join(", "); 84 | return `` 85 | }).join("\n"); 86 | 87 | const img = ` 88 | ${alt}`; 97 | 98 | return `\n\t${sources}\n\t${img}`; 99 | }); 100 | 101 | return { 102 | dir: { 103 | input: "src", 104 | output: "_site", 105 | layouts: "_includes/layouts", 106 | includes: "_includes", 107 | }, 108 | templateFormats: ["md", "liquid", "njk"], 109 | passthroughFileCopy: true 110 | } 111 | }; -------------------------------------------------------------------------------- /.eleventyignore: -------------------------------------------------------------------------------- 1 | # Ignore Readme.md 2 | README.md 3 | 4 | # Ignore Contributing.md 5 | CONTRIBUTING.md -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [tannerdolby] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Eleventy site output 2 | _site 3 | 4 | # Node modules 5 | node_modules 6 | 7 | # DS Store 8 | .DS_store 9 | 10 | # Eleventy cached API results 11 | .cache -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | I welcome any and all community contributions to this project. Feel free to open an issue or submit a PR. I'd love to hear about any features or modifications you think the project should have. If you need more info about a feature or want to discuss things, feel free to open an issue with the `education` label. 4 | 5 | ## Setup 6 | 7 | 1. Clone this Repository: `git clone https://github.com/tannerdolby/eleventy-photo-gallery.git` 8 | 9 | 2. Navigate to project folder: `cd eleventy-photo-gallery` 10 | 11 | 3. Install dependencies: `npm install` 12 | 13 | 4. Update `_data/gallery.json` to include the appropiate image metadata for new images added. The fields after `linkToAuthor` must be provided in order to use the `respimg` utility for transforming images at build-time. 14 | 15 | ```json 16 | [ 17 | { 18 | "title": "Terrace with green plants on night street", 19 | "date": "October 20, 2020", 20 | "credit": "Photo by Aldiyar Seitkassymov", 21 | "linkToAuthor": "https://www.pexels.com/photo/terrace-with-green-plants-on-night-street-3100835/", 22 | "src": "terrace-window.jpg", 23 | "alt": "Terrace outside shop window with green plants and pink tree on night street", 24 | "imgDir": "./images/", 25 | "widths": [320, 640, 1024], 26 | "sizes": "(min-width: 450px) 33.3vw, 100vw", 27 | "class": "my-img", 28 | "width": 1024, 29 | "height": 768 30 | } 31 | ] 32 | ``` 33 | 34 | If you don't need unique `class`, `width`, and `height` attributes, then simply use the shortcode like this: 35 | 36 | ``` 37 | {% for image in gallery %} 38 | {% respimg 39 | image.src, 40 | image.alt, 41 | image.imgDir, 42 | image.widths, 43 | image.sizes, 44 | "showcase-img", 45 | "1024", 46 | "768" 47 | %}{% endrespimg %} 48 | {% endfor %} 49 | ``` 50 | 51 | ## Add new photos to the gallery 52 | 1. Get an image from somewhere (your file system, a stock photo website, etc) 53 | 2. Add the original image to the `/images/` folder. 54 | 3. Utilize `respimg` for transforming images. 55 | 4. This creates resized and reformatted `.jpeg` and `.webp` images from the original, which outputs to the `/images/` folder and generates responsive image markup using `` in the template where the shortcode was used. 56 | 57 | ## Run Eleventy! 58 | - Build: `npm run build` 59 | - Serve locally: `npm run serve` 60 | - Debug: `npm run debug` 61 | 62 | ## Submitting changes 63 | 64 | 1. Create a new branch or simply push from `master`: `git checkout -b ` 65 | 2. Add changes to staging area: `git add ` or to add everything thats been changed `git add .` 66 | 3. Commit changes: `git commit -m "Commit message"` 67 | 4. Push changes: `git push -u origin master` 68 | 5. Open a PR and wait for changes to be reviewed. 69 | 70 | ## Closing Remarks 71 | Thank you for all of your help and contributions! 🚀 72 | 73 | ### Notes (Not necessary to read in order to contribute) 74 | The eleventy configuration file, `.eleventy.js` is currently configured to use manual passthrough file copy to include the following directories in the `_site` output. 75 | 76 | - `./src/images/` 77 | - `./src/css/` 78 | - `./src/favicon_data/` 79 | - `./src/js/` 80 | 81 | ### Sources of Data 82 | * Global Data Files: 83 | * `_data/gallery.json` - Holds all image metadata 84 | * `_data/site.json` - Some site data 85 | 86 | ### Inline Minified CSS & JS 87 | - Packages used: 88 | - CSS Minifier - [clean-css](https://github.com/jakubpawlowicz/clean-css) 89 | - JS Minifier - [terser](https://github.com/terser/terser) 90 | 91 | ### HTML Validator 92 | All `.html` files have been validated using the [Nu HTML Checker](https://validator.w3.org/). 93 | 94 | ## Current Ranking on Speedlify 95 | 96 | #4 (Top 5) - 07/22/2021 - https://www.11ty.dev/speedlify 97 | 98 | ![Eleventy Leaderboards](https://user-images.githubusercontent.com/48612525/126697505-92204180-5546-44d2-be42-8210c5d39ca6.png) 99 | 100 | ### Lighthouse Audit Scores 101 | As of July 7, 2021 12:24pm (PST) 102 | 103 | #### Home page 104 | 105 | ![Home page Lighthouse Audit results](https://user-images.githubusercontent.com/48612525/126694878-8f42aad8-562e-4a76-bcc9-9feea3a9abdc.png) 106 | 107 | #### Feature page 108 | 109 | ![Feature page Lighthouse Audit results](https://user-images.githubusercontent.com/48612525/126696957-714cad9e-f764-4318-b510-f5c5453f3a24.png) 110 | 111 | #### Gallery Page 112 | 113 | ![Gallery page Lighthouse Audit results](https://user-images.githubusercontent.com/48612525/126696676-8c3bbc7d-9618-4cf6-accd-3b6172e7f2c1.png) 114 | 115 | #### About Page 116 | 117 | ![About page Lighthouse Audit results](https://user-images.githubusercontent.com/48612525/126697060-3e00a210-9772-4f6f-9738-2126755a0639.png) 118 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2025 Tanner Dolby @tannerdolby 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Eleventy Photo Gallery 2 | 3 | A starter site for creating your own photo or art gallery using the [Eleventy](https://github.com/11ty/eleventy) static site generator. 4 | 5 | - [Live demo](https://eleventy-gallery.netlify.app/) - View the project live 6 | - [Deploy on Netlify](https://app.netlify.com/) - Host your own custom gallery 7 | 8 | ## Getting Started 9 | Quickly generate a highly performant photo gallery from this template by clicking the green [Use Template](https://github.com/tannerdolby/eleventy-photo-gallery/generate) button. Creating a template repository provides the same directory structure and files as the original project. 10 | 11 | ## Features 12 | - Build-time image transformations and responsive image markup in templates using [@11ty/eleventy-img](https://www.11ty.dev/docs/plugins/image/) 13 | - High performance and scalable site with 100s across the board on each page using [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). Check it out on the [Eleventy Leaderboards](https://www.11ty.dev/speedlify/eleventy-gallery-netlify-app/) 14 | - Document metadata populated for social share functionality via [eleventy-plugin-metagen](https://github.com/tannerdolby/eleventy-plugin-metagen) 15 | - Home page with CSS grid displaying the gallery of images 16 | - Featured image pages with pagination 17 | - Gallery page 18 | - About me page 19 | - CSS preprocessor SCSS 20 | 21 | ## Local Setup 22 | 1. Clone this repo: `git clone https://github.com/tannerdolby/eleventy-photo-gallery.git` 23 | 2. Navigate to your local copy of the project: `cd eleventy-photo-gallery` 24 | 3. Install dependencies: `npm install` 25 | 4. Build: `npm run build` 26 | 5. Serve locally: `npm run start` or `npm run dev` 27 | 28 | ## Usage 29 | Add images to a folder such as `images` in your project and then supply an array of image metadata objects in a global data file `_data/gallery.json`: 30 | 31 | ```json 32 | { 33 | "title": "Highway covered in water", 34 | "date": "October 20, 2020", 35 | "credit": "Photo by Josh Hild", 36 | "linkToAuthor": "https://www.pexels.com/photo/highway-covered-in-water-2524368/", 37 | "src": "highway-water.jpg", 38 | "alt": "Skybridge over highway covered in water", 39 | "imgDir": "/images/" 40 | } 41 | ``` 42 | 43 | Once the image data is supplied within the global data file `_data/gallery.json` then the home page gallery images and featured image pages will display responsive images with `` using `@11ty/eleventy-img`. 44 | 45 | If you don't want to use a [global data file](https://www.11ty.dev/docs/data-global/) simply define the image metadata elsewhere such as in your templates front matter or directly inside the `img` shortcode. 46 | 47 | ### Creating responsive images in templates 48 | 49 | 1. Get a large image from somewhere (your file system, a stock photo website, etc) 50 | 2. Add the original image to the `src/images/` folder (or a folder of your choice) 51 | 3. Use the `img` shortcode to generate responsive image markup using `` 52 | 4. This performs image transformations at build-time, creating varying image dimensions in the specified formats (`.jpg`, `.webp`, etc) from the original image, which outputs to the specified `outputDir` in the `img` shortcode within `.eleventy.js` 53 | 54 | ```js 55 | {% img 56 | src="car.jpg", 57 | alt="A photo of a car", 58 | sizes="(max-width: 450px) 33.3vw, 100vw", 59 | className="my-img", 60 | %} 61 | ``` 62 | 63 | ## Compiling SCSS to CSS 64 | All of the projects CSS is compiled from Sass at build-time. The main SCSS file is `src/_includes/sass/style.scss` and thats where partials, mixins, and variables are loaded in with `@use` rules. 65 | 66 | If you want to change up the styles, you can write directly in `style.scss` for the changes to be compiled and used. 67 | 68 |
69 | 70 | Otherwise, if you want to continue using a "modular" approach with separate SCSS files. You follow these steps: 71 | 72 | 73 | 1. Create a new partial file in a specific directory ('sass/partials', 'sass/mixins', 'sass/vars') like `_some-file.scss` where the underscore prefixed at the beginning signals that the file is a [partial](https://sass-lang.com/documentation/at-rules/use#partials). These files are meant to be loaded as modules and not directly compiled. 74 | 75 | 2. Write Sass code and style away! 76 | 77 | 3. Load the stylesheets with a `@forward` rule in the [index files](https://sass-lang.com/documentation/at-rules/use#index-files) like `@forward "./some-file";` within `_index.scss` within the directory so they can be loaded with `@use` in the scss file that is compiled to CSS. 78 | 79 | 4. Load the stylesheets using `@use` rules from the directory in which you need a specific file. Therefore, if I created a new file within `sass/mixins` called `_url-short.scss` and wanted to load that file in `style.scss`, I would use `@use "mixins" as *` to load the stylesheets within the `mixins` directory as one module while also ensuring the module isn't loaded with a namespace. 80 | 81 | _Read more about loading members and namespaces here in [Sass docs](https://sass-lang.com/documentation/at-rules/use#loading-members)_ 82 | 83 |
84 | 85 | ## Contributing 86 | Feel free to report any issues and submit feature requests. I built this template for others to use so don't hesitate to let me know what you'd like to see added or modified. 87 | 88 | - Open an [issue](https://github.com/tannerdolby/11ty-photo-gallery/issues) for any bugs or feature requests! 89 | - Have a look at the [contributing guidelines](https://github.com/tannerdolby/11ty-photo-gallery/blob/master/CONTRIBUTING.md) before submitting a PR! 90 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | # Directory (relative to root of your repo) that contains the deploy-ready HTML files 3 | publish = "_site" 4 | 5 | # Build command 6 | command = "npm run build" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eleventy-photo-gallery", 3 | "version": "1.3.0", 4 | "description": "A photo gallery starter kit built with the static site generator Eleventy", 5 | "main": ".eleventy.js", 6 | "scripts": { 7 | "build": "npm-run-all build:*", 8 | "start": "npm-run-all watch:*", 9 | "dev": "npm-run-all --parallel watch:*", 10 | "build:eleventy": "npx @11ty/eleventy", 11 | "watch:eleventy": "npx @11ty/eleventy --serve", 12 | "build:sass": "sass src/_includes/sass:src/_includes/css", 13 | "watch:sass": "sass --watch src/_includes/sass:src/_includes/css", 14 | "debug": "DEBUG=* @11ty/eleventy" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/tannerdolby/eleventy-photo-gallery.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/tannerdolby/eleventy-photo-gallery/issues" 22 | }, 23 | "author": { 24 | "name": "Tanner Dolby", 25 | "url": "https://github.com/tannerdolby" 26 | }, 27 | "keywords": [ 28 | "Photo Gallery", 29 | "Photo Gallery Template", 30 | "Eleventy", 31 | "11ty" 32 | ], 33 | "homepage": "https://github.com/tannerdolby/eleventy-photo-gallery#readme", 34 | "license": "MIT", 35 | "dependencies": { 36 | "@11ty/eleventy": "^2.0.1", 37 | "@11ty/eleventy-img": "^4.0.2", 38 | "@11ty/eleventy-navigation": "^0.3.3", 39 | "clean-css": "^4.2.3", 40 | "eleventy-plugin-metagen": "^1.8.3", 41 | "npm-run-all": "^4.1.5", 42 | "sass": "^1.39.0", 43 | "terser": "^5.7.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/404.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Oops, Page Not Found! 3 | meta_desc: Oh no! You have requested a page that does not exist. 4 | url: https://eleventy-gallery.netlify.app 5 | img: /images/highway-water.jpg 6 | alt: Terrace outside shop window with green plants and pink tree on night street 7 | cardType: summary_large_image 8 | layout: main.njk 9 | permalink: 404.html 10 | --- 11 | 12 |
13 |

🚧 {{ title }}

14 |

Oh no! You've encountered a page that does not exist. This tends to happen when someone shares a broken or mistyped link.

15 | 19 |
-------------------------------------------------------------------------------- /src/_data/gallery.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Terrace with green plants on night street", 4 | "date": "October 20, 2020", 5 | "credit": "Photo by Aldiyar Seitkassymov", 6 | "linkToAuthor": "https://www.pexels.com/photo/terrace-with-green-plants-on-night-street-3100835/", 7 | "src": "terrace-window.jpg", 8 | "alt": "Terrace outside shop window with green plants and pink tree on night street", 9 | "imgDir": "/images/" 10 | }, 11 | { 12 | "title": "Highway covered in water", 13 | "date": "October 20, 2020", 14 | "credit": "Photo by Josh Hild", 15 | "linkToAuthor": "https://www.pexels.com/photo/highway-covered-in-water-2524368/", 16 | "src": "highway-water.jpg", 17 | "alt": "Skybridge over highway covered in water", 18 | "imgDir": "/images/" 19 | }, 20 | { 21 | "title": "Brown painted wall on dim light", 22 | "date": "October 18, 2020", 23 | "credit": "Photo by Lukas Hartmann", 24 | "linkToAuthor": "https://www.pexels.com/photo/brown-painted-wall-on-dim-light-1055613/", 25 | "src": "benches.jpg", 26 | "alt": "Brown painted wall with two benches and dim light above", 27 | "imgDir": "/images/" 28 | }, 29 | { 30 | "title": "Red light streaks across a street intersection at night", 31 | "date": "October 16, 2020", 32 | "credit": "Photo by Jan Kopriva", 33 | "linkToAuthor": "https://www.pexels.com/photo/light-streaks-3290601/", 34 | "src": "light-streaks.jpg", 35 | "alt": "Red light streaks across a street intersection at night", 36 | "imgDir": "/images/" 37 | }, 38 | { 39 | "title": "Abstract architecture black and white boardwalk", 40 | "date": "October 14, 2020", 41 | "credit": "Photo by Pixabay", 42 | "linkToAuthor": "https://www.pexels.com/photo/abstract-architecture-black-and-white-boardwalk-262367/", 43 | "src": "boardwalk.jpg", 44 | "alt": "Abstract architecture black and white boardwalk with glass like floor", 45 | "imgDir": "/images/" 46 | }, 47 | { 48 | "title": "Person holding glass mason jar with night sky background", 49 | "date": "October 12, 2020", 50 | "credit": "Photo by Rakicevic Nenad", 51 | "linkToAuthor": "https://www.pexels.com/photo/silhouette-of-person-holding-glass-mason-jar-1274260/", 52 | "src": "glass-jar.jpg", 53 | "alt": "Person holding glass mason jar with night sky background", 54 | "imgDir": "/images/" 55 | }, 56 | { 57 | "title": "Radio City Music Hall During Night Time", 58 | "date": "October 11, 2020", 59 | "credit": "Photo by Bao Dang", 60 | "linkToAuthor": "https://www.pexels.com/photo/radio-city-music-hall-during-night-time-3700369/", 61 | "src": "music-hall.jpg", 62 | "alt": "Music hall with bright lights during night time", 63 | "imgDir": "/images/" 64 | }, 65 | { 66 | "title": "City Building Office Architecture", 67 | "date": "October 10, 2020", 68 | "credit": "Photo by Jayson Marquez", 69 | "linkToAuthor": "https://www.pexels.com/photo/city-building-office-architecture-4850412/", 70 | "src": "business-center.jpg", 71 | "alt": "Tall highrise office building with winding architecture", 72 | "imgDir": "/images/" 73 | }, 74 | { 75 | "title": "Buildings during nighttime", 76 | "date": "October 9, 2020", 77 | "credit": "Photo by Aleksandar Pasaric", 78 | "linkToAuthor": "https://www.pexels.com/photo/photo-of-buildings-during-nighttime-2603464/", 79 | "src": "highrises-night.jpg", 80 | "alt": "Buildings during nighttime with orange lighting and water below", 81 | "imgDir": "/images/" 82 | }, 83 | { 84 | "title": "Water Droplet Digital Wallpaper", 85 | "date": "October 11, 2020", 86 | "credit": "Photo by Sourav Mishra", 87 | "linkToAuthor": "https://www.pexels.com/photo/water-droplet-digital-wallpaper-1100946/", 88 | "src": "water-drop.jpg", 89 | "alt": "Rain drop bursting water particles upwards into the air", 90 | "imgDir": "/images/" 91 | }, 92 | { 93 | "title": "Man walking on the empty street", 94 | "date": "October 15, 2020", 95 | "credit": "Photo by Marco Trinidad", 96 | "linkToAuthor": "https://www.pexels.com/photo/photo-of-empty-road-during-daytime-3295140/", 97 | "src": "empty-road.jpg", 98 | "alt": "An empty road during daytime with fog in the background", 99 | "imgDir": "/images/" 100 | }, 101 | { 102 | "title": "Gasoline station during nighttime", 103 | "date": "October 23, 2020", 104 | "credit": "Photo by Artem Saranin", 105 | "linkToAuthor": "https://www.pexels.com/photo/gasoline-station-during-nighttime-1453781/", 106 | "src": "gas-station.jpg", 107 | "alt": "Gasoline station during nighttime with glowing red roof lights", 108 | "imgDir": "/images/" 109 | } 110 | ] -------------------------------------------------------------------------------- /src/_data/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": { 3 | "firstName": "John", 4 | "lastName": "Smith", 5 | "email": "foobar@gmail.com", 6 | "twitterHandle": "tannerdolby", 7 | "about": "Freelance photographer interested in film and cinematography" 8 | }, 9 | "socials": { 10 | "twitter": "https://twitter.com/tannerdolby", 11 | "linkedin": "https://linkedin.com/in/tanner-dolby", 12 | "dribbble": "https://dribbble.com/tannerdolby", 13 | "github": "https://github.com/tannerdolby" 14 | }, 15 | "pageMetadata": { 16 | "home": { 17 | "content": "A photo gallery template with stock photos provided from Pexels. Add or remove images from the grid and customize your own image gallery!" 18 | }, 19 | "gallery": { 20 | "content": "A collection of images from John Smith's gallery." 21 | }, 22 | "featured": { 23 | "content": "from John Smith's gallery." 24 | }, 25 | "about": { 26 | "content": "A page about John Smith, and photography. This template is currently the default version so add your own about me page info here." 27 | } 28 | 29 | } 30 | } -------------------------------------------------------------------------------- /src/_includes/css/mixins/screen-reader-only.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"screen-reader-only.css"} -------------------------------------------------------------------------------- /src/_includes/css/reset.css: -------------------------------------------------------------------------------- 1 | /* Credit: https://hankchizljaw.com/wrote/a-modern-css-reset/ */ 2 | /* Box sizing rules */ 3 | *, 4 | *::before, 5 | *::after { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* Remove default padding */ 10 | ul[class], 11 | ol[class] { 12 | padding: 0; 13 | } 14 | 15 | /* Remove default margin */ 16 | body, 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | h5, 22 | p, 23 | ul[class], 24 | ol[class], 25 | li, 26 | figure, 27 | figcaption, 28 | blockquote, 29 | dl, 30 | dd { 31 | margin: 0; 32 | } 33 | 34 | /* Set core body defaults */ 35 | body { 36 | min-height: 100vh; 37 | scroll-behavior: smooth; 38 | text-rendering: optimizeSpeed; 39 | line-height: 1.5; 40 | } 41 | 42 | /* Remove list styles on ul, ol elements with a class attribute */ 43 | ul[class], 44 | ol[class] { 45 | list-style: none; 46 | } 47 | 48 | /* A elements that don't have a class get default styles */ 49 | a:not([class]) { 50 | text-decoration-skip-ink: auto; 51 | } 52 | 53 | /* Make images easier to work with */ 54 | img { 55 | max-width: 100%; 56 | display: block; 57 | } 58 | 59 | /* Natural flow and rhythm in articles by default */ 60 | article > * + * { 61 | margin-top: 1em; 62 | } 63 | 64 | /* Inherit fonts for inputs and buttons */ 65 | input, 66 | button, 67 | textarea, 68 | select { 69 | font: inherit; 70 | } 71 | 72 | /* Remove all animations and transitions for people that prefer not to see them */ 73 | @media (prefers-reduced-motion: reduce) { 74 | /* We are relaxing the `declaration-no-important` here 75 | because we want to ensure that code further down the 76 | cascade will adhere to this accessibility enhancement */ 77 | /* stylelint-disable declaration-no-important */ 78 | * { 79 | animation-duration: 0.01ms !important; 80 | animation-iteration-count: 1 !important; 81 | transition-duration: 0.01ms !important; 82 | scroll-behavior: auto !important; 83 | } 84 | } 85 | 86 | /*# sourceMappingURL=reset.css.map */ 87 | -------------------------------------------------------------------------------- /src/_includes/css/reset.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/reset.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AAAA;AAAA;EAGE;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAeE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AACA;AACE;AAAA;AAAA;AAGA;EACA;IACE;IACA;IACA;IACA","file":"reset.css"} -------------------------------------------------------------------------------- /src/_includes/css/style.css: -------------------------------------------------------------------------------- 1 | header .nav-main { 2 | margin: 1rem auto 0 auto; 3 | max-width: 1100px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | padding: 0.9rem 1.5rem; 8 | } 9 | header .nav-main a:hover { 10 | background: rgb(233, 233, 233); 11 | text-decoration: none; 12 | } 13 | header .nav-main .nav-list { 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | padding-left: 0; 18 | list-style: none; 19 | border-top: 1px solid lightgray; 20 | border-bottom: 1px solid lightgray; 21 | width: 100%; 22 | } 23 | header .nav-main .nav-list li { 24 | margin: 0 1rem; 25 | } 26 | header .nav-main .nav-list a:hover { 27 | background: rgb(233, 233, 233); 28 | background: rgb(237, 237, 237); 29 | text-decoration: none; 30 | } 31 | header .nav-main .nav-list .link { 32 | color: #212121; 33 | padding: 0.8rem 0.75rem; 34 | margin: 0 0.4rem; 35 | font-size: 16px; 36 | font-size: clamp(1.0625rem, 4vw, 1.2rem); 37 | text-decoration: none; 38 | display: block; 39 | } 40 | header .nav-main .nav-list .link:first-child { 41 | margin-left: 0; 42 | } 43 | header .nav-main .home-button { 44 | text-decoration: none; 45 | color: #212121; 46 | padding-right: 0.5rem; 47 | font-size: 24px; 48 | font-size: clamp(1.3rem, 4vw, 1.5rem); 49 | font-weight: 500; 50 | } 51 | header .intro { 52 | display: flex; 53 | justify-content: space-between; 54 | margin: 2rem auto 1rem auto; 55 | max-width: 1100px; 56 | padding: 0 1.5rem; 57 | } 58 | header .intro div p { 59 | color: #333; 60 | } 61 | header .intro div:first-child { 62 | margin-right: 2rem; 63 | } 64 | header .intro .home-button { 65 | display: block; 66 | font-size: 28px; 67 | font-size: clamp(26px, 4vw, 28px); 68 | color: #222; 69 | margin-bottom: 14px; 70 | } 71 | header .intro .hire-me { 72 | border: 1px solid #111; 73 | margin-top: 3px; 74 | padding: 0.5rem 1rem; 75 | text-decoration: none; 76 | height: fit-content; 77 | height: -moz-fit-content; 78 | border-radius: 3px; 79 | background: #1e262b; 80 | color: #fff; 81 | font-weight: 400; 82 | white-space: nowrap; 83 | } 84 | header .intro .hire-me:hover { 85 | background: #1a1f24; 86 | } 87 | 88 | .main-gallery { 89 | max-width: 1100px; 90 | margin: 3rem auto 0 auto; 91 | } 92 | 93 | .gallery-h1 { 94 | text-align: center; 95 | margin-bottom: 4.25rem; 96 | } 97 | 98 | .gallery-list { 99 | display: grid; 100 | grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); 101 | max-width: 1100px; 102 | gap: 50px; 103 | margin: 1.5rem auto 1rem auto; 104 | list-style: none; 105 | } 106 | 107 | .gallery-item { 108 | margin: 0.5rem auto; 109 | width: 100%; 110 | } 111 | .gallery-item:last-child { 112 | border-bottom: none; 113 | } 114 | .gallery-item .image-block { 115 | display: flex; 116 | flex-direction: column; 117 | width: 100%; 118 | max-width: 80ch; 119 | } 120 | .gallery-item .image-block .block-details { 121 | margin: 1rem 0 0; 122 | } 123 | .gallery-item .image-block .block-details p { 124 | margin-bottom: 0; 125 | color: #333; 126 | } 127 | .gallery-item a { 128 | color: #212121; 129 | } 130 | .gallery-item a .gallery-photo { 131 | max-width: 100%; 132 | height: 500px; 133 | max-height: 500px; 134 | object-fit: cover; 135 | border-radius: 2px; 136 | filter: brightness(99%); 137 | transition: filter 0.5s ease; 138 | } 139 | .gallery-item a .gallery-photo:hover { 140 | filter: brightness(105%); 141 | transform-origin: 50% 50%; 142 | cursor: pointer; 143 | } 144 | 145 | .image-grid { 146 | list-style: none; 147 | display: grid; 148 | grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); 149 | gap: 3px; 150 | max-width: 1100px; 151 | margin: 1rem auto 3rem auto; 152 | padding-left: 1.5rem; 153 | padding-right: 1.5rem; 154 | } 155 | .image-grid .image-container { 156 | width: 100%; 157 | height: 20rem; 158 | overflow: hidden; 159 | border-radius: 2px; 160 | } 161 | .image-grid .image-container a .grid-image { 162 | object-fit: cover; 163 | height: 100%; 164 | width: 100%; 165 | transform-origin: 50% 50%; 166 | filter: brightness(99%); 167 | transition: filter 0.5s ease; 168 | } 169 | .image-grid .image-container a img:hover { 170 | filter: brightness(110%); 171 | box-shadow: 0px 0px 0px 2px #000; 172 | transform-origin: 50% 50%; 173 | cursor: pointer; 174 | } 175 | .image-grid .image-container a:focus img { 176 | border: 3px solid #07c; 177 | } 178 | 179 | .featured-img { 180 | display: flex; 181 | flex-direction: column; 182 | justify-content: center; 183 | text-align: center; 184 | align-items: center; 185 | padding-left: 1.5rem; 186 | padding-right: 1.5rem; 187 | } 188 | .featured-img .image-container { 189 | width: 100%; 190 | max-width: 1050px; 191 | padding: 0; 192 | } 193 | .featured-img .showcase-img { 194 | object-fit: cover; 195 | /* object-fit: contain; this is best but causes letterboxing" */ 196 | max-width: 100%; 197 | height: 90vh; 198 | max-height: 600px; 199 | margin: 1rem auto 1rem auto; 200 | } 201 | .featured-img .prev-next { 202 | display: flex; 203 | justify-content: space-between; 204 | align-items: center; 205 | margin-top: 2rem; 206 | margin-bottom: 1rem; 207 | } 208 | .featured-img .prev-next a { 209 | padding: 7px 10px; 210 | border: 1px solid lightgray; 211 | border-radius: 3px; 212 | text-decoration: none; 213 | background: inherit; 214 | font-size: 1em; 215 | color: #333; 216 | background: rgb(242, 242, 242); 217 | } 218 | .featured-img .prev-next a:hover { 219 | background: rgb(237, 237, 237); 220 | } 221 | .featured-img .image-description .credit { 222 | text-decoration: underline; 223 | } 224 | .featured-img .image-description .credit:hover { 225 | text-decoration: none; 226 | } 227 | 228 | .about-page { 229 | min-height: 100vh; 230 | display: flex; 231 | flex-direction: column; 232 | } 233 | 234 | .about-v { 235 | margin-top: auto; 236 | } 237 | 238 | .about-me-content .about-socials { 239 | padding-left: 30px; 240 | } 241 | 242 | .about-socials li { 243 | margin: 0.75rem auto; 244 | list-style: disc; 245 | } 246 | 247 | .about-me-content { 248 | max-width: 80ch; 249 | margin: 3rem auto; 250 | padding-left: 1.5rem; 251 | padding-right: 1.5rem; 252 | } 253 | 254 | .contact-form { 255 | display: flex; 256 | display: -webkit-flex; 257 | flex-direction: column; 258 | max-width: 60ch; 259 | } 260 | .contact-form label.form-label { 261 | margin-top: 0.5rem; 262 | } 263 | .contact-form input, .contact-form textarea { 264 | margin: 0.2rem 0; 265 | border: 1px solid lightgray; 266 | padding: 0.5rem; 267 | border-radius: 0.15rem; 268 | font-size: 16px; 269 | -webkit-appearance: none; 270 | } 271 | .contact-form input { 272 | height: 2.75rem; 273 | } 274 | .contact-form textarea { 275 | resize: vertical; 276 | min-height: 9rem; 277 | } 278 | .contact-form button { 279 | margin-bottom: 36px; 280 | background: rgb(27, 110, 226); 281 | background: rgb(26, 107, 221); 282 | padding: 11px 1.35rem; 283 | border-radius: 3px; 284 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 285 | border: none; 286 | color: #fff; 287 | margin-top: 1.35rem; 288 | max-width: fit-content; 289 | max-width: -moz-fit-content; 290 | } 291 | .contact-form button:hover { 292 | border: none; 293 | cursor: pointer; 294 | background: rgb(23, 100, 209); 295 | } 296 | 297 | footer { 298 | position: relative; 299 | margin: 0 auto 3rem; 300 | padding-left: 1.5rem; 301 | padding-right: 1.5rem; 302 | max-width: 1100px; 303 | bottom: 0; 304 | } 305 | footer a { 306 | color: #212121; 307 | } 308 | footer a:hover { 309 | color: #1836AF; 310 | } 311 | 312 | .social-links { 313 | display: flex; 314 | justify-content: flex-end; 315 | align-items: center; 316 | list-style: none; 317 | padding-left: 0.5rem; 318 | } 319 | .social-links li { 320 | padding-right: 0.75rem; 321 | } 322 | 323 | .footer-content { 324 | display: flex; 325 | flex-direction: column; 326 | align-items: center; 327 | } 328 | .footer-content hr { 329 | background: #000; 330 | height: 2px; 331 | width: 100%; 332 | } 333 | .footer-content p { 334 | color: #222; 335 | } 336 | 337 | .footer-info { 338 | display: flex; 339 | width: 100%; 340 | justify-content: space-between; 341 | align-items: center; 342 | padding-top: 1.4rem; 343 | border-top: 0.1rem solid lightgray; 344 | } 345 | .footer-info .footer-links { 346 | padding-left: 0; 347 | list-style: none; 348 | display: flex; 349 | justify-content: space-evenly; 350 | align-items: center; 351 | font-size: 1rem; 352 | font-size: clamp(1rem, 3vw, 1.0625rem); 353 | } 354 | .footer-info .footer-links .footer-link { 355 | margin: 0 0.6rem; 356 | } 357 | .footer-info.about { 358 | border: none; 359 | } 360 | 361 | footer .social-links { 362 | display: flex; 363 | justify-content: flex-end; 364 | align-items: center; 365 | list-style: none; 366 | padding-left: 0.5rem; 367 | } 368 | 369 | footer .social-links li { 370 | padding-right: 0.75rem; 371 | } 372 | 373 | /* 404 page styles */ 374 | .four-oh-four { 375 | margin: 0 auto; 376 | width: 100%; 377 | max-width: 90ch; 378 | padding-left: 1.5rem; 379 | padding-right: 1.5rem; 380 | overflow: hidden; 381 | background: inherit; 382 | min-height: 100vh; 383 | } 384 | .four-oh-four ul { 385 | padding-left: 0; 386 | } 387 | .four-oh-four ul li { 388 | padding: 12px 14px; 389 | margin: 10px auto; 390 | } 391 | 392 | *, 393 | *::before, 394 | *::after { 395 | box-sizing: border-box; 396 | } 397 | 398 | .sr-only { 399 | clip: rect(1px, 1px, 1px, 1px); 400 | clip-path: inset(1px); 401 | display: block; 402 | height: 1px; 403 | overflow: hidden; 404 | position: absolute; 405 | white-space: nowrap; 406 | width: 1px; 407 | } 408 | 409 | body { 410 | margin: 0; 411 | padding: 0; 412 | min-height: 100vh; 413 | background: #fcfcfc; 414 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 415 | font-size: 16px; 416 | line-height: 1.6; 417 | } 418 | 419 | img { 420 | max-width: 100%; 421 | width: 100%; 422 | height: 100%; 423 | object-fit: cover; 424 | } 425 | 426 | p { 427 | font-size: 1rem; 428 | font-size: clamp(1rem, 3vw, 1.0625rem); 429 | line-height: 1.5; 430 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 431 | } 432 | 433 | a { 434 | color: #2540AD; 435 | text-decoration: none; 436 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 437 | } 438 | a:hover, a:focus { 439 | text-decoration: underline; 440 | color: #1836AF; 441 | } 442 | 443 | main p { 444 | margin-bottom: 24px; 445 | } 446 | main h1, main h2, main h3, main h4, main h5, main h6 { 447 | margin-bottom: 24px; 448 | } 449 | main .gallery { 450 | margin: 3rem auto; 451 | max-width: 1100px; 452 | padding: 0 1.5rem; 453 | } 454 | main .gallery-header { 455 | max-width: 1100px; 456 | padding: 0 1.5rem; 457 | margin: 0 auto; 458 | margin-bottom: 2rem; 459 | font-size: 30px; 460 | } 461 | 462 | .skip-link { 463 | position: fixed; 464 | top: 0; 465 | left: 0; 466 | transform: translateY(-10rem); 467 | transition: transform 0.3s ease-in-out; 468 | padding: 0.5rem; 469 | background: rgb(255, 255, 255); 470 | color: #222; 471 | z-index: 999; 472 | } 473 | .skip-link:focus { 474 | transform: translateY(0); 475 | } 476 | 477 | h1, h2, h3, h4, h5 { 478 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 479 | color: #212121; 480 | } 481 | 482 | h1, .h1 { 483 | font-size: clamp(2.75rem, 8vw, 3.25rem); 484 | } 485 | 486 | h2, .h2 { 487 | font-size: clamp(1.5rem, 5vw, 1.8rem); 488 | } 489 | 490 | #main { 491 | margin-top: 3rem; 492 | } 493 | 494 | .about-page { 495 | min-height: 100vh; 496 | display: flex; 497 | flex-direction: column; 498 | } 499 | 500 | .about-v { 501 | margin-top: auto; 502 | } 503 | 504 | .image-description { 505 | display: flex; 506 | flex-direction: column; 507 | justify-content: center; 508 | align-items: center; 509 | margin: 1.5rem auto 0 auto; 510 | padding-left: 1rem; 511 | padding-right: 1rem; 512 | } 513 | .image-description h1 { 514 | margin-bottom: 0.8rem; 515 | text-align: center; 516 | } 517 | 518 | .page-banner { 519 | display: flex; 520 | flex-direction: column; 521 | justify-content: center; 522 | align-items: flex-start; 523 | margin: 0 auto 1em auto; 524 | max-width: 1100px; 525 | padding-left: 1.5rem; 526 | padding-right: 1.5rem; 527 | color: #212141; 528 | } 529 | .page-banner p { 530 | font-size: 1rem; 531 | font-size: clamp(1.0625rem, 3vw, 1.2rem); 532 | } 533 | .page-banner h1 { 534 | margin-bottom: 0.75rem; 535 | } 536 | 537 | .about-me-content .about-socials { 538 | padding-left: 30px; 539 | margin-bottom: 24px; 540 | } 541 | 542 | .about-socials li { 543 | margin: 0.75rem auto; 544 | list-style: disc; 545 | } 546 | 547 | .about-me-content { 548 | max-width: 80ch; 549 | margin: 3rem auto; 550 | padding-left: 1.5rem; 551 | padding-right: 1.5rem; 552 | } 553 | 554 | .gt { 555 | margin-left: 3px; 556 | } 557 | 558 | .lt { 559 | margin-right: 3px; 560 | } 561 | 562 | .main-container { 563 | margin: 3rem auto 2rem auto; 564 | } 565 | 566 | /* Media Queries */ 567 | @media screen and (max-width: 897px) { 568 | .gallery-item { 569 | border-bottom: 1px solid lightgray; 570 | padding-bottom: 1.25rem; 571 | } 572 | } 573 | @media screen and (max-width: 875px) { 574 | footer .footer-content p { 575 | margin-top: 1.25rem; 576 | margin-bottom: 24px; 577 | } 578 | footer .footer-content .footer-info.home { 579 | flex-direction: column; 580 | } 581 | footer .footer-content .footer-info.featured { 582 | flex-direction: column; 583 | justify-content: center; 584 | } 585 | } 586 | @media screen and (max-width: 750px) { 587 | .gallery-item a .gallery-photo { 588 | height: 90vh; 589 | } 590 | header .nav-main .nav-list li { 591 | margin: 0 0.75rem; 592 | } 593 | } 594 | @media screen and (max-width: 650px) { 595 | .gallery-item a .gallery-photo { 596 | height: 70vh; 597 | max-height: 400px; 598 | } 599 | .featured-img .showcase-img { 600 | height: 65vh; 601 | } 602 | } 603 | @media screen and (max-width: 565px) { 604 | .page-banner h1 { 605 | text-align: left; 606 | } 607 | .main-gallery h1 { 608 | padding: 0 1rem; 609 | } 610 | } 611 | @media screen and (max-width: 450px) { 612 | header .nav-main { 613 | flex-direction: column; 614 | justify-content: flex-start; 615 | align-items: flex-start; 616 | } 617 | header .nav-main .nav-list li { 618 | margin: 0 0.5rem; 619 | } 620 | .gallery .gallery-list { 621 | grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); 622 | } 623 | footer .footer-content .footer-info.home { 624 | justify-content: flex-start; 625 | align-items: center; 626 | } 627 | footer .footer-content .footer-info.featured { 628 | flex-direction: column; 629 | justify-content: center; 630 | } 631 | footer .footer-content .footer-info.home { 632 | justify-content: flex-start; 633 | align-items: center; 634 | } 635 | footer .footer-content .footer-info.featured { 636 | flex-direction: column; 637 | justify-content: center; 638 | } 639 | } 640 | @media screen and (max-width: 415px) { 641 | .main-container { 642 | margin-top: 2rem; 643 | } 644 | .gallery .gallery-list { 645 | grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); 646 | } 647 | header .nav-main .nav-list .link { 648 | padding: 10px; 649 | } 650 | } 651 | /* Moto G4 width width=360px which Lighthouse runs audit on */ 652 | @media screen and (max-width: 375px) { 653 | header .nav-main .nav-list .link { 654 | padding: 0.7rem 3px; 655 | } 656 | .featured-img { 657 | margin: 0; 658 | padding: 0; 659 | align-items: center; 660 | } 661 | .featured-img .prev-next { 662 | padding: 0 1.5rem; 663 | } 664 | .featured-img h1 { 665 | text-align: center; 666 | margin: 0 auto 1em auto; 667 | } 668 | .image-grid { 669 | display: grid; 670 | grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); 671 | gap: 3px; 672 | } 673 | } 674 | @media screen and (max-width: 350px) { 675 | header .nav-main .nav-list .link { 676 | padding: 0.6rem 2px; 677 | } 678 | } 679 | 680 | /*# sourceMappingURL=style.css.map */ 681 | -------------------------------------------------------------------------------- /src/_includes/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/partials/_nav.scss","../sass/partials/_gallery.scss","../sass/partials/_featured-image.scss","../sass/partials/_about.scss","../sass/vars/_variables.scss","../sass/partials/_footer.scss","../sass/partials/_404.scss","../sass/style.scss","../sass/mixins/_screen-reader-only.scss"],"names":[],"mappings":"AACI;EACI;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;ACrGhB;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGI;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;;AAIJ;EACI;;;ACnGpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;AACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMR;EACI;;AACA;EACI;;;ACjDhB;EACI;EACA;EACA;;;AAGJ;EACI;;;AAIA;EACI;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,aCpEM;EDqEN;EACA;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;;AE5EhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI,ODZiB;;;ACiB7B;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACnFJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;;;ACXZ;AAAA;AAAA;EAGI;;;AAGJ;ECTI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADMJ;EACI;EACA;EACA;EACA,YHfc;EGgBd,aHnBU;EGoBV;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA,aHnCU;;;AGsCd;EACI,OHtCmB;EGuCnB;EACA,aHzCU;;AG2CV;EACI;EACA,OH3CqB;;;AGgDzB;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI,aH1FU;EG2FV;;;AAGJ;EAII;;;AAGJ;EAII;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;;AAKJ;EACI;EACA;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AACA;EACI;IACI;IACA;;;AAIR;EAGY;IACI;IACA;;EAGA;IACI;;EAEJ;IACI;IACA;;;AAOpB;EAGY;IACI;;EAKZ;IACI;;;AAIP;EAGW;IACI;IACA;;EAMR;IACI;;;AAKX;EAEO;IACI;;EAKJ;IACI;;;AAKZ;EAEQ;IACI;IACA;IACA;;EAGI;IACI;;EAOZ;IACI;;EAOI;IACI;IACA;;EAEJ;IACI;IACA;;EAKhB;IACI;IACA;;EAEJ;IACI;IACA;;;AAIP;EACG;IACI;;EAIA;IACI;;EAIR;IACI;;;AAIR;AACA;EAIgB;IACI;;EAMhB;IACI;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;IACA;;EAGR;IACI;IACA;IACA;;;AAIR;EAIgB;IACI","file":"style.css"} -------------------------------------------------------------------------------- /src/_includes/js/email.js: -------------------------------------------------------------------------------- 1 | // update this variable with your email :) 2 | const email = "foobar@gmail.com"; 3 | const submit = document.querySelector(".reach-me"); 4 | 5 | function sendMail() { 6 | const subject = document.querySelector(".email-subject").value; 7 | const message = document.querySelector(".email-msg").value; 8 | window.location.href = `mailto:${email}?subject=${subject}&body=${message}`; 9 | } -------------------------------------------------------------------------------- /src/_includes/layouts/base.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% metagen 5 | title=title, 6 | desc=meta_desc, 7 | url=url, 8 | img=url + img, 9 | img_alt=alt, 10 | twitter_card_type=cardType, 11 | twitter_handle=site.author.twitterHandle, 12 | name=site.author.firstName + " " + site.author.lastName, 13 | generator="Eleventy v2.0.1", 14 | comments=true 15 | %} 16 | 17 | 18 | 19 | 20 | {% set css %} 21 | {% include "css/style.css" %} 22 | {% include "css/reset.css" %} 23 | {% endset %} 24 | 27 | 28 | 29 | 30 | {% include "partials/nav.njk" %} 31 | 32 | {{ content | safe }} 33 | 34 | {% include "partials/footer.njk" %} 35 | 36 | -------------------------------------------------------------------------------- /src/_includes/layouts/main.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base.njk 3 | --- 4 | 5 |
6 | {{ content | safe}} 7 |
-------------------------------------------------------------------------------- /src/_includes/partials/feature-gallery.njk: -------------------------------------------------------------------------------- 1 |
2 | 25 |
26 | -------------------------------------------------------------------------------- /src/_includes/partials/footer.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

© {% getYear %} {{ site.author.firstName }} {{ site.author.lastName }}. Built with Eleventy

5 | 10 |
11 |
12 |
-------------------------------------------------------------------------------- /src/_includes/partials/home-gallery.njk: -------------------------------------------------------------------------------- 1 |
2 | 19 |
-------------------------------------------------------------------------------- /src/_includes/partials/nav.njk: -------------------------------------------------------------------------------- 1 | {% set navigation = collections.all | eleventyNavigation %} 2 |
3 |
4 |
5 | {{ site.author.firstName }} {{ site.author.lastName }} 6 |

{{ site.author.about }}

7 |
8 | Hire Me 9 |
10 | 18 |
-------------------------------------------------------------------------------- /src/_includes/sass/mixins/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./screen-reader-only"; -------------------------------------------------------------------------------- /src/_includes/sass/mixins/_screen-reader-only.scss: -------------------------------------------------------------------------------- 1 | @mixin visually-hidden() { 2 | clip: rect(1px,1px,1px,1px); 3 | clip-path: inset(1px); 4 | display: block; 5 | height: 1px; 6 | overflow: hidden; 7 | position: absolute; 8 | white-space: nowrap; 9 | width: 1px; 10 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_404.scss: -------------------------------------------------------------------------------- 1 | /* 404 page styles */ 2 | .four-oh-four { 3 | margin: 0 auto; 4 | width: 100%; 5 | max-width: 90ch; 6 | padding-left: 1.5rem; 7 | padding-right: 1.5rem; 8 | overflow: hidden; 9 | background: inherit; 10 | min-height: 100vh; 11 | 12 | ul { 13 | padding-left: 0; 14 | li { 15 | padding: 12px 14px; 16 | margin: 10px auto; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_about.scss: -------------------------------------------------------------------------------- 1 | @use "../vars/" as *; 2 | 3 | .about-page { 4 | min-height: 100vh; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | .about-v { 10 | margin-top: auto; 11 | } 12 | 13 | .about-me-content { 14 | .about-socials { 15 | padding-left: 30px; 16 | } 17 | } 18 | 19 | .about-socials { 20 | li { 21 | margin: .75rem auto; 22 | list-style: disc; 23 | } 24 | } 25 | 26 | .about-me-content { 27 | max-width: 80ch; 28 | margin: 3rem auto; 29 | padding-left: 1.5rem; 30 | padding-right: 1.5rem; 31 | } 32 | 33 | .contact-form { 34 | display: flex; 35 | display: -webkit-flex; 36 | flex-direction: column; 37 | max-width: 60ch; 38 | 39 | label { 40 | &.form-label { 41 | margin-top: .5rem; 42 | } 43 | } 44 | 45 | input, textarea { 46 | margin: .2rem 0; 47 | border: 1px solid lightgray; 48 | padding: .5rem; 49 | border-radius: .15rem; 50 | font-size: 16px; 51 | -webkit-appearance: none; 52 | } 53 | 54 | input { 55 | height: 2.75rem; 56 | } 57 | 58 | textarea { 59 | resize: vertical; 60 | min-height: 9rem; 61 | } 62 | 63 | button { 64 | margin-bottom: 36px; 65 | background: rgb(27, 110, 226); 66 | background: rgb(26, 107, 221); 67 | padding: 11px 1.35rem; 68 | border-radius: 3px; 69 | font-family: $system-font; 70 | border: none; 71 | color: #fff; 72 | margin-top: 1.35rem; 73 | max-width: fit-content; 74 | max-width: -moz-fit-content; 75 | 76 | &:hover { 77 | border: none; 78 | cursor: pointer; 79 | background: rgb(23, 100, 209); 80 | } 81 | 82 | } 83 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_featured-image.scss: -------------------------------------------------------------------------------- 1 | .featured-img { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | text-align: center; 6 | align-items: center; 7 | padding-left: 1.5rem; 8 | padding-right: 1.5rem; 9 | 10 | .image-container { 11 | width: 100%; 12 | max-width: 1050px; 13 | padding: 0; 14 | } 15 | 16 | .showcase-img { 17 | object-fit: cover; 18 | /* object-fit: contain; this is best but causes letterboxing" */ 19 | max-width: 100%; 20 | height: 90vh; 21 | max-height: 600px; 22 | margin: 1rem auto 1rem auto; 23 | } 24 | 25 | .prev-next { 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: center; 29 | margin-top: 2rem; 30 | margin-bottom: 1rem; 31 | 32 | a { 33 | padding: 7px 10px; 34 | border: 1px solid lightgray; 35 | border-radius: 3px; 36 | text-decoration: none; 37 | background: inherit; 38 | font-size: 1em; 39 | color: #333; 40 | background: rgb(242, 242, 242); 41 | 42 | &:hover { 43 | background: rgb(237, 237, 237); 44 | } 45 | } 46 | } 47 | 48 | .image-description { 49 | .credit { 50 | text-decoration: underline; 51 | &:hover { 52 | text-decoration: none; 53 | } 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../vars/" as *; 2 | 3 | footer { 4 | position: relative; 5 | margin: 0 auto 3rem; 6 | padding-left: 1.5rem; 7 | padding-right: 1.5rem; 8 | max-width: 1100px; 9 | bottom: 0; 10 | 11 | a { 12 | color: #212121; 13 | 14 | &:hover { 15 | color: $link-blue-accessible-hover; 16 | } 17 | } 18 | } 19 | 20 | .social-links { 21 | display: flex; 22 | justify-content: flex-end; 23 | align-items: center; 24 | list-style: none; 25 | padding-left: .5rem; 26 | 27 | li { 28 | padding-right: .75rem; 29 | } 30 | } 31 | 32 | .footer-content { 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | 37 | hr { 38 | background: #000; 39 | height: 2px; 40 | width: 100%; 41 | } 42 | 43 | p { 44 | color: #222; 45 | } 46 | } 47 | 48 | .footer-info { 49 | display: flex; 50 | width: 100%; 51 | justify-content: space-between; 52 | align-items: center; 53 | padding-top: 1.4rem; 54 | border-top: .1rem solid lightgray; 55 | 56 | .footer-links { 57 | padding-left: 0; 58 | list-style: none; 59 | display: flex; 60 | justify-content: space-evenly; 61 | align-items: center; 62 | font-size: 1rem; 63 | font-size: clamp(1rem, 3vw, 1.0625rem); 64 | 65 | .footer-link { 66 | margin: 0 .6rem; 67 | } 68 | } 69 | 70 | &.about { 71 | border: none; 72 | } 73 | } 74 | 75 | footer .social-links { 76 | display: flex; 77 | justify-content: flex-end; 78 | align-items: center; 79 | list-style: none; 80 | padding-left: .5rem; 81 | } 82 | 83 | footer .social-links li { 84 | padding-right: .75rem; 85 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_gallery.scss: -------------------------------------------------------------------------------- 1 | .main-gallery { 2 | max-width: 1100px; 3 | margin: 3rem auto 0 auto; 4 | } 5 | 6 | .gallery-h1 { 7 | text-align: center; 8 | margin-bottom: 4.25rem; 9 | } 10 | 11 | .gallery-list { 12 | display: grid; 13 | grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); 14 | max-width: 1100px; 15 | gap: 50px; 16 | margin: 1.5rem auto 1rem auto; 17 | list-style: none; 18 | } 19 | 20 | .gallery-item { 21 | margin: .5rem auto; 22 | width: 100%; 23 | 24 | &:last-child { 25 | border-bottom: none; 26 | } 27 | 28 | .image-block { 29 | display: flex; 30 | flex-direction: column; 31 | width: 100%; 32 | max-width: 80ch; 33 | 34 | .block-details { 35 | margin: 1rem 0 0; 36 | 37 | p { 38 | margin-bottom: 0; 39 | color: #333; 40 | } 41 | } 42 | } 43 | 44 | a { 45 | color: #212121; 46 | 47 | .gallery-photo { 48 | max-width: 100%; 49 | height: 500px; 50 | max-height: 500px; 51 | object-fit: cover; 52 | border-radius: 2px; 53 | filter: brightness(99%); 54 | transition: filter 0.5s ease; 55 | 56 | &:hover { 57 | filter: brightness(105%); 58 | transform-origin: 50% 50%; 59 | cursor: pointer; 60 | } 61 | } 62 | } 63 | } 64 | 65 | .image-grid { 66 | list-style: none; 67 | display: grid; 68 | grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); 69 | gap: 3px; 70 | max-width: 1100px; 71 | margin: 1rem auto 3rem auto; 72 | padding-left: 1.5rem; 73 | padding-right: 1.5rem; 74 | 75 | .image-container { 76 | width: 100%; 77 | height: 20rem; 78 | overflow: hidden; 79 | border-radius: 2px; 80 | 81 | a { 82 | .grid-image { 83 | object-fit: cover; 84 | height: 100%; 85 | width: 100%; 86 | transform-origin: 50% 50%; 87 | filter: brightness(99%); 88 | transition: filter 0.5s ease; 89 | } 90 | img { 91 | &:hover { 92 | filter: brightness(110%); 93 | box-shadow: 0px 0px 0px 2px #000; 94 | transform-origin: 50% 50%; 95 | cursor: pointer; 96 | } 97 | } 98 | &:focus { 99 | img { 100 | border: 3px solid #07c; 101 | } 102 | } 103 | } 104 | } 105 | } -------------------------------------------------------------------------------- /src/_includes/sass/partials/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "nav"; 2 | @forward "gallery"; 3 | @forward "featured-image"; 4 | @forward "about"; 5 | @forward "footer"; 6 | @forward "404"; -------------------------------------------------------------------------------- /src/_includes/sass/partials/_nav.scss: -------------------------------------------------------------------------------- 1 | header { 2 | .nav-main { 3 | margin: 1rem auto 0 auto; 4 | max-width: 1100px; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | padding: .9rem 1.5rem; 9 | 10 | a { 11 | &:hover { 12 | background: rgb(233, 233, 233); 13 | text-decoration: none; 14 | } 15 | } 16 | 17 | .nav-list { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | padding-left: 0; 22 | list-style: none; 23 | border-top: 1px solid lightgray; 24 | border-bottom: 1px solid lightgray; 25 | width: 100%; 26 | 27 | li { 28 | margin: 0 1rem; 29 | } 30 | 31 | a { 32 | &:hover { 33 | background: rgb(233, 233, 233); 34 | background: rgb(237, 237, 237); 35 | text-decoration: none; 36 | } 37 | } 38 | 39 | .link { 40 | color: #212121; 41 | padding: .8rem .75rem; 42 | margin: 0 .4rem; 43 | font-size: 16px; 44 | font-size: clamp(1.0625rem, 4vw, 1.2rem); 45 | text-decoration: none; 46 | display: block; 47 | 48 | &:first-child { 49 | margin-left: 0; 50 | } 51 | } 52 | } 53 | 54 | .home-button { 55 | text-decoration: none; 56 | color: #212121; 57 | padding-right: .5rem; 58 | font-size: 24px; 59 | font-size: clamp(1.3rem, 4vw, 1.5rem); 60 | font-weight: 500; 61 | } 62 | } 63 | 64 | .intro { 65 | display: flex; 66 | justify-content: space-between; 67 | margin: 2rem auto 1rem auto; 68 | max-width: 1100px; 69 | padding: 0 1.5rem; 70 | 71 | div { 72 | p { 73 | color: #333; 74 | } 75 | &:first-child { 76 | margin-right: 2rem; 77 | } 78 | } 79 | 80 | .home-button { 81 | display: block; 82 | font-size: 28px; 83 | font-size: clamp(26px, 4vw, 28px); 84 | color: #222; 85 | margin-bottom: 14px; 86 | } 87 | 88 | .hire-me { 89 | border: 1px solid #111; 90 | margin-top: 3px; 91 | padding: .5rem 1rem; 92 | text-decoration: none; 93 | height: fit-content; 94 | height: -moz-fit-content; 95 | border-radius: 3px; 96 | background: #1e262b; 97 | color: #fff; 98 | font-weight: 400; 99 | white-space: nowrap; 100 | 101 | &:hover { 102 | background: #1a1f24; 103 | } 104 | } 105 | } 106 | } -------------------------------------------------------------------------------- /src/_includes/sass/reset.scss: -------------------------------------------------------------------------------- 1 | /* Credit: https://hankchizljaw.com/wrote/a-modern-css-reset/ */ 2 | /* Box sizing rules */ 3 | *, 4 | *::before, 5 | *::after { 6 | box-sizing: border-box; 7 | } 8 | 9 | /* Remove default padding */ 10 | ul[class], 11 | ol[class] { 12 | padding: 0; 13 | } 14 | 15 | /* Remove default margin */ 16 | body, 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | h5, 22 | p, 23 | ul[class], 24 | ol[class], 25 | li, 26 | figure, 27 | figcaption, 28 | blockquote, 29 | dl, 30 | dd { 31 | margin: 0; 32 | } 33 | 34 | /* Set core body defaults */ 35 | body { 36 | min-height: 100vh; 37 | scroll-behavior: smooth; 38 | text-rendering: optimizeSpeed; 39 | line-height: 1.5; 40 | } 41 | 42 | /* Remove list styles on ul, ol elements with a class attribute */ 43 | ul[class], 44 | ol[class] { 45 | list-style: none; 46 | } 47 | 48 | /* A elements that don't have a class get default styles */ 49 | a:not([class]) { 50 | text-decoration-skip-ink: auto; 51 | } 52 | 53 | /* Make images easier to work with */ 54 | img { 55 | max-width: 100%; 56 | display: block; 57 | } 58 | 59 | /* Natural flow and rhythm in articles by default */ 60 | article > * + * { 61 | margin-top: 1em; 62 | } 63 | 64 | /* Inherit fonts for inputs and buttons */ 65 | input, 66 | button, 67 | textarea, 68 | select { 69 | font: inherit; 70 | } 71 | 72 | /* Remove all animations and transitions for people that prefer not to see them */ 73 | @media (prefers-reduced-motion: reduce) { 74 | /* We are relaxing the `declaration-no-important` here 75 | because we want to ensure that code further down the 76 | cascade will adhere to this accessibility enhancement */ 77 | /* stylelint-disable declaration-no-important */ 78 | * { 79 | animation-duration: 0.01ms !important; 80 | animation-iteration-count: 1 !important; 81 | transition-duration: 0.01ms !important; 82 | scroll-behavior: auto !important; 83 | } 84 | } -------------------------------------------------------------------------------- /src/_includes/sass/style.scss: -------------------------------------------------------------------------------- 1 | @use "mixins" as *; 2 | @use "vars" as *; 3 | @use "partials" as *; 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | .sr-only { 12 | @include visually-hidden(); 13 | } 14 | 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | min-height: 100vh; 19 | background: $page-background; 20 | font-family: $system-font; 21 | font-size: 16px; 22 | line-height: 1.6; 23 | } 24 | 25 | img { 26 | max-width: 100%; 27 | width: 100%; 28 | height: 100%; 29 | object-fit: cover; 30 | } 31 | 32 | p { 33 | font-size: 1rem; 34 | font-size: clamp(1rem, 3vw, 1.0625rem); 35 | line-height: 1.5; 36 | font-family: $system-font; 37 | } 38 | 39 | a { 40 | color: $link-blue-accessible; 41 | text-decoration: none; 42 | font-family: $system-font; 43 | 44 | &:hover, &:focus { 45 | text-decoration: underline; 46 | color: $link-blue-accessible-hover; 47 | } 48 | } 49 | 50 | main { 51 | p { 52 | margin-bottom: 24px; 53 | } 54 | 55 | h1, h2, h3, h4, h5, h6 { 56 | margin-bottom: 24px; 57 | } 58 | 59 | .gallery { 60 | margin: 3rem auto; 61 | max-width: 1100px; 62 | padding: 0 1.5rem; 63 | } 64 | 65 | .gallery-header { 66 | max-width: 1100px; 67 | padding: 0 1.5rem; 68 | margin: 0 auto; 69 | margin-bottom: 2rem; 70 | font-size: 30px; 71 | } 72 | } 73 | 74 | .skip-link { 75 | position: fixed; 76 | top: 0; 77 | left: 0; 78 | transform: translateY(-10rem); 79 | transition: transform .3s ease-in-out; 80 | padding: .5rem; 81 | background: rgb(255, 255, 255); 82 | color: #222; 83 | z-index: 999; 84 | 85 | &:focus { 86 | transform: translateY(0); 87 | } 88 | } 89 | 90 | h1, h2, h3, h4, h5 { 91 | font-family: $system-font; 92 | color: #212121; 93 | } 94 | 95 | h1, .h1 { 96 | $min-size: 2.75rem; 97 | $pref-size: 8vw; 98 | $max-size: 3.25rem; 99 | font-size: clamp(2.75rem, 8vw, 3.25rem); 100 | } 101 | 102 | h2, .h2 { 103 | $min-size: 1.5rem; 104 | $pref-size: 5vw; 105 | $max-size: 1.8rem; 106 | font-size: clamp(1.5rem, 5vw, 1.8rem); 107 | } 108 | 109 | #main { 110 | margin-top: 3rem; 111 | } 112 | 113 | .about-page { 114 | min-height: 100vh; 115 | display: flex; 116 | flex-direction: column; 117 | } 118 | 119 | .about-v { 120 | margin-top: auto; 121 | } 122 | 123 | .image-description { 124 | display: flex; 125 | flex-direction: column; 126 | justify-content: center; 127 | align-items: center; 128 | margin: 1.5rem auto 0 auto; 129 | padding-left: 1rem; 130 | padding-right: 1rem; 131 | 132 | h1 { 133 | margin-bottom: .8rem; 134 | text-align: center; 135 | } 136 | } 137 | 138 | .page-banner { 139 | display: flex; 140 | flex-direction: column; 141 | justify-content: center; 142 | align-items: flex-start; 143 | margin: 0 auto 1em auto; 144 | max-width: 1100px; 145 | padding-left: 1.5rem; 146 | padding-right: 1.5rem; 147 | color: #212141; 148 | 149 | p { 150 | font-size: 1rem; 151 | font-size: clamp(1.0625rem, 3vw, 1.2rem); 152 | } 153 | 154 | h1 { 155 | margin-bottom: .75rem; 156 | } 157 | } 158 | 159 | .about-me-content { 160 | .about-socials { 161 | padding-left: 30px; 162 | margin-bottom: 24px; 163 | } 164 | } 165 | 166 | .about-socials { 167 | li { 168 | margin: .75rem auto; 169 | list-style: disc; 170 | } 171 | } 172 | 173 | .about-me-content { 174 | max-width: 80ch; 175 | margin: 3rem auto; 176 | padding-left: 1.5rem; 177 | padding-right: 1.5rem; 178 | } 179 | 180 | .gt { 181 | margin-left: 3px; 182 | } 183 | 184 | .lt { 185 | margin-right: 3px; 186 | } 187 | 188 | .main-container { 189 | margin: 3rem auto 2rem auto; 190 | } 191 | 192 | /* Media Queries */ 193 | @media screen and (max-width: 897px) { 194 | .gallery-item { 195 | border-bottom: 1px solid lightgray; 196 | padding-bottom: 1.25rem; 197 | } 198 | } 199 | 200 | @media screen and (max-width: 875px) { 201 | footer { 202 | .footer-content { 203 | p { 204 | margin-top: 1.25rem; 205 | margin-bottom: 24px; 206 | } 207 | .footer-info { 208 | &.home { 209 | flex-direction: column; 210 | } 211 | &.featured { 212 | flex-direction: column; 213 | justify-content: center; 214 | } 215 | } 216 | } 217 | } 218 | } 219 | 220 | @media screen and (max-width: 750px) { 221 | .gallery-item { 222 | a { 223 | .gallery-photo { 224 | height: 90vh; 225 | } 226 | } 227 | } 228 | 229 | header .nav-main .nav-list li { 230 | margin: 0 .75rem; 231 | } 232 | } 233 | 234 | @media screen and (max-width: 650px) { 235 | .gallery-item { 236 | a { 237 | .gallery-photo { 238 | height: 70vh; 239 | max-height: 400px; 240 | } 241 | } 242 | } 243 | 244 | .featured-img { 245 | .showcase-img { 246 | height: 65vh; 247 | } 248 | } 249 | } 250 | 251 | @media screen and (max-width: 565px) { 252 | .page-banner { 253 | h1 { 254 | text-align: left; 255 | } 256 | } 257 | 258 | .main-gallery { 259 | h1 { 260 | padding: 0 1rem; 261 | } 262 | } 263 | } 264 | 265 | @media screen and (max-width: 450px) { 266 | header { 267 | .nav-main { 268 | flex-direction: column; 269 | justify-content: flex-start; 270 | align-items: flex-start; 271 | 272 | .nav-list { 273 | li { 274 | margin: 0 .5rem; 275 | } 276 | } 277 | } 278 | } 279 | 280 | .gallery { 281 | .gallery-list { 282 | grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); 283 | } 284 | } 285 | 286 | footer { 287 | .footer-content { 288 | .footer-info { 289 | &.home { 290 | justify-content: flex-start; 291 | align-items: center; 292 | } 293 | &.featured { 294 | flex-direction: column; 295 | justify-content: center; 296 | } 297 | } 298 | } 299 | } 300 | footer .footer-content .footer-info.home { 301 | justify-content: flex-start; 302 | align-items: center; 303 | } 304 | footer .footer-content .footer-info.featured { 305 | flex-direction: column; 306 | justify-content: center; 307 | } 308 | } 309 | 310 | @media screen and (max-width: 415px) { 311 | .main-container { 312 | margin-top: 2rem; 313 | } 314 | 315 | .gallery { 316 | .gallery-list { 317 | grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); 318 | } 319 | } 320 | 321 | header .nav-main .nav-list .link { 322 | padding: 10px; 323 | } 324 | } 325 | 326 | /* Moto G4 width width=360px which Lighthouse runs audit on */ 327 | @media screen and (max-width: 375px) { 328 | header { 329 | .nav-main { 330 | .nav-list { 331 | .link { 332 | padding: .7rem 3px; 333 | } 334 | } 335 | } 336 | } 337 | 338 | .featured-img { 339 | margin: 0; 340 | padding: 0; 341 | align-items: center; 342 | 343 | .prev-next { 344 | padding: 0 1.5rem; 345 | } 346 | 347 | h1 { 348 | text-align: center; 349 | margin: 0 auto 1em auto; 350 | } 351 | } 352 | .image-grid { 353 | display: grid; 354 | grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); 355 | gap: 3px; 356 | } 357 | } 358 | 359 | @media screen and (max-width: 350px) { 360 | header { 361 | .nav-main { 362 | .nav-list { 363 | .link { 364 | padding: .6rem 2px; 365 | } 366 | } 367 | } 368 | } 369 | } -------------------------------------------------------------------------------- /src/_includes/sass/vars/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; -------------------------------------------------------------------------------- /src/_includes/sass/vars/_variables.scss: -------------------------------------------------------------------------------- 1 | $system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 2 | $link-blue-accessible: #2540AD; 3 | $link-blue-accessible-hover: #1836AF; 4 | $page-background: #fcfcfc; -------------------------------------------------------------------------------- /src/about.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: About - Eleventy Photo Gallery 3 | meta_desc: A page about John Smith, and photography. This template is currently the default version so add your own about me page info here. 4 | url: https://eleventy-gallery.netlify.app/about 5 | img: /images/terrace-window.jpg 6 | alt: Terrace outside shop window with green plants and pink tree on night street 7 | eleventyNavigation: 8 | key: About 9 | order: 2 10 | heading: About 11 | permalink: "/about/" 12 | layout: main.njk 13 | --- 14 | 15 |
16 |

{{ heading }}

17 |

Hi, I'm {{ site.author.firstName }} {{ site.author.lastName}}. I'm a novice photography and designer. This website acts as a compendium of images I've taken over the years.

18 |

This is mock text, write whatever you'd like for the about me page. Maybe add a picture or some of your recent work!

19 |

You can find me around the web at the following places:

20 | 21 |
    22 | {% for key, value in site.socials %} 23 |
  • {{ key | title }}
    • 24 | {% endfor %} 25 |
26 | 27 |

Contact

28 |

Feel free to reach out to me by email or on social media. I usually take 24-48hrs to respond. If you think my work aligns with your projects needs, I'd love to hear from you!

29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |
-------------------------------------------------------------------------------- /src/favicon_data/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/favicon_data/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/favicon_data/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/apple-touch-icon.png -------------------------------------------------------------------------------- /src/favicon_data/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicon_data/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicon_data/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/favicon_data/favicon.ico -------------------------------------------------------------------------------- /src/favicon_data/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Camera Emoji Favicon", 3 | "short_name": "Camera", 4 | "icons": [ 5 | { 6 | "src": "/favicon_data/favicon-16x16.png", 7 | "sizes": "16x16", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/favicon_data/favicon-32x32.png", 12 | "sizes": "32x32", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "/favicon_data/apple-touch-icon.png", 17 | "sizes": "180x180", 18 | "type":"image/png" 19 | }, 20 | { 21 | "src":"/favicon_data/android-chrome-192x192.png", 22 | "sizes":"192x192", 23 | "type":"image/png" 24 | }, 25 | { 26 | "src":"/favicon_data/android-chrome-512x512.png", 27 | "sizes":"512x512", 28 | "type":"image/png" 29 | } 30 | ], 31 | "theme_color":"#fff", 32 | "background_color":"#111", 33 | "display":"standalone" 34 | } -------------------------------------------------------------------------------- /src/feature.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: gallery 4 | size: 1 5 | alias: image 6 | permalink: "/gallery/{{ image.title | slug }}/" 7 | url: https://eleventy-gallery.netlify.app 8 | --- 9 | 10 | 11 | 12 | {% metagen 13 | title=image.title, 14 | desc=image.title + " " + site.pageMetadata.featured.content, 15 | url=url + "/gallery/" + image.title | slug + "/", 16 | img=url + image.imgDir + image.src, 17 | img_alt=image.alt, 18 | twitter_card_type='summary_large_image', 19 | twitter_handle=site.author.twitterHandle, 20 | name=site.author.firstName + " " + site.author.lastName, 21 | generator="Eleventy v2.0.1", 22 | comments=true 23 | %} 24 | 25 | 26 | 27 | 28 | {% set css %} 29 | {% include "css/style.css" %} 30 | {% include "css/reset.css" %} 31 | {% endset %} 32 | 35 | 36 | 37 | 38 | {% include "partials/nav.njk" %} 39 |
40 |
41 |
42 | {% img 43 | src=image.src, 44 | alt=image.alt, 45 | className="showcase-img", 46 | sizes="(max-width: 480px) 33.3vw, (min-width: 640px) 50vw, (min-width: 1000px) 100vw, 33.3vw" 47 | %} 48 |
49 |

{{ image.title }}

50 |

{{ image.credit }} on Pexels

51 |
52 |
53 | {% if pagination.href.previous %} 54 | 55 | {% endif %} 56 | {% if pagination.href.next %} 57 | {% if not pagination.href.previous %} 58 | 59 | {% else %} 60 | 61 | {% endif %} 62 | {% endif %} 63 |
64 |
65 |
66 |
67 | {% include "partials/footer.njk" %} 68 | 69 | -------------------------------------------------------------------------------- /src/gallery.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: John's Photo Gallery 3 | eleventyNavigation: 4 | key: Gallery 5 | order: 2 6 | layout: main.njk 7 | permalink: "/gallery/" 8 | meta_desc: A collection of images from John Smith's gallery. 9 | url: https://eleventy-gallery.netlify.app/gallery 10 | img: /images/terrace-window.jpg 11 | alt: Terrace outside shop window with green plants and pink tree on night street 12 | cardType: summary_large_image 13 | --- 14 | 15 |

{{ title }}

16 | 17 | {% include "partials/feature-gallery.njk" %} -------------------------------------------------------------------------------- /src/images/benches-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-1024.jpeg -------------------------------------------------------------------------------- /src/images/benches-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-1024.webp -------------------------------------------------------------------------------- /src/images/benches-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-320.jpeg -------------------------------------------------------------------------------- /src/images/benches-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-320.webp -------------------------------------------------------------------------------- /src/images/benches-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-360.jpeg -------------------------------------------------------------------------------- /src/images/benches-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-360.webp -------------------------------------------------------------------------------- /src/images/benches-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-480.jpeg -------------------------------------------------------------------------------- /src/images/benches-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-480.webp -------------------------------------------------------------------------------- /src/images/benches-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-640.jpeg -------------------------------------------------------------------------------- /src/images/benches-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches-640.webp -------------------------------------------------------------------------------- /src/images/benches.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/benches.jpg -------------------------------------------------------------------------------- /src/images/boardwalk-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-1024.jpeg -------------------------------------------------------------------------------- /src/images/boardwalk-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-1024.webp -------------------------------------------------------------------------------- /src/images/boardwalk-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-320.jpeg -------------------------------------------------------------------------------- /src/images/boardwalk-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-320.webp -------------------------------------------------------------------------------- /src/images/boardwalk-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-360.jpeg -------------------------------------------------------------------------------- /src/images/boardwalk-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-360.webp -------------------------------------------------------------------------------- /src/images/boardwalk-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-480.jpeg -------------------------------------------------------------------------------- /src/images/boardwalk-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-480.webp -------------------------------------------------------------------------------- /src/images/boardwalk-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-640.jpeg -------------------------------------------------------------------------------- /src/images/boardwalk-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk-640.webp -------------------------------------------------------------------------------- /src/images/boardwalk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/boardwalk.jpg -------------------------------------------------------------------------------- /src/images/business-center-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-1024.jpeg -------------------------------------------------------------------------------- /src/images/business-center-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-1024.webp -------------------------------------------------------------------------------- /src/images/business-center-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-320.jpeg -------------------------------------------------------------------------------- /src/images/business-center-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-320.webp -------------------------------------------------------------------------------- /src/images/business-center-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-360.jpeg -------------------------------------------------------------------------------- /src/images/business-center-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-360.webp -------------------------------------------------------------------------------- /src/images/business-center-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-480.jpeg -------------------------------------------------------------------------------- /src/images/business-center-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-480.webp -------------------------------------------------------------------------------- /src/images/business-center-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-640.jpeg -------------------------------------------------------------------------------- /src/images/business-center-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center-640.webp -------------------------------------------------------------------------------- /src/images/business-center.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/business-center.jpg -------------------------------------------------------------------------------- /src/images/empty-road-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-1024.jpeg -------------------------------------------------------------------------------- /src/images/empty-road-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-1024.webp -------------------------------------------------------------------------------- /src/images/empty-road-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-320.jpeg -------------------------------------------------------------------------------- /src/images/empty-road-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-320.webp -------------------------------------------------------------------------------- /src/images/empty-road-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-360.jpeg -------------------------------------------------------------------------------- /src/images/empty-road-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-360.webp -------------------------------------------------------------------------------- /src/images/empty-road-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-480.jpeg -------------------------------------------------------------------------------- /src/images/empty-road-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-480.webp -------------------------------------------------------------------------------- /src/images/empty-road-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-640.jpeg -------------------------------------------------------------------------------- /src/images/empty-road-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road-640.webp -------------------------------------------------------------------------------- /src/images/empty-road.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/empty-road.jpg -------------------------------------------------------------------------------- /src/images/gas-station-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-1024.jpeg -------------------------------------------------------------------------------- /src/images/gas-station-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-1024.webp -------------------------------------------------------------------------------- /src/images/gas-station-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-320.jpeg -------------------------------------------------------------------------------- /src/images/gas-station-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-320.webp -------------------------------------------------------------------------------- /src/images/gas-station-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-360.jpeg -------------------------------------------------------------------------------- /src/images/gas-station-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-360.webp -------------------------------------------------------------------------------- /src/images/gas-station-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-480.jpeg -------------------------------------------------------------------------------- /src/images/gas-station-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-480.webp -------------------------------------------------------------------------------- /src/images/gas-station-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-640.jpeg -------------------------------------------------------------------------------- /src/images/gas-station-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station-640.webp -------------------------------------------------------------------------------- /src/images/gas-station.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/gas-station.jpg -------------------------------------------------------------------------------- /src/images/glass-jar-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-1024.jpeg -------------------------------------------------------------------------------- /src/images/glass-jar-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-1024.webp -------------------------------------------------------------------------------- /src/images/glass-jar-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-320.jpeg -------------------------------------------------------------------------------- /src/images/glass-jar-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-320.webp -------------------------------------------------------------------------------- /src/images/glass-jar-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-360.jpeg -------------------------------------------------------------------------------- /src/images/glass-jar-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-360.webp -------------------------------------------------------------------------------- /src/images/glass-jar-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-480.jpeg -------------------------------------------------------------------------------- /src/images/glass-jar-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-480.webp -------------------------------------------------------------------------------- /src/images/glass-jar-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-640.jpeg -------------------------------------------------------------------------------- /src/images/glass-jar-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar-640.webp -------------------------------------------------------------------------------- /src/images/glass-jar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/glass-jar.jpg -------------------------------------------------------------------------------- /src/images/highrises-night-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-1024.jpeg -------------------------------------------------------------------------------- /src/images/highrises-night-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-1024.webp -------------------------------------------------------------------------------- /src/images/highrises-night-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-320.jpeg -------------------------------------------------------------------------------- /src/images/highrises-night-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-320.webp -------------------------------------------------------------------------------- /src/images/highrises-night-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-360.jpeg -------------------------------------------------------------------------------- /src/images/highrises-night-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-360.webp -------------------------------------------------------------------------------- /src/images/highrises-night-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-480.jpeg -------------------------------------------------------------------------------- /src/images/highrises-night-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-480.webp -------------------------------------------------------------------------------- /src/images/highrises-night-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-640.jpeg -------------------------------------------------------------------------------- /src/images/highrises-night-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night-640.webp -------------------------------------------------------------------------------- /src/images/highrises-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highrises-night.jpg -------------------------------------------------------------------------------- /src/images/highway-water-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-1024.jpeg -------------------------------------------------------------------------------- /src/images/highway-water-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-1024.webp -------------------------------------------------------------------------------- /src/images/highway-water-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-320.jpeg -------------------------------------------------------------------------------- /src/images/highway-water-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-320.webp -------------------------------------------------------------------------------- /src/images/highway-water-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-360.jpeg -------------------------------------------------------------------------------- /src/images/highway-water-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-360.webp -------------------------------------------------------------------------------- /src/images/highway-water-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-480.jpeg -------------------------------------------------------------------------------- /src/images/highway-water-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-480.webp -------------------------------------------------------------------------------- /src/images/highway-water-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-640.jpeg -------------------------------------------------------------------------------- /src/images/highway-water-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water-640.webp -------------------------------------------------------------------------------- /src/images/highway-water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/highway-water.jpg -------------------------------------------------------------------------------- /src/images/light-streaks-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-1024.jpeg -------------------------------------------------------------------------------- /src/images/light-streaks-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-1024.webp -------------------------------------------------------------------------------- /src/images/light-streaks-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-320.jpeg -------------------------------------------------------------------------------- /src/images/light-streaks-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-320.webp -------------------------------------------------------------------------------- /src/images/light-streaks-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-360.jpeg -------------------------------------------------------------------------------- /src/images/light-streaks-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-360.webp -------------------------------------------------------------------------------- /src/images/light-streaks-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-480.jpeg -------------------------------------------------------------------------------- /src/images/light-streaks-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-480.webp -------------------------------------------------------------------------------- /src/images/light-streaks-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-640.jpeg -------------------------------------------------------------------------------- /src/images/light-streaks-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks-640.webp -------------------------------------------------------------------------------- /src/images/light-streaks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/light-streaks.jpg -------------------------------------------------------------------------------- /src/images/music-hall-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-1024.jpeg -------------------------------------------------------------------------------- /src/images/music-hall-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-1024.webp -------------------------------------------------------------------------------- /src/images/music-hall-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-320.jpeg -------------------------------------------------------------------------------- /src/images/music-hall-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-320.webp -------------------------------------------------------------------------------- /src/images/music-hall-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-360.jpeg -------------------------------------------------------------------------------- /src/images/music-hall-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-360.webp -------------------------------------------------------------------------------- /src/images/music-hall-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-480.jpeg -------------------------------------------------------------------------------- /src/images/music-hall-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-480.webp -------------------------------------------------------------------------------- /src/images/music-hall-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-640.jpeg -------------------------------------------------------------------------------- /src/images/music-hall-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall-640.webp -------------------------------------------------------------------------------- /src/images/music-hall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/music-hall.jpg -------------------------------------------------------------------------------- /src/images/terrace-window-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-1024.jpeg -------------------------------------------------------------------------------- /src/images/terrace-window-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-1024.webp -------------------------------------------------------------------------------- /src/images/terrace-window-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-320.jpeg -------------------------------------------------------------------------------- /src/images/terrace-window-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-320.webp -------------------------------------------------------------------------------- /src/images/terrace-window-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-360.jpeg -------------------------------------------------------------------------------- /src/images/terrace-window-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-360.webp -------------------------------------------------------------------------------- /src/images/terrace-window-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-480.jpeg -------------------------------------------------------------------------------- /src/images/terrace-window-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-480.webp -------------------------------------------------------------------------------- /src/images/terrace-window-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-640.jpeg -------------------------------------------------------------------------------- /src/images/terrace-window-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window-640.webp -------------------------------------------------------------------------------- /src/images/terrace-window.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/terrace-window.jpg -------------------------------------------------------------------------------- /src/images/water-drop-1024.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-1024.jpeg -------------------------------------------------------------------------------- /src/images/water-drop-1024.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-1024.webp -------------------------------------------------------------------------------- /src/images/water-drop-320.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-320.jpeg -------------------------------------------------------------------------------- /src/images/water-drop-320.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-320.webp -------------------------------------------------------------------------------- /src/images/water-drop-360.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-360.jpeg -------------------------------------------------------------------------------- /src/images/water-drop-360.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-360.webp -------------------------------------------------------------------------------- /src/images/water-drop-480.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-480.jpeg -------------------------------------------------------------------------------- /src/images/water-drop-480.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-480.webp -------------------------------------------------------------------------------- /src/images/water-drop-640.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-640.jpeg -------------------------------------------------------------------------------- /src/images/water-drop-640.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop-640.webp -------------------------------------------------------------------------------- /src/images/water-drop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tannerdolby/eleventy-photo-gallery/d45cdc299bfc05928a9b825c6d8a680286dcbaab/src/images/water-drop.jpg -------------------------------------------------------------------------------- /src/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | eleventyNavigation: 3 | key: Home 4 | order: 0 5 | heading: Photo Gallery 6 | description: A collection of recent images. Stock photos currently provided from Pexels. Add or remove images from the grid and customize your own image gallery! 7 | layout: main.njk 8 | title: Eleventy Photo Gallery Template 9 | meta_desc: A photo gallery template with stock photos provided from Pexels. Add or remove images from the grid and customize your own image gallery! 10 | url: https://eleventy-gallery.netlify.app 11 | img: /images/terrace-window.jpg 12 | alt: Terrace outside shop window with green plants and pink tree on night street 13 | cardType: summary_large_image 14 | --- 15 | 16 |
17 |

{{ heading }}

18 |

{{ description }}

19 |
20 | 21 | {% include "partials/home-gallery.njk" %} --------------------------------------------------------------------------------