Jimil Prabtani's Portfolio

A personal portfolio built with Vue JS and Tailwind CSS showcasing my cybersecurity projects, certifications, and professional experience.

💻 Local Installation

To run the project locally:

npm i
npm run dev

🌐 Custom Animation Engine

A key feature of this portfolio is a custom animation engine located in src/services. It synchronises animation updates with browser cycles, centralises event listeners, separates computation from rendering and computes only visible animations through a virtual bounding box system.

Animable Component Properties

When instantiating an animable component within the service, the following properties can be declared.

domSection The HTML element that must be visible in order for animations to be active.

enableAnimations Defines how animations start. It is typically used to remove pause related CSS states or any manual start logic.

disableAnimations Defines how animations stop. It can reapply pause styles or trigger any required cleanup.

prepareForAnimations Handles the computation phase of the animation. This method is responsible for gathering data and preparing the state before frames are applied.

tick Synchronises and applies the animation frame. This method runs during the animation loop and updates the DOM in a controlled and efficient way.

🤖 Deployment and Workflow

The application is deployed through a CI/CD workflow on GitHub Pages. Every commit merged into main automatically builds and updates the live version.

📔 Conventions

In order to follow best practices and make the project easier to maintain, I followed the conventions below:

• Commit following the Conventional Commits standard
• A lightweight Git Flow structure.
• All code changes go through pull requests.

🛡 License

MIT License - See LICENSE file for details.