Skip to content

Commit a0a6f23

Browse files
amygutierrezamygutierrez
committed
added contact and project
1 parent 548960a commit a0a6f23

5 files changed

Lines changed: 283 additions & 10 deletions

File tree

‎about.html‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,30 @@
1414
<div class="terminal-body">
1515
<p class="command">Mac:~ User$ <span class="typing"></span></p>
1616
<p class="response about-text" style="display: none;">
17-
Hi! I'm Amy Gutierrez, a DevSecOps engineer <br>
18-
- 🛠️ This page is still under construction.<br><br>
17+
Hi! I'm Amy Gutierrez, a Lead Engineer, Associate at Booz Allen Hamilton. <br><br>
18+
19+
🚀 Currently, I work as a DevSecOps Engineer for a government agency, where I specialize in:<br>
20+
&nbsp;&nbsp;&nbsp;&nbsp;- Automating CI/CD pipelines with GitHub Actions<br>
21+
&nbsp;&nbsp;&nbsp;&nbsp;- Building and deploying containerized applications to AWS ECR<br>
22+
&nbsp;&nbsp;&nbsp;&nbsp;- Leading a smoke test automation project<br><br>
23+
24+
💡 Previously, I served as an ML Engineer for another government agency, where I worked on:<br>
25+
&nbsp;&nbsp;&nbsp;&nbsp;- Computer Vision for analyzing CT images<br>
26+
&nbsp;&nbsp;&nbsp;&nbsp;- Natural Language Processing (NLP) for clinical reports<br><br>
27+
28+
🤖 My core areas of expertise include:<br>
29+
&nbsp;&nbsp;&nbsp;&nbsp;- Artificial Intelligence & Machine Learning<br>
30+
&nbsp;&nbsp;&nbsp;&nbsp;- DevSecOps<br>
31+
&nbsp;&nbsp;&nbsp;&nbsp;- Software Development<br><br>
32+
33+
🎓 Degrees: <br>
34+
&nbsp;&nbsp;&nbsp;&nbsp;- BS Biomedical Engineering<br>
35+
&nbsp;&nbsp;&nbsp;&nbsp;- MS Biomedical Engineering<br>
36+
&nbsp;&nbsp;&nbsp;&nbsp;- MS Applied Artificial Intelligence<br><br>
37+
</p> <br>
38+
39+
<a href="index.html" class="terminal-link">Go back</a>
1940

20-
<a href="index.html" class="terminal-link">Go back</a>
21-
</p>
2241
</div>
2342
</div>
2443

‎contact.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>contact.txt</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="terminal">
11+
<div class="terminal-header">
12+
<span class="title">contact.txt</span>
13+
</div>
14+
<div class="terminal-body">
15+
<p class="command">Mac:~ User$ <span class="typing"></span></p>
16+
<p class="response contact-form" style="display: none;"></p>
17+
<!-- 📧 Feel free to reach out to me using the form below:<br><br> -->
18+
<!-- Contact Form -->
19+
<form action="https://formspree.io/f/xyzeayow" method="POST" class="response contact-form">
20+
<label for="name">Name:</label><br>
21+
<input type="text" id="name" name="name" placeholder="Your Name" required><br><br>
22+
23+
<label for="email">Email:</label><br>
24+
<input type="email" id="email" name="email" placeholder="Your Email" required><br><br>
25+
26+
<label for="message">Message:</label><br>
27+
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea><br><br>
28+
29+
<button type="submit">Send</button>
30+
</form>
31+
</p>
32+
<br>
33+
<a href="index.html" class="terminal-link">Go back</a>
34+
</div>
35+
</div>
36+
</body>
37+
38+
<script>
39+
document.addEventListener("DOMContentLoaded", function () {
40+
fetch("images/ai-den.json")
41+
.then(response => response.json())
42+
.then(data => {
43+
if (data.images && data.images.length > 0) {
44+
// Pick a random image from the JSON list
45+
const randomImage = data.images[Math.floor(Math.random() * data.images.length)];
46+
47+
// Apply the random image to the pseudo-element via CSS
48+
const style = document.createElement("style");
49+
style.innerHTML = `
50+
.terminal-body::after {
51+
background: url('${randomImage}') no-repeat center;
52+
background-size: contain;
53+
}
54+
`;
55+
document.head.appendChild(style);
56+
}
57+
})
58+
.catch(error => console.error("Error loading images:", error));
59+
60+
let commandText = "cat contact.txt"; // The typed command
61+
let typingElement = document.querySelector(".typing");
62+
let responseElement = document.querySelector(".contact-form");
63+
64+
let i = 0;
65+
66+
function typeCommand() {
67+
if (i < commandText.length) {
68+
typingElement.innerHTML = commandText.substring(0, i + 1) + '<span class="blinking-cursor">|</span>';
69+
i++;
70+
setTimeout(typeCommand, 100);
71+
} else {
72+
// Remove cursor after typing command
73+
typingElement.innerHTML = commandText;
74+
75+
// Instantly show the about text
76+
setTimeout(() => {
77+
responseElement.style.display = "block";
78+
}, 500);
79+
}
80+
}
81+
82+
typeCommand();
83+
});
84+
</script>
85+
</body>
86+
</html>

