-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (133 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<!-- Tag para auxiliar na responsividade -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<!-- Arquivo CSS -->
<link rel="stylesheet" href="style.css"/>
<!-- Título da página -->
<title>Duduromeu's github</title>
</head>
<body>
<!-- Cabeçalho -->
<header class="page-header">
<div class="header-section">
<!-- Título do cabeçalho -->
<h1 class="page-title" id="pageTitle">
eduardo<b>romeu</b>
</h1>
</div>
<!-- Nav e lista de links -->
<nav class="header-section">
<ul class="page-links">
<li class="page-link"><a href="#about-me">Sobre Mim</a></li>
<li class="page-link"><a href="#education">Formação</a></li>
<li class="page-link"><a href="#portfolio">Portfólio</a></li>
<li class="page-link"><a href="#contact">Contato</a></li>
</ul>
</nav>
</header>
<!-- Conteúdo principal da página -->
<main>
<section id="about-me" class="main-section page-card">
<h3 class="card-title">Sobre mim</h3> <!-- Título da seção -->
<p>
<!-- Texto da seção Sobre Mim, com links no meio -->
Olá, meu nome é Eduardo, tenho <span id="my-age" title="03/02/2005">19</span> anos e vários hobbies, como
<a href="https://myanimelist.net/animelist/Romeu_" target="_blank" rel="noopener noreferrer" class="text-link">
assistir animes</a>,
<a href="https://steamcommunity.com/profiles/76561199230614741/" target="_blank" rel="noopener noreferrer" class="text-link">
jogar (principalmente jogos de corrida)</a>,
<a href="https://open.spotify.com/user/314edtdyrpu2nyy64svymy4kpwzm" target="_blank" rel="noopener noreferrer" class="text-link">
ouvir música</a> e
<a href="https://github.com/eduardoromeu/eduardoromeu.github.io" target="_blank" rel="noopener noreferrer" class="text-link">
programar</a> (os dois ultimos geralmente juntos).
<!-- Script que calcula a minha idade com base no ano que nasci e atualiza no texto -->
<script>
document.querySelector("#my-age").textContent = new Date().getFullYear() - 2005;
</script>
</p>
</section>
<!-- Seção Formação -->
<section id="education" class="main-section page-card">
<h3 class="card-title">Formação</h3>
<P>Me formei no curso técnico de informática integrado ao ensino médio,
e desde o primeiro ano procuro fazer cursos na área de tecnologia da informação.
Você pode ver minha formação (quase) completa no
<a href="https://www.linkedin.com/in/eduardo-romeu-eberts-04b72821a/" rel="noopener noreferrer" target="_blank" class="text-link">
meu perfil do LinkedIn.
</a>
</p>
<p>Atualmente estou cursando Análise e Desenvolvimento de Sistemas pela Uninter!</p>
<br>
<h3 class="card-title">Idiomas</h3>
<!-- Lista de idiomas, com um span para os emojis de bandeiras -->
<ul class="page-list">
<li><span class="ct-flag">🇧🇷</span> <b>Português:</b> Nativo</li>
<li><span class="ct-flag">🇺🇸</span> <b>Inglês:</b> Intermediário</li>
<li><span class="ct-flag">🇯🇵</span> <b>Japonês:</b> Básico / Hobby</li>
</ul>
</section>
<!-- Seção Portfolio -->
<section class="main-section page-card">
<h3 class="card-title">Portfolio</h3>
<!-- Cards com links para os projetos -->
<div id="portfolio">
<a class="project-card" href="https://store.steampowered.com/app/2408060/Baixos_de_Quebrada/"
target="_blank" rel="noopener noreferrer">
<!-- Imagem do projeto -->
<div class="card-image">
<img src="images/laf-banner.png" alt="Low and Furious Banner">
</div>
<!-- Nome do projeto -->
<h4 class="project-card-title">Low And Furious</h4>
</a>
<a class="project-card" href="https://eduardoromeu.github.io/react-repo-list/"
target="_blank" rel="noopener noreferrer">
<div class="card-image">
<img src="images/repo-list-screenshot.png" alt="Website screenshot">
</div>
<h4 class="project-card-title">React Repo List</h4>
</a>
<a class="project-card" href="https://eduardoromeu.github.io/plymouthwebsite/"
target="_blank" rel="noopener noreferrer">
<div class="card-image">
<img src="images/plymouth-screen.png" alt="Website screenshot">
</div>
<h4 class="project-card-title">Plymouth Website</h4>
</a>
<a class="project-card" href="https://play.google.com/store/apps/details?id=com.CodeITGameStudio.BaixosDeQuebrada"
target="_blank" rel="noopener noreferrer">
<div class="card-image">
<!-- Técnica de "fallback" caso a imagem principal não carregue -->
<object data="https://play-lh.googleusercontent.com/_mP75BFsQgaS4Mz_NAqrPpYPIyXBquSxMJP-k-oDwPIMnxEUzK47OcvcnLIIz6JAdyY=w2560-h1440-rw" type="image/jpg">
<img src="images/laf-banner.png" />
</object>
</div>
<h4 class="project-card-title">Baixos de Quebrada</h4>
</a>
</div>
</section>
<!-- Seção de Contato -->
<section id="contact" class="main-section page-card">
<h3 class="card-title">Contato</h3>
<!-- Formulário com inputs que utilizam placeholder ao invés de labels para identificação -->
<form class="contact-form">
<input required type="text" class="contact-input" autocomplete="name" placeholder="Nome">
<input required type="email" class="contact-input" autocomplete="email" placeholder="Email">
<textarea required class="contact-input" rows="3" maxlength="280" placeholder="Digite sua mensagem"></textarea>
<button class="contact-input">Enviar</button>
</form>
</section>
</main>
<!-- Rodapé simples -->
<footer>
<p>Made in 2024 by Eduardo Romeu</p>
</footer>
</body>
</html>