# iuridepaula.com: a 2018 Vue portfolio kept alive as a reusable reference

> This repository holds the source of a personal portfolio site built in 2018 with Vue and GSAP, and the author has since refactored it so the animated pieces can be lifted into other projects. It is a case study in scroll-driven web animation, kept online and still maintained while a React and composition API rewrite sits in progress.

**iuridepaula/portfolio** — Personal portfolio (2018)

- Repository: https://github.com/iuridepaula/portfolio
- Website: https://iuridepaula.com/
- Stars: 580 · Forks: 90
- Language: Vue
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/iuridepaula-portfolio

## The author tells you not to use it as a model, and that is the point

The README opens with an unusual instruction for a portfolio repository: before you start, notice that this website was built in 2018 and 2019 and made use of solutions available at the time that are no longer the best way of doing things today. The author still encourages you to check the solution if you are looking for inspiration, and points you elsewhere if you want a better way of creating animated websites today.

That framing is the most important thing in the repository, and it tells you how to read everything else. This is not a starter template and it is not a display of current best practice. It is a working artefact from a specific moment in the ecosystem, kept online because people still visit it, and refactored so that the interesting parts can be reused.

The references given for a current approach are a short and specific list. GSAP 3 and GSAP ScrollTrigger are the animation layer, Pixi.js is the 2D renderer option, Three.js and WebGL are the 3D route, with the WebGL API documentation from the MDN web platform. That list is a map of where the field went, and it is a more useful thing to take from the README than any individual file.

The project itself is a personal portfolio, the repository description says Personal portfolio (2018), and the homepage is iuridepaula.com. The primary language is recorded as Vue, the licence is MIT, and the last push was on 2026-09-17, so the code is still being touched even though the site dates back to 2018 and 2019 in its foundations.

The topic list of the repository names animation, css-animations, gsap, scrollmagic, storytelling and svg, and the presence of scrollmagic among them is a useful clue about the era. ScrollMagic was the predecessor to ScrollTrigger, and its presence in the topic list is a fingerprint of the 2018 approach to scroll animation.

## Running it: a Vue CLI project with two commands

The how-to-run section is short. You clone the repository, install the dependencies, and run the project. The two commands are given as separate blocks:

```
npm install
```

and then:

```
npm start
```

That is the whole setup, and it tells you the project is a standard Vue CLI application rather than anything with a custom toolchain.

The package.json confirms it in detail. The scripts are start as vue-cli-service serve, build as vue-cli-service build, and lint as vue-cli-service lint. The dependencies are gsap at 3.15 or later, vue at 3.5 or later, vue-gtag for analytics, and vue-router at 4.6 or later.

That combination is worth pausing on, because it is a mixture of eras. The site was built with Vue 2 and ScrollMagic in 2018. The dependency list now says Vue 3.5 and GSAP 3, and the release history includes tags called v2018-updated, v2018-stable and v2018, where the parenthesised descriptions read Updated (2022), Original (2022) and Original (2018) respectively, with dates in July and August 2022. So the source has been carried forward onto Vue 3 and GSAP 3 while keeping the original structure, and the tags record both the original and the updated states.

The devDependencies show the rest of the build: the Vue CLI service and its babel and eslint plugins, the airbnb and prettier eslint configurations, eslint-plugin-vue, sass with sass-loader for the styles, and workbox-webpack-plugin for the service worker.

The repository root has the matching set of configuration files: a .eslintrc.js, a .prettierrc.json, a babel.config.js, a jsconfig.json, a postcss.config.js, a vue.config.js, an .nvmrc pinning the Node version, and a package-lock.json. The primary language being recorded as Vue rather than JavaScript reflects the split between the .vue single file components in src/ and the configuration around them.

## The rewrite in progress, and the composition API idea

The README has a section on a new version, marked with a construction sign, and the reasoning behind it is straightforward.

The author is currently working on a new portfolio to replace the old one, but since many people are still visiting the old one today, the decision was to refactor it and make the code more reusable for everyone, with a request for patience.

The new versions will be built with React Hooks and Vue's composition API. That pairing tells you the plan covers both ecosystems, and the main idea is stated plainly: to allow people to re-use and build animated components easily in their own projects, based on GSAP 3 and ScrollTrigger.

That is the same project as this repository expressed as a plan rather than a caution, and it is a better framing for anyone reading the code. The refactor is aimed at turning the site into a set of reusable animated components, so the value on offer is the animation layer rather than the portfolio itself.

Two observations follow from the choices. First, GSAP 3 and ScrollTrigger are named as the foundation of the new components, which confirms that the animation approach survives the rewrite even though ScrollMagic does not appear in the plan. Second, offering both React Hooks and the Vue composition API means the components are meant to be consumable from either side, which is a considerably larger commitment than rewriting a personal site, and explains why it is described as taking time.

The current state of the code is therefore two things at once. The site is a working Vue 3 application with GSAP 3, and the component layer is being shaped for reuse. Reading the src/ directory with both questions in mind is the useful way to spend time here.

## What the topic list tells you about the implementation

