-
Notifications
You must be signed in to change notification settings - Fork 0
/
old.html
174 lines (119 loc) · 7.16 KB
/
old.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
<html>
<head>
<meta charset="utf-8">
<title>IR: Web Developer</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- ======================== Landing =========================== -->
<section id="landing">
<div id="portrait"></div>
<div id="landing-info">
My name is Ivan Raffucci, a freelance web developer located in southern California. My passion is building websites. Whether it's creating websites for local businesses or building web applications, I am always excited to create clean code and an exceptional product.
</div>
<span id="name">
Ivan Raffucci
<br><div id="web-dev-landing">Web Development</div>
</span>
</section>
<div class="divider" id="divider-bottom"></div>
<!-- ======================== Pre Projects =========================== -->
<section id="pre-projects">
<div id="pre-projects-info">
<span id="pre-projects-info-title">Mission</span><br>
I bring my clients websites that exceed expectations and expand the potential of my clients' busineses and careers. Each project is an opportunity for both growth and excellence.
</div>
<div id="pre-projects-info-2">
Below are a couple of examples of projects I have worked on:
</div>
</section>
<!-- =========================== Projects ============================ -->
<section id="projects">
<div class="divider" id="divider-top"></div>
<div class="project-container" id="project-carla">
<div class="project-image" id="carla-image" onclick="openCarla()"></div>
<div class="project-info" id="carla-info">
<h1 class="title-blue">Carla Kunkel: Interior Designer</h1>
This is a website that I have created for an interior design, Carla Kunkel. I worked with Carla to create the design, layout, and content of the website to bring her business on to the web. This site highlights my goal to create simple and elegant websites that get out of the way of the content.
</div>
</div>
<div class="project-container" id="project-thh">
<div class="project-info" id="thh-info">
<h1 class="title-blue">Trusting Hand Homecare: Elderly Care</h1>
This is a website for a small business focused on homecare for the elderly. This is their first major marketing investment and the goal of this site was to define the structure of their business and provide clear and concise information for prospective clients.
</div>
<div class="project-image" id="thh-image" onclick="openthh()"></div>
</div>
<div class="project-container" id="project-kmp">
<div class="project-image" id="kmp-image" onclick="openkmp()"></div>
<div class="project-info" id="kmp-info">
<h1 class="title-blue">Keep Me Posted: Website Application</h1>
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. We plan to have the site completed by November 2017.
</div>
</div>
<!--
<div class="project-container" id="project-raincheck">
<div class="project-info" id="raincheck-info">
<h1 class="title-blue">Raincheck Application: Web Application</h1>
This is a project I have worked on to expand my knowledge of back-end web development and to create a useful and effective application to increase efficiency at work. The application is a way to track orders made by customers and to keep them organized for the user. The application has a login system, password encryption, and a number of other features that were built using the MEAN stack.
</div>
<div class="project-image" id="raincheck-image" onclick="openRaincheck()"></div>
</div> -->
<div class="divider" id="divider-bottom"></div>
</section>
<!-- ======================== Pre Skills =========================== -->
<section id="pre-skills">
<div id="pre-skills-content">
<span id="pre-skills-content-title">Skills</span><br>
Building a website is a multifaceted process and there are many tools available to web developers right now to create them. Here are a couple of skills and languages I employ in projects:
</div>
</section>
<div class="divider" id="divider-top"></div>
<!-- ========================== 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>
<div class="divider" id="divider-bottom"></div>
<!-- ====================== Contact ========================= -->
<section id="contact">
<div class="bar" id="top-bar"></div>
<div id="contact-content-1">
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/11FVutbAqGlW-ed21noWJjcvyhz3PD-tlZCktaGxMQfU/edit?usp=sharing" target="_blank" id="resume"></a>
</div>
<div class="bar" id="bottom-bar">
<div id="signature">Created by Ivan Raffucci</div>
</div>
</section>
</body>
<script type="text/javascript" src="./javascript/index.js"></script>
</html>