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.
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.
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": "[email protected]",
"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 = {
grid: "masonry",
grid_tags: "justified",
theme: "auto",
logo: "",
banner: "",
exif: true,
tags: true,
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 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 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.
---
title: Title of the post
date: 2023-09-20
photo: photo.jpg
photo_alt: Portrait
tags:
- portrait
---
This is where you set the title, date of the post (not the photo), file of the photo (and its alternative text) and the tags of the post.
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.