Svelte2023

SupaHotBall

Anson Lee

OverView Of Website

Welcome to my JuJutsu Kaisen website, the perfect place for anime lover! My website is all about the jujutsu kaisen, with lots of pictures and videos to look at.

First of all, you enter to the main page then you will see a intro of the JuJutsu Kaisen video from youtube and the back ground are blur, onc eyou click on the close button on the top right of the video, then everything will be clear to see.
Second, hover to the character button that have a hover effect with diff color on it, onc eyou click on it then a huge eye will fade out to your screen, also will isplay 3 of the characters i like the most in this anime, which are Gojo, Ryomen an Kento. Also when u hover your mouse on the character name it will have transition effect which is pretty cool i think.
Thrid, click either one of the character then you will see some cool animation effect on the left side of the screen, those are Gojo name with English and Japanese. below his name there have some clip videos of Gojo only, also you can click the right button to slide to the right to see more videos of himself. Also if you want to see others character feel free to click on the character button on the top right corner.
Fourth, click on the photo slider, then u will see some cool images which are displaying in the center of the screen and in the bottom there have some button with auto slide and manual slide to the left and right. There are total 5 cool image on that page.
Last, the fetching API page, Im doing my best to solve the problem of the width and height of the fetching image. But AT LEAST i got it fetching right :D

Technology Used

Svelte - Svelte is a modern JavaScript framework that compiles components into highly efficient, framework-less JavaScript code during the build process, offering a fast and lightweight approach to building web applications.
Unsplash - A website that offers an API for retrieving data.
HTML - Elements tell the browser how to display the content
CSS - Describes how HTML elements are to be displayed on screen, paper, or in other media
JAVASCRIPT - Programming language that allows you to implement complex features on web pages

Development Tools

Node.js - The runtime environment used to run Javascript on the server.
GIT - The version control system used for source code management.

VISUAL STUDIO CODE - The cource code eitor used for development.

Screenshots an Layout Design

First link:

[git clone https://github.com/SupaHotBall/svelte2023.git](https://dribbble.com/shots/19973668-Jujutsu-Kaisen-Anime-Landing-Page)

I mostly used the whole page of the website as my character pages, like the character name, video clips and color. Because i found out this is really cool so i decide to use this as my layout.

Second link:

[git clone https://github.com/SupaHotBall/svelte2023.git](https://dribbble.com/shots/19973668-Jujutsu-Kaisen-Anime-Landing-Page)](https://jujutsukaisen.jp/)

In this site i used his main page fade in vieo as my layout, coz i really want this kind of animation especially for anime website, definitelty need this kind of animation to make the websit emore interseting.

Third link:

https://www.youtube.com/watch?v=0wvrlOyGlq0

I used this link as my sildes show page, becuase i found it pretty cool with the auto and manual slides show so i desgined to follow it step by step detily.

Installation

Clone a repo:

git clone https://github.com/SupaHotBall/svelte2023.git

Change the directory:

You can skip this step if you're in this directory.
```
cd svelte2023
```

Open a file in Visual Studio Code

Install dependencies:

- npm i

Run the webpage:

npm run dev

Future Features

For future implement of the website:

Better quality of the video not just youtube
Design a webpage for my bset animation of jujutsu kaisen, enabling users to have a look of the amazing animation of this cool anime.
Add more animation to the webpage.
Create an additional webpage with fetching API with real life place that the anime alwasy used for the fighting area also make it more cooler to attract more interest from other people.
Use more Js code, althoguth there are quite a lot for me in this website and i still think not enough, could have to more and more.

Unknown Bug

Whenever the webpage's load multie times the main youtube video just doesn't autoplay at all.
The fetching image just doesn't changed the size in the css. even if i tried different class of it in diff area still.