Frontend Developer

Creating amazing experiences with the power of code.

About

Hello, I am Tomas Salina. Nice to meet you!

I’m a frontend developer from Argentina, I learned to program self-taught in 2020. Yes! I wrote my first lines of code in the middle of a global pandemic, and from there I’ve never stopped.

What I like to do the most is layout with HTML and CSS. I love to see a design come into existence thanks to these technologies.

I currently especialize in the MERN stack to work with, but I’m constantly trying to learn other things and incorporate new tools.

Frontend Skills

HTML
CSS
JavaScript
TypeScript
React
Redux
TailwindCSS
Bootstrap
Sass

Complementary

Figma
Webpack
Express
MongoDB
Git

Wanna talk?

You can find me on my social networks as @salinatomass.

Or Contact

Portfolio

Some projects I have built

Weather App

React developer

An interesting and clean UI project that shows the wheater of your city in an instant.

Live preview See code

Pinterest Clone

TypeScript developer

A high-performance application to discover new ideas by browsing an infinite scroll interface.

Live preview See code

Fylo Challenge

HTML & CSS specialist

A mobile first and beautifull landing page to store your most important files in one secure location.

Live preview See code

Interactive Components

Jordan 1 Retro High

Pollen

100% Authentic
Condition: New

devfinder

Tomas Salina

@tomassalina

Repos 67
Followers 13
Following 8

HTML
CSS
JavaScript

                    <div class="slider">
  <h3 class="slider__title">Jordan 1 Retro High</h3>
  <p class="slider__subtitle">Pollen</p>
  <ul class="slider__tags">
    <li>100% Authentic</li>
    <li>Condition: New</li>
  </ul>
  <div class="slider__actions">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
  <canvas class="slider__picture" id="canvasSlider"></canvas>
  <input
    class="slider__input"
    type="range"
    min="1"
    max="36"
    value="1"
    step="1"
    id="productSlider"
  />
</div>

                    .slider {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  font: var(--body-1);
}
.slider__title {
  color: var(--black);
  font-size: 16px;
  line-height: 24px;
}
.slider__subtitle {
  font-size: 14px;
  line-height: 18px;
  color: var(--black);
}
.slider__tags {
  display: flex;
  gap: 5px;
  list-style: none;
}
.slider__tags li {
  font: var(--caption);
  font-weight: 500;
  padding: 4px;
  color: var(--secondary-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}
.slider__picture {
  height: 250px;
}
.slider__input {
  width: 60%;
  height: 2px;
  align-self: center;
  margin-bottom: 10px;
}
.slider__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.slider__actions button {
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
  color: var(--black);
  cursor: pointer;
}

                    const slider = document.querySelector('#productSlider');
const canvas = document.querySelector('#canvasSlider');
const ctx = canvas.getContext('2d');
const images = [];

const handleInputSlider = e => imageRendering(e.target.value);

const imageRendering = index =>
  ctx.drawImage(images[index], 0, 0, canvas.width, canvas.height);

const pageLoaded = () => {
  for (let i = 1; i <= 36; i++) {
    const number = i.toString().padStart(2, '00');
    const url = `https://images.stockx.com/360/Air-Jordan-1-Retro-High-Pollen/Images/Air-Jordan-1-Retro-High-Pollen/Lv2/img${number}.jpg?auto=compress&w=480&q=90&dpr=2&updated_at=1626802470&h=320&fm=avif`;

    const image = new Image();
    image.src = url;
    image.addEventListener('load', () => {
      images[i] = image;
      if (i === 1) {
        imageRendering(i);
      }
    });
  }

  slider.addEventListener('input', handleInputSlider);
};

window.addEventListener('load', pageLoaded);