Paperboat.page






	

		

			
			Paperboat.page		
	


	

		A simple website for showcasing your creative works	
	

	
	







	
	







Paperboat Portfolio



A simple website for showcasing your creative works


The core idea is to make it easy to add your creative works to your website.


You just upload the images of your creative projects to a folder and create a .html file with the text and the links you want with the images/projects. Then Paperboat will add this to the menu of your website and show the images of your project as a gallery view.


You can also create simpler pages with your CV or contact information to your website.


You can see it in action on:



The source code is available at: https://codeberg.org/sorenpeter/paperboat


Paperboat is still very much a work-in-progress, so always make a backup before trying a new version of Paperboat.


🛠 Installation and setup


    

  1. You need a web-hosting with PHP and a domain. You also need a FTP-client, I recommend Cyberduck (How to setup CyberDuck) or FileZilla. And a code editor, where I recommend Sublime Text
    2. 

  2. Download the ZIP from codeberg
    3. 

  3. Upload the content of the zip to the root folder or sub-folder via FTP
      

    • Make sure to get the hidden .htaccess next to index.php uploaded as well
      • 

    

    4. 

  4. Open settings.ini and add your info and set your preferred layout
    5. 

  5. Add your projects and pages (See below)
    6. 

  6. Customize the look and feel (See below below)
    7. 





🗂 Files and folders


Looking at Paperboat's file and folders structure should give you an idea of where things go and what they do.





Adding your content


🗃 Creating pages and projects


Paperboat supports two types of content, pages and projects. Pages is for general information and have less features than projects. Projects are for showing your actual creative works. Pages and Projects are also listed separately in the navigation menus, and there are some options for tweaking each (see further down).


To create a new page go to the pages folder and create a .html file, or make a copy of one of the pages already there and rename it.


To create a new project go to the projects folder. Here you create a new folder, and in that new you create a .html file. It doesn't matter what this file is called, but I recommend something simple like content.html. You can also make a copy of one of the projects already there and rename it.


To get a gallery of images related to a project simply add the image files to that specific project folder, and they will be shown in a grid view.


📝 Inside the HTML


The first <h1> within a html-file in the pages or projects folders determines the title of the page or project. The title is what is shown in the navigation menu.


<h1>Name of my project</h1>

<p>This is a paragraph</p>

<a href="https://example.com">This is a Link to example.com</a>

<h2>This is a sub heading</h2>

<p>And another paragraph</p>





If you don't already know HTML and CSS, here is a few good places to get you started:



📸 Covers for projects


You can add a cover image to your project, which is shown on the on the home page or on a tags page.
Just add a cover.png, cover.jpg, or cover.gif to each project folder.
Note that the cover image will also be shown as part of the gallery view, so you can also just rename
one of the images to contain the word cover eg. IMG33123_cover.jpg.


If there is no cover image file for a project, then a default cover from /assets/cover.png will be used.
You can change the default cover by replacing the cover.png in the assets folder.




Layout


🎨 Customize the look and feel


Paperboat comes with some very basic layout and color schemes. You can customize them by adding a custom.css in the assets-folder.


To help you get started there is a custom_template.css you can rename or copy to custom.css


Besides the default layout, two more are included, called sidebar and topbar. You can activate them in the settings.ini.


To add your logo simply upload an image file called logo.png or logo.svg to the assets folder.



When you load a project page for then first time Paperboat will generate thumbnails for all the images in the gallery and save them to the thumbnails folder.


You can change the resolution of the thumbnails by change the number after thumbnail_size = in the settings.ini file.


After doing so you will have to delete the thumbnails folder to get fresh thumbnails. If there is any issues with thumbnails you can also delete the thumbnails folder.


If you don't want a grid view for your gallery, you can turn it off in your custom.css. If you do that, you also need to set the resolution of the thumbnails in settings.ini to something like thumbnail_size = 900 to avoid pixelated images.


If you want more control over where images and text are on a page, you can turn of the gallery feature by adding this html comment in your content.html file: <!-- Gallery: Off -->


Then you will have to manually add each image as html: <img src="filename.png">


✍️ Image captions


If you need to add captions to individual images, you can do so by adding it to the filename of the image after two dashes (--) and before the file type (eg. .jpg)


This will look something like this: IMG_24325445--Photo by Martin Johanson (2022).png,
and then the caption Photo by Martin Johanson (2022) will be shown underneath the image.


Please note there are some special symbols you cannot use in the filenames, so try keep it to plain text, numbers, parenthesis, periods, commas and at-signs.






In the settings.ini there are some option to control what elements will be shown in navigations menu.
To turn elements on or off, you simply change the word after the equal sign (=) to yes or no.


[Paperboat]
title = "Paperboat Portfolio"
author = "Firstname Lastname"
description = "A simple website for showcasing your creative works "
email = name@example.net

; Navigation layout options are: default, sidebar, topbar
navigation = default

; Show links to tags in the navigation menu
tags_in_navigation = no

; Show links to all projects in the navigation menu
projects_in_navigation = yes

; Show a list or grid of all project on the home page
projects_on_homepage = yes

; Sort projects in reverse to get newest first when using date prefixes such as 2026-03-20 (default:1-9, A-Z)
projects_in_reverse = yes

; Set width of thumbnails
thumbnail_size = 300





🏷 Tags for organizing your projects


If you have a lot of projects that you want to show in your portfolio, the navigation menu might get too crowed.


That is why Paperboat support tags. You add a tag by adding +tagname to the folder name of your project, so it will look like this: 00_my_first_project+art and 2025_expo_in_cph+art


Now you can get an overview of all your art projects by going to yoursite.net/art


You can also see all tags by visiting yoursite.net/tags


It is possible to add more then one tag to a project, so it will show up in multiple collections:



To make a tags page with a custom title and some extra text, you just need to create a page with the same filename as the tag.
So if you make a tags-page called /pages/art.html it will show all your projects with the tag +art under whatever you put in that file.



If want more control over how your navigation or footer menu looks, you can completely overwrite the auto-generated menus.
You do this by creating a file called navigation.html or footer.html in the assets folder.


I recommend that you copy the html code from inside the <nav> or <footer> tags before you make the new files.
You can always rename navigation.html or footer.html to something else to deactivate them. That makes it easy for you to get the auto-generated menus back.




📣 Inspiration / Shutouts