-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (127 loc) · 6.59 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
<!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 href="style.css" rel="stylesheet" />
<title>Ichsan Sandy</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="code_icon.png" type="image/png" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js" type="module"></script>
<script defer src="app.js"></script>
<script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/kute.js@2.2.4/dist/kute.min.js" integrity="sha256-ekq8UIBrOC1lgaJmRRV/c50s5Hy/EBKjBD/7nM9dvp0=" crossorigin="anonymous"></script>
</head>
<body>
<div id="blurry-mouse-tail">
<section class="home">
<div class="home-container" style="z-index: 3">
<p class="text-name">Hi My Name is Ichsan</p>
<div class="text-animated">
<p class="static-sentence">
I'm a passionate<br />
<span class="auto-type"></span>
</p>
</div>
</div>
</section>
<section class="about">
<p id="p" style="text-align: center" class="skills">
My expertise lies in designing websites that are <br />
both
<span
style="
background: -webkit-linear-gradient(109.1deg, rgb(249, 244, 233) 3.4%, rgb(243, 220, 193) 23.5%, rgb(224, 171, 165) 45%, rgb(161, 127, 161) 65.3%, rgb(115, 106, 152) 87.2%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'Satisfy', cursive;
font-size: larger;
"
>Visually Stunning
</span>
and
<span style="background: -webkit-linear-gradient(45deg, #92fe9d 0%, #00c9ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Quantico', sans-serif; font-size: larger">
Highly Functional
</span>
</p>
<div class="skill-icon html" data-color="#ee926b"></div>
<div class="skill-icon html html-background" data-color="#ee926b"></div>
<div class="skill-icon css" data-color="#5b98e6"></div>
<div class="skill-icon css css-background" data-color="#5b98e6"></div>
<div class="skill-icon javascript" data-color="#f0db4f"></div>
<div class="skill-icon javascript javascript-background" data-color="#f0db4f"></div>
<div class="skill-icon react" data-color="#5b98e6"></div>
<div class="skill-icon react react-background" data-color="#5b98e6"></div>
<div class="skill-icon java" data-color="#e76f00"></div>
<div class="skill-icon java java-background" data-color="#e76f00"></div>
</section>
<section class="projects">
<div class="swiper mySwiper">
<div class="swiper-wrapper"></div>
</div>
</section>
<section class="contact">
<div class="contact-container">
<div class="blob-container">
<div class="blob">
<svg id="visual" viewBox="0 0 900 600" width="100vw" height="20vh" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="translate(449.0959015404072 276.3135526691674)">
<path
id="blob1"
d="M129.4 -92.3C170.6 -51.4 209.1 2.6 198 42.6C186.8 82.7 125.9 108.9 63 144.6C0 180.2 -65.1 225.2 -112.8 211.1C-160.5 197 -190.9 123.8 -197 56.6C-203 -10.6 -184.8 -71.7 -147.9 -111.6C-111 -151.5 -55.5 -170.3 -5.7 -165.7C44 -161.1 88.1 -133.2 129.4 -92.3"
fill="#0077b6"
<!--
fill="#BB004B"
-->
>
</path>
</g>
<g transform="translate(484.1755430857275 285.29286969789155)">
<path
id="blob2"
style="visibility: hidden"
d="M110.9 -94.8C135.3 -57.9 140.8 -12.2 140.8 49.9C140.7 112.1 135.2 190.7 99.9 207.8C64.6 224.9 -0.4 180.5 -55 143.1C-109.6 105.8 -153.8 75.5 -182 21.6C-210.1 -32.2 -222.3 -109.6 -189.4 -148.5C-156.4 -187.4 -78.2 -187.7 -17.5 -173.8C43.3 -159.8 86.5 -131.7 110.9 -94.8"
fill="#0077b6"></path>
</g>
</svg>
</div>
<div class="blob">
<svg id="visual" viewBox="0 0 900 600" width="100vw" height="20vh" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="translate(449.0959015404072 276.3135526691674)">
<path
id="blobshadow1"
d="M129.4 -92.3C170.6 -51.4 209.1 2.6 198 42.6C186.8 82.7 125.9 108.9 63 144.6C0 180.2 -65.1 225.2 -112.8 211.1C-160.5 197 -190.9 123.8 -197 56.6C-203 -10.6 -184.8 -71.7 -147.9 -111.6C-111 -151.5 -55.5 -170.3 -5.7 -165.7C44 -161.1 88.1 -133.2 129.4 -92.3"
fill="#0077b6"></path>
</g>
<g transform="translate(484.1755430857275 285.29286969789155)">
<path
id="blobshadow2"
style="visibility: hidden"
d="M110.9 -94.8C135.3 -57.9 140.8 -12.2 140.8 49.9C140.7 112.1 135.2 190.7 99.9 207.8C64.6 224.9 -0.4 180.5 -55 143.1C-109.6 105.8 -153.8 75.5 -182 21.6C-210.1 -32.2 -222.3 -109.6 -189.4 -148.5C-156.4 -187.4 -78.2 -187.7 -17.5 -173.8C43.3 -159.8 86.5 -131.7 110.9 -94.8"
fill="#0077b6"></path>
</g>
</svg>
</div>
<h2>Let's Connect !!!</h2>
</div>
<div class="contact-icon-wrapper">
<a href="https://github.com/ichsansandy" target="_blank" class="github"></a>
<a href="https://www.linkedin.com/in/ichsans/" target="_blank" class="linkedin"></a>
<a href="https://instagram.com/ichsans__" target="_blank" class="twitter"></a>
</div>
</div>
</section>
</div>
<div id="magiclight-blurry"></div>
<!-- <footer>
<p>copyright @ 2022 ichsansandy</p>
</footer> -->
</body>
</html>