-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (131 loc) · 5.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Stylish" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=VT323" />
<!-- SEO Meta Tags -->
<meta name="keywords" content="sayjeyhi, Jafar Rezaei, Jafar Rezaei Rouyandaragh, جعفر رضائی, جعفر رضایی">
<meta name="description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
<title>Jafar Rezaei | sayjeyhi | 3D portfolio</title>
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourTwitterHandle"> <!-- Replace with your Twitter handle -->
<meta name="twitter:title" content="Jafar Rezaei | sayjeyhi | 3D portfolio">
<meta name="twitter:description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
<meta name="twitter:image" content="URL_TO_IMAGE"> <!-- Replace with the URL to your image -->
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Jafar Rezaei | sayjeyhi | 3D portfolio">
<meta property="og:description" content="Jafar Rezaei's personal website and portfolio with nice 3D animations and games">
<meta property="og:type" content="website">
<meta property="og:url" content="URL_TO_YOUR_WEBSITE"> <!-- Replace with the URL to your website -->
<meta property="og:image" content="URL_TO_IMAGE"> <!-- Replace with the URL to your image -->
<meta property="og:image:alt" content="Jafar Rezaei's 3D Portfolio">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WMZX9BLX');</script>
<!-- End Google Tag Manager -->
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/[email protected]/squircle.min.js"
);
}
</script>
<style>
.loader {
width: 88px;
height: 88px;
margin: auto;
position: relative;
}
.loader .box {
width: 88px;
height: 5px;
background: #000;
opacity: 0.25;
position: absolute;
top: 108px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
will-change: transform;
}
.loader .shadow {
width: 100%;
height: 100%;
background: #65a30c;
animation: bxSpin 0.5s linear infinite;
will-change: transform, border-radius;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
}
@keyframes bxSpin {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WMZX9BLX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="root" style="width: 100vw; height: 100vh">
<div style="display: flex; flex-direction:column;align-items: center; justify-content: center; width: 100%; height: 100%">
<div class="loader" >
<div class="box"></div>
<div class="shadow"></div>
</div>
<p style="font-family: 'Inter', tahoma, arial, serif">Loading...</p>
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>