-
Notifications
You must be signed in to change notification settings - Fork 0
/
porto.html
201 lines (192 loc) · 8.89 KB
/
porto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
<head>
<title> Laurencia Anzela </title>
<link rel="stylesheet" href="portostyle.css">
<script src="https://kit.fontawesome.com/b9c1d363c2.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<ul id="sidemenu">
<li> <a href="#header"> Home</a></li>
<li> <a href="#about"> About</a></li>
<li> <a href="#fields"> Fields</a></li>
<li> <a href="#portfolio"> My Work</a></li>
<li> <a href="#contact"> Contact</a></li>
<i class="fa-solid fa-circle-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header_text">
<p> Software Engineer</p>
<h1> Hi, I'm <span> Laurencia Anzela </span> <br> From Texas, US</h1>
</div>
</div>
</div>
<!-- about -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="user.jpeg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p> An undergraduate Computer Science student who likes challenges, able to adapt quickly, and is willing to learn from everyone. </p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('education')">Education & Certification</p>
<p class="tab-links" onclick="opentab('experience')">Experience</p>
</div>
<!-- Skills Content -->
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Programming Languages</span><br>Java,C,C++</li>
<li><span>Web Development</span><br>HTML,CSS,JavaScript</li>
<li><span>Soft Skills</span><br>Time Management, Adaptability, Strong Work Ethic</li>
</ul>
</div>
<!-- Education Content -->
<div class="tab-contents" id="education">
<ul>
<li><span>High School</span><br>SMAK 6 Penabur Jakarta, Indonesia</li>
<li><span>Associates of Science</span><br>Collin College Texas, USA</li>
<li><span>Certificate in Computer Science & Information Technology</span><br>Collin College Texas, USA</li>
<li><span>Bachelor in Computer Science</span><br>University of Texas Arlington, Texas, USA</li>
</ul>
</div>
<!-- activities Content -->
<div class="tab-contents" id="experience">
<ul>
<li><span>Little Teacher</span><br>Volunteering in guiding elementary and middle school students through engaging educational activities </li>
<li><span>Sunday School Teacher</span><br>Volunteering in leading kindergarten and elementary school students in church activities.</li>
<li><span>Event Coordinator</span><br>Planning & managing various events and activities in High School.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- fields -->
<div id="fields">
<div class="container">
<h1 class="sub-title">My Fields</h1>
<div class="fields-list">
<div>
<i class="fa-solid fa-crop"></i>
<h2>Web Development</h2>
<p>Able to work with technologies like HTML, CSS, and JavaScript to design and implement the visual and interactive elements that users interact with directly.</p>
</div>
<div>
<i class="fa-solid fa-code"></i>
<h2>Software Engineering</h2>
<p>Able to design, develop, test, and maintain software applications, systems, and solutions</p>
</div>
<div>
<i class="fa-brands fa-app-store"></i>
<h2>Product Manager</h2>
<p>Able to define product goals, create and prioritize a roadmap, make decisions on features and enhancements, and oversee the product's development and release</p>
</div>
</div>
</div>
</div>
<!-- portfolio -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="ToDoList.jpg">
<div class="layer">
<h3> To-Do List </h3>
<p> A simple data persistent web-based To-Do List </p>
<a href="https://github.com/lanzela/To-Do-List"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="qr.jpg">
<div class="layer">
<h3> QR Code Generator </h3>
<p> A simple QR code generator that uses the GoQR.me API to generate QR codes </p>
<a href="https://github.com/lanzela/QR-Code-Generator"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<img src="QuoteGenerator.jpg">
<div class="layer">
<h3> Quote Generator </h3>
<p> A web application that generates random quotes and provides various functionalities to interact with them. </p>
<a href="https://github.com/lanzela/Quote-Generator"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
</div>
</div>
</div>
<!-- contact -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-envelope"></i> [email protected]</p>
<p><i class="fa-solid fa-square-phone"></i> (469)288-6772</p>
<div class="social-icons">
<a href="https://instagram.com/laurenciaanzela?utm_source=qr"> <i class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/laurenciaanzela"> <i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.facebook.com/laurencia.anzela.5?mibextid=LQQJ4d"> <i class="fa-brands fa-facebook"></i></a>
</div>
<a href="resume.pdf" download class="btn btn2">Download Resume</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="text" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows ="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links")
var tabcontents = document.getElementsByClassName("tab-contents")
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link")
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab")
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
sidemenu.style.right = "0";
}
function closemenu(){
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbz-AwcsR22M-siH38WbfdCHZ5ipXt5xSMIXKewPfcFctmxguWAYeF1PBr3mI-87uIWP-g/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML = "Message sent succesfully!"
setTimeout(function(){
msg.innerHTML = ""
}, 5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>