DEV Community: Vitor Ferreira

How I Built a Timeline Portfolio using Canvas 2D

Vitor Ferreira — Tue, 04 Aug 2026 20:47:18 +0000

How I Built a Procedural Topographical Timeline Portfolio using Canvas 2D, React & GSAP

When designing a developer portfolio, standard grid layouts and vertical timeline cards can often feel repetitive. I wanted to build something that felt alive, immersive, and visually unique—a "Topographical Timeline" where a developer's career journey is depicted as a glowing trail across a procedurally generated mountain landscape.

In this article, I will break down the engineering architecture behind this project: how to generate procedural terrain contours in the browser, optimize HTML5 Canvas performance with offscreen caching, draw multi-layered glowing neon paths, and sync scroll progress with interactive HTML overlay cards.

🏗 Architecture & Layering Strategy

To achieve 60 FPS performance while keeping interactive UI elements accessible, the application uses a hybrid 3-layer architecture:

 ┌─────────────────────────────────────────────────────────┐
 │ Layer 3: Interactive HTML/CSS Cards (Fixed Overlays)    │
 ├─────────────────────────────────────────────────────────┤
 │ Layer 2: Main Canvas (Glowing Bezier Trail & Bullet)    │
 ├─────────────────────────────────────────────────────────┤
 │ Layer 1: Offscreen Cached Canvas (Procedural Terrain)   │
 └─────────────────────────────────────────────────────────┘

Procedural Terrain Layer (Offscreen Canvas Snapshot): Renders multi-octave 2D elevation noise converted to elevation iso-contour vectors via d3-contour.
Glowing Trail & Scroll Layer (Visible Canvas 2D): Clears and draws the cached terrain image, then draws a responsive cubic Bezier trail with multi-layered neon glow strokes and an animated scroll tracker bullet.
Interactive Waypoint Layer (HTML/CSS Overlays): HTML cards positioned absolutely using pixel coordinates calculated by sampling points along the SVG Bezier path string.

⛰ 1. Generating Procedural Terrain with Simplex Noise & D3-Contour

Topographic maps represent height variations using contour lines (iso-lines). To create natural, continuous mountain terrain:

We sample height values across a 2D grid using Simplex Noise.
We combine multiple noise frequencies (octaves) so terrain has both large mountain peaks and subtle ridge details.
We feed the 2D heightmap matrix into d3-contour to compute vector contour coordinates.

Here is the core terrain generation function:

import { createNoise2D } from 'simplex-noise';
import { contours } from 'd3-contour';

export const buildTerrain = (width: number, height: number) => {
  const terrainCanvas = document.createElement('canvas');
  terrainCanvas.width = width;
  terrainCanvas.height = height;
  const context = terrainCanvas.getContext('2d');
  if (!context) return terrainCanvas;

  // Dark topographic base fill
  context.fillStyle = '#121510';
  context.fillRect(0, 0, width, height);

  // 1. Generate Simplex Noise Grid
  const resolution = 12; // Grid step size in pixels
  const cols = Math.ceil(width / resolution) + 1;
  const rows = Math.ceil(height / resolution) + 1;
  const values = new Float64Array(cols * rows);
  const noise2D = createNoise2D();

  const noiseScale = 0.0025;
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const worldX = x * resolution;
      const worldY = y * resolution;

      // Multi-octave noise for realistic elevation variation
      const n1 = noise2D(worldX * noiseScale, worldY * noiseScale);
      const n2 = noise2D(worldX * noiseScale * 2, worldY * noiseScale * 2) * 0.5;
      const n3 = noise2D(worldX * noiseScale * 4, worldY * noiseScale * 4) * 0.25;

      values[y * cols + x] = (n1 + n2 + n3 + 1.75) / 3.5; // Normalized ~[0, 1]
    }
  }

  // 2. Extract Vector Iso-Lines using d3-contour
  const contourGenerator = contours()
    .size([cols, rows])
    .thresholds(22);

  const contourData = contourGenerator(Array.from(values));

  // 3. Render Contour Vectors onto Offscreen Canvas
  context.save();
  context.lineWidth = 1.2;

  contourData.forEach((contour, idx) => {
    // Opacity scales with height elevation
    const alpha = 0.05 + (idx / contourData.length) * 0.16;
    context.strokeStyle = `rgba(140, 165, 120, ${alpha})`;

    context.beginPath();
    contour.coordinates.forEach((polygon) => {
      polygon.forEach((ring) => {
        ring.forEach(([x, y], i) => {
          const px = x * resolution;
          const py = y * resolution;
          if (i === 0) context.moveTo(px, py);
          else context.lineTo(px, py);
        });
      });
    });
    context.stroke();
  });

  context.restore();
  return terrainCanvas;
};

