An Eleventy Starter kit for a portfolio site.
It's a starter kit to help you build you own static portfolio website without having to do everything from scratch yourself.
It's ready to be build as it is but you'll have to set some things up to make it your own.
Currently used on my own portfolio but this tool comes with several example pages so you can quickly serve locally and see it in action if you want to start playing with it immediately.
NB: Note that most of example pictures are from Unsplash.com and are credited in their own page.
You'll be able to choose between a dark theme, a light theme or let it be automatic and let the user's preferences choose for you.
You can choose to have a splash screen with a smooth slideshow of pictures of your choice.
There's 4 types of grid for your home or your tag pages and it doesn't have to be the same for both.
Like Flickr or 500px.
Like Pinterest.
Like Instagram.
No grid, just pictures after pictures.
You can choose to display the EXIF metadata or not.
The metadata displayed (if available) are:
- camera's brand and model
- shutter speed
- focal length
- aperture
- ISO
- date of when the picture was taken
Display tags or not on post pages.
If you tag your photo with only one tag it may be not relevant to show it on the post page, in that case you can choose to hide it.
Whether you have your own selling platform or you prefer to deal with it yourself by hand, you can add a link to buy a print of a picture and maintain your available stock.
You have the ability to add any external links in the menu and even more, if you have social networks accounts, you'll be able to easily add your links.
First things first, clone or download this repository. Once you have it on your computer it's time to start coding.
This starter kit being an eleventy project has to be setup like an eleventy project.
First, edit the file _data/metadata.json file.
You'll want to edit it all with your own information.
{
"title": "Niepce",
"url": "https://portfolio.niepce.tld",
"language": "en",
"locale": "en_US",
"description": "Niepce's personal portfolio",
"author": {
"name": "Nicéphore Niépce",
"email": "nicephore@niepce.tld",
"url": "https://www.niepce.tld"
}
}Then it's time to choose your theme preferences, to do so open the _data/niepce.js file and edit it as you see fit.
module.exports = {
splash: "true",
splash_link: "Browse",
splash_line: "Take a look at my work…",
grid: "masonry",
grid_tags: "justified",
theme: "auto",
logo: "",
banner: "",
exif: true,
tags: true,
shop_link: "Buy a print",
socials: {
"500px": "",
behance: "",
deviantart: "",
flickr: "",
glass: "https://glass.photo/gooz",
instagram: "https://www.instagram.com/gooz/",
notos: "",
pixelfed: "https://pixelfed.social/i/web/profile/422334934806983747",
tumblr: "",
},
links: [
{
label: "Blog",
url: "https://blog.foojin.com",
},
],
series: ["Scotland", "Iceland"],
}Key splash
Value true | false
Choose to have a splash screen as your homepage. If false, the homepage will be the most recent posts page, otherwise the link on the splash screen will lead to the most recent posts page and it will appear in the navigation.
Pictures in the slideshow will be the ones with the featured: true metadata.
Key splash_link
Value String
Label for the link on the splash screen. This link will lead to the most recent posts page.
Key splash_line
Value String
Welcome sentence to appear above the link to the most recent page. Leave it empty if you don't want to display any welcome sentence.
Key grid
Value masonry | justified | instagrid | monocolumn
It's your grid choice for your home and tag pages.
Key grid_tags
Value masonry | justified | instagrid | monocolumn
Grid of choice for your tag pages (categories & series). If undefined, the tag pages will display the same grid as the home page.
Key theme
Value light | dark | auto
Choosing a specific theme will enforce it for everyone but choosing auto will display one or the other depending on the user preferences.
Key logo
Value String
- If you want to use a binary file then set the path to your logo (any image format that can be displayed in a HTML
imgtag). It can be anywhere in thepublicfolder or even remote. - If it's a SVG and you want it inlined in the DOM so its color can change with the theme, add a suffix "-inline" to its filename (e.g. logo-inline.svg), store it anywhere in the
publicfolder and make sure the SVG doesn't have colors set on paths and that there's no conflictingfill="none"attributes. - If there's no logo provided then the title you set in the
metadata.jsonwill be displayed instead.
Key banner
Value String
Path to your site banner (any image format that can be displayed in a HTML img tag). It can be anywhere in the public folder or even remote. This image will only be used in OpenGraph tags unless you decide to use it somewhere else.
Key exif
Value boolean
Display or not the exif metadata of your pictures on the post page. If true and some exif metadata are not available, only those that are available will be displayed.
Key tags
Value boolean
Display or not the tags of the picture on the post page.
Key shop_link
Value String
Label of the link to buy prints.
Key social
Value Key (String): Value (String)
Only the social networks with links provided will be displayed.
Note that if needed you can add an unlisted social network but if you want to do so you will need to add its own SVG icon in the public/img/sprite folder and name it exactly as the key used here.
Key links
Value Key (String): Value (String)
If you want to add external links in your menu that's the way to go, provide a new object in the array with a label and an URL.
Key series
Value Array
If you have collections of pictures on specific topics and you want them to have their own page, then apply to those pictures a specific tag and add that tag in the Array so it can be filtered from the generic tags and get a page in the series section.
There you go, you're ready to build your portfolio.
Prerequisites: You'll need NPM installed on your computer
Now, in your terminal, go into the repository and type…
npm installIt will install all the needed dependencies to run and build your portfolio. Now let's start a server to see how it looks like…
npm run startThis command will build the portfolio and run a local web server to test the website.
Once the server tells you…
[11ty] Watching…
[11ty] Server at http://localhost:8080/It means you can open the http://localhost:8080/ URL in your browser.
N.B.: the first time you run the command it will take some time, this is normal. There's a few post examples with pictures already and the build needs to process those.
Now that your website is up and running you can add your own content.
Any content you want to add needs to be in the content folder, if you take a look, there's already some stuff in it.
The folders inside are posts examples and the about.md a standalone page example.
Feel free to trash those (except maybe feeds & sitemap unless you know what you're doing) when you familiarized yourself with how to create posts and pages but you should not delete the other files (again, unless you know what you're doing).
The only specific thing to know about post and pages are the data you set in the frontmatter, the data at the top of the markdown files, like so:
---
title: Title of the post
date: 2023-09-20
photo: photo.jpg
photo_alt: Portrait
tags: [portrait, mary]
featured: true
print_max: 30
print_current: 12
print_show_max: true
print_link: "../shop/"
---
In details:
Key title
Value String
The title of the post. It can be the title of your picture or something else.
Key date
Value String (date in ISO date format: YEAR-MONTH-DAY)
Publishing date of the post (not the capture date of the picture which should appear in the EXIF metadata).
Key photo
Value String
Path and filename of your picture, relative to the markdown file of the post.
Key photo_alt
Value String
Alternative text of your picture, used for screenreader users and in case the picture doesn't load for some reason.
Key tags
Value String or Array
Categories where your picture should be filed. If you only have one you can just write it tags: portrait but if you have more then you'll need to write an array like so tags: [portrait, mary].
Key featured
Value boolean
Pin your picture as featured, it will appear in the splash screen's slideshow if you enabled it. If not, it will do nothing.
Key print_max
Value Number
Maximum number of limited edition prints you would sell of that picture. Depending on the country ou live in it can vary. For example, it's 30 in France.
Key print_current
Value Number
Current number of prints sold. You'll need to update this number everytime you sell a print.
Key print_show_max
Value boolean
Displays the maximum number of prints you can make. Hidden by default.
Key print_link
Value String
URL to the page where the user can buy the print or to a page on your website explaining how to buy one. An exemple page (shop.md) exists to help you, remove it if you don't need it.
And that's about it.
By default category pages are just displaying every pictures tagged with those categories but you can add some kind of context or description.
To do so, you need to create a markdown file in the _includes/tags/ folder and name it as the category
name. For example, for a "Landscape" category, you'll need to create a landscape.md file.
Now write, in markdown, whatever you need to write in that file.
There is an example already in this starter kit, don't forget to remove it if you don't plan on using it.
By now you should have a running portfolio with your own content… but it's only local, on your computer.
You need to find yourself a hosting provider who serves static files (which should be every provider actually) and have NodeJS (>=16) installed as well.
Once this is done, you need to run npm i && npm run build to install the dependencies and build your site, then point the Apache config to the folder _site, this is where your portfolio is generated and what should be served. Everything else is just there to generate this folder.
For those of you wondering, the name Niepce comes from Nicéphore Niépce, one of the earliest pioneers of photography.
If you face any problem of have any question, feel free to drop an issue.
Credits to the photography in the social media preview goes to Zalfa Imani.