Rocktim Saikia

Posted on Apr 14, 2020

Beautiful GitHub cards for your portfolio website. 🎉

#showdev #webdev #javascript

Repo: https://github.com/RocktimSaikia/github-card
Live: https://codepen.io/RocktimSaikia/full/jObbBmR

For a couple of days, I've been learning about web components. It's a completely new concept for me.I've heard about it before but never actually tried it. So this time I set my mind to build one from complete scratch.

So I planned to create a GitHub profile card web component that can be embedded on any website. Once the idea was clear I started creating quite a few card designs. Here are some designs I created before settling with the final design.

Usage

1.Through importing script

<github-card data-user="rocktimsaikia"></github-card>

<script src="https://unpkg.com/@rocktimsaikia/github-card@1.0.0/dist/widget.min.js" type="module"></script>

2.Through installing the package

import "@rocktimsaikia/github-card";

<github-card data-user="rocktimsaikia"></github-card>

If you want to contribute to this project please do. That would be awesome😊

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Java Counter Culture - Cultural Javism

Fernando Ollé - Dec 17 '24

7 Secret UI Libraries No One Talks About 🔥

Random - Dec 15 '24

🦸 Supercharge your debugging skills with the console.trace

Ravin Rau - Dec 13 '24

My 2025 AI Engineer Roadmap List

CyprianTinasheAarons - Dec 16 '24

DEV Community