⚡ 2. Performance Optimization: Offscreen Canvas Snapshot Caching

Generating Simplex Noise across thousands of grid points and computing 22 threshold contour polygons is CPU-intensive. If you run buildTerrain on every single scroll frame (requestAnimationFrame), frame rates will drop below 15 FPS.

The Solution:

On Window Resize: Compute buildTerrain(width, height) once and store the offscreen canvas element in a useRef.
On Scroll Update: Clear the main screen canvas and draw the cached offscreen snapshot instantly using ctx.drawImage(snapshotRef.current.terrainCanvas, 0, 0).

const drawRoute = () => {
  const canvas = canvasRef.current;
  if (!canvas || !snapshotRef.current || !pathElementRef.current) return;
  const context = canvas.getContext('2d');
  if (!context) return;

  // ⚡ 1. Clear visible canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // ⚡ 2. Blit pre-rendered terrain image instantly (0 CPU noise calculations!)
  context.drawImage(snapshotRef.current.terrainCanvas, 0, 0);

  // ⚡ 3. Draw active scroll trail & glowing bullet on top
  drawAuxiliaryRouteLines(context, pathElementRef.current);
  drawActiveRouteLine(context, pathElementRef.current, scrollProgress);
  drawScrollBullet(context, pathElementRef.current, scrollProgress);
};

This simple caching pattern keeps canvas rendering at a rock-solid 60 FPS regardless of screen size!

🛣 3. Creating the Glowing Trail & Multi-Layer Neon Effects

To give the route a futuristic, tactical HUD feel, the active trail isn't drawn with a single stroke. Instead, we render 4 overlapping line passes with varying stroke widths, opacities, and canvas shadow blurs:

const drawActiveRouteLine = (
  context: CanvasRenderingContext2D,
  path: SVGPathElement,
  progress: number
) => {
  if (progress <= 0) return;

  const totalLength = path.getTotalLength();
  const activeLength = totalLength * progress;
  const step = 4;

  context.save();
  context.beginPath();
  let first = true;

  // Sample path points up to active scroll length
  for (let l = 0; l <= activeLength; l += step) {
    const pt = path.getPointAtLength(l);
    if (first) {
      context.moveTo(pt.x, pt.y);
      first = false;
    } else {
      context.lineTo(pt.x, pt.y);
    }
  }

  // Layered glowing stroke configurations
  const lineConfigs = [
    { strokeStyle: 'rgba(202, 250, 92, 0.25)', lineWidth: 16, blur: 16 }, // Ambient Outer Glow
    { strokeStyle: 'rgba(202, 250, 92, 0.6)',  lineWidth: 6,  blur: 8  }, // Medium Glow
    { strokeStyle: '#caef5c',                  lineWidth: 2.5, blur: 2  }, // Core Neon Lime Line
    { strokeStyle: '#ffffff',                  lineWidth: 1.2, blur: 0  }  // Sharp White Core Highlight
  ];

  for (const config of lineConfigs) {
    context.save();
    context.strokeStyle = config.strokeStyle;
    context.lineWidth = config.lineWidth;
    context.lineCap = 'round';
    context.lineJoin = 'round';
    if (config.blur > 0) {
      context.shadowColor = '#caef5c';
      context.shadowBlur = config.blur;
    }
    context.stroke();
    context.restore();
  }

  context.restore();
};

