A simple webpage for displaying a collection of links. Each link can have an optional background image, link text, or icon. The layout of the links will be generated automatically, depending on the number of links to be displayed.
For a live demo, you can visit uberpage.schreck.berlin, for which this project was created initially. I also created an overview of GitHub projects as my GitHub Page.
- Fill
data.jswith your items. See about possible configuration in the next paragraph. - Put the necessary images in appropriate quality at
public/img. Reference them in thedata.jsby filename only, not including the path. I suggest using SVG files which offer better scalability. - Deploy on somewhere. I've included some guides below.
- Done.
data.js:
export default {
items: [
{
link: 'https://github.com/StegSchreck', // optional
title: 'https://github.com/StegSchreck', // optional
description: 'My open source projects on GitHub', // optional
text_color: '#ffffff', // defaults to '#4A86E8' - affects both title and description (if set)
background_logo: 'GitHub_white.svg', // optional
background_logo_size: '70%', // defaults to '50%'
background_picture: 'cover.jpg', // optional
background_picture_size: 'cover', // defaults to 'cover'
background_color: '#000000', // defaults to '#282c34'
},
// ... more items ...
],
// ...
}The effect of the background configuration values is as follows (from top to bottom):
title(ordescriptionon hover)background_logobackground_picturebackground_color
This means if both background_logo and background_picture are set, that the logo will cover parts of the picture.
Additionally, if a title is set, it with have a darkening effect on whatever is underneath to make it more readable.
Obviously there is no connection to any mobility provider. The word "uber" is taken from the German word "über", meaning "over", "above" or "on top". As this project is meant to act as an overview page for multiple other pages via linking, this name can be taken literally.