-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (128 loc) · 6.21 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
146
147
148
149
150
151
152
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<title>Portifólio André Cruz</title>
</head>
<body>
<header class="cabecalho">
<nav class="navbar navbar-expand-lg fixed-top container__secao">
<div class="container-fluid">
<a class="navbar-brand" href="#">André Cruz GitHub Pages</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#codecamp">Projetos pessoais</a>
<a class="nav-link" href="#senacTech">Projetos SenacTech</a>
<a class="nav-link" href="#desafiosCompass">Desafios Compass.Uol</a>
<a class="nav-link" href="#alura">Exercícios e desafios da Alura & Rocketseat</a>
</div>
</div>
<a class="navbar-brand navbar-brand__icone" href="https://github.com/Cruz-Andre" target="_blank">
<img src="img/icon-github-big.svg" alt="ícone link para o GitHub" class="navbar__icone">
</a>
<a class="navbar-brand navbar-brand__icone" href="https://www.linkedin.com/in/andr%C3%A9-cruz-35a59822a"
target="_blank">
<img src="img/icon-linkedin-big.svg" alt="ícone link para o linkedin" class="navbar__icone">
</a>
<a class="navbar-brand navbar-brand__icone" href="https://www.instagram.com/acruztecinf/" target="_blank">
<img src="img/instagram-2-1-logo.svg" alt="ícone link para o instagram" class="navbar__icone">
</a>
</div>
</nav>
</header>
<main>
<section id="ola" class="container-fluid container__secao">
<h1>Olá, sou André Cruz</h1>
<p>Estudando HTML & CSS | JavaScript | React | SQL | Java | PHP</p>
<p>Alguns dos meus projetos a seguir:</p>
</section>
<section id="codecamp" class="container-fluid container__secao">
<div id="freeCodeCamp" class="row text-center justify-content-center">
<h1 class="container__titulo">Projetos pessoais & desafios da freeCodeCamp</h1>
</div>
</section>
<section id="senacTech" class="container-fluid container__secao">
<div id="senac_tech" class="row text-center justify-content-center">
<h1 class="container__titulo">Projetos SenacTech</h1>
<article class="card bg-light borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="img/bancoDeSangue.gif" class="card-img-top card-posicao-imagem" alt="gif do site meu primeiro e-commerce">
<div class="card-body">
<h5 class="card-title">bancoDeSangue</h5>
<p class="card-text">
Aplicação Java - CRUD para usuários/doadores e estoque de bolsas de sangue em hospitais. Mais informações no README.md do repositório.
</p>
<a href="https://github.com/Cruz-Andre/bancoDeSangue" target="_blank" class="btn btn-info botao-cor-especial">Repositório Git</a>
</div>
</article>
</div>
</section>
<section id="desafiosCompass" class="container-fluid container__secao">
<div id="compass_uol" class="row text-center justify-content-center">
<h1 class="container__titulo">Desafios Compass.Uol</h1>
<article id="CompassUltimo" class="card bg-light borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
<img src="img/compassoracle.gif" class="card-img-top card-posicao-imagem"
alt="gif do site meu primeiro e-commerce">
<div class="card-body">
<h5 class="card-title">Site meu 1º e-commerce</h5>
<p class="card-text">
Criar um site de e-commerce usando a plataforma OSF (Oracle Storefront Framework) contendo componentes
como carrossel, banner, formulário e uma action que busca dados de uma API externa
</p>
</div>
</article>
</div>
</section>
<section id="alura" class="container-fluid container__secao">
<div id="aluraRocket" class="row text-center justify-content-center">
<h1 class="container__titulo">Exercícios e desafios concluídos dos cursos da Alura e Rocketseat</h1>
</div>
</section>
<footer class="rodape">
<nav class="navbar justify-content-center">
<div class="container_fluid">
<a class="navbar-brand" href="https://github.com/Cruz-Andre">
<img src="img/icon-github-big.svg" alt="" class="navbar__icone">
</a>
<a class="navbar-brand" href="https://www.linkedin.com/in/andr%C3%A9-cruz-35a59822a" target="_blank">
<img src="img/icon-linkedin-big.svg" alt="" class="navbar__icone">
</a>
<a class="navbar-brand" href="https://www.instagram.com/acruztecinf/" target="_blank">
<img src="img/instagram-2-1-logo.svg" alt="" class="navbar__icone">
</a>
</div>
<p class="rodape__texto">André Cruz - 2022-<span id="ano"></span></p>
</nav>
</footer>
</main>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
crossorigin="anonymous">
</script>
<script type="module" src="./js/senacTech.js"></script>
<script type="module" src="./js/compass.js"></script>
<script type="module" src="./js/freeCodeCamp.js"></script>
<script type="module" src="./js/alura.js"></script>
<script>
const ano = document.getElementById('ano')
ano.textContent = new Date().getFullYear()
</script>
</body>
</html>