The repository topics are a compact description of the techniques involved: animation, css-animations, gsap, scrollmagic, storytelling and svg.

Animation and css-animations alongside gsap indicates that the motion is not purely CSS keyframes but a mixture, with GSAP driving the orchestrated sequences and CSS handling simpler transitions. That is the normal division in this kind of site.

Scrollmagic is the scroll orchestration layer, and its presence tells you the timeline model. ScrollMagic organised animations around a controller that fired events as the user scrolled, and ScrollTrigger, which the README lists as the modern reference, works on a similar idea with a scroll-linked timeline. The author pointing you at ScrollTrigger is the clearest signal that ScrollMagic is the part of this codebase that has aged.

Storytelling as a topic is the design intent rather than a technology, and it is worth reading alongside the README's own framing of the project as inspiration. A scrollytelling portfolio is a specific genre: the page is a sequence of scenes, the scroll position is the clock, and the content is paced by the animation rather than by the reader. The tooling choice follows from that, because you need a timeline you can scrub and reverse, not a set of one-off triggers.

Svg in the list covers the illustration work, which in a site of this kind is usually vector rather than raster, both because vector scales and because the same asset can be animated by stroke or fill.

So the technology story is coherent: a Vue application that uses GSAP to drive scroll-scrubbed SVG scenes, built on the scroll animation library that was current in 2018, and now being carried onto the library that replaced it.

## The site itself, and the practical limits of copying it

The site is live at iuridepaula.com and is a personal portfolio, which tells you the content is a body of work presented as a narrative rather than a list of projects with metadata.

There are two reasons to look at it, and they pull in different directions. The first is visual inspiration, which the README explicitly encourages, and for that the live site is better than the source. The second is technical reference, and for that the source is better, since you can see the actual component structure rather than inferring it from a rendering.

The limits are structural and the README names most of them. The scroll animation library is superseded, the Vue version has been moved forward from what the code was written against, and the whole thing is coupled to a personal site with a specific content structure, which is exactly what the refactor is trying to undo.

The build configuration also reflects an older toolchain. Vue CLI with babel and a webpack plugin for the service worker was the standard Vue setup of that period, and the current Vue tooling has moved on. A new project would reach for a different build tool, and the package.json here does not tell you which.

The service worker is the one piece worth calling out specifically, because it is the kind of thing that ages badly. workbox-webpack-plugin at 7.1 was current when this was set up, and service workers carry their own cost: they cache aggressively, they have a lifecycle that is awkward to debug, and a stale cache is a confusing thing for a visitor to hit. For a portfolio site that is mostly static, a service worker is a reasonable trade, and it is also the part you would most likely drop.

The honest summary is that this is a well-documented piece of history with a live demonstration attached, and the author's own recommendation is to look at GSAP 3 and ScrollTrigger rather than to copy the animation layer.

## Conclusion

Use this repository as a reference if you are building a scroll-driven animated site and want to see how a Vue implementation handled it, or to lift its animation components into your own project. Do not adopt it as a starting point for a new site, because the author says plainly that it was built with solutions available at the time that are no longer the best way of doing things today. Before you copy any of it, read the linked references to GSAP 3, ScrollTrigger, Pixi.js and Three.js, since the author points you there for a current approach, and check the package.json, where the runtime dependencies have been moved to Vue 3 while the surrounding structure still reflects the older build.

## FAQ

### What is the iuridepaula.com repository?

It holds the source of a personal portfolio site built in 2018 and 2019 with Vue, GSAP, ScrollMagic, CSS animations and SVG, kept online at iuridepaula.com and refactored so the animated components can be reused. The author states the solutions used are no longer the best way of doing things today.

### How do I run the iuridepaula.com portfolio locally?

Clone the repository, then run npm install and npm start. The start script is vue-cli-service serve, and the project also has build and lint scripts from the Vue CLI service.

### What is the rewrite of the iuridepaula.com portfolio?

The author is building a new portfolio to replace the old one, planned as versions built with React Hooks and Vue's composition API. The main idea is to let people re-use and build animated components easily in their own projects, based on GSAP 3 and ScrollTrigger.

### Which animation libraries does the iuridepaula.com portfolio use?

The dependencies list GSAP at 3.15 or later, and the repository topics name GSAP, ScrollMagic, CSS animations, SVG and storytelling. The README points to GSAP 3, GSAP ScrollTrigger, Pixi.js, Three.js and WebGL as the current references.

### What licences and build tools does the iuridepaula.com portfolio use?

The project is MIT licensed and built with the Vue CLI, with babel, eslint using the airbnb and prettier configurations, eslint-plugin-vue, sass with sass-loader, and workbox-webpack-plugin for the service worker.

## Sources

- [iuridepaula/portfolio on GitHub](https://github.com/iuridepaula/portfolio)
- [License: MIT](https://github.com/iuridepaula/portfolio/blob/master/LICENSE)
- [Project website](https://iuridepaula.com/)
- [README](https://github.com/iuridepaula/portfolio/blob/master/README.md)
- [Releases](https://github.com/iuridepaula/portfolio/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/iuridepaula-portfolio