David Vargas

Pain to Power by Maruja is definitely one of my favorite albums of 2025 and an impressive debut album for a band that truly takes the post-rock label to a new level.

It’s so exciting to see new players in the scene! Can’t wait how this band will evolve.

For dark mode, it’s as simple as switching the CSS blending mode from multiply to screen, and voilà, the texture appears just as it should!

Finally, to give the whole thing a finishing paper-texture touch, I added noise. I generated a monochrome noise PNG with transparency and applied it as a background image. With the opacity set to around 5% and a blending mode on top, it subtly reinforces that paper-like feel.

Then, I added a subtle 2px dot matrix using CSS radial gradients to mimic dotted paper, the kind I usually sketch on. A small detail, but that reinforces the physical feel I wanted from the start.

Not only that — I also used a couple of SVG filters, specifically <feTurbulence> and <feDisplacementMap>, to simulate a subtle ink-flow effect during the handwriting animation. This gave the strokes a more organic, imperfect feel, closer to real pen on paper.

I paid special attention to the opening section of the page. I vectorized my own handwriting and used it as an SVG element. By animating its stroke paths with CSS, I was able to recreate a handwriting effect that appears as soon as the page loads.

First, I focused on color. I used paper-like tones: off-whites for the backgrounds and ink blacks for the text. This base already creates a subtle paper feel, and the scrolling interaction reinforces it by mimicking sheets sliding over one another as you move through the page.

My goal was to blend the digital world with the physical one. Most of my projects truly begin on paper, a medium I love and wanted to reflect here. This is how I brought that idea to life.

Day 4 of #PortfolioInDepth, after a short break!

Enough coding for today, let’s talk about craft. Today, I'll walk you through how I approached the current look and feel of my portfolio.

What designers can learn from developers (from someone who’s been both) Six lessons on empathy, systems thinking, and collaboration

Took a short break from my portfolio series to finish my first Medium article, now live on Bootcamp! 🥳

Sharing 6 lessons on empathy, systems thinking, and collaboration from my move from engineering to design.

medium.com/design-bootc...

Sandbox | David Vargas – Product Designer David Vargas's portfolio sandbox.

Want to see these components in action?

I actually built a small sandbox page to test them all, and it’s public: www.dvcarrillo.com/sandbox

This is done for every reusable component. This way, I ensure all buttons share the same animations and accessible behaviors, or that all badges have the same border radius. Just one line of code to change them consistently across the site.

Scrolling down, we'll find the components. In this example, you can see a button (defined with the .btn class). It defines the common styles for all buttons. Then, additional classes like .btn-primary extend it for different button types.

Opening the components.css file, the first thing we find is a list of variables. Variables define the styles of each component.

Some even get their values from other variables (like colors), defined in theme.css.

My portfolio also uses some basic components! You might remember the components.css file we saw earlier. Today, we’re diving into it.

But first: why use components at all?

Day 3 of #PortfolioInDepth!

We discussed modularization and scalability last day, and guess what rhymes with that? Encapsulation! Well… sort of. Today, we're discussing components!

Some might call it over-engineering. To me, it’s the only way to come back in 1 or 2 years and still understand the codebase, making updates quickly and confidently.

I followed the same modular approach for JavaScript.

Even though my portfolio doesn’t rely much on it, you’ll still find a few structured files:

Each page also has its own CSS file.

For instance, home.css handles the homepage, while work.css covers the project pages. There's even a 404.css file for the Error 404 page 😁

Let’s start with the CSS structure. The project is split in:
- base.css → foundational styles (e.g. containers, typography).
- components.css → component styles (e.g. buttons, badges).
- reset.css → ensures consistency across browsers.
- theme.css → defines the color palette and visual tokens.

Day 2 of #PortfolioInDepth!

Let's talk about code modularization and scalability! My portfolio isn't exactly a project with an extensive code base, but in my opinion, applying these principles is still essential to ensure clarity and maintainability. Who knows what I'll feel like adding tomorrow?

And that's it! We've been able to dynamically adapt to user preferences and centralize all styles in one place: in the color styles for Figma and in the theme.css file for the code. This approach will help us quickly expand the rest of the portfolio and maintain a clean code base 🥳

Once these variables are applied element styles defined in other CSS files, it's time to check for dark mode. This will allow us to switch between the two sets we defined earlier. And it's done in JavaScript, in two steps: first, we get the color scheme. Then we wait for changes in it to occur.

(Psst, this file also configures fonts and text styles, as well as links and some other utilities. But that's a story for another day!)

Once these colors styles are configured in our design tool, we must do the same in the code. Using CSS variables, I translated each Figma style into a ready-to-use (and reuse) element. Then, I grouped them into two sets: one for light mode and one for dark mode.

This would be the start of my mini portfolio design system. After a phase of brainstorming and sketching, I began testing color compositions on some initial prototypes in Figma. Over time, these colors would end up being defined as styles in my file, thus centralizing these color definitions.

Day 1 of #PortfolioInDepth!

I'd like to start with the basics: colors. Did you know that the portfolio supports dark mode? Just enable it on your OS to see it!

There are several ways to achieve this, but my goal from the beginning was to lay a solid foundation. So I started from the design phase.

Btw, I’m still working on the case studies, so more content will be added soon!

David Vargas – Product Designer I’m David, a Product Designer. I specialize in bridging design and development to craft engaging, intuitive experiences that truly put users first.

After spending longer than I’d like to admit, I’ve finally published the first version of my portfolio! 🥳

It’s been quite a journey, from design to code. Over the next few days, I’ll share more fun details about the process.

www.dvcarrillo.com

The announcement of iOS 26’s redesign is stirring up a lot of conversation, especially around accessibility. | David Vargas Carrillo The announcement of iOS 26’s redesign is stirring up a lot of conversation, especially around accessibility. But regardless of where it finally lands, what stands out is the design approach. It looks...

On what we can learn as designers from iOS 26’s keynote.

www.linkedin.com/posts/dvcarr...