mirror of
https://codeberg.org/jsilveira/pages.git
synced 2026-06-11 18:15:09 +00:00
MyHomePageV1
This commit is contained in:
commit
d89be7541a
9 changed files with 304 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Homepage Pessoal
|
||||
|
||||
Uma homepage simples, responsiva e elegante desenvolvida em HTML e CSS puros, funcionando como um agregador de links para centralizar a presença digital e canais de contacto.
|
||||
|
||||
Desenvolvido por João Pedro Almeida da Silveira — *jsilveira.dev.br*
|
||||
6
img/codeberg.svg
Normal file
6
img/codeberg.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<style>
|
||||
.s0 { fill: #ffffff }
|
||||
</style>
|
||||
<path id="Path 0" class="s0" d="m240 10.3c-0.28 0.27-5.45 1.01-11.5 1.64-6.05 0.64-16.63 2.3-23.5 3.71-6.88 1.41-17 3.9-22.5 5.55-5.5 1.64-14.05 4.57-19 6.51-4.95 1.94-13.95 5.92-20 8.85-6.05 2.93-15.5 8.13-21 11.55-5.5 3.42-14.95 9.92-21 14.46-6.05 4.53-15.95 12.93-22 18.68-6.05 5.74-14.83 15.04-19.5 20.66-4.67 5.62-12.48 16.15-17.34 23.4-4.86 7.26-12.14 19.94-16.18 28.19-4.03 8.25-9.13 19.95-11.31 26-2.19 6.05-5.59 17.53-7.56 25.5-1.97 7.97-4.49 21.47-5.61 30-1.33 10.25-2.01 21.17-2.01 32.25 0.01 11.58 0.65 21.15 2.07 31 1.13 7.84 2.97 18.52 4.09 23.75 1.12 5.23 4.19 16.02 6.82 24 2.63 7.98 6.86 19.23 9.4 25 2.55 5.77 7.21 14.96 10.38 20.42 3.16 5.45 6.2 9.74 6.75 9.54 0.55-0.21 48.7-62.02 107-137.35 58.3-75.33 106.79-137.45 107.75-138.04 1.25-0.76 2.25-0.76 3.5 0.01 0.96 0.59 49.61 62.91 108.1 138.5 58.5 75.58 106.65 137.38 107 137.32 0.36-0.05 2.77-3.65 5.36-8 2.59-4.34 7.26-13.53 10.39-20.4 3.12-6.88 7.86-19.14 10.54-27.25 2.67-8.11 5.96-20.26 7.31-27 1.35-6.74 3.15-17.65 4.01-24.25 0.85-6.6 1.55-19.43 1.55-28.5 0-10.98-0.66-21.18-1.96-30.5-1.08-7.7-2.44-16.48-3.02-19.5-0.59-3.03-2.45-10.68-4.14-17-1.69-6.32-4.65-15.78-6.58-21-1.94-5.23-6.8-16.25-10.82-24.5-4.02-8.25-11.28-20.93-16.15-28.19-4.86-7.25-12.66-17.78-17.34-23.4-4.68-5.61-13.45-14.93-19.5-20.71-6.05-5.77-15.95-14.21-22-18.75-6.05-4.53-15.95-11.26-22-14.94-6.05-3.68-15.5-8.85-21-11.49-5.5-2.64-14.27-6.47-19.5-8.51-5.23-2.04-14.68-5.2-21-7.02-6.32-1.83-16.45-4.25-22.5-5.4-6.05-1.14-14.82-2.57-19.5-3.17-4.68-0.6-16.6-1.32-26.5-1.6-9.9-0.28-18.22-0.29-18.5-0.02zm24.34 142.7c0.32 1.37 21.3 80.13 46.63 175 25.33 94.88 46.3 172.73 46.6 173 0.31 0.27 6.5-2.51 13.75-6.2 7.25-3.68 18.13-9.92 24.18-13.86 6.05-3.94 15.05-10.41 20-14.39 4.95-3.97 12.78-10.78 17.39-15.14 4.62-4.35 11.85-11.96 16.07-16.91 4.23-4.95 10.01-12.15 12.85-16l5.16-7c-7.42-9.3-52.03-66.9-103.92-134-51.89-67.1-95.46-123.13-96.82-124.5l-2.47-2.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
6
img/email.svg
Normal file
6
img/email.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<style>
|
||||
.s0 { fill: #ffffff }
|
||||
</style>
|
||||
<path id="Path 0" fill-rule="evenodd" class="s0" d="m252.5 7.1c19.66-0.08 29.99 0.32 38 1.45 6.05 0.87 11.23 1.73 11.5 1.93 0.27 0.2 4.1 1.11 8.5 2.01 4.4 0.91 11.6 2.73 16 4.06 4.4 1.33 8.34 2.43 8.75 2.43 0.41 0.01 2.21 0.76 4 1.67 1.79 0.9 5.5 2.43 8.25 3.38 2.75 0.96 9.5 3.91 15 6.56 5.5 2.65 13.6 6.89 18 9.42 4.4 2.53 11.5 7.06 15.78 10.05 4.27 2.99 9.22 6.48 11 7.75 1.77 1.28 7.67 6.23 13.11 11 5.44 4.78 13.61 12.74 18.14 17.69 4.53 4.95 10.33 11.7 12.89 15 2.56 3.3 8.41 11.63 13 18.5 4.59 6.88 11.3 18.57 14.91 26 3.61 7.43 7.75 16.65 9.2 20.5 1.45 3.85 3.75 10.82 5.12 15.5 1.36 4.68 2.92 9.4 3.47 10.5 0.55 1.1 0.9 2.45 0.78 3-0.12 0.55 0.06 1.68 0.4 2.5 0.33 0.82 1.34 5.55 2.24 10.5 0.89 4.95 2.24 13.5 2.99 19 0.76 5.5 1.38 18.1 1.39 28 0.01 9.96-0.62 22.69-1.4 28.5-0.77 5.77-2.11 14.32-2.98 19-0.87 4.68-1.87 9.4-2.23 10.5-0.37 1.1-0.77 2.68-0.89 3.5-0.13 0.82-1.24 4.88-2.46 9-1.23 4.13-3.92 12-5.98 17.5-2.06 5.5-6.02 14.73-8.8 20.5-2.78 5.77-7.63 14.77-10.77 20-3.14 5.23-6.65 10.7-7.81 12.17-1.15 1.47-3.45 4.59-5.1 6.94-1.65 2.34-6.6 8.58-11 13.88-4.4 5.29-12.05 13.42-17.01 18.06-4.95 4.65-11.7 10.72-15 13.5-3.29 2.78-8.24 6.65-10.99 8.61-2.75 1.96-7.25 5.11-10 7.01-2.75 1.9-9.16 5.79-14.25 8.64-5.09 2.86-13.19 7.04-18 9.3-4.81 2.26-12.35 5.43-16.75 7.05-4.4 1.62-11.15 3.84-15 4.94-3.85 1.11-7.9 2.41-9 2.9-1.1 0.49-4.48 1.36-7.5 1.93-3.02 0.57-7.98 1.54-11 2.15-3.02 0.62-8.43 1.58-12 2.13-3.57 0.56-17.07 1.21-30 1.46-18.36 0.35-25.91 0.09-34.5-1.18-6.05-0.89-11.22-1.78-11.5-1.97-0.28-0.18-5-1.1-10.5-2.03-5.5-0.93-10.45-2.02-11-2.42-0.55-0.39-3.93-1.56-7.5-2.58-3.57-1.02-11.68-3.84-18-6.27-6.32-2.42-16-6.66-21.5-9.41-5.5-2.76-12.03-6.17-14.5-7.59-2.47-1.42-7.87-4.85-12-7.62-4.12-2.78-9.53-6.63-12-8.57-2.47-1.94-4.95-4.01-5.5-4.6-0.55-0.59-2.35-1.91-4-2.94-1.65-1.03-7.44-6.17-12.88-11.43-5.43-5.26-13.09-13.38-17.03-18.06-3.93-4.68-7.93-9.63-8.88-11-0.95-1.38-3.28-4.52-5.17-7-1.89-2.48-6.04-8.77-9.22-14-3.18-5.23-8.37-14.79-11.55-21.25-3.17-6.46-6.73-14.34-7.91-17.5-1.18-3.16-2.61-6.88-3.17-8.25-0.56-1.38-1.09-2.73-1.17-3-0.08-0.27-0.73-2.52-1.44-5-0.7-2.48-1.69-5.51-2.18-6.75-0.5-1.24-2.07-7.54-3.51-14-1.44-6.46-3.22-16.25-3.96-21.75-0.79-5.79-1.37-19.46-1.4-32.5-0.02-12.38 0.44-26.32 1.02-31 0.59-4.68 2.21-13.68 3.61-20 1.4-6.32 3.7-15.32 5.12-20 1.43-4.68 2.69-8.95 2.81-9.5 0.13-0.55 1.42-4.15 2.88-8 1.46-3.85 3.57-9.03 4.7-11.5 1.13-2.47 3.23-6.97 4.67-10 1.45-3.03 5.04-9.55 8-14.5 2.95-4.95 6.11-10.31 7.01-11.9 0.91-1.6 3.46-5.2 5.66-8 2.21-2.81 4.72-6.23 5.59-7.6 0.87-1.38 2.22-3.17 2.99-4 0.78-0.83 3.88-4.42 6.9-8 3.02-3.58 8.2-9.21 11.5-12.53 3.31-3.31 10.06-9.39 15.01-13.51 4.95-4.12 11.66-9.51 14.9-11.98 3.25-2.46 7.4-5.38 9.22-6.48 1.83-1.1 6.6-4 10.6-6.43 4.01-2.44 11.33-6.44 16.28-8.88 4.95-2.45 13.95-6.42 20-8.83 6.05-2.41 16.63-5.9 23.5-7.76 6.88-1.86 16.32-4.14 21-5.08 4.68-0.94 10.07-2.06 12-2.51 1.93-0.44 15.65-0.85 30.5-0.91zm-127.25 157.98c5.09 4.99 34.45 34.23 65.25 64.97 50.84 50.75 56.3 55.91 59.25 55.93 2.03 0.01 4.47-0.96 6.5-2.6 1.79-1.43 7.97-6.95 13.73-12.25 5.76-5.29 14.09-12.98 18.5-17.07 4.41-4.09 11.19-10.39 15.07-14 3.88-3.61 11.45-10.61 16.82-15.56 5.37-4.95 11.47-10.57 13.56-12.5 2.09-1.92 11.39-10.49 20.68-19.03 9.29-8.55 19.16-17.77 21.94-20.5 2.78-2.74 8.07-7.56 11.75-10.72 3.69-3.16 6.47-6.2 6.2-6.75-0.33-0.66-47.65-1-138.95-1-91.27 0-138.64 0.34-139 1-0.3 0.55 3.61 5.08 8.7 10.08zm264.13 17.49c-8.74 8.28-19.05 17.96-22.94 21.5-3.88 3.53-11.5 10.48-16.93 15.43-5.44 4.95-12.61 11.52-15.95 14.59-3.33 3.08-8.03 7.35-10.43 9.5-2.4 2.15-4.73 4.59-5.18 5.41-0.59 1.09 1.36 3.81 7.19 10 4.4 4.68 12.14 12.78 17.19 18 5.06 5.23 15.26 15.8 22.68 23.5 7.42 7.7 19.9 20.64 27.74 28.75 7.84 8.11 14.7 14.53 15.25 14.25 0.66-0.33 0.99-30.57 0.98-87.75 0-47.99-0.38-87.79-0.82-88.45-0.45-0.66-1.29-0.88-1.86-0.5-0.58 0.39-8.19 7.48-16.92 15.77zm-287.37 73.18c0 46.34 0.21 84.93 0.49 85.75 0.27 0.83 0.95 1.5 1.5 1.5 0.55 0 4.98-4.16 9.85-9.25 4.87-5.09 13.99-14.89 20.25-21.78 6.27-6.89 13.2-14.52 15.4-16.95 2.2-2.43 6.97-7.59 10.59-11.47 3.63-3.88 11.2-12 16.83-18.05 5.63-6.05 10.65-11.79 11.16-12.75 0.76-1.45-6.17-8.79-40.64-43-22.85-22.69-42.14-41.58-42.87-41.99q-1.31-0.72-1.93 1.5c-0.34 1.23-0.62 40.15-0.63 86.49zm184.49 21.8c-4.95 4.53-12.15 11.2-16 14.82-4.56 4.28-8.83 7.29-12.25 8.6-2.89 1.12-6.38 2.03-7.75 2.03-1.38 0-4.86-0.9-7.75-1.99-4.41-1.67-8.06-4.79-22.75-19.49-9.63-9.62-17.95-17.52-18.5-17.54-0.55-0.03-5.5 4.78-11 10.69-5.5 5.9-13.6 14.58-18 19.27-4.4 4.69-11.4 12.13-15.56 16.54-4.16 4.41-12.21 13.2-17.88 19.52-5.67 6.33-11.08 12.18-12.01 13-0.93 0.83-4.02 4.31-6.87 7.75l-5.18 6.25c228.37 0 280.91-0.35 280.75-0.95-0.14-0.52-5.65-6.48-12.25-13.25-6.6-6.76-21-21.72-32-33.24-11-11.52-25.85-26.94-33-34.28-7.15-7.33-13.45-13.31-14-13.28-0.55 0.03-2.8 1.69-5 3.68-2.2 2-8.05 7.33-13 11.87z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
6
img/instagram.svg
Normal file
6
img/instagram.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
BIN
img/my.jpg
Normal file
BIN
img/my.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
52
index.html
Normal file
52
index.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home Page João Pedro A. Silveira</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="loader-wrapper">
|
||||
<div class="loader">
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
<div class="profile-pic">
|
||||
<img src="img/my.jpg" alt="Foto de Perfil">
|
||||
</div>
|
||||
|
||||
<h1>João Pedro A. Silveira</h1>
|
||||
|
||||
<div class="links-container">
|
||||
|
||||
<a href="https://instagram.com/jsilveira.dev" class="link-item">
|
||||
<img src="img/instagram.svg" alt="Logo Instagram" class="icon">
|
||||
<span>Instagram</span>
|
||||
</a>
|
||||
|
||||
<a href="https://codeberg.org/jsilveira/" class="link-item">
|
||||
<img src="img/codeberg.svg" alt="Logo Codeberg" class="icon">
|
||||
<span>Codeberg</span>
|
||||
</a>
|
||||
|
||||
<a href="mailto:joaopedroasilveira@gmail.com" class="link-item">
|
||||
<img src="img/email.svg" alt="Logo Contato" class="icon">
|
||||
<span>Contato</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">jsilveira.dev.br</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
script.js
Normal file
8
script.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
window.addEventListener('load', function() {
|
||||
const loader = document.querySelector('.loader-wrapper');
|
||||
loader.classList.add('hidden');
|
||||
|
||||
const content = document.querySelector('.content');
|
||||
content.classList.add('show');
|
||||
|
||||
});
|
||||
220
style.css
Normal file
220
style.css
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e8dfac 0%, #a47b6a 50%, #7b5952 100%);
|
||||
padding: 3vh 5vw;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #555555;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
gap: 2vw;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: bounce 0.5s infinite alternate;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-wrapper.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #555555;
|
||||
background-image: repeating-radial-gradient(
|
||||
circle at bottom left,
|
||||
transparent,
|
||||
transparent 1.5rem,
|
||||
rgba(255, 255, 255, 0.03) 1.6rem,
|
||||
rgba(255, 255, 255, 0.03) 1.7rem
|
||||
);
|
||||
width: 100%;
|
||||
max-width: 90vw;
|
||||
border-radius: 1rem;
|
||||
padding: 6vh 8vw 9vh 8vw;
|
||||
box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 35vw;
|
||||
height: 35vw;
|
||||
background-color: #000;
|
||||
border: 0.4rem solid #fff;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 4vh;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile-pic img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6vh;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.links-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
gap: 4vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
gap: 5vw;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
transform: translateY(-0.3rem);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.link-item span {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 2vh;
|
||||
right: 6vw;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.card {
|
||||
max-width: 75vw;
|
||||
min-height: 70vh;
|
||||
padding: 8vh 5vw 10vh 5vw;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
margin-bottom: 4vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
margin-bottom: 6vh;
|
||||
}
|
||||
|
||||
.links-container {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 8vw;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2vh;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
}
|
||||
|
||||
.link-item span {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue