-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (218 loc) · 11.5 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="typewriter.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="script.js"></script>
<title>Vincent Carlino | Web Engineer</title>
</head>
<body id="body">
<div id="toggle" onclick="openNav(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="overlay">
<ul id="overlay-items" >
<li><a class='home' href="#">HOME</a></li>
<li><a class='about' href="#">ABOUT ME</a></li>
<li><a class='project' href="#">PROJECTS</a></li>
<li><a class='exp' href="#">EXPERIENCE</a></li>
<li><a class='art' href="#">ARTWORK</a></li>
<li>
<a target=_blank href="https://github.com/vincentcarlino">GITHUB</a>
</li>
<li>
<a target=_blank href="Resume.pdf">RESUME</a>
</li>
</ul>
</div>
<div id="wrapper">
<div class="row">
<div class="nav">
<ul id="nav-items">
<li><a class='home' href="#">HOME</a></li>
<li><a class='about' href="#">ABOUT ME</a></li>
<li><a class='project' href="#">PROJECTS</a></li>
<li><a class='exp' href="#">EXPERIENCE</a></li>
<li><a class='art' href="#">ARTWORK</a></li>
<li class="small">
<a href="https://github.com/vincentcarlino"><i class="fa fa-github"></i></a>
</li>
<li class="small">
<a target=_blank href="Resume.pdf"><i class="fa fa-file-o"></i></a>
</li>
</ul>
</div>
</div>
<div class="row" id="name">
<div class="card">
<!-- <h1 class="app">Vincent Carlino</h1> -->
<h1 id="app"></h1>
<h2 style= "font-style: italic;">Web Engineer
</h2>
</div>
</div>
<div class="row">
<div id="a" class="card big title">
<h3>About Me</h3>
<p>Hi! My name is Vincent Carlino. I'm a third-year student at Northeastern University majoring in Computer Science and minoring in Music Recording. I have skills and experience with programming in Java, HTML, CSS, JavaScript, C++, and JQuery, and I recently began to learn SASS. I love computer science because I get a chance to solve problems logically and systematically.</p>
<p>I enjoy web development/general front-end development because I like to be able to optimize the experience for a consumer. I feel that the key to gaining and maintaining customers for a service lies in a high-quality user interface.</p>
<div class="flex-container" style="flex-wrap: wrap;">
<p class="lang">HTML/CSS</p>
<p class="lang">JAVA</p>
<p class="lang">JAVASCRIPT</p>
<p class="lang">JQUERY</p>
<p class="lang">C++</p></div>
</div>
<div class="card"><div><img src="images/Me.PNG"></div></div>
</div>
<div class="row">
<div id="b" class="card title"><h3>Personal Work</h3></div>
</div>
<div class="row">
<div class="card rowdir proj">
<div class="flex-container" style="flex-direction: column; flex: .5;">
<h2>Startpage</h2>
<p>A startpage is a custom webpage that lists your most frequently used sites and services. It's common practice to simply run them locally as your homepage for your web browser. I constructed my own startpage with functional dropdown menus and a base color switcher using native JavaScript in early 2017. This project acted as my introduction to web-design and HTML/CSS and JavaScript. Since <a href="startpage/startpage.html" style="margin: 0; background-color: yellow;">then</a>, I've continued to improve my startpage so it now includes more polished visuals.</p>
<div class="flex-container">
<p class="lang">HTML/CSS</p>
<p class="lang">JAVASCRIPT</p></div></div>
<a target=_blank href="webprojects/startpage.html"><img src="images/startpage.PNG" class="big" ></a>
</div>
</div>
<div class="row">
<div class="card rowdir proj">
<div class="flex-container" style="flex-direction: column; flex: .5;">
<h2>RightType</h2>
<p>I've recently been getting more and more into typography. As a practice project and design exercise, I developed RightType: a webpage to allow users to test different combinations of typefaces and colors. All typefaces found on this site are free and usable through Google Fonts or other online typography resources.</p>
<div class="flex-container">
<p class="lang">HTML/CSS</p>
<p class="lang">JAVASCRIPT</p></div></div>
<a target=_blank href="TypeBrew.html"><img src="images/RTSS.PNG" class="big"></a>
</div>
</div>
<div class="row">
<div class="card rowdir proj">
<div class="flex-container" style="flex-direction: column; flex: .5;">
<h2>Responsive Design for Beginners</h2>
<p>Responsive design is the concept that websites should adjust and adapt based on the size of the device they are displayed on. In the mid-Summer of 2017, I wanted to make an instructional website to teach this idea. I wrote a simple website that explains the basics of responsive web design in the style of one of my go-to Git references. </p>
<div class="flex-container">
<p class="lang">HTML/CSS</p>
<p class="lang">JQUERY</p></div></div>
<a target=_blank href="webprojects/rd.html"><img src="images/dtrd2.PNG" class="big"></a>
</div>
</div>
<div class="row">
<div class="card rowdir proj">
<div class="flex-container" style="flex-direction: column; flex: 2;">
<h2>Music Editor</h2>
<p>In my Object-Oriented Programming class, a classmate and I were responsible for constructing and implementing a music editor in Java as our final project. The editor is able to read from text files to contruct songs (using the builder pattern) and has a variety of standard music features such as scrub control. The design also includes a playable piano that can add notes. This project was used to test our knowledge and understanding of a variety of OOP design patterns. It utilizes the Java Swing graphics library for the user interface.</p>
<div class="flex-container">
<p class="lang">JAVA</p></div></div>
<a target=_blank href="https://github.com/VincentCarlino/Music-Editor"><img src="images/gui-result.PNG" class="big"></a>
</div>
</div>
<div class="row">
<div class="card rowdir proj">
<div class="flex-container" style="flex-direction: column; flex: 2;">
<h2>Portfolio Site V1</h2>
<p>At the start of 2017, I took an introductory all-day workshop on the basics of web design through Northeastern University's Women in Tech Club. The workshop explained the basics of HTML and CSS syntax as well the basics of using Bootstrap. During the few weeks after the course, I had my first website up and running. It relied mostly on my small knowledge of Bootstrap and was very rough around the edges. Since then, I have taken off the useful training wheels of Bootstrap and moved on to the beautiful world of Flexbox.</p>
<div class="flex-container">
<p class="lang">HTML/CSS</p>
<p class="lang">BOOTSTRAP</p></div></div>
<a target=_blank href="webprojects/original.html"><img src="images/originalsite.PNG" class="big"></a>
</div>
</div>
<div class="row">
<div id="c" class="card title"><h3>Work Experience</h3></div>
</div>
<div class="row">
<div class="card">
<h2>iCorps Technologies</h2>
<h4>Network Operation Center Co-op</h4>
<p>July 2017 - Present</p><br><p>At iCorps Technologies, I am responsible for supplying remote and on-site technical support and technical consulting for over 500 client companies to help them meet the needs for their business. The position also requires me to manage various data backup and cloud migration services for these same clients.</p>
</div>
<div class="card">
<h2>Snell Library</h2>
<h4>Inter-Library Loan Assistant</h4>
<p>October 2015 - Present</p><br><p>At Snell Library, I am responsible for shipping our books to other libraries and schools so that their users can get resources not regularly accessible to them. Additionally, I'm responsible for navigating a database of electronic articles to find resources that need to be sent via the RapidILL sharing system.</p>
</div>
</div>
<div class="row">
<div class="card"><h2>Liberty Moving and Storage Co.</h2>
<h4>Operations Assistant</h4>
<p>June 2016 - September 2016</p><br><p>At Liberty Moving, I directed various work crews to assist the process of refurbishing the dormitories of Stony Brook University. The work varied from large moves (filling a building with furniture) to small maintenance tasks (replacing a broken refrigerator in an occupied residence). I also took part in teaching new employees proper lifting technique to ensure saftey in the workplace.</p>
</div>
<div class="card">
<h2>Saint Thomas More Church</h2>
<h4>Receptionist</h4>
<p>July 2014 - September 2015</p><br><p>At Saint Thomas More, I was responsible for collecting and processing the weekly donations that came to the church. I utilized church database software to keep track of parish income. In addition, I was responsible for responding to incoming phone calls.</p>
</div>
</div>
<div class="row">
<div id="d" class="card"><h3>Art | Design</h3>
</div>
</div>
<div class="row arts">
<div class="card big "><a target=_blank href="images/wc.jpg"><img src="images/wc.jpg"></a></div>
<div class="card"><a target=_blank href="images/goriraz.jpg"><img src="images/goriraz.jpg"></a></div>
</div>
<div class="row arts">
<div class="card"><a target=_blank href="images/Island.PNG"><img src="images/Island.PNG"></a></div>
<div class="card big"><a target=_blank href="images/Port.jpg"><img src="images/Port.jpg"></a></div>
</div>
<div class="row arts">
<div class="card big"><a target=_blank href="images/Rose.PNG"><img src="images/Rose.PNG"></a></div>
<div class="card"><a target=_blank href="images/Map.PNG"><img src="images/Map.PNG"></a></div>
</div>
<div class="row arts">
<div class="card"><a target=_blank href="images/SunBW.PNG"><img src="images/SunBW.PNG"></a></div>
<div class="card big"><a target=_blank href="images/Mourao.PNG"><img src="images/Mourao.PNG"></a></div>
</div>
</div>
<script type="text/javascript">
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: false
});
typewriter.typeString('Vincen')
.changeTypingSpeed(150)
.pauseFor(250)
.typeString('t Calri')
.deleteChars(5)
.changeTypingSpeed(50)
.typeString('Carlio')
.changeDeleteSpeed(1000)
.pauseFor(500)
.deleteChars(2)
.pauseFor(250)
.typeString('i')
.pauseFor(250)
.typeString('n')
.pauseFor(400)
.typeString('o')
.start();
const nav = document.querySelector('.nav');
const card = document.querySelector('.card');
const topNav = nav.offsetTop;
const topHeight = card.offsetTop
function stickyNav(e) {
if(window.scrollY >= topNav) {
console.log(nav.clientHeight)
const off = nav.offsetHeight + nav.clientHeight
document.body.style.paddingTop = topHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', stickyNav);
</script>
</body>
</html>