viniciusalucas.com.br/sitewww
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

versao inicial do site
All checks were successful
Deploy para Servidor de Produção / Determinar ambiente de destino (push) Successful in 2s
Details
Deploy para Servidor de Produção / Deploy para (push) Successful in 24s
Details

Browse source
This commit is contained in:
vinicius 2025-06-23 22:19:55 -03:00
parent 2d7d5976f7
commit 925f5ba1ee
21 changed files with 279 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/projects/arcade/arcade.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 485 KiB

BIN
images/projects/building-a-keyboard/keyboard-cover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 378 KiB

BIN
images/projects/exploring-camera-matching-with-blender-and-fspy/background-min.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 451 KiB

BIN
images/projects/exploring-camera-matching-with-blender-and-fspy/pikmin-final-edit.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
images/projects/exploring-camera-matching-with-blender-and-fspy/render-output.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/projects/exploring-camera-matching-with-blender-and-fspy/tracking-plane-min.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 454 KiB

BIN
images/projects/exploring-camera-matching-with-blender-and-fspy/viewport.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
images/projects/scout-webapp/cover-webapp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
images/projects/volibear-wallpapers/ultimate-viewport-min.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
images/projects/volibear-wallpapers/volibear-sky-splitter-min.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
images/projects/volibear-wallpapers/volibear-ultimate-min.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 788 KiB

0
images/teste-1.png Normal file → Executable file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

0
images/viniciusalucas-qr-code.ico Normal file → Executable file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 B

After

Width:  |  Height:  |  Size: 326 B

62
index.html Normal file → Executable file
View file

@ -26,7 +26,10 @@
</header>
<div class="social">
<a target="_blank" href="https://music.apple.com">
<a
target="_blank"
href="https://music.apple.com/br/playlist/favorite-songs/pl.u-YGUg5Z8yVM"
>
<svg
viewBox="0 0 50 50"
fill="none"
@ -86,36 +89,49 @@
</div>
<section id="projects">
<a href="./projects/webapp-for-scouting.html">
<button
style="
background-image: url(./images/projects/scout-webapp/cover-webapp.png);
"
>
<h3>06/2025</h3>
<h2>Um webapp de análise de competições de robótica</h2>
</button>
</a>
<a
href="./projects/exploring-camera-matching-with-blender-and-fspy.html"
>
<button>
<h3>14/10/2023</h32>
<h2>Explorando camera matching usando o Blender e Fspy</h2>
<button
style="
background-image: url(./images/projects/exploring-camera-matching-with-blender-and-fspy/viewport.webp);
"
>
<h3>10/2023</h3>
<h2>
Explorando camera matching usando o Blender e Fspy
</h2>
</button>
</a>
<a href="">
<button>
<h3>00/00/0000</h3>
<h2>[Titulo]</h2>
</button>
</a>
<h4>Próximos projetos</h4>
<a href="">
<button>
<h3>00/00/0000</h3>
<h2>[Titulo]</h2>
</button>
</a>
<button
style="
background-image: url(./images/projects/building-a-keyboard/keyboard-cover.png);
"
>
<h2>Projetando um teclado do zero</h2>
</button>
<h1 class="title">About me</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure odit temporibus corporis tempora recusandae omnis. In
velit quas porro dicta magnam obcaecati. Dicta libero
perspiciatis esse excepturi at inventore quos!
</p>
<button
style="
background-image: url(./images/projects/arcade/arcade.png);
"
>
<h2>Construíndo e programando um Arcade</h2>
</button>
</section>
</main>
</body>

87
projects/exploring-camera-matching-with-blender-and-fspy.html Normal file → Executable file
View file

