epidrome / cover-card

:necktie: Online business card with a minimal landing page theme for any social media or online presence account: fork, edit, and go!

Cover Card landing page theme

Quick set-up

1. Use this template
2. Edit the _config.yml with your online presence accounts and upload a background and an avatar image
3. Go to the Settings tab, then select Pages from the sidebar, and find (gh-pages branch) your new home page link

Dependencies

This theme is based on jekyll and jekyll-remote-theme. These dependencies are natively supported by Github Pages, which should build and deploy your site as soon as you make any change to your files. The theme is also based on the icons from Font Awesome.

Motivation

Create a cover page for your social media profiles, host it for free on Github Pages, and maintain it in minutes, not hours.

I understand that a jekyll theme without a blog might sound like a self contradiction, but jekyll has also motivated something even more useful than itself: seamless hosting with Github Pages.

This theme takes advantage of both jekyll and Github Pages, in order to create something similar to linktree, about.me and carrd, but without the price tag.

In addition to the official demo link, here is one more demo from my home page.

This theme is ideal for people or organizations who are busy enjoying their life or business and who want a simple business card for their online presence.

Please keep this README file because it contains the credits at the end and it might become handy after you have completely forgoten the set-up instructions.

Design rationale

The design rationale of this theme is to do less than other themes: "Less is more"

The majority (99%) of the availabe jekyll themes offers a blog, but I have never been able to keep blog content (or its technology) updated over time.

Let's be honest with ourselves: How does an (abandoned) blog centered web site look to new visitors if we have not posted since two years ago?

Make it yours

Fork this repository and edit the files to your liking: As a first step, you may want to replace the images and edit the _config.yml with your online profiles. You can test the result almost in real-time at the Github Pages section in the Settings tab (gh-pages branch).

Avatar or Logo

The avatar image should be square and at least 200 pixels. Chances are that you have a selfie somewhere in your media storage. If you are making a page for a business or product, then use a logo.

Background image sets the mood

There is no aspect ratio requirement for the background image, but it should be big enough for contemporary (desktop, tablet, phone) computer displays and dark enough in order to work for the white foreground text and icons.

Social profiles

Edit the _config.yml file with your social media profiles by adding the respective account name, according to the documentation and comments inside that file. You can delete or comment out the social media that you don't need. Since v04, you can also control the order of your social media accounts. Moreover, you can add new media accounts and choose the icon.

Domain name

Github Pages supports free custom domain names, so it is worth buying a domain name and fill it in Custom domain field at the settings. If you want to use the theme with you user page (ie. username.github.io), then delete (or rename) your master branch and rename your gh-branch to master #13

Working example

In addition to the configuration file in this repository, you can also inspect a modified example of the legacy configuration file, which is using the legacy version of the theme. Moreover, you can inspect a custom (icons, links) example of the current version.

Updates

Please note that the theme is currently in beta, so some updates at the master branch might break your site. Don't panic!

If you wish to keep your theme frozen and not receive updates, then you can revert your remote_theme to the last known good configuration:

You may also optionally specify a branch, tag, or commit to use by appending an @ and the Git ref (e.g., epidrome/[email protected]). If you don't specify a Git ref, the master branch will be used.

Please note that currently Github Pages seems to build your site only when you make a local change. This means that the theme might get updated but you will not receive the updated version unless you make a local change in your forked repository.

You can always visit releases for new features and check issues for major bugs.

Expert options

You can find and locally overide advanced options (e.g., font, image, and icon styles) for this theme in the documentation (readme) at the master branch.

Credits

This page is based on the cover-card jekyll remote theme.

Background photo by Anders Jildén and avatar photo by Ayo Ogunseinde, both on Unsplash

cover-card's Issues

Add alternative layouts

The theme supports a background and a profile image along with two lines of text and a list of social media icons.

The default layout presents the above elements horizontally and there is also a responsive mobile adjustment.

Consider adding alternative layouts that use fewer elements and/or present the same elements in a different way.

[Feature Request] Ability to add some manual text or analytics code to page

It would be great to have an option to add some additional text to my page if (when) needed. Also that feature would be useful to add some analytics code if needed.
Maybe that is already possible but I don't know how/where exactly I could do it.

Theme development workflow

Should a theme repo contain a test folder with a typical configuration and assets, especially under the assumption that the exact same files exist in another branch on the same repo?

Option 1 Red pill: I want the repo to remain clean and tidy, i do not want to maintain the same file at two difference places
Option 2 Blue pill: Replicated filez are fine with me, we have plenty storage, i am unable to create a new folder, convenience rulez!

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://epidrome.github.io/cover-card/" and found these accessibility errors:

