next-profile_page's Introduction

Welcome to My Personal Website

This is my personal website to get to know more about me and my progress, this website and all the corresponding styles is truly inspired by Superrb and animation of this website is with the help of Animate Style and the helpful people mentioned below.

Website

fadlim.space : https://fadlim.space

Run Locally

$ git clone https://github.com/mfadlika/Next-Profile_Page.git
$ cd Next-Profile_Page
$ npm install
$ npm run dev

About the Website

This website is built with Next JS and Tailwind, inspired by Superrb and animation of this website is with the help of Animate Style. To install Animate Style to your project:

$ npm install animate.css --save

Add it directly to your webpage using a CDN:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

To implement it to your corresponding element you want to animate:

After installing Animate.css, add the class animateanimated to an element, along with any of the animation names (don't forget the animate prefix!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

And for more information you can deep dive to their website: Animate Style.

For the other animations, big thanks to their beautiful works:

The Menu Hamburger Icon Animation is animated by Jesse Couch, you can see the work and the source code at Jesse Couch's CodePen account.
The Waves Animation is animated by Ted McDonald at Ted McDonald's CodePen.
The Shining Text Effect Animation on hovering the Navigation Link is animated by Fazlur Rahman at Fazlur Rahman's CodePen account.
The Night Sky Animation in the dark mode is animated by Sobhan Dash at dev.to

For Dark Mode, here's the nice article you can read: egghead.io

Recommend Projects