🎯 4. Syncing Scroll & Positioning HTML Waypoint Overlays

To map viewport scrolling to the route trail, we use GSAP ScrollTrigger:

A wrapper <main> container is given a large virtual scroll height (e.g., min-h-[400vh]).
GSAP calculates a normalized scrollProgress between 0.0 (top of page) and 1.0 (bottom of page).
We convert each milestone's routeProgressPercentage into exact (X, Y) screen pixel coordinates using an SVG Path's .getPointAtLength() API.

// Calculate exact pixel positions for each waypoint along the bezier path
const positions = useMemo(() => {
  if (!routePath || !viewport.width || !viewport.height) return [];

  const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  pathEl.setAttribute('d', routePath);
  const totalLength = pathEl.getTotalLength();

  return timeline.map((entry) => {
    const point = pathEl.getPointAtLength(entry.routeProgressPercentage * totalLength);
    return {
      id: entry.id,
      x: point.x,
      y: point.y,
    };
  });
}, [routePath, viewport.width, viewport.height]);

Each <WaypointCard /> is rendered inside a pointer-events-none fixed inset-0 wrapper, positioned using style={{ top: '${y}px', left: '${x}px' }} with pointer-events-auto on individual cards for full interactivity!

📱 5. Mobile Responsiveness & Polish

Canvas animations can behave differently on touchscreens. To ensure a seamless user experience across all devices:

High DPI Displays (devicePixelRatio): The canvas width and height scale with window.devicePixelRatio to maintain razor-sharp graphics on Retina displays.
Mobile Viewport Optimization: On mobile devices (< 768px), the site automatically adjusts layout to a compact timeline feed (<MobileTimelineView>), preventing horizontal clipping while preserving background canvas rendering.
Dev.to API Integration: Live technical posts and engineering logs are dynamically fetched from the Dev.to REST API and formatted within the site's dark tactical aesthetic.

💡 Key Takeaways

Separate Heavy Computation from Render Frames: Offscreen canvas buffering is essential when combining complex mathematical noise/vector generation with interactive animations.
Combine Vector Math with HTML DOM: HTML5 Canvas is great for background graphics and glows, while HTML overlay cards provide accessibility, crisp typography, and easy event handling.
Layered Canvas Effects: Combining multiple strokes with varying blur radii creates impressive neon lighting effects without WebGL overhead.

🌐 Links & Source Code

Tech Stack: React 19, TypeScript, Vite, Tailwind CSS v4, HTML5 Canvas 2D API, GSAP ScrollTrigger, Simplex-Noise, D3-Contour, Lucide React.
Author: Vitor (@vitorstick)

What are your thoughts on combining Canvas 2D with GSAP and HTML overlays? Feel free to drop questions or feedback in the comments below!

How did I made a circle withing another circle

Vitor Ferreira — Thu, 21 Dec 2023 15:44:51 +0000

In our recent sprint, biGENIUS design team embarked on an exciting journey to enhance user interaction by introducing a sleek stepper view, complete with eye-catching stepper elements. Picture this: a single circle adorned with a numerical indicator and a stylish outer border—cool, right?

Now, the challenge was to bring this vision to life using CSS. Here's the breakdown of my approach:

Firstly, the color scheme and border of the stepper are intricately tied to its current status—whether it's active or not. While various methods, including different SVGs, crossed my mind, I opted for a more elegant solution: leveraging the power of pure CSS.

And so, the question arose: how to achieve this visually appealing effect? Let's dive into the process, starting with the creation of the circle containing the numerical identifier—seemingly simple, yet a crucial step in realizing the desired aesthetic.

<div class="stepper-step__number">1</div>

.stepper-step__number {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  color: #f3f3f3;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: #44a5d8;
}

The outcome:

Now, onto the more challenging aspect—the creation of that elusive white inner circle.

My initial pondering led me down the path of considering another circle element with a simple white border, nested within the outer circle. However, I realized I was unnecessarily complicating the process.

