feat: adding new projects

Ryrden · Feb 10, 2024 · c2b1610 · c2b1610
1 parent ae8d6fb
commit c2b1610
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 52 deletions.
diff --git a/_data/projects-pt-br.json b/_data/projects-pt-br.json
@@ -7,33 +7,25 @@
 		"source_code": "https://github.com/ryrden/ryrden.dev"
 	},
 	{
-		"title": "Formula 1 - SCC0541 - Laboratório de Banco de Dados",
-		"description": "Sistema completo com consultas e queries para um banco de dados real da Formula 1, incluindo dados de corridas, pilotos, equipes, etc.",
-		"technologies": ["python", "flask", "postgresql", "docker"],
-		"image": "https://camo.githubusercontent.com/a72c76f0e46f80c4412149b0c4709ba9fc9df2d38579da3e7a15638119326fae/68747470733a2f2f692e696d6775722e636f6d2f67316f334937762e706e67",
-		"source_code": "https://github.com/Ryrden/SCC0541-Formula1/tree/main"
-	},
-	{
-		"title": "Projeto Exemplo 1",
+		"title": "Adoção Cãosciente - [SSC0536 - Projeto e Desenvolvimento de Sistemas de Informação]",
 		"description": "Descrição do projeto exemplo 1",
-		"technologies": ["go", "java"],
-		"image": "https://source.unsplash.com/featured/1280x720",
-		"source_code": ""
+		"technologies": ["python", "fastapi", "mongodb", "docker", "react", "typescript", "cypressio", "jira"],
+		"image": "https://camo.githubusercontent.com/535c154091b43efb55d4fbd1a686783f7067adcfccff968d8034cb3fb84496a7/68747470733a2f2f692e696d6775722e636f6d2f33436d474b76412e706e67",
+		"source_code": "https://github.com/orgs/Projeto-Adocao-Caosciente/repositories"
 	},
 	{
-		"title": "Projeto Exemplo 2",
-		"description": "Descrição do projeto exemplo 2",
-		"technologies": ["go", "java"],
-		"image": "https://source.unsplash.com/featured/1280x720",
-		"source_code": ""
+		"title": "Formula 1 - [SCC0541 - Laboratório de Banco de Dados]",
+		"description": "Sistema completo com consultas e queries para um banco de dados real da Formula 1, incluindo dados de corridas, pilotos, equipes, etc.",
+		"technologies": ["python", "flask", "postgresql", "docker", "html5", "css3"],
+		"image": "https://camo.githubusercontent.com/a72c76f0e46f80c4412149b0c4709ba9fc9df2d38579da3e7a15638119326fae/68747470733a2f2f692e696d6775722e636f6d2f67316f334937762e706e67",
+		"source_code": "https://github.com/Ryrden/SCC0541-Formula1"
 	},
 	{
-		"title": "Projeto Exemplo 3",
+		"title": "Caaso Eletroniks - [SCC0560 - Interação Humano Computador e Experiência do Usuário]",
 		"description": "Descrição do projeto exemplo 3",
-		"technologies": ["go", "java"],
-		"image": "https://source.unsplash.com/featured/1280x720",
-		"source_code": ""
+		"technologies": ["react", "typescript", "figma", "materialui"],
+		"image": "https://camo.githubusercontent.com/9c92e6d81b4c4baad6432b8c2b4bea9e48b86d815e6aafb5706c9b563b4e7bd2/68747470733a2f2f692e696d6775722e636f6d2f47694f796853522e706e67",
+		"source_code": "https://github.com/Ryrden/SCC-0560-Caaso-Eletroniks"
 	}
-
 ]
 
diff --git a/_sass/pages/projects.scss b/_sass/pages/projects.scss
@@ -8,18 +8,24 @@
         margin-bottom: 2em; /* Adjust as per design */
         width: 100%;
 
-        img {
+        .project-logo {
             align-self: center;
-            object-fit: contain;
+            object-fit: fill;
             max-width: 27em;
-            aspect-ratio: 16/9;
+            aspect-ratio: 16/9;                        
+            box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.35);
         }
     }
 
     .project-content {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        padding-left: 1em;
+
+        .project-title {
+            margin: 0;
+        }
 
         .project-about {
             display: flex;
@@ -32,10 +38,25 @@
                 }
                 .project-languages-content img {
                     // height="30" width="42"
-                    height: 1.875em;
-                    width:  2.625em
+                    height: 1.75em;
+                    width:  2.5em;
                 }
             }
         }
     }
-}
+}
+
+.modal-close {
+    color: #aaa;
+    float: right;
+    font-size: 2em;
+    font-weight: bold;
+
+    &:hover,
+    &:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
diff --git a/projects.pt-br.html b/projects.pt-br.html
@@ -5,31 +5,54 @@
 ---
 
 <div id="projects">
-    <h1>Meus {{ page.title }}</h1>
-    {% for project in site.data.projects-pt-br %}
-    <div class="project">
-        <img src="{{ project.image }}" alt="{{ project.title }}">
-        <div class="project-content">
-            <h2>{{ project.title }}</h2>
-            <p>{{ project.description }}</p>
-            <div class="project-about">
-                <!-- <span>
+	<h1>Meus
+		{{ page.title }}
+	</h1>
+	{% for project in site.data.projects-pt-br %}
+	<div class="project">
+		<img class="project-logo" src="{{ project.image }}" alt="{{ project.title }}">
+		<div class="project-content">
+			<h2 class="project-title">
+				{{ project.title }}
+			</h2>
+			<p>
+				{{ project.description }}
+			</p>
+			<div class="project-about">
+				<!-- <span>
                     <a href="{{ project.source_code }}">Código Fonte</a><br>
                     <a href="{{ project.url }}">Aplicação</a>
                 </span> -->
-                <div class="project-languages">
-                    <div class="project-languages-title">
-                        Tecnologias utilizadas: 
-                    </div>
-                    <div class="project-languages-content">
-                        {% for technology in project.technologies %}
-                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{ technology }}/{{ technology }}-original.svg" alt="{{ technology }} logo">
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-            <button>Saiba Mais</button>
-        </div>
-    </div>
-    {% endfor %}
-</div>
+				<div class="project-languages">
+					<div class="project-languages-title">
+						Tecnologias utilizadas:
+					</div>
+					<div class="project-languages-content">
+						{% for technology in project.technologies %}
+						<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{ technology }}/{{ technology }}-original.svg"
+								alt="{{ technology }} logo">
+						{% endfor %}
+					</div>
+				</div>
+			</div>
+			<button onclick="document.getElementById('modal-{{ project.title }}').showModal()">Detalhes</button>
+		</div>
+	</div>
+	{% endfor %}
+</div>
+
+{% for project in site.data.projects-pt-br %}
+<dialog class="modal" id="modal-{{ project.title }}">
+	<div class="modal-content">
+		<span class="modal-close" onclick="document.getElementById('modal-{{ project.title }}').close()">&times;</span>
+		<h2>
+			{{ project.title }}
+		</h2>
+		<p>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
+			distinctio quibusdam molestias. Vitae fugit quia omnis veritatis fuga
+			illum a quibusdam dolorem ex eligendi minus enim itaque, odit ad
+			consectetur.
+		</p>
+</dialog>
+{% endfor %}