portofolio-v2's Introduction

Portfolio

This is my personal portfolio showcasing my projects and skills.

Tech Stack

Framework: Next.js
Styling: Tailwind CSS
Animation: Anime.js

Project Description

This portfolio website is built using Next.js, a React framework that allows for efficient server-side rendering and easy routing. The UI is designed using Tailwind CSS, a utility-first CSS framework that enables rapid and responsive web development. To add engaging animations to the website, Anime.js is utilized, providing a smooth and dynamic user experience.

The portfolio includes sections for showcasing my projects, providing information about me, and highlighting my skills and achievements.

Features

Responsive design to ensure optimal viewing across different devices.
Interactive animations created with Anime.js to enhance user engagement.
Dedicated sections to display projects, skills, and personal information.
Minimalistic UI using Tailwind CSS for a modern look and feel.

Getting Started

Clone the repository:

git clone https://github.com/bmsptra24/Portofolio.git

Navigate to the project directory:
```
cd portfolio
```
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open your browser and visit:
```
http://localhost:3000
```

License

This project is licensed under the MIT License.

Contact

For any inquiries or feedback, feel free to reach out to me at [email protected].

portofolio-v2's People

Contributors

Watchers

portofolio-v2's Issues

Animation Loop Issue: Meteor Element Not Following Path

Problem:

I'm facing an issue with animating a meteor element along a path using anime.js. The animation seems to be stuck and not following the intended path properly.

Code and Attempts:

I've tried two different approaches to achieve the animation but encountered the same issue in both cases.

Attempt 1:

const path = anime.path("svg path");
console.log(path("y"));

anime({
  targets: ".meteor",
  translateX: path("x"),
  translateY: path("y"),
  rotate: path("angle"),
  easing: "linear",
  duration: 1000,
  loop: true,
  direction: "alternate",
});

Attempt 2:

useEffect(() => {
  const motionPath = document.querySelector("#motion-path path");
  const totalLength = motionPath.getTotalLength();

  anime({
    targets: ".meteor",
    translateX: [0, totalLength],
    easing: "linear",
    duration: 20000,
    loop: true,
    direction: "alternate",
    update: function (anim) {
      const pos = motionPath.getPointAtLength(anim.progress * totalLength);
      anime.set(".meteor", {
        translateX: pos.x,
        translateY: pos.y,
      });
    },
  });
}, []);

Observations:

Despite trying both of these approaches, the meteor element remains stationary and does not follow the path as intended. I have also attempted wrapping the element together with no success.

Expected Outcome:

I'm aiming to create a continuous looping animation where the meteor element moves along the specified path.

Additional Notes:

The SVG path is correctly defined and represents the intended motion path.
The .meteor element is rendered and present in the DOM when the Section2 component is mounted.
The browser's developer console doesn't display any errors related to the animation.

Environment:

React version: 18.2.0
anime.js version: ^3.2.1
Browser: Brave v1.56.20

Any insights or suggestions to resolve this issue would be greatly appreciated. Thank you for your assistance!

bmsptra24 / portofolio-v2 Goto Github PK

portofolio-v2's Introduction

Portfolio

Tech Stack

Project Description

Features

Getting Started

License

Contact

portofolio-v2's People

Contributors

Watchers

portofolio-v2's Issues

Animation Loop Issue: Meteor Element Not Following Path

Clickable div

bug: FPS drop because to much stars element

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent