-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
188 lines (154 loc) · 11.8 KB
/
main.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Natalia Kusmirek</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="logo.png">
</head>
<body>
<nav id="navbar-example2" class="navbar sticky-top navbar-expand-lg .bg-transparent px-3 mb-3 "id="scrollspyHeading1">
<a class="navbar-brand" href="#"></a>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2" style="color:white; font-weight:bold;margin-top:10px;">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3" style="color:white; font-weight:bold;margin-top:10px;">Tutoring</a>
</li>
<li class="nav-item">
<img src="logo.png"width="78" height="74" >
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4" style="color:white; font-weight:bold;margin-top:10px;">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color:white; font-weight:bold;margin-top:10px;" onclick="window.open('https://drive.google.com/file/d/1I-I5ZW74Gj24DcNqsy46aV39p1I6rJ9p/view?usp=sharing', '_blank'); return false;">Résumé</a>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example .bg-transparent p-3 rounded-2" tabindex="0">
<div class = "home_section">
<img src="icons.png" class="iconstop position-absolute top-50 start-50 translate-middle">
<h1 class = "name">Hi, I'm Natalia Kusmirek.</h1>
<h3 class = "dev"><i>Full Stack Developer, UI Designer, and Private Tutor.</i></h3>
<h5 class="mindenter position-absolute top-50 start-50 translate-middle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg></h5>
</div>
<div class = "project_section">
<img src ="blueorb.png" class="orb1">
<h2 id="scrollspyHeading2" ><i>Projects</i></h2>
<img src="projecticons.png" class="projecticons position-absolute top-50 start-50 translate-middle">
<!-- carousel -->
<div id="carousel" class="carousel carousel-dark slide " data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000">
<img src="projectabout.png" class=" w-100 " alt="...">
<div class="carousel-caption d-none d-md-block">
<p>JANUARY 2021 - JULY 2021</p>
<h5 class = "project_label">Harvard University: CS50x Introduction to Computer Science</h5>
<p class = "p_desc">"Topics include abstraction, algorithms, data structures, encapsulation, security, software engineering, and web development. Includes C, Python, SQL, and JavaScript plus CSS/HTML."</p>
<button type="button" class="btn btn-outline-dark" onclick=" window.open('https://github.com/nataliakusmirek/CS50x---Portfolio', '_blank'); return false;">My Problem Sets + Labs</button>
</div>
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="projectabout.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>JUNE 2021 - AUGUST 2021</p>
<h5 class = "project_label">Time Reporting System: Tech For Good Inc.</h5>
<p class = "p_desc">Learned HTML, CSS, Firebase, and React.js while
designing and programming front-end for timer, manual entry, and history feature of the U.I.. Worked with students in graduate school/ages 18 to 24 to complete project.
</p>
<button type="button" class="btn btn-outline-dark" onclick=" window.open('https://github.com/TechForGoodInc/Time-Reporting-System', '_blank'); return false;">Github Repository</button>
</div>
</div>
<div class="carousel-item">
<img src="projectabout.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>SEPTEMBER 2022 - JUNE 2023</p>
<h5 class = "project_label">Java Algorithms</h5>
<p> Java Projects created while taking AP Computer Science A, practicing syntax, algorithms, and abstraction.</p>
<button type="button" class="btn btn-outline-dark" onclick="window.open('https://github.com/nataliakusmirek/Java-Projects', '_blank'); return false;">Github Repository</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- cards -->
<div class = "project_cards">
<div class="card text-btn btn-outline-dark mb-3 border-info" id="p2" style="max-width: 18rem;display: flex; ">
<div class="card-header" style="font-size: 15px;"><i>Python v3, Discord Lib, YouTube DL </i></div>
<div class="card-body">
<h5 class="card-title"style="font-size: 17px;">B.O.B.A. Music Bot </h5>
<p class="card-text"style="font-size: 14px;">Hosted through Replit and UptimeRobot at the moment, to be used 24/7 in Discord Voice Chats to play music requested with YouTube links.<br></br>
</div>
<button type="button" class="btn" id="btn_link" style="position: absolute;" onclick=" window.open('https://github.com/nataliakusmirek/B.O.B.A.', '_blank'); return false;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"/>
</svg></button>
</p>
</div>
</div>
<div class="card text-btn btn-outline-dark mb-3 border-info" id="p3"style="max-width: 18rem;display: flex;">
<div class="card-header" style="font-size: 15px;"><i>Python v3, Ren'Py Library</i></div>
<div class="card-body">
<h5 class="card-title" style="font-size: 17px;">REMORSE : 1D Indie Game </h5>
<p class="card-text" style="font-size: 14px;">Help characters who have been altered by the effects of climate change and learn of the "true evil" the leaders hide in space. Backgrounds, sprites, game idea, and storyline are all original! <br></br>
</div>
</p>
<button type="button" class="btn" style="position: absolute;" id="btn_link" onclick=" window.open('https://github.com/nataliakusmirek/REMORSE', '_blank'); return false;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"/>
</svg></button>
</div>
</div>
</div>
</div>
<div class = "tutor_section">
<img src="purpleorb.png" class="orb2">
<h2 id="scrollspyHeading3"><i>Private Tutoring</i></h2>
<img src="tutorabout.png" class="tutorinfo">
<img src="tutormodel.png" class = "tutormodel">
<h3 id="projectex"><p id="number">71%</p><i>of new tech jobs are in computing.</i></h3>
<h3 id="learntex"><p id="number">90%</p><i>of parents want their child to pursue coding.</i></h3>
<img src="3dstudent.png" class="dstudent">
</div>
<div class = "contact_section" link="white" alink="white" vlink="white">
<h2 id="scrollspyHeading4">let's get in <i>touch</i>.</h2>
<img src="contact.png" class="contact position-absolute top-50 start-50 translate-middle">
<button type="button" class="btn btn-dark btn-lg position-absolute top-50 start-50 translate-middle" id="email"><a href = "mailto: abc@example.com" style="text-decoration: none; color:white;">contact me!</a></button>
<footer id="footer" class="position-absolute top-50 start-50 translate-middle">Created and Designed by <i>Natalia Kusmirek</i>.</footer>
</div>
</div>
<!--fix alignment, email submit, nav bar sticky, animations, alignment on different screen sizes-->
<script type="text/javascript">
window.addEventListener("scroll", function(){
var nav = document.querySelector("nav")
nav.classList.toggle("sticky", window.scrollY = 0);
})
</script>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
<script>var Alert = ReactBootstrap.Alert;</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>