It dawned on me: why not employ the subtle power of box-shadow to achieve the desired effect? The solution revealed itself through the use of a pseudo-element, a moment of coding clarity that filled me with a sense of pride. This revelation became the driving force behind sharing my experience in this post, a testament to the joy of overcoming coding challenges and discovering elegant solutions.

<div class="stepper-step__number active">2</div>

.stepper-step__number.active {
  position: relative;
}

.stepper-step__number.active::after {
  content: '';
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
}

I am so proud of myself

If you want to try it, check it out on stackblitz

Would you have done this differently?
Tell me how on the comments
(probably with tailwind this could be done with some simple things right?)

Using browser Speech Synthesis capabilities (on an Angular App)

Vitor Ferreira — Sat, 10 Jun 2023 22:05:49 +0000

Guess what?
I've been traveling around Germany! But here's the kicker: instead of diligently learning Deutsch like a responsible adult, I've decided to take a shortcut and create my own app to handle everything for me. Genius or madness? We'll see!

So, the first obstacle I encountered was the pronunciation of those tongue-twisting German words. Seriously, they sound like a bunch of cats having a karaoke session. But fear not, for my app comes to the rescue! Not only does it provide translations, but it also teaches me how to pronounce those words correctly. I'll be mastering German like a pro in no time, or at least pretending to while giggling at my own attempts..

For that, and to have it working offline, I went for the browser capabilities and Web Speech API

I decided to go all-in and use Angular for this app. Why? Well, let's just say I have a soft spot for Angular's sleekness and charm. But hey, don't fret if you're not an Angular enthusiast like me! The beauty of this project is that it's written in good ol' JavaScript, so you can take this linguistic journey with any framework you fancy. It's a choose-your-own-adventure kind of deal!

First step: just created a service to handle this:

export class SpeechService {
  synthesis = window.speechSynthesis;

  start(text: string, rate = 1) {
    const textToSpeech = new SpeechSynthesisUtterance(text);
    textToSpeech.lang = "de-DE";
    textToSpeech.text = text;
    textToSpeech.rate = rate;

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];
    textToSpeech.voice = voice;

    this.synthesis.speak(textToSpeech);
  }
}

The bad part of that from my experience, this only work properly (with a correct accent) in Chrome ...
To see what voices are available, you can check here

And it's used for this part (I only care about Deutsch):

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];

To use this, I have a simple component that calls this service

@Component({
  selector: 'app-speech',
  standalone: true,
  template: `
  <form class="speech-form" [formGroup]="formGroup">
    <label style="margin-bottom: 10px">Please Insert German Word</label>
    <input formControlName="text" style="margin-bottom: 20px" />
    <button
      style="margin-bottom: 20px"
      (click)="handleButtonStartClick($event, 1)"
    >
      Say It
    </button>
    <button (click)="handleButtonStartClick($event, 0.4)">Say It Slowly</button>
  </form>
  `,
  styleUrls: ['./speech.component.css'],
  imports: [ReactiveFormsModule],
})
export class SpeechComponent {
  formGroup = new FormGroup({
    text: new FormControl('', [Validators.required]),
  });

  constructor(private speechService: SpeechService) {}

  handleButtonStartClick(e: Event, speed: number) {
    e.preventDefault();
    if (!!this.formGroup.controls?.text?.value) {
      this.speechService.start(this.formGroup.controls.text.value, speed);
    }
  }
}

There is a button to allows it to speak, and other that is set to say it slowly (0.4 speed), and believe me, to understand **Deutsch **words, I need it.

If you want to test it, just for it here on stackblitz

In the real app, it also have SpeechRecognition capabilities, maybe in the future I can share it as well.

Tell me what you thing, and if you find it interesting fell free to fork it and try it yourself.

Sharing styles between apps inside Nx workspace

Vitor Ferreira — Tue, 02 Jun 2020 10:11:14 +0000

In my current job we have decided to make the change into Nx workspace and with that we decided to create our very own Design System.

But I didn't want to maintain the same styles in more than one application.

Creating a lib for styles

The best solution for my case was to create a lib named ui for the styles:



nx generate @nrwl/angular:library ui

Then I moved the sass files into the library:

