> Libraries

AnimeJS

Firstly, we have leveraged the power of AnimeJS, brought to us by the talented Julian Garnier. AnimeJS is a remarkable animation library that adds a new dimension of movement and visual appeal to our website. With its simple syntax and powerful capabilities, AnimeJS allows us to bring our content to life through fluid animations, captivating transitions, and delightful user experiences.

CDN

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

TypedJS

Next, we have integrated Typed.JS, created by the skilled developer Matt Boldt. Typed.JS brings a dynamic twist to our website's text elements. With this library, we can easily create engaging and eye-catching typing animations, mimicking the experience of a typewriter. This adds an element of intrigue and professionalism to our content, making it stand out in the minds of our users.

CDN

<scriptsrc="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

HighlightJS

Lastly, we've incorporated the brilliance of Highlight.JS, developed by Josh Goebel. This library is a boon for showcasing code snippets and technical content on our website. With Highlight.JS, our code blocks become more readable and comprehensible, thanks to its syntax highlighting capabilities. Whether it's HTML, CSS, JavaScript, or other programming languages, Highlight.JS ensures that our code examples are visually appealing and easy to follow.

CDN

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

> Typing Animation

Used to create a dynamic and immersive text animation in our landing page.

    
    const typed = new Typed(".auto-type", {
        strings: ["Prototyping", "Coding", "Debugging"],
        typeSpeed: 140,
        backSpeed: 30,
        backDelay: 2000,
        cursorChar: "_",
        loop: true
    })
    

It place a strings on the selected HTML element class .auto-type that automatically loops between inputed strings in the JavaScript code. Selectors varies between HTML Element, Class, or Id.

You can see Typed.JS documentation for more details.

> SVG/Image Animation

An SVG or Image animation that lowkey kinda nice

    
    const svgLeft = anime({
        targets: '#svg-left',
        translateX: [0, 180, 0],
        duration: 2000,
        autoplay: true,
        easing: 'easeInOutElastic',
        delay: 600,
        loop: true
    })

    const svgRight = anime({
        targets: '#svg-right',
        translateX: [0, -180, 0],
        duration: 2000,
        autoplay: true,
        easing: 'easeInOutElastic',
        delay: 600,
        loop: true
    })
    

Works almost the same as earlier, placed a JS code in the selected HTML element (in this case SVG/IMG) then put an animation to it.

As usual, you can learn more by visiting Anime.JS documentation.

> Stagger Animation

What's a stagger? basically a multi-animated child element in the same parent. You can see the examples of our stagger animations up here.

    
    const labelAnimation = anime({
        targets: '.badge .labelStagger',
        translateY: [0, 20, 0],
        easing: 'easeInOutCubic',
        autoplay: true,
        loop: true,
        duration: 2000,
        delay: anime.stagger(100)
    })
    

.badge is a parent class, and .labelStagger are the children. You can use the stagger anime.stagger() function to make the child animate 1 by 1 on the specified delay. More about staggering here

> Colors

Our color palette were designed to reflect the essence of technological advancement.

    
    :root {
        --text: #fff;
        --background: #141725;
        --primary: #1445b7;
        --active: #3067e7;
        --black: #000;
        --yellow: #f2bf26;
        --sky: #3499ec;
      }
    

Use :root element to make the styling progress easier. Or you can do inline styling just like this paragraph are, whatever. You can use Realtime Colors for your pallete needs.

> Highlights

    
    // This Highlighted text made by Highlight.JS with a little spices.

    // You can use it by importing the library CDN then use

    hljs.highlightAll()

    // To start.
    

You can find the CDN of Highlight.JS on our Libraries section.

> Typography

We used Poppins as the main typeface (font) of this website, you can easily import the font to your CSS on Google Font.