David Vargas
@dvcarrillo.bsky.social
Product Designer based in Paris. At the intersection of design and development. I also share thoughts on music, film, photography, and whatever inspires me.
https://dvcarrillo.com
https://dvcarrillo.com
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!
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
November 26, 2025 at 3:43 PM
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.
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
I actually built a small sandbox page to test them all, and it’s public: www.dvcarrillo.com/sandbox
Sandbox | David Vargas – Product Designer
David Vargas's portfolio sandbox.
www.dvcarrillo.com
October 31, 2025 at 11:19 AM
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
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.
October 31, 2025 at 11:19 AM
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.
October 31, 2025 at 11:19 AM
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.
Some even get their values from other variables (like colors), defined in theme.css.
October 31, 2025 at 11:19 AM
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.
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?
But first: why use components at all?
October 31, 2025 at 11:19 AM
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?
But first: why use components at all?
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.
October 29, 2025 at 11:16 AM
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:
Even though my portfolio doesn’t rely much on it, you’ll still find a few structured files:
October 29, 2025 at 11:16 AM
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:
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 😁
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 😁
October 29, 2025 at 11:16 AM
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 😁
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.
- 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.
October 29, 2025 at 11:16 AM
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.
- 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.
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 🥳
October 23, 2025 at 11:01 AM
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.
October 23, 2025 at 11:01 AM
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!)
October 23, 2025 at 11:01 AM
(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.
October 23, 2025 at 11:01 AM
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.