‎project1.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pojects</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="terminal">
11+
<div class="terminal-header">
12+
<span class="title">about.txt</span>
13+
</div>
14+
<div class="terminal-body">
15+
<p class="command">Mac:~ User$ <span class="typing"></span></p>
16+
<p class="response about-text" style="display: none;">
17+
<strong>Project: Lost Connections - Making Impacts Through Hidden Voices</strong><br>
18+
This project was created for the WAI Smithsonian Hackathon 2024 for Booz Allen Hamilton.<br><br>
19+
<em>Goal:</em> To illuminate the interconnectedness of women's achievements by creating a dynamic networking application, <strong>"Smithsonian: Lost Connections"</strong>, to map the profound impact of various contributions to society.<br><br>
20+
<em>Objective:</em> Allow users to explore individuals' contributions by visualizing the connections between artifacts through Smithsonian departments, collections, and artifact types.<br><br>
21+
<em>Data Sources:</em><br>
22+
- Smithsonian Institution Enterprise Data Access Network<br>
23+
- Smithsonian Institution Encoded Archival Description (EAD) XML Metadata<br>
24+
- Wikipedia Science Data<br><br>
25+
<em>My Role:</em> I focused on creating a web crawler that searched through Smithsonian web pages, stored this information in an index, and inserted it into our network map algorithm. This algorithm then generated a visual map of names, artifacts, curators, and Smithsonian departments.<br><br>
26+
27+
</p>
28+
<br>
29+
<a href="index.html" class="terminal-link">Go back</a>
30+
</div>
31+
</div>
32+
33+
<script>
34+
document.addEventListener("DOMContentLoaded", function () {
35+
fetch("images/ai-den.json")
36+
.then(response => response.json())
37+
.then(data => {
38+
if (data.images && data.images.length > 0) {
39+
// Pick a random image from the JSON list
40+
const randomImage = data.images[Math.floor(Math.random() * data.images.length)];
41+
42+
// Apply the random image to the pseudo-element via CSS
43+
const style = document.createElement("style");
44+
style.innerHTML = `
45+
.terminal-body::after {
46+
background: url('${randomImage}') no-repeat center;
47+
background-size: contain;
48+
}
49+
`;
50+
document.head.appendChild(style);
51+
}
52+
})
53+
.catch(error => console.error("Error loading images:", error));
54+
55+
let commandText = "cat smithsonian-hackathon-2024.md"; // The typed command
56+
let typingElement = document.querySelector(".typing");
57+
let aboutTextElement = document.querySelector(".about-text");
58+
59+
let i = 0;
60+
61+
function typeCommand() {
62+
if (i < commandText.length) {
63+
typingElement.innerHTML = commandText.substring(0, i + 1) + '<span class="blinking-cursor">|</span>';
64+
i++;
65+
setTimeout(typeCommand, 100);
66+
} else {
67+
// Remove cursor after typing command
68+
typingElement.innerHTML = commandText;
69+
70+
// Instantly show the about text
71+
setTimeout(() => {
72+
aboutTextElement.style.display = "block";
73+
}, 500);
74+
}
75+
}
76+
77+
typeCommand();
78+
});
79+
</script>
80+
</body>
81+
</html>

