-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (146 loc) · 5.75 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
<!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" />
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<meta httpEquiv="ScreenOrientation" content="autoRotate:disabled" />
<meta name="description" content="Website with projects created by Yuriy K. Shopify and Frontend Developer" />
<meta property="og:title" content="Yuriy K. Projects / @eng1n3x" />
<meta property="og:description" content="Website with projects created by Yuriy K. Shopify and Frontend Developer" />
<meta property="og:image" content="https://yuriy-k.dev/assets/logo.png" />
<meta property="og:url" content="https://yuriy-k.dev/" />
<title>Yuriy K. Projects / @eng1n3x</title>
<link rel="canonical" href="https://yuriy-k.dev/" />
<link rel="icon" href="./favicon.ico" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
red: "red",
},
animation: {
prixClipFix: "clip 0.75s linear infinite",
},
keyframes: {
clip: {
"0%": { clipPath: "polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)" },
"25%": { clipPath: "polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)" },
"50%": { clipPath: "polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)" },
"75%": { clipPath: "polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)" },
"100%": { clipPath: "polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)" },
},
},
},
},
};
</script>
<style type="text/tailwindcss">
@layer utilities {
[v-cloak] {
display: none !important;
}
.loader {
@apply w-20 h-20 rounded-full relative animate-spin;
}
.loader::before {
@apply content-[''] absolute inset-0 rounded-full border-4 border-red animate-prixClipFix;
}
}
</style>
</head>
<body class="bg-gradient-to-r from-green-500 to-blue-900">
<div id="app" class="flex flex-col justify-between min-h-screen" v-cloak>
<header class="bg-gradient-to-r from-blue-600 to-green-800 p-4">
<div class="max-w-screen-xl w-full mx-auto">
<div class="flex items-center flex-col sm:flex-row justify-center sm:justify-between">
<a href="/" class="w-32 h-32 shadow-2xl group">
<img class="w-full h-full transition-transform group-hover:rotate-180" src="./assets/logo.png" alt="logo" loading="lazy" />
</a>
<div>
<h1 class="text-white text-2xl uppercase tracking-widest text-center">
{{ textContent.h1 }}
</h1>
<h2 class="text-white text-lg capitalize text-center underline tracking-widest">{{ textContent.h2 }}</h2>
</div>
<div class="flex items-center">
<a href="https://github.com/ENG1N3X/" class="block w-10 h-10 transition-opacity hover:opacity-60 mr-2" target="_blank">
<img class="w-full h-full" src="./assets/icons/icon-github.svg" alt="github" />
</a>
<a href="https://teleg.run/eng1n3x" class="block w-10 h-10 transition-opacity hover:opacity-60 mr-2" target="_blank">
<img class="w-full h-full" src="./assets/icons/icon-telegram.svg" alt="telegram" />
</a>
<a href="mailto:[email protected]" class="block w-10 h-10 transition-opacity hover:opacity-60" target="_blank">
<img class="w-full h-full" src="./assets/icons/icon-mail.svg" alt="mail" />
</a>
</div>
</div>
</div>
</header>
<main class="max-w-screen-xl w-full mx-auto px-4 py-12">
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<template v-for="(project, index) in projects" :key="project.id">
<a :href="project.url" class="block group transition-transform" target="_blank">
<div class="relative aspect-square overflow-hidden">
<img class="w-full h-full object-cover transition-transform group-hover:scale-[1.05]" :src="project.image" :alt="project.name" loading="lazy" />
</div>
<h3 class="text-xl text-center text-white uppercase underline mt-2">{{ project.name }}</h3>
<p class="text-base text-center text-white capitalize">{{ project.desc }}</p>
</a>
</template>
</div>
</main>
<footer class="bg-gradient-to-r from-blue-600 to-green-800 p-4">
<div class="max-w-screen-xl w-full mx-auto">
<a href="https://github.com/ENG1N3X/" class="block text-center text-white transition-opacity hover:opacity-60" target="_blank">{{ textContent.author }}</a>
<span class="block text-center text-white">{{ textContent.nickname }}</span>
</div>
</footer>
<div v-show="pending" class="fixed inset-0 z-10 flex justify-center items-center bg-black bg-opacity-50">
<span class="loader"></span>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.prod.min.js"
integrity="sha512-3CesFAr6COyDB22AiVG2erk2moD1FeL3VMx6UezptTW3qmYdcQhfv6yDGmH4ICNTxd0Rs2AbMQ0Q5lG7J/8n3Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
Vue.createApp({
data() {
return {
pending: true,
textContent: {
h1: "Yuriy K.",
h2: "Shopify Expert & Frontend Developer",
author: "Author: Yuriy Kudriavtsev",
nickname: "©eng1n3x",
},
projects: [],
};
},
created() {
console.log("Are you a developer too?");
setTimeout(() => {
this.fetchData();
}, 750)
},
methods: {
fetchData() {
this.pending = true;
fetch("sites.json")
.then((response) => response.json())
.then((response) => {
this.projects = [...response]
this.pending = false;
});
}
},
}).mount("#app");
</script>
</body>
</html>