-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (214 loc) · 9.81 KB
/
index.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
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>>Marissa Salcido</title>
<meta name="description" content="Marissa Salcido" />
<meta name="keywords" content="website" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/animations.css" />
<link rel="stylesheet" type="text/css" href="css/homepage.css" />
<link rel="stylesheet" type="text/css" href="css/intro_animation.css" />
<link rel="stylesheet" type="text/css" href="css/aboutpage.css"/>
<link rel="stylesheet" type='text/css' href='css/projects.css'/>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="lNavigation">
<button id="trans-right" class="arrow-button">></button>
</div>
<div class='rNavigation'>
<button id="trans-left" class="arrow-button"><</button>
</div>
<div id="main" class="perspective">
<div class="page page-1">
<div class='top-bar' style='text-align: center;'>
<span class='top-nav'>ABOUT ME</span>
<span class='top-nav-active'>CONTACT</span>
<span class='top-nav'>PROJECTS</span>
</div>
<div class="rotatingCircleContainer"><span class='first-name'>Marissa </span><span class='last-name'> Salcido</span>
<span class="circle circle-container">
<span class="circle circle-dark-dashed"></span>
<span class='circle small-dark-dashed'></span>
</span>
</div>
<div class='line'></div>
<div class='socials' style='text-align: center;'>
<a href = "mailto:salcidom@gmail.com" class='email'></a>
<a href = "https://m.me/MarissaSalcido" target='_blank' class = 'messenger'></a>
</div>
</div>
<div class="page page-2">
<div class='top-bar' style='text-align: center;'>
<span class='top-nav'>ABOUT ME</span>
<span class='top-nav'>CONTACT</span>
<span class='top-nav-active'>PROJECTS</span>
</div>
<section>
<div class='grid'>
<div class='github-link'>
<a href='https://github.com/MarissaSalcido/Othello' target='_blank'>
<img src='media/othello.png' alt='othello' class='othello_img'>
</a>
</div>
<div class='github-link'>
<a href='https://github.com/MarissaSalcido/Information-Retrieval-Project' target='_blank'>
<img src='media/engine.png' alt='search engine'>
</a>
</div>
<div class='github-link'>
<a href='https://marissasalcido.herokuapp.com/index.html' target='_blank'>
<img src='media/website.png' alt='website'>
</a>
</div>
</div>
<div class='bottom-arrow'>
<img src='media/doublearrow.png' alt='arrow' class='arrow'>
</div>
</section>
<section class='project-descr-container'>
<div class='text'>
Othello was the first game with a graphical interface that I developed for a programming course.
It is a two-person strategy game where the objective is to fill the entire board with your
pieces. This project was a challenge as it was my first game project, however I enjoyed the challenge
as it pushed my programming abilities.<br><br>
<span class='skills'>python</span>
<span class='skills'>tkinter</span>
<span class='skills'>game logic</span><br><br>
<span class='skills'>game design</span>
</div>
<div class='text'>
This group project is a simple search engine that searched through the university's webpages
under the department of Information & Computer Science. I focused on the backend and developed
the algorithms to weight, rank, and retrieve web pages based on the parsed search queries. There were challenges
we had to overcome such as scheduling conflicts, although we overcame them and had such
a fun experience working in a group.<br><br>
<span class='skills'>python</span>
<span class='skills'>sql</span>
<span class='skills'>VS Code</span>
<span class='skills'>SEO</span><br><br>
<span class='skills'>information retrieval</span>
</div>
<div class='text'>
My personal website is the most current project I am working on. My vision for this website is to have it be a
place where I can showcase my skills in web development and experiment with new design/animation ideas. I began to
study HTML/CSS and Javascript on my own on July 2019 and had my first working website by the end of August 2019.<br><br>
<span class='skills'>html</span>
<span class='skills'>css</span>
<span class='skills'>javascript</span>
<span class='skills'>jquery</span><br><br>
<span class='skills'>VS Code</span>
<span class='skills'>Invision Studio</span>
<span class='skills'>web design</span>
</div>
</section>
</div>
<div class="page page-3">
<section class='scroll-pg-0'>
<div class='top-bar' style='text-align: center;'>
<span class='top-nav-active'>ABOUT ME</span>
<span class='top-nav'>CONTACT</span>
<span class='top-nav'>PROJECTS</span>
</div>
<p class='intro' style='text-align: center;'>Marissa Salcido. Student programmer. Driven worker. Hiking enthusiast.</p>
</section>
<section class='scroll-pg-1'>
<div class='divider divider-1'></div>
<h1 class = 'about-sections'>Education</h1>
<div class = 'profile-picture-container'><img src='media/profile.jpeg' alt='Marissa Profile Picture' class='profile-picture'></div>
<div class = 'summary-container'><h1 class='profile-summary'>Education | University of California, Irvine<br><br>Graduation | June 2020<br><br>
Degree | B.S Computer Science<br><br>GPA | 3.4</h1></div>
</section>
<section class='scroll-pg-2'>
<div class = 'coursework-container'>
<h1 class='coursework'>Selected Coursework<br>
<div class = 'list'>
<ul>Intermediate Programming</ul>
<ul>Introductory Computer Organization</ul>
<ul>Principals in System Design</ul>
<ul>Data Structure Implementation & Analysis</ul>
<ul>Computer Networks</ul>
<ul>Information Retrieval</ul>
<ul>Principles of Operating Systems</ul>
<ul>Requirements Analysis & Engineering</ul>
</div>
</h1>
</div>
<div class='skills-container'>
<h1 class='skills'>
Skills<br>
<div class = 'list'>
<ul>Python</ul>
<ul>C/C++</ul>
<ul>SQL/PostgreSQL</ul>
<ul>Git</ul>
<ul>Eclipse</ul>
<ul>Visual Studio Code</ul>
</div>
</h1>
</div>
<div class='study-abroad-container'>
<img src='media/uoe.png' alt='University of Edinburgh' class='study-abroad-picture'>
</div>
<div class='study-abroad-descr-container'>
<span class='skills'>University of Edinburgh | 2018<br>Study Abroad<br></span>
<span class='skills study-abroad-descr'>During my semester abroad in Scotland, I studied Applied Machine Learning<br> and Database Systems.
I gained valuable knowledge about machine learning concepts<br> and SQL search queries, however the knowledge I gained abroad reaches beyond.<br>
My global perspective allows me to be more adaptable with multicultural interactions<br> as well as appreciative of different cultures.
</span>
</div>
</section>
<section class='scroll-pg-3'>
<h1 class = 'about-sections'>Experience + Involvement</h1>
<div class= 'divider divider-2'></div>
<div class='experience-container'>
<img src='media/ucialumni.png' alt='UCI Alumni' class='ucialumni-picture'>
</div>
<div class='involvement-container'>
<img src='media/csa.png' alt='UCI CSA' class='csa-picture'>
</div>
<div class='experience-descr-container'>
<h1 class = 'experience-title'>UCI Alumni Association | 2017<br>Marketing Director Assistant</h1>
<div class = 'experience-descr'>I designed and created event pages for the UCI Alumni<br> website by using iModules,
a page builder and alumni <br>management software. I also monitored and occasionally<br>fixed minor html/css
inconsistencies across event pages.
</div>
</div>
<div class='involvement-descr-container'>
<h1 class = 'involvement-title'>Computer Science Association (CSA) Officer | 2018</h1>
<div class = 'involvement-descr'>CSA was a club where underclassmen can receive academic <br>advice,
meet with other peers, and solve fun programming <br>problems. As an officer, I created coding challenges that
were<br>held during club meetings. The club was new; however<br>meetings consistently had a turnout of about 10 people
<br>within the first few meetings.
</div>
</div>
</section>
<section class='scroll-pg-4'>
<h1 class='about-sections'>Interests + Hobbies</h1>
<div class = 'isle-of-skye-container'>
<img src='media/isleofskye.jpg' alt='Isle of Skye' class='isle-of-skye-img'>
</div>
<div class = 'pixelart-container'>
<img src ='media/pixelart.png' alt='Pixel art' class='pixel-img'>
</div>
<div class='interests-descr'>
When I am not coding or studying, I am either hiking or drawing! My favorite hike <br>is Old Man of Storr in Scotland.
I love the analytical and logical nature of my studies, <br>however, I also enjoy exploring my creative side through drawing. I've
<br>recently been looking into digital art, specifically pixel art!
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js'></script>
<script>
AOS.init({
duration: 1200,
})
</script>
<script src='js/text_animation.js'></script>
<script src="js/pagetransitions.js"></script>
<script src='js/project_link_animation.js'></script>
</body>
</html>