-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (112 loc) · 4.52 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
<!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" />
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
<meta name="description"
content="I'm Jacopo Luciani,a web developer from Italy, currently living in Benevento. Check my site if you want to collaborate!" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="7" />
<meta name="language" content="en-US" />
<meta name="charset" content="iso-8859-1" />
<meta name="author" content="jacopo luciani" />
<meta name="reply-to" content="lucianidev@gmail.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins&family=Work+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./styles/style.css" />
<title>jacopo luciani</title>
</head>
<body>
<nav>
<div id="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul class="links">
<li class="small-text"><a href="#home">Home</a></li>
<li class="small-text"><a href="#about">about</a></li>
<li class="small-text"><a href="#portfolio">Portfolio</a></li>
<li class="small-text"><a href="#contacts">Contacts</a></li>
</ul>
</nav>
<canvas id="canvas"> </canvas>
<main>
<section id="home" class="full-viewport grid center center-text">
<h1 class="giant-text">Jacopo Luciani</h1>
<p class="medium-text">Webdev Html React Css Js</p>
<ul class="flex flex-center vertical-space wrap">
<li class="lateral-space">
<button class="button">
<a class="button-link" href="#about"> About </a>
</button>
</li>
<li class="lateral-space">
<button class="button">
<a class="button-link" href="#portfolio"> Portfolio </a>
</button>
</li>
<li class="lateral-space">
<button class="button vertical-space">
<a class="button-link" href="#contacts"> Contacts </a>
</button>
</li>
</ul>
</section>
<section id="about" class="grid two-columns-disposed-layout lateral-space center">
<img id="portfolio-image" loading="lazy" src="./images/personal-image.webp" alt="">
<div class="grid center vertical-space">
<h2 class="big-text">About</h2>
<p class="small-text poppins">
I'm Jacopo, a highly competent IT professional with a proven track record in creating full-stack application. I have
strong technical skills as well as excellent interpersonal skills, enabling me to interact with a wide range
of clients. I am eager to be challenged in order to grow and further improve my IT skills. My greatest passion
is in life is using my technical know-how to benefit other people and organisations.
</p>
</div>
</main>
<section id="portfolio" class="center-text">
<h2 class="big-text">
Portfolio
</h2>
<section class="flex space wrap" id="projects">
<div class="project">
<a class="big-text poppins" href="https://iltridentedelre.com/">Il tridente del re</a>
</div>
<div class="project">
<a class="big-text poppins" href="https://film-is-not-dead.vercel.app/">film-is-not-dead</a>
</div>
<div class="project">
<a class="big-text poppins" href="https://sleepy-theta.vercel.app/">Sleepy</a>
</div>
</section>
</section>
<section class="center-text" id="contacts">
<div class="big-text space poppins">
Let's get in touch!
</div>
<div class="flex flex-center space horizontal-space">
<input class="contact-form" placeholder="write here your message" type="text">
<a class="small-text submit poppins text-center" href="mailto:lucianidev@gmail.com">
Submit
</a>
</div>
<p class="medium-text space">
if you need my services <a class="fiveer" href="https://it.fiverr.com/lucianidev?public_mode=true">
click here
</a>
</p>
<a class="small-text space poppins space" href="https://github.com/lucianidev" target="_blank">
Github
</a>
<a class="small-text space poppins space" href="tel:334-801-1984">
Phone
</a>
</section>
<script src="./src/circles.js"></script>
<script src="./src/toggleNav.js"></script>
</body>
</html>