-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexEnglish.html
246 lines (203 loc) · 11.8 KB
/
indexEnglish.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
239
240
241
242
243
244
245
246
<!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>Dev Franco Di Mascio</title>
<!-- box icons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css -->
<link rel="stylesheet" href="cssFiles/style.css">
<!-- icon link -->
<link rel="icon" href="imagesFiles/iconDev1.ico">
</head>
<body>
<!-- header design -->
<header class="header">
<a href="" class="logo">Portfolio</a>
<i class='bx bx-menu' id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<!-- <a href="#services">Services</a> -->
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
<a href="index.html"><i class='bx bx-world'></i></a>
</nav>
</header>
<!-- home section design -->
<section class="home" id="home">
<div class="home-content">
<h3>Hello, I am</h3>
<h1>Franco Di Mascio</h1>
<h3>And I'm a</h3>
<h3><span class="multiple-text"></span></h3>
<p>Welcome to my portfolio as a Frontend Developer.
I'm glad to have you here. Follow me on my social media down bellow</p>
<div class="social-media">
<a href="https://github.com/FrancoDiMas"><i class='bx bxl-github'></i></a>
<a href="https://twitter.com/FrancoDesignWeb"><i class='bx bxl-twitter'></i></a>
<!-- <a href=""><i class='bx bxl-instagram-alt'></i></a> -->
<a href="https://www.linkedin.com/in/franco-di-mascio-Code-dev/"><i class='bx bxl-linkedin'></i></a>
</div>
<a href="#" class="btn">Download CV</a>
</div>
<div class="home-img">
<img src="imagesFiles/home.png" alt="Franco Di Mascio">
</div>
</section>
<!-- about section design -->
<section class="about" id="about">
<div class="about-img">
<img src="imagesFiles/about5.png" alt="">
<!-- Needed case: https://i.ibb.co/87kkGKM/about5.png -->
</div>
<div class="about-content">
<h2 class="heading">About <span>Me</span></h2>
<h3>Frontend Developer</h3>
<div class="about-out" id="about-out">
<h4>¿How did I find out about programming?</h4>
<p>When I was about 13 years old, I discovered programming through a game called "Tibia". I found out that...</p>
<h4>¿What are my skills?</h4>
<p>HTML ...</p>
<h4>¿Short and long aspirations?</h4>
<p>In the short term, having a solid and extensive foundation ...</p>
<h4>Hobbies</h4>
<p>...</p>
</div>
<div class="about-more-info-hidden" id="about-more-info">
<h4>¿How did I find out about programming?</h4>
<p>When I was about 13 years old, I discovered programming through a game called "Tibia". I found out that there were characters in the game that were not controlled by people, they could move, talk, and even hunt on their own, and this amazed and fascinated me. I couldn't understand how a character could do all that without human control. The ability to reason, decide, choose, move, attack, heal... all these options, how was it possible for a program to do all that? It had a tremendous impact on me and left me full of curiosity!
As the years went by and with a more mature mindset, I decided to venture into creating my own script to control a character using the LUA programming language. At that time, I had success, but I never intended to study it with the goal of becoming a professional, it was more of a hobby for me. Over time, I realized that programming had a special and bright place among the things I liked and was passionate about. I had overlooked it for a long time. That's why I decided to take a more serious step for the first time and purchased a course, which was a Java course on the online academy Udemy.
As time went on, I gradually focused on what was closest to my interests. And now, here I am, developing websites and fully dedicated to this field, doing my best to learn, practice, and improve as much as I can.</p>
<h4>¿What are my skills?</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ul>
<h4>Hobbies</h4>
<ul>
<li>Quality time with my daughter</li>
<li>Gaming</li>
<li>Soccer</li>
<li>Practicing programming</li>
<li>meditation</li>
</ul>
<h4>¿Short and long aspirations?</h4>
<p>In the short term, having a solid and extensive foundation in the entire area that represents frontend, thus having specific, well-defined knowledge and oriented towards the same horizon, allows me to provide the company or person who hires me with a service of excellent quality.</p>
<p>Technical Frontend Leader, specifically, for me it is important to have an excellent level of programming. It is also important to be able to manage the logistics involved in bringing a project or application to fruition, the soft skills that this requires, and the coordination of different work teams. It is a combination of mixed skills that is crucial for me to learn in the long term in order to be a complete and integral programmer. Job stability and continuous growth in learning tools, languages, and everything that allows me to surpass my own limits and always provide myself with updates and a very high level of code quality and self-development. For me, the development as a programmer should be continuous and filled with pasion for this field. It is what allows you to maintain a good position regardless of time or what is happening.</p>
</div>
<button onclick="moreInfoAbout()" class="btn" id="moreInfoAbout-id">Read More</button>
</div>
</section>
<!-- services section design -->
<!-- <section class="services" id="services">
<h2 class="heading">Our <span>Services</span></h2>
<div class="services-container">
<div class="services-box">
<i class='bx bx-code-alt'></i>
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas earum
architecto nostrum quod exercitationem
ducimus tenetur velit aut deserunt voluptatum.</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="services-box">
<i class='bx bxs-paint' ></i>
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas earum
architecto nostrum quod exercitationem
ducimus tenetur velit aut deserunt voluptatum.</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="services-box">
<i class='bx bx-bar-chart'></i>
<h3>Digital Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas earum
architecto nostrum quod exercitationem
ducimus tenetur velit aut deserunt voluptatum.</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
</section> -->
<!-- portfolio section design -->
<section class="portfolio" id="portfolio">
<h2 class="heading">Lastest <span>Project</span></h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="imagesFiles/portfolio1.png" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<h4>Landing Page</h4>
<p>Tech_Shop</p>
<a class="portfoli-layer-a-edited" href="https://francodimas.github.io/Landing-Page/" target="_blank"><i class='bx bx-link-external'></i></a>
<a class="portfoli-layer-a-edited" href="https://francodimas.github.io/Landing-Page/indexModificado.html" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="imagesFiles/portfolio2.png" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<h4>Data base/Stock</h4>
<p>Shop Shoes</p>
<a href="https://francodimas.github.io/Data-Base/" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="imagesFiles/portfolio3.png" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<h4>Family Album</h4>
<p>Di Maquino Family Album</p>
<a href="https://francodimas.github.io/Album-Digital/" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="imagesFiles/portfolio4.png" alt="">
<div class="portfolio-layer">
<h4>In development</h4>
<h4>General Design for Mobiles</h4>
<p>Shoe Store</p>
<a href="https://francodimas.github.io/Landing-Shoes/" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
</div>
</section>
<!-- contact section design -->
<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me</span></h2>
<form id="form" action="#">
<div class="input-box">
<input type="text" name="name" id="name" required placeholder="Full Name">
<input type="email" name="email" id="email" required placeholder="Email Address">
</div>
<div class="input-box">
<input type="number" name="number" id="number" placeholder="Mobile Number" class="mobile">
<input type="text" name="email-subject" id="email-subject" required placeholder="Email Subject">
</div>
<textarea name="message" id="message" required cols="30" rows="10" placeholder="Your Message"></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
<a href="" class="trick" id="trick"></a>
</section>
<!-- footer Design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © | All Rights Reserved. </p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>
<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- typed js -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- custom js -->
<script src="javascriptFiles/script.js" ></script>
</body>
</html>