Pedro Ragazzo

portfolio.indd index.html

Pedro Ragazzo

Olá sou o Pedro Ragazzo, formado em Design Gráfico e estudante de Engenharia de Software.

Ver projetos

Sobre

Me formei em Design Gráfico. Hoje estudo Engenharia de Software.

Do Design

Identidade visual, Motion simples, Edição de vídeos, Artes para mídias digitais. Illustrator, Photoshop, Premiere e After Effects.

Da Engenharia (em andamento)

HTML, CSS, JavaScript, TypeScript, React, Electron, Git, Python...

Mesmo ofício, outra sintaxe.

Muito do que aprendi no design já tem nome no código. Mexa nos exemplos.

Tracking

letter-spacing
letter-spacing: 0em;

O mesmo ajuste do InDesign, medido em em. O kerning par a par fica com a propriedade font-kerning.

Multiplicar

mix-blend-mode
mix-blend-mode: multiply;

O modo de mesclagem do Photoshop, direto no navegador. No modo código, a luz soma em vez de subtrair.

Grid

display: grid
grid-template-columns: repeat(3, 1fr);

Colunas, módulos e medianiz. Aqui a medianiz se chama gap.

Máscara

clip-path
clip-path: circle(50%);

Recorta sem destruir o original, igual à máscara de recorte do Illustrator.

Estilos

variáveis CSS
Cor de destaque
--destaque: #E5007D;

Mude o estilo uma vez e o documento inteiro acompanha.

Camadas

z-index
.c { z-index: 3; }

A ordem do painel de camadas, escrita como número. Quem tem o maior fica por cima.

Projetos

Cada projeto ganhou uma cor da escala de impressão. Gire o leque para ver os detalhes.

  1. Painel Ragazzo Editor: Efeitos na seção Suavizar movimento, com o editor de curvas (dados de exemplo)

    Painel para Premiere Pro

    Ragazzo Editor: Efeitos

    Atalhos de um clique para zoom, alinhamento, recorte, tela dividida e animações de clipe. Tem corte automático de silêncio focado na voz e um editor de curvas bezier.

    • JavaScript
    • ExtendScript
    • Adobe CEP

    Ver código

  2. Painel do Cupom Auto sobre um carrinho de exemplo, mostrando a economia com o melhor cupom (dados de exemplo)

    Extensão de navegador

    Cupom Auto

    Junta cupons do site da loja, do Gmail e de redes de afiliados, testa um por um no carrinho e deixa aplicado o que dá mais desconto.

    • JavaScript
    • Manifest V3
    • Gmail API

    Código não publicado

  3. Fila de conversão do Ragazzo's Converter File com arquivos em vários estados (dados de exemplo)

    Painel para Premiere Pro

    Ragazzo's Converter File

    Converte qualquer mídia que o FFmpeg lê para ProRes ou DNxHR, importa na bin e reaponta o clipe original, sem sair do Premiere.

    • TypeScript
    • React
    • FFmpeg
    • Adobe CEP

    Ver código

  4. Gerador de senhas do Cofre criando senhas e frases-senha (dados de exemplo)

    Extensão de navegador

    Cofre

    Gerenciador e gerador de senhas que roda inteiro no navegador, sem nuvem e sem conta. A chave vem da senha mestra via Argon2id e os dados são cifrados com AES-256-GCM.

    • JavaScript
    • WebCrypto
    • Argon2id

    Código não publicado

  5. Calendário do Dashboard de Finanças mostrando os lançamentos de cada dia (dados de exemplo)

    App desktop

    Dashboard de Finanças

    Painel pessoal de ganhos, gastos, investimentos e parcelamentos, com saldo, evolução por mês e calendário.

    • Electron
    • JavaScript

    Código não publicado

  6. Promo Games buscando um jogo e comparando preços entre lojas (dados de exemplo)

    Extensão de navegador

    Promo Games

    Compara o preço de um jogo entre Steam, Epic, GOG, Nuuvem e outras lojas e mostra os maiores descontos do dia, com visual de fliperama retrô.

    • JavaScript
    • Manifest V3
    • API IsThereAnyDeal

    Código não publicado

  7. Nota do Ragazzo's Word com timecodes clicáveis e marcadores importados da sequência (dados de exemplo)

    Painel para Premiere Pro

    Ragazzo's Word

    Bloco de notas em rich text dentro do Premiere, ligado à timeline: cada timecode vira um chip clicável que leva ao frame exato.

    • JavaScript
    • ExtendScript
    • Adobe CEP

    Código não publicado

Histórico de commits

Minha trajetória do jeito que o Git conta: do commit mais recente para o mais antigo.

  1. 2027

    HEAD → main

    feat: este portfólio, design e código no mesmo arquivo

    Layout, tipografia e interações escritos em HTML, CSS e JavaScript.

  2. 2027

    merge: engenharia entra na rotina de designer

    Os dois ramos passam a andar juntos. Cada projeto começa no papel e termina no navegador.

  3. 2027

    engenharia

    feat: início da graduação em Engenharia de Software

    Lógica, algoritmos e boas práticas para dar base ao que eu já construía por curiosidade.

  4. 2026

    feat: plugins para o Premiere Pro

    Três painéis para o meu próprio fluxo de edição de vídeo: conversão de mídia com FFmpeg, efeitos de um clique e notas ligadas à timeline.

  5. 2026

    chore: primeiros projetos de código

    Extensões de navegador, automações. Aprendendo na prática.

  6. 2023

    tag: diploma

    feat: formado em Design Gráfico

    Artes, vídeos e histórias. O hábito de conferir cada detalhe duas vezes.

Tem um projeto, uma vaga ou uma ideia?

Mande um e-mail

pedronewage211@gmail.com