floating-brain

• A beautiful API for your portfolio, to present your skills
• Works with JSON
• Responsive and easy to use
• Styling can be easily customized!

➤ Table of Contents

• ➤ Description
• ➤ 0. Installation
• ➤ 1. Set your data
• ➤ 2. Feed the module with data
• ➤ 3. Customize styling
• ➤ License

➤ Description

Floating-brain is a simple to use API, allowing you to present your skills and their description in a unique and eye-catching way. In order to use it, all you need is to call a function, where you will pass the data you need.

➤ 0. Installation

Install the component...

npm install floating-brain

...and import it afterwards

<script type="module">
import { floatingBrain } from "./lib/index.js";
</script>

➤ 1. Set your data

You can pass exactly 5 skills with they descriptions. All of them need to be grouped into a one object. The best is for you to define the object, and the pass it in the arguments. You should also chose the placeholder where the descriptions will be displayed after the user hovers over a certain skill. Finally, you need to pass the fallback sentence, to which the placeholder for skills descriptions will be reseted after the user moves the mouse or taps away from the SVG.

Optionally, you may also chose the parent, where you want to append the module. If you don't define the parent, the floating brain will be appended to the body of the document. Another optional argument is the width of the module, to which the whole svg will scale. The default is defined to be "40vw", however you might change it.

 let mySkills = {
            sleeping: "I sleep",
            eating: "I eat",
            running: "I don't run",
            jumping: "I can jump",
            crying: "I cri"
        };
let fallbackText = "Check out my skills";
let placeholder =  document.querySelector("p");
let parent = document.querySelector("#parent");
let width = "35vw"

➤ 2. Feed the module with data

After importing the component and creating your own data, it's time to combine both.

Vanila JS:

let brain = floatingBrain(mySkills, fallbackText, placeholder, width, parent);

➤ 3. Customize styling

The module can be easily customized according to your style needs, just like in the example below:

In order to implement your own styling, all you need is to define the css variables mentioned in the code below. The font is inherited, so you can simply assign it to the module f.ex. through a unique id.

:host{    
    --skill1-background-color: yellow;
    --skill2-background-color: orange;
    --skill3-background-color: red;
    --skill4-background-color: green;
    --skill5-background-color: purple;
    --floating-brain-font-family: "Dosis";
}
#mytreeview {
font-family: "Dosis", sans-serif;
color: purple;
}

If you decide not to apply any styling, the module will fallback to the default styling, as in the demo gif.

➤ License

Licensed under MIT.