Repository files navigation

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 visituberpage.schreck.berlin, for which this project was created initially. I also created an overview of GitHub projects as myGitHub Page.

• Filldata.js with your items. See about possible configuration in the next paragraph.
• Put the necessary images in appropriate quality atpublic/img. Reference them in thedata.js by 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:

exportdefault{items:[{link:'https://github.com/StegSchreck',// optionaltitle:'https://github.com/StegSchreck',// optionaldescription:'My open source projects on GitHub',// optionaltext_color:'#ffffff',// defaults to '#4A86E8' - affects both title and description (if set)background_logo:'GitHub_white.svg',// optionalbackground_logo_size:'70%',// defaults to '50%'background_picture:'cover.jpg',// optionalbackground_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 (ordescription on hover)
• background_logo
• background_picture
• background_color

This means if bothbackground_logo andbackground_picture are set, that the logo will cover parts of the picture.Additionally, if atitle is set, it with have a darkening effect on whatever is underneath to make it more readable.

• AWS
• GitHub user page
• GitLab user page
• Uberspace

• React
• Nova Square font
• Bungee Hairline font

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.