@patrik-alexits/about-me-webcomponent v1.0.4

@patrik-alexits/about-me-webcomponent

Experimental Hybrids.js-based Web Component for an "about-me" section. This component allows for a personalized display of information such as name, profession, a brief text, and links to social media or other profiles.

Installation

To install this component, use the following command:

npm install @patrik-alexits/about-me-webcomponent

Usage

First, import the component in your JavaScript or TypeScript file:

import '@patrik-alexits/about-me-webcomponent';

You can then use the component in your HTML:

<app-about-me
    about-me-name="John Doe"
    about-me-profession="Jedi Council Member"
    about-me-text="I don't like sand. It's coarse and rough and irritating — and it gets everywhere."
    about-me-spotify-track-id="spotify_track_id"
    about-me-github-url="https://github.com"
    about-me-linkedin-url="https://linkedin.com"
    about-me-instagram-url="https://instagram.com"
    about-me-stackoverflow-url="https://stackoverflow.com"
></app-about-me>

Styling

The component can only be styled by CSS Custom Properties thourgh the Shadow DOM:

• background-color: var(--body-background);
• color: var(--font-color-bold) for headings or var(--font-color) for normal text;
• :hover color: var(--focus-color);

Interface "IAboutMe"

The component provides the following interface for customizing its content:

// Attribute: static value

<app-about-me about-me-name="John Doe"></app-about-me>

// Property: the only way to create dynamically changing value

<app-about-me aboutMeName="John Doe"></app-about-me>

• aboutMeName: string: The name to be displayed.
• aboutMeProfession: string: The profession or title to be displayed.
• aboutMeText: string: A brief text or description.
• aboutMeSpotifyTrackId?: string: Optional. Spotify track ID for embedding a track.
• aboutMeGithubUrl?: string: Optional. URL to a GitHub profile.
• aboutMeLinkedinUrl?: string: Optional. URL to a LinkedIn profile.
• aboutMeInstagramUrl?: string: Optional. URL to an Instagram profile.
• aboutMeStackOverflowUrl?: string: Optional. URL to a Stack Overflow profile.

License

This project is ISC licensed.