codesandbox · alexxmanos · Oct 5, 2023
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/images/project1img.png b/images/project1img.png
diff --git a/images/project2img.png b/images/project2img.png
diff --git a/index.html b/index.html
@@ -1,12 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Static Template</title>
-  </head>
-  <body>
-    <h1>This is a static template, there is no bundler or bundling involved!</h1>
-  </body>
-</html>
+    <title>Your Name - Software Engineer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Alejandro Manotas</h1>
+        <h2>Software Engineer</h2>
+    </header>
+
+    <section id="about-me">
+        <h2>About Me</h2>
+        <p>Motivated and hardworking software engineer, possessing a solid grasp of programming languages, algorithms, and data structures, accompanied by a commitment to crafting innovative software solutions. Demonstrated track record of dedication and diligence, thriving within dynamic settings to deliver impactful results. Equipped with a proactive approach and a continuous learning mindset, adept at contributing to collaborative endeavors and independent projects alike.</p>
+    </section>
+
+    <section id="projects">
+        <h2>Projects</h2>
+
+
+        <div class="project">
+                <a href="https://alexxmanos.github.io/NBAthemedJeopardyGame/" target="_blank">
+            <img src="/images/project1img.png" alt="Project 1 title">
+            <h3>NBA Themed Jeopardy Game</h3>
+            <p>Created a NBA Jeopardy Game displays that a jeopardy like game board with questions that are NBA related. This game was built using HTML,CSS,and JavaScript. CSS was used to make the jeopardy game board and style it. JavaScript was used to add functions, eventListeners and the arrays for the questions and answers. HTML was used to link my CSS and JavaScript File.</p>
+        </div>
+
+
+        <div class="project">
+                <a href="https://s8pyp6-3000.csb.app/" target="_blank">
+            <img src="/images/project2img.png" alt="Project 2 title">
+            <h3>Gen 1 Pokémon Pokedex API Web App</h3>
+            <p>This project is a web application built using React that allows you to explore and learn about the original 151 Pokémon from the first generation of Pokémon. It features a Pokedex for browsing Pokémon and a detailed view for each Pokémon's information. When you click on a Pokémon you're able to see detailed information, including its name, height, weight, and abilities. Data was fetched from the PokeAPI.</p>
+        </div>
+    </section>
+
+    <section id="links">
+        <a href="https://github.com/alexxmanos" target="_blank">GitHub</a>
+        <a href="https://www.linkedin.com/in/alejandro-manotas-69b144195/" target="_blank">LinkedIn</a>
+    </section>
+
+    <section id="resume">
+        <h2>My Resume</h2>
+        <a href="https://drive.google.com/file/d/1WvW3lfoc-WouOUkj-g7kaBk0D2zHMN9K/view" target="_blank">View Resume</a>
+    </section>
+
+    <section id="contact">
+        <h2>Contact Me</h2>
+        <form>
+            <input type="text" placeholder="Name" required>
+            <input type="email" placeholder="Email" required>
+            <textarea placeholder="Message"></textarea>
+            <button type="submit">Send</button>
+        </form>
+    </section>
+
+    <script src="scripts.js"></script>
+</body>
+</html>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,158 @@
+/* General Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Arial", sans-serif;
+  line-height: 1.6;
+  padding: 40px 60px;
+  background-color: #f2f4f8;
+  color: #2d3142;
+  opacity: 0;
+  animation: fadeIn 1.5s forwards 0.5s; /* fade-in effect */
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+section {
+  background-color: #ffffff;
+  padding: 40px;
+  margin: 40px 0;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transform: translateY(20px); /* start a bit below */
+  opacity: 0;
+  animation: slideUpFade 1.5s forwards 0.5s;
+}
+
+@keyframes slideUpFade {
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+h1 {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  color: #4a90e2;
+}
+
+p,
+a {
+  font-size: 1.1em;
+  line-height: 1.7;
+}
+
+a {
+  color: #e94e77;
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+
+a:hover {
+  color: #d83367;
+  transform: scale(1.05);
+  text-decoration: none;
+}
+
+#about-me {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#github-link {
+  margin-top: 30px;
+}
+
+#github-link a {
+  display: flex;
+  align-items: center;
+  background-color: #e94e77;
+  padding: 10px 20px;
+  border-radius: 5px;
+  color: #fff;
+  font-weight: bold;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#github-link a:hover {
+  background-color: #d83367;
+  transform: scale(1.05);
+}
+
+#github-link img {
+  margin-right: 15px;
+}
+
+.project {
+  display: flex;
+  align-items: start;
+  margin-bottom: 50px;
+}
+
+.project img {
+  max-width: 300px;
+  border-radius: 10px;
+  transition: transform 0.3s ease;
+}
+
+.project img:hover {
+  transform: translateY(-10px);
+}
+
+.project-details {
+  flex: 1;
+  margin-left: 30px;
+}
+
+.project-title {
+  font-size: 1.8em;
+  margin-bottom: 15px;
+}
+
+.project-description {
+  color: #555;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+form input,
+form textarea {
+  margin-bottom: 20px;
+  padding: 12px;
+  border: 1px solid #dcdde1;
+  border-radius: 5px;
+  transition: border-color 0.3s ease, transform 0.3s ease;
+}
+
+form input:focus,
+form textarea:focus {
+  border-color: #4a90e2;
+  transform: scale(1.05);
+}
+
+form button {
+  background-color: #4a90e2;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 1.1em;
+  font-weight: bold;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+form button:hover {
+  background-color: #357ab7;
+  transform: translateY(-5px);
+}