‎script.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ document.addEventListener("DOMContentLoaded", function () {
4141
/home/user/<br>
4242
├── <a href="about.html" class="terminal-link">about.txt</a><br>
4343
├── projects/<br>
44-
│ ├── <a href="#projects" class="terminal-link">project1.md</a><br>
44+
│ ├── <a href="project1.html" class="terminal-link">smithsonian-hackathon-2024.md</a><br>
4545
│ ├── <a href="#projects" class="terminal-link">project2.md</a><br>
4646
│ ├── <a href="#projects" class="terminal-link">project3.md</a><br>
47-
└── <a href="#contact" class="terminal-link">contact.txt</a>
47+
└── <a href="contact.html" class="terminal-link">contact.txt</a>
4848
`;
4949

5050
// Move cursor to a new line after displaying file structure

‎style.css‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,13 @@ body {
3333
position: relative;
3434
padding: 40px;
3535
height: 300px;
36+
max-height: 400px;
3637
width: 100%;
3738
max-width: 750px;
38-
overflow: hidden;
39-
background: none;
39+
/*overflow: hidden;
40+
background: none;*/
41+
overflow-y: scroll;
42+
z-index: 1;
4043
}
4144

4245
/* ASCII Art */
@@ -59,12 +62,14 @@ body {
5962
content: "";
6063
position: absolute;
6164
bottom: 40px;
62-
right: 50px;
65+
right: 20px;
6366
width: 250px;
6467
height: 250px;
6568
background-size: contain;
6669
opacity: 0.4;
67-
pointer-events: none;
70+
pointer-events: none;
71+
z-index: -1;
72+
background: none;
6873
}
6974

7075
/* Terminal Text */
@@ -89,6 +94,88 @@ body {
8994
color: #555;
9095
}
9196

97+
.response.about-text {
98+
max-width: calc(100% - 200px); /* Ensure text stays within the terminal body, leaving space for the character */
99+
max-height: calc(100% - 75px); /* Leave space at the bottom for the character */
100+
overflow-wrap: break-word; /* Ensure long words break properly */
101+
overflow-y: scroll; /* Add scrolling if the text exceeds the defined height */
102+
margin: 0; /* Remove any extra margins */
103+
padding-right: 20px; /* Add some padding for better readability */
104+
}
105+
106+
.response.about-text::-webkit-scrollbar {
107+
width: 8px; /* Width of the scrollbar */
108+
}
109+
110+
.response.about-text::-webkit-scrollbar-thumb {
111+
background-color: #d49aa3; /* Color of the scrollbar thumb */
112+
border-radius: 4px; /* Rounded corners for the scrollbar thumb */
113+
}
114+
115+
.response.about-text::-webkit-scrollbar-track {
116+
background-color: #f8e8e8; /* Color of the scrollbar track */
117+
}
118+
119+
/* For Firefox */
120+
.response.about-text {
121+
scrollbar-width: thin; /* Makes the scrollbar thinner */
122+
scrollbar-color: #d49aa3 #f8e8e8; /* Thumb color and track color */
123+
}
124+
125+
.response.contact-form {
126+
margin-top: 20px;
127+
max-width: calc(100% - 200px); /* Ensure text stays within the terminal body, leaving space for the character */
128+
max-height: calc(100% - 75px); /* Leave space at the bottom for the character */
129+
overflow-wrap: break-word; /* Ensure long words break properly */
130+
overflow-y: scroll; /* Add scrolling if the text exceeds the defined height */
131+
margin: 0; /* Remove any extra margins */
132+
padding-right: 20px; /* Add some padding for better readability */
133+
}
134+
135+
.response.contact-form input, .contact-form textarea {
136+
width: calc(100% - 200px);
137+
padding: 10px;
138+
margin-bottom: 10px;
139+
border: 1px solid #ccc;
140+
border-radius: 5px;
141+
font-family: "Courier New", monospace;
142+
background-color: #f8e8e8;
143+
color: #5a3a3a;
144+
}
145+
146+
.response.contact-form button {
147+
background-color: #d49aa3;
148+
color: white;
149+
padding: 10px 20px;
150+
border: none;
151+
border-radius: 5px;
152+
cursor: pointer;
153+
font-family: "Courier New", monospace;
154+
}
155+
156+
.response.contact-form button:hover {
157+
background-color: #c0788f;
158+
}
159+
160+
.response.contact-form::-webkit-scrollbar {
161+
width: 8px; /* Width of the scrollbar */
162+
}
163+
164+
.response.contact-form::-webkit-scrollbar-thumb {
165+
background-color: #d49aa3; /* Color of the scrollbar thumb */
166+
border-radius: 4px; /* Rounded corners for the scrollbar thumb */
167+
}
168+
169+
.response.contact-form::-webkit-scrollbar-track {
170+
background-color: #f8e8e8; /* Color of the scrollbar track */
171+
}
172+
173+
/* For Firefox */
174+
.response.contact-form {
175+
scrollbar-width: thin; /* Makes the scrollbar thinner */
176+
scrollbar-color: #d49aa3 #f8e8e8; /* Thumb color and track color */
177+
}
178+
92179
/* Typing animation */
93180
@keyframes typing {
94181
from {

0 commit comments

Comments
 (0)