diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json new file mode 100644 index 000000000..7b46a7eda --- /dev/null +++ b/.codesandbox/workspace.json @@ -0,0 +1,20 @@ +{ + "responsive-preview": { + "Mobile": [ + 320, + 675 + ], + "Tablet": [ + 1024, + 765 + ], + "Desktop": [ + 1400, + 800 + ], + "Desktop HD": [ + 1920, + 1080 + ] + } +} \ No newline at end of file diff --git a/images/project1img.png b/images/project1img.png new file mode 100644 index 000000000..d81908cc8 Binary files /dev/null and b/images/project1img.png differ diff --git a/images/project2img.png b/images/project2img.png new file mode 100644 index 000000000..41a2755d0 Binary files /dev/null and b/images/project2img.png differ diff --git a/index.html b/index.html index 4ad4ffff6..1c37c7145 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,64 @@ - + - - Static Template - - -

This is a static template, there is no bundler or bundling involved!

- - \ No newline at end of file + Your Name - Software Engineer + + + +
+

Alejandro Manotas

+

Software Engineer

+
+ +
+

About Me

+

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.

+
+ +
+

Projects

+ + +
+ + Project 1 title +

NBA Themed Jeopardy Game

+

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.

+
+ + +
+ + Project 2 title +

Gen 1 Pokémon Pokedex API Web App

+

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.

+
+
+ + + +
+

My Resume

+ View Resume +
+ +
+

Contact Me

+
+ + + + +
+
+ + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..807804f27 --- /dev/null +++ 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); +}