@ -22,40 +22,93 @@
<body>
<main>
<header>
<img src="../images/project-covers/" />
<h1>Title</h1>
<h2>Tags | 00/00/0000</h2>
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/viewport.webp"
alt="Capa da pagina, exibindo o viewport 3D do Blender, contendo uma pré-visualização do projeto gráfico"
/>
<h1>Explorando camera matching usando o Blender e Fspy</h1>
<h2>10/2023</h2>
</header>
<section>
<p>
You were not supposed to be reading this, but it is kinda
funny that you found the base index.html that I use to write
these posts! Send me a screenshot of here to me using this
address:
Uma fas formas mais interessantes de produção gráfica
fazendo o uso de recursos digitais é o camera matching.
Neste processo, uma fotografia tem a sua perspectiva
analisada e reconstruída digitalmente para que novos
elementos sejam adicionados na pós-produção, de maneira fiel
e presente ao ambiente da imagem.
</p>
<p>
O Blender é um software open-source, feito para a
manipulação geral de objetos 3D, e inclui múltiplas
funcionalidades para modelagem, animação e composição, sendo
uma ferramente extremamente poderosa e flexível para
diversos processos de criação gráfica e simulação
tridimensional.
</p>
<p>
Assim como o Blender, o Fspy também é um programa de código
aberto, mas este possui um propósito mais específico. Ao
importar uma imagem no Fspy, ele permite que as linhas de
perspectiva da imagem sejam manualmente traçadas pelo
usuário, com o objetivo de exportar ao Blender as
configurações de ângulo, posição e distância focal. Ao
importar as configurações da câmera, o ambiente 3D se alinha
perfeitamente com a fotografia original, permitindo os
efeitos de composição de elementos.
</p>
<p>
Um dos primeiros testes que fiz consiste em uma fan-art do
Pikmin, um jogo desenvolvido e lançado pela Nintendo para o
Gamecube, que fiz tentando replicar o estilo da capa do
disco jogo.
</p>
<p>
Cada uma das imagens representa uma etapa, e na sequência,
elas representam a fotografia original, a tag de referência
de alinhamento, o ambiente 3D e a renderização final:
</p>
</section>
<div>
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/background-min.jpg"
alt="Fotografia original utilizada no projeto, consiste em uma foto de um pequeno canteiro de plantas coberto, com a perspectiva rente ao chão e em direção ao toldo do local"
/>
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/tracking-plane-min.jpg"
alt="Fotografia do mesmo local, mas com a pequena de tag de referência de ângulo ao chão"
/>
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/viewport.webp"
alt="Imagem do projeto 3D rodando dentro do Blender, exibindo a interface do programa, assim como a pré-visualização dos modelos em cena"
/>
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/render-output.png"
alt="Saída da imagem gerada pelo Blender, sem tratamentos adicionais"
/>
</div>
<section>
<p>
You were not supposed to be reading this, but it is kinda
funny that you found the base index.html that I use to write
these posts! Send me a screenshot of here to me using this
address:
Ao processar todas estas imagens e editá-las, este foi o
resultado
</p>
<img
src="../images/projects/exploring-camera-matching-with-blender-and-fspy/pikmin-final-edit.webp"
alt=""
/>
</section>
<footer>
<a href="../index.html"
><button>Click here to go to the home page ➜</button>
><button>Ir até a página inicial ➜</button>
</a>
</footer>
</main>

79
projects/webapp-for-scouting.html Executable file
View file