• Page https://epidrome.github.io/cover-card/:
  • Issue d3c8c6d5-71d4-4c2c-b9f0-187177aab628:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #avatar
    • Context: <img src="avatar.jpg" id="avatar">
  • Issue a98c0aa6-faee-4ab4-a510-4b220a1d62c4:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #fullscreen
    • Context: <img src="background.jpg" id="fullscreen">
  • Issue 83ae4206-3fc1-4400-9f5a-fdfcca6255b2:
    • Type: Error
    • Code: WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
    • Message: The html element should have a lang or xml:lang attribute which describes the language of the document.
    • Selector: html
    • Context: <html><head> <meta charset="u...</html>

You can check these accessibility errors using pa11y.

After the website is deployed, a blank page is displayed.

repo

Integrity checksum for stylesheet is outdated

The integrity checksum for the "fontawesome" stylesheet is outdated.

Social links management

• Consider adding a loop for social links. There are so many social links and there might be more in the future.

• Moreover, users might want to customise the order of appearance

• Consider full http url for social links #7

• In addition to a loop we might want to organise them in a separate structure #3
  https://help.github.com/articles/repository-metadata-on-github-pages/

Strange blank rectangular at the bottom during page scrolling on mobile view

Hi! I think this gif is sufficient to clarify what happens. Look carefully at screen during scrolling... it shows up a small blank rectangular at the bottom. I think is something related to responsive (or not-responsive) background. Have any idea about? For sure, it happens only in the mobile view and it is not related to the background image (i.e. the same using gradient).
Thanks!

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://epidrome.github.io/cover-card/" and found these accessibility errors:

• Page https://epidrome.github.io/cover-card/:
  • Issue d3c8c6d5-71d4-4c2c-b9f0-187177aab628:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #avatar
    • Context: <img src="avatar.jpg" id="avatar">
  • Issue a98c0aa6-faee-4ab4-a510-4b220a1d62c4:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #fullscreen
    • Context: <img src="background.jpg" id="fullscreen">
  • Issue 83ae4206-3fc1-4400-9f5a-fdfcca6255b2:
    • Type: Error
    • Code: WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
    • Message: The html element should have a lang or xml:lang attribute which describes the language of the document.
    • Selector: html
    • Context: <html><head> <meta charset="u...</html>

You can check these accessibility errors using pa11y.

Bug: email and blog are displayed with bold font

in responsive mode (media 450px) the font is bold only for email, blog, which use the fas fa type instead of fab

Setting cover-card jekyll theme to xxxxx.github.io doesn't work

I appologise in advance, this is probably not a bug, only my lack of knowledge. it seems that this jekyll theme only works if you set github page like this - bungabunga.github.io/bungabunga, and not like this - bungabunga.github.io. is it possible to somehow make it work the other way, because then the adress is simpler to remember?

thanks!

academicons

Nice - is there a way for me to add academicons? https://jpswalsh.github.io/academicons/

[ Ask for feature ] Responsive background

Hello,

Can the background be in a responsive container!

Regards
Anas

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://epidrome.github.io/cover-card/" and found these accessibility errors:

• Page https://epidrome.github.io/cover-card/:
  • Issue d3c8c6d5-71d4-4c2c-b9f0-187177aab628:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #avatar
    • Context: <img src="avatar.jpg" id="avatar">
  • Issue a98c0aa6-faee-4ab4-a510-4b220a1d62c4:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H37
    • Message: Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.
    • Selector: #fullscreen
    • Context: <img src="background.jpg" id="fullscreen">
  • Issue 83ae4206-3fc1-4400-9f5a-fdfcca6255b2:
    • Type: Error
    • Code: WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
    • Message: The html element should have a lang or xml:lang attribute which describes the language of the document.
    • Selector: html
    • Context: <html><head> <meta charset="u...</html>

You can check these accessibility errors using pa11y.

Performance of Font Awesome

Consider Font Awesome performance.

It seems that the individual SVG version might be more suitable for the typical use case of the theme

This choice might also affect the implementation of the CSS and/or the main layout, which is also open for discussion

Making email link work via web form services

I'd like to make the email link on cover-card jekyll theme work not via direct email adress but via some web form (like Kontactr) to stay more anonymous and to better protect myself from spam. This is currently only possible via trick; setting the Kontactr adress as my blog, but then the icon isn't right (see: https://bungabunga.github.io/bungabunga/). Could you possibly enable this option (email icon and custom url field)?

Thanks!

Configuration options for CSS parameters such as font, avatar, background image

Consider adding options in _config.yml as parameters for visual style, because it seems that some users want to change attributes in the CSS such as

• font (e.g., family, size)
• avatar image (e.g., transparency, no border)
• background image (e.g., solid color, responsive size vs clipping)

It is worth assessing current use by existing users, but I guess that there is trade-off between simplicity-features, ie some hacks are best left to advanced users as local changes