-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
238 lines (227 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
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FraCata00 on GitHub</title>
<link rel="icon" href="Icon/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<link rel="stylesheet" href="Content/style.css">
</head>
<body>
<header>
<a href="#" class="logo">Portfolio</a>
<div class="toggle" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a href="#home" onclick="toggleMenu();">Home</a></li>
<li><a href="#about" onclick="toggleMenu();">About Me</a></li>
<li><a href="#works" onclick="toggleMenu();">Works</a></li>
<li><a href="#languages" onclick="toggleMenu();">Languages</a></li>
<li><a href="#contact" onclick="toggleMenu();">Contact Me</a></li>
</ul>
</header>
<section class="banner" id="home">
<!--<script type="text/javascript" src="src/particles.min.js">
window.onload = function () {
Particles.init({
selector: '.banner'
});
};
</script>-->
<div class="textBx">
<h2>Hello, I'm<br><span>Francesco Cataldo.</span></h2>
<h3>I'm a Cloud IT Specialist.</h3>
<a href="#about" class="btn">About Me</a>
</div>
</section>
<section class="about" id="about">
<div class="heading">
<h2>About Me</h2>
</div>
<div class="content">
<div class="contentBx w50">
<h3>I'm a Cloud IT Specialist.<br>I'm 21 y.o.</h3>
<p>I've studied at ITTS Carlo Grassi (IT School) in Turin, Italy, and I'm graduate in 2020 and after I'm studing at ICT ITS Piemonte.<br> I'm studing Cloud IT, because the future of informatic technoly is only on Cloud. So I'm a good designer,
and a good programmer (I think 😋).
<br><br> Scroll Down to see all.
</p>
</div>
<div class="w50">
<!--<img src="Image/cloudSpecialist.jpg" class="img">-->
<img src="Image/matrix.gif" class="img">
</div>
</div>
</section>
<section class="works" id="works">
<div class="heading white">
<h2>My Works</h2>
<p>
Some of my projects are on GitHub.
</p>
</div>
<div class="content">
<div class="worksBx">
<a href="https://github.com/FraCata00/MVC_Film" target="_blank"><img src="Icon/microsoft.svg" style="height: 100px;"></a>
<h2>Microsoft ASP .NET Core</h2>
<p>Is a special Microsft's framework .NET Core, you can code an MVC Website for example.<br> MVC (Model View Controller) is coded on C#, cshtml, HTML_RAZOR, CSS (bootstrap), javascript.<br> So you can code for example a streaming website
with DB (database) in Cloud, like Microsoft Azure, manage with SQL Server Management Studio and coded all on Visual Studio.
</p>
</div>
<div class="worksBx">
<a href="https://aws.amazon.com/" target="_blank"><img src="Icon/cloud-database.svg" style="height: 100px;"></a>
<h2>Cloud Database</h2>
<p>La più ampia scelta di database ad hoc per tutte le esigenze delle applicazioni. Avere un database in locale ormai non ha piu' senso, meglio averne uno tutto gestito e personalizzato in cloud.<br> Servizi di cloud database come Microsft
Azure o AWS (Amazon Web Services) sono tra i piu' famosi e offrono tantissime funzionalita'.
</p>
</div>
<div class="worksBx">
<a href="https://gitlab.com/FraCata00/nodejs-mongodb-films" target="_blank"><img src="Icon/cloud.svg" style="height: 100px;"></a>
<h2>Cloud</h2>
<p>Cloud che non è altro che uno spazio di archiviazione personale, chiamato talvolta anche cloud storage che risulta essere accessibile in qualsiasi momento ed in ogni luogo utilizzando semplicemente una qualunque connessione ad Internet.<br> Bisogna comunque precisare che con il termine cloud, oltre che a riferirsi al cloud storage, a volte ci si potrebbe riferire anche ad altri servizi offerti dal cloud computing.
</p>
</div>
<div class="worksBx">
<a href="https://github.com/FraCata00/api.mongodb.it" target="_blank"><img src="Icon/docker.svg" style="height: 100px;"></a>
<h2>Docker Container</h2>
<p>Docker is a software platform that allows you to create, test and deploy applications with maximum speed. <br> Docker collects software into standardized units called containers that offer everything you need for them proper execution,
including libraries, system tools, code, and runtime. This application in developed using Node.js Express and MongoDB Atlas connection with mongoose framework.<br> This is an API rest in Node.js
</p>
</div>
<div class="worksBx">
<a href="https://github.com/FraCata00" target="_blank"><img src="Icon/github.svg" style="height: 100px;"></a>
<h2>FraCata00 on GitHub</h2>
<p>This is my dev account on GitHub, and you can find all my repositories on my account.<br> I share some of my projects inside this platform, because GitHub is the best site or platform to share code, to other programmer or developer.
</p>
</div>
</div>
</section>
<section class="languages" id="languages">
<div class="heading">
<h2>Program Languages and Software</h2>
<p>
Some of the program languages and SW that I use.
</p>
</div>
<div class="content">
<div class="languagesBx">
<a href="https://www.html.it/" target="_blank"><img src="Icon/html5.svg"></a>
</div>
<div class="languagesBx">
<a href="https://www.javascript.com/" target="_blank"><img src="Icon/java-script.svg"></a>
</div>
<div class="languagesBx">
<a href="https://manjaro.org/" target="_blank"><img src="Icon/linux.svg"></a>
</div>
<div class="languagesBx">
<a href="https://github.com/FraCata00/api.mongodb.it" target="_blank"><img src="Icon/docker.svg"></a>
</div>
<div class="languagesBx">
<a href="https://aws.amazon.com/" target="_blank"><img src="Icon/amazon.svg"></a>
</div>
<div class="languagesBx">
<a href="https://aws.amazon.com/it/what-is-cloud-computing/"><img src="Icon/cloud-computing.svg"></a>
</div>
</div>
<div class="heading">
<a href="#" class="btn">View More</a>
</div>
</section>
<section class="github" id="github">
<div class="heading">
<h2>My GitHub Profile</h2>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input type="text" value="https://fracata00.github.io">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<a href="https://github.com/FraCata00" target="_blank"><img src="Image/GitHubProfile.png" style="border-top-left-radius: 0%; border-top-right-radius: 0%; border-bottom-left-radius: 13px; border-bottom-right-radius: 13px;"></a>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="heading white">
<h2>Contact Me</h2>
<p>
Contact me on Linkedin, Instagram or GitHub.
</p>
</div>
<div class="content">
<div class="contactInfo">
<h3>Contact Info</h3>
<div class="contactInfoBx">
<div class="box">
<div class="icon">
<i class="fa fa-map-marker"></i>
</div>
<div class="text">
<h3>Address</h3>
<p>Via San Marchese 17/3,<br>Venaria Reale, Torino<br>Piemonte, Italy</p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="text">
<h3>Phone</h3>
<p>(+39) 347 821 5027</p>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-envelope-open"></i>
</div>
<div class="textMail">
<h3>Email</h3>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</div>
</div>
<div class="formBx">
<form>
<h3>Message Me</h3>
<br>
<input type="text" name="" placeholder="Full Name" style="height: auto;">
<input type="email" name="" placeholder="Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
<div class="copyright">
<p>Copyright © 2021 Francesco Cataldo. All Right Reserved</p>
</div>
<script type="text/javascript">
window.addEventListener('scroll', function() {
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
});
function toggleMenu() {
var menuToggle = document.querySelector('.toggle');
var menu = document.querySelector('.menu');
menuToggle.classList.toggle('active');
menu.classList.toggle('active');
}
</script>
</body>
</html>