-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (157 loc) · 9.06 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IR: Web Developer</title>
<link rel="stylesheet" href="css/index-1.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='description' content='Freelance Front End Developer.'/>
<meta name='keywords' content='web developer,web development,website,programming,javascript,react,html,html5,css,sass' />
<meta name='author' content='Ivan Raffucci' />
</head>
<body>
<!-- ======================== Header =========================== -->
<header>
<div id='header-background-1' class="header-background"></div>
<div id='header-background-2' class="header-background"></div>
<img onclick='Open.landing()' id='header-logo' src="./images/Logo.png" alt="">
<div id='header-links-container'>
<div class='header-text header-link' onclick='Open.projects()'>Work</div>
<div class='header-text header-link' onclick='Open.skills()'>Skills</div>
<div class='header-text header-link' onclick='Open.contact()'>Contact</div>
</div>
</header>
<!-- ======================== Landing =========================== -->
<main>
<section id="landing">
<img class='landing-png' id='react-png' src="./images/react.png" alt="">
<img class='landing-png' id='node-png' src="./images/node.png" alt="">
<img class='landing-png' id='js-png' src="./images/js.png" alt="">
<img class='landing-png' id='html-sass-png' src="./images/html-edit.png" alt="">
<div class="flex-box-container-column">
<div id="landing-center-text">
<span class=''>
FRONT
</span>
<div class="">
END
</div>
<div class="">
DEVELOPER
</div>
<div id="landing-accent-text">
Hello, I'm Ivan Raffucci
<div class="">Welcome to my portfolio</div>
</div>
</div>
<div id='portrait-wrapper' class="wrapper">
<img id='portrait' src="./images/Portrait_BW-edit.PNG" alt="">
</div>
</div>
</section>
<!-- ======================== Projects =========================== -->
<section id='projects'>
<div id='projects-title' class="">
My Work
</div>
<div class="project-container project-container-left">
<div id='kmp-image' class="project-image"></div>
<div class="project-info">
<div class="project-title">Keep Me Posted</div>
<div class="project-skills"><span class='black bold'>Skills: < </span> React <span class='black'>-</span> Node.js <span class='black'> /> </span></div>
<div onclick="openkmp()" class="project-link">Visit Site</div>
<div onclick="openkmpsource()" class="project-link">View Source</div>
Keep Me Posted is a project that I have been working on with two other programmers to provide an accessible application for tracking waitlisted classes. As the web developer for this project, I created a Node.js server with express and mongoose for routing and database management. The front of the site is then made with react and bundled with webpack.
</div>
</div>
<div class="divider"></div>
<div class="project-container project-container-right">
<div class="project-info">
<div class="project-title">Carla Kunkel: Business Site</div>
<div class="project-skills"><span class='black bold'>Skills: < </span> Html <span class='black'>-</span> Css <span class='black'>-</span> Javascript <span class='black'> /> </span></div>
<div onclick='openCarla()' class="project-link">Visit Site</div>
This is a website that I have created for an interior designer, Carla Kunkel. I worked with Carla to create the design, layout, and content of the website to bring her business on to the web.
</div>
<div id='carla-image' class="project-image"></div>
</div>
<div class="divider"></div>
<div class="project-container">
<div id="groups-container">
<div id='groups-title' class="project-title">Groups I've Worked For</div>
<div id='project-logo-container'>
<img src="./images/MainElectric.jpg" onclick='openME()' alt="" class='project-logo'>
<img src="./images/USMC.jpg" onclick='openMarines()' alt="" class='project-logo'>
<img src="./images/md5_logo.png" onclick='openMD5()' alt="" class='project-logo'>
</div>
</div>
</div>
<div class="divider"></div>
<!-- <div class="project-container project-container-left">
<div id='s7-image' class="project-image"></div>
<div class="project-info">
<div class="project-title">Scale 7: Service Platform</div>
<div class="project-skills"><span class='black bold'>Skills: < </span> React <span class='black'>-</span> Node.js <span class='black'>-</span> Sass <span class='black'>-</span> Typescript <span class='black'> /> </span></div>
<div class="project-link project-link-inactive">Project In Progress</div>
Scale Seven is a startup founded to create a service platform for companies to provide benefits to employees in the form of services from local businesses. As lead front end developer, I am striving to create an elegant and intuitive experience for users and to form an application that can provide benefit to both employees and businesses.
</div>
</div>
<div class="divider"></div> -->
<div class="project-container project-container-left">
<div id='mapr-image' class="project-image"></div>
<div class="project-info">
<div class="project-title">Marine Corps Permit Repository</div>
<div class="project-skills"><span class='black bold'>Skills: < </span> React <span class='black'>-</span> Node.js <span class='black'>-</span> Sass <span class='black'>-</span> Typescript <span class='black'> /> </span></div>
<div class="project-link" onclick='openmapr()'>View Demo Site</div>
<div class="project-link" onclick='openmaprsource()'>View Source</div>
The Marine Corps Permit Repository is a prototype for a platform that will aim to diminish paperwork processing for the marine corps. The web application will allow users to view, approve, and create pdf permits on both desktop and mobile devices and will seamlessly connect to the current user profiles of the marines. Our team plans to complete this project in April 2018.
</div>
</div>
<div class="divider"></div>
</section>
<!-- ======================== Skills =========================== -->
<section id='skills'>
<div class="skill-container" id="html">
<div class="skill-icon" id="html-icon"></div>
<h1>HTML, CSS, Javascript</h1>
<div class="skill-content" id="html-content">
HTML, CSS, and Javascript are a staple of any web developers toolkit. A majority of my experience and time has been spent creating and cultivating static website creation. Aside from the basic languages, I work with the SASS preprocessor and the Jquery library to help increase programming efficiency and website capacities.
</div>
</div>
<div class="skill-container" id="ang">
<div class="skill-icon" id="react-icon"></div>
<h1>React</h1>
<div class="skill-content" id="react-content">
To diversify my skills and to allow for more dynamic and robust website building, I employ the use of React in my web applications. React allows for modularization of websites through the creation of web components and an easy to use state manager to pass information from seperate components. Using react has allowed me to create more fun and elaborate websites with significantly less complexity in the code.
</div>
</div>
<div class="skill-container" id="node">
<div class="skill-icon" id="node-icon"></div>
<h1>Node.Js</h1>
<div class="skill-content" id="node-content">
For all of my backend coding, I use Node.js. Node allows for the use of one language throughout the entire stack, javascript, which has become the used programming language in my kit aside from html and css. Along with the use of Express, Mongoose, and NPM, I have created applications with fully functioning databases and dynamic interfaces.
</div>
</div>
</section>
<!-- ======================== Contact =========================== -->
<section id='contact'>
<div class="bar" id="top-bar"></div>
<div id="contact-title">
Let's get in touch
</div>
<div class="divider" id="contact-divider"></div>
<div id="contact-email">
<a id="contact-email-link" href="mailto:[email protected]">[email protected]</a>
</div>
<div id="contact-bar">
<a class="contact-button" href="https://github.com/Ivanr553" target="_blank" id="github"></a>
<a class="contact-button" href="https://www.linkedin.com/in/ivan-manuel-raffucci-16b828114/" target="_blank" id="linkedin"></a>
<!-- <a class="contact-button" href="https://codepen.io/ivanr553/pens/public/" target="_blank" id="codepen"></a> -->
<a class="contact-button" href="https://docs.google.com/document/d/1XxDtCrJYZR_hDHpBsk5099fNKy5WJExY_XL6t4hOcag/edit?usp=sharing" target="_blank" id="resume"></a>
</div>
</section>
</main>
</body>
<script async type="text/javascript" src="./javascript/jquery-3.2.1.min.js"></script>
<script async type="text/javascript" src="./javascript/index-1.js"></script>
</html>