commit d89be7541accded21f589f7c75d7bc99b273e484 Author: JPASilveira Date: Fri May 22 17:05:34 2026 -0300 MyHomePageV1 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ + diff --git a/README.md b/README.md new file mode 100644 index 0000000..fb06250 --- /dev/null +++ b/README.md @@ -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* diff --git a/img/codeberg.svg b/img/codeberg.svg new file mode 100644 index 0000000..841bbdb --- /dev/null +++ b/img/codeberg.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/img/email.svg b/img/email.svg new file mode 100644 index 0000000..6071fcf --- /dev/null +++ b/img/email.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/img/instagram.svg b/img/instagram.svg new file mode 100644 index 0000000..289247f --- /dev/null +++ b/img/instagram.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/img/my.jpg b/img/my.jpg new file mode 100644 index 0000000..85a6b21 Binary files /dev/null and b/img/my.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..590896c --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + Home Page João Pedro A. Silveira + + + + +

+ +

João Pedro A. Silveira

+ +

+ + +

+ Instagram + + + +

+ Codeberg + + + +

+ Contato + + +

+ + +

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b88da70 --- /dev/null +++ b/script.js @@ -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'); + +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..8158786 --- /dev/null +++ b/style.css @@ -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; + } +} \ No newline at end of file