add projetos SenacTech

index.html

@@ -27,6 +27,7 @@
 				<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="#senacTech">Projetos SenacTech</a>
 						<a class="nav-link" href="#desafiosCompass">Desafios Compass.Uol</a>
 						<a class="nav-link" href="#codecamp">Projetos pessoais</a>
 						<a class="nav-link" href="#alura">Exercícios e desafios da Alura & Rocketseat</a>
@@ -53,10 +54,27 @@
 
 		<section id="ola" class="container-fluid container__secao">
 			<h1>Olá, sou André Cruz</h1>
-			<p>Estudando HTML & CSS | JavaScript | React</p>
+			<p>Estudando HTML & CSS | JavaScript | React | SQL | Java | PHP</p>
 			<p>Alguns dos meus projetos a seguir:</p>
 		</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
+						</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>
@@ -120,6 +138,7 @@ <h1 class="container__titulo">Exercícios e desafios concluídos dos cursos da A
 		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>

js/senacTech.js

@@ -0,0 +1,26 @@
+import senacTech from '../json/senacTech.json' assert {type: 'json'}
+
+let desafios = []
+desafios = senacTech
+//console.table(desafios)
+
+const desafiosSenacTech = document.getElementById('senac_tech')
+
+const mostrarProjetos = (listaDesafios) => {
+	listaDesafios.map(desafio => {
+		desafiosSenacTech.innerHTML +=
+			`
+				<article class="card bg-light borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
+					<img src="${desafio.imagem}" class="card-img-top card-posicao-imagem" alt="${desafio.alt}">
+						<div class="card-body">
+							<h5 class="card-title">${desafio.titulo}</h5>
+							<p class="card-text">${desafio.texto}</p>
+							<a href="${desafio.site}" target="_blank" class="btn btn-info botao-cor-especial">Visite o site</a>
+							<a href="${desafio.repositorio}" target="_blank" class="btn btn-info botao-cor-especial">Repositório Git</a>
+						</div>
+				</article>
+      `
+	})
+}
+
+mostrarProjetos(desafios)

json/senacTech.json

@@ -0,0 +1,10 @@
+[
+    {
+        "imagem": "img/bancoDeSangueWeb.png",
+        "alt": "Imagem do site Banco De Sangue",
+        "titulo": "Site Banco De Sangue",
+        "texto": "Projeto em desenvolvimento. Este projeto é uma aplicação web do bancoDeSangue feito em java. Mais informações no README.md do repositorio",
+        "site": "https://cruz-andre.github.io/bancoDeSangueWeb/",
+        "repositorio": "https://github.com/Cruz-Andre/bancoDeSangueWeb"
+    }
+]