The problem now, is the @import in all the scss files.
How to make them recognize the correct files?
On angular.json on every project the path will have to be included.



"projects": {
    "ds-project": {
        "projectType": "application",
        ...
        "architect": {
            "build": {
                ...
                "stylePreprocessorOptions": {
                    "includePaths": [ "libs/ui/src/lib/styles" ]
                },
                "extractCss": true,
                ...

Now you can import the mixins on the scss files of your project just like if they were still part of the project:



@import "mixins/list_mixin";
@import "variables";

@include list_layout;

Even the base style, like font-family are importable.

Inside the style.scss of the project to became the global styles (for this case the module contains the global styles).



// styles.scss
/* You can add global styles to this file, and also import other style files */

@import 'module';

Conclusion

This solves easily a problem that could be an issue and I was somehow afraid to tackle, that is having global scss files shared between applications and easily maintainable with only one source of truth (the library).

If you have any suggestion of how I could do this differently, please share your ideas.

Dockerize Angular app and deploy on OpenShift

Vitor Ferreira — Sun, 03 May 2020 20:57:27 +0000

I've been experimenting with several tools and would like to share my latest experience:
Deploy an Angular application created with SSR inside a Nwrl Nx workspace, and then dockerize it and deploy on RedHat OpenShift.

Why use Angular with SSR?
I wanted to try to have a 100% lighthouse audit application, and despite my Angular experience, never worked on an angular project using server side rendering, so, building a personal website, was a good opportunity to experiment and have that 100% on performance.

Why chose RedHat OpenShift?
Simple, I like the red hat that the girls that promote the service use, and I have used AWS and Azure solutions. Also very important, they have a free option.

First Step (assuming the application already exist), creating the Dockerfile

### STAGE 1: Build ###
FROM node:lts-alpine AS build

#### make the 'app' folder the current working directory
WORKDIR /usr/src/app

#### copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

#### install angular cli
RUN npm install -g @angular/cli

#### install project dependencies
RUN npm install

#### copy things
COPY . .

#### generate build --prod
RUN npm run build:ssr

### STAGE 2: Run ###
FROM nginxinc/nginx-unprivileged

#### copy nginx conf
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf

#### copy artifact build from the 'build environment'
COPY --from=build /usr/src/app/dist/vitorspace/browser /usr/share/nginx/html

#### don't know what this is, but seems cool and techy
CMD ["nginx", "-g", "daemon off;"]

Remarks:
Had to use nginxinc/nginx-unprivileged due to problems on OpenShift with nginx permissions (thank you random stranger on stackoverflow that suggested it).

On package.json the script for build:ssr is
"build:ssr": "ng build --prod vitorspace && ng run vitorspace:server:production", remember, this is an angular application with server side rendering.

The nginx.conf configuration (I am trying a lighthouse 100% angular application, so I needed that):

server {
    listen 0.0.0.0:8080;
    listen [::]:8080;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    gunzip on;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

Second Step - sending docker image to dockerhub

You need a dockerhub account

Build the image
docker build -t vitorspace-image .

Run the image to test it
docker run --name vitorspace-container -d -p 8888:80 vitorspace-image

browser it http://localhost:8888/

Commit image
docker commit 21737e7ab73b vitorstick/vitorspace:v1

Tag image
docker tag vitorspace-image vitorstick/vitorspace

Push image
docker push vitorstick/vitorspace

Third Step - publishing it on RedHat OpenShift

Assuming you already have a account

Create OpenShift Project

Chose Workload Option and Select Container Image

Don't forget the docker image path, and then just say what will be your application path

On the bottom of the same form, on Advanced Options, just pick the Create a route to the application and you will have an url to try and share your application.

Conclusions

OpenShift have a lot of options, about pods, configurations, and a lot of other things, but honestly I am a developer, not a devops, and spending a lot of time changing yaml files does not bring me any joy, and that's what I really liked in OpenShift, it's super easy to use (after doing it the first time)

The main reason for me to create and share this article, was the pain I felt doing some of this things for the first time, and like me, maybe I can help some of you.

If you have any suggestion about anything, please share.