@ -0,0 +1,79 @@
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/root.css" />
<link rel="stylesheet" type="text/css" href="../styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="../styles/projects.css" />
<link
rel="icon"
href="../images/viniciusalucas-qr-code.ico"
type="image/x-icon"
/>
<title>Webapp for scouting | Vinícius Alexandre Lucas</title>
</head>
<body>
<main>
<header>
<img src="../images/projects/scout-webapp/cover-webapp.png" />
<h1>
Criando um webapp para análise de partidas em competições de
robótica
</h1>
<h2>06/2025</h2>
</header>
<section>
<p>
Dentro de competições de robótica realizadas pela FIRST
envolvem centenas de equipes em todas as temporadas, com o
objetivo de ver quem consegue ter a melhor estratégia para
os desafios impostos aos robôs. O principal valor dentro das
competições é o "Gracious Professionalism", que induz o
respeito e a colaboração entre as equipes, mesmo que estejam
competindo entre si.
</p>
<p>
Cada time permanece em uma rotação entre cada lado da arena,
dividida entre a aliança vermelha e azul. As equipes são
sorteadas préviamente e inseridas nestas áreas para as
partidas, com o intuito de cooperar com as demais equipes do
seu lado. Periodicamente, equipes opostas podem ser suas
aliadas em uma próxima partida, e por isso o respeito é tão
importante.
</p>
<p>
Ao considerar que nas finais é necessário formar uma aliança
fixa, é crucial entender de maneira extensiva as capacidades
e limites da própria equipe, assim como os potenciais de
todas as outras. A proposta do webapp é criar um ambiente
unificado para a coleta e visualização dos dados objetivos
de todas as equipes em cada uma destas partidas, permitindo
que estes sejam compilados e comparados para ajudar na
decisão de formação de alianças.
</p>
<p>
O sistema contém 4 páginas principais, a home, que exibe o
histórico de envios de análises recentes, o compositor de
regras, que permite a criação dos formulários a serem
respondidos, o escritor, que exibe o formulário em si a ser
respondido, e a página de análise, que exibe os dados
registrados pelas análises.
</p>
</section>
<footer>
<a href="../index.html"
><button>Click here to go to the home page ➜</button>
</a>
</footer>
</main>
</body>
</html>

24
styles/fonts.css Normal file → Executable file
View file

@ -1,9 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");
h1,
h2,
h3,
p,
h4,
button {
font-family:
"Funnel Display",
@ -24,3 +25,24 @@ button {
line-height: 100%;
color: var(--icone-texto);
}
p {
font-family:
"Host Grotesk",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
line-height: 130%;
color: var(--icone-texto);
}

40
styles/main.css Normal file → Executable file
View file

@ -58,10 +58,20 @@ section {
h2 {
font-size: 2.5rem;
font-weight: 300;
background-color: var(--background);
color: var(--icone-texto);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
width: fit-content;
}
h3 {
font-size: 1.5rem;
background-color: var(--background);
color: var(--icone-texto);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
width: fit-content;
}
&:hover {
@ -78,6 +88,14 @@ section {
transform: scale(0.95);
}
}
h4 {
font-size: 4rem;
}
p {
font-size: 2rem;
}
}
}
@ -176,13 +194,31 @@ header {
padding: 1.5rem;
h2 {
font-size: 2rem;
font-size: 1.5rem;
background-color: var(--background);
color: var(--icone-texto);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
width: fit-content;
}
h3 {
font-size: 1.25rem;
font-size: 1rem;
background-color: var(--background);
color: var(--icone-texto);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
width: fit-content;
}
}
h4 {
font-size: 3rem;
}
p {
font-size: 1.625rem;
}
}
}

37
styles/projects.css Normal file → Executable file
View file

@ -25,21 +25,38 @@ section {
width: 60%;
h1 {
font-size: 4rem;
font-size: 2.5rem;
}
h2 {
font-size: 2.5rem;
font-size: 2rem;
}
p {
font-size: 1.5rem;
margin-bottom: 1rem;
}
}
header {
img {
width: 100%;
height: auto;
aspect-ratio: 4/3;
}
}
img {
width: 100%;
aspect-ratio: 4/3;
height: auto;
align-self: center;
border-radius: 1.25rem;
background-color: var(--card);
border: solid 0.125rem #20202040;
box-sizing: border-box;
object-fit: cover;
object-position: center;
}
div {
@ -53,9 +70,10 @@ div {
scroll-padding: 20%;
img {
width: auto;
height: 42rem;
flex-shrink: 0;
width: 60%;
aspect-ratio: 4/3;
scroll-snap-align: start;
scroll-snap-stop: always;
@ -132,13 +150,18 @@ footer {
h2 {
font-size: 2rem;
}
p {
font-size: 1.25rem;
margin-bottom: 1rem;
}
}
div {
scroll-padding: 1rem;
img {
width: calc(100% - 2rem);
flex-shrink: 0;
width: 80%;
height: auto;
&:first-child {
margin-left: 1rem;

0
styles/reset.css Normal file → Executable file
View file

0
styles/root.css Normal file → Executable file
View file