-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtemp.html
More file actions
249 lines (221 loc) · 6.76 KB
/
Copy pathtemp.html
File metadata and controls
249 lines (221 loc) · 6.76 KB
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
247
248
249
<!--
- #SKILLS
This section showcases the skills and tools that the portfolio owner possesses.
It is divided into two main parts: Skills and Tools, which can be toggled using buttons.
-->
<section class="skills" id="skills">
<div class="skills-content section-content">
<p class="section-subtitle">My skills</p>
<h2 class="h3 section-title">AI and Programming Skills</h2>
<p class="section-text">
Our expertise includes AI-driven image generation, video enhancement, and
VR development, alongside a robust foundation in web technologies.
</p>
<div class="skills-toggle" data-toggle-box>
<button class="toggle-btn active" data-toggle-btn>Skills</button>
<!-- This button shows the skills list when clicked -->
<button class="toggle-btn" data-toggle-btn>Tools</button>
<!-- This button shows the tools list when clicked -->
</div>
</div>
<div class="skills-box" data-skills-box>
<ul class="skills-list">
<li>
<div class="skill-card">
<div class="tooltip">HTML5</div>
<!-- Tooltip shows the name of the skill when hovered over -->
<div class="card-icon">
<img src="./assets/images/html5.png" alt="HTML5 logo" />
<!-- Image representing the HTML5 skill -->
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">CSS3</div>
<div class="card-icon">
<img src="./assets/images/css3.png" alt="CSS3 logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">JavaScript</div>
<div class="card-icon">
<img src="./assets/images/javascript.png" alt="JavaScript logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">TypeScript</div>
<div class="card-icon">
<img src="./assets/images/typescript.png" alt="TypeScript logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">jQuery</div>
<div class="card-icon">
<img src="./assets/images/jquery.png" alt="jQuery logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Bootstrap</div>
<div class="card-icon">
<img src="./assets/images/bootstrap.png" alt="Bootstrap logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Angular</div>
<div class="card-icon">
<img src="./assets/images/angular.png" alt="Angular logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">React</div>
<div class="card-icon">
<img src="./assets/images/react.png" alt="React logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Vue</div>
<div class="card-icon">
<img src="./assets/images/vue.png" alt="Vue logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Firebase</div>
<div class="card-icon">
<img src="./assets/images/firebase.png" alt="Firebase logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">PugJs</div>
<div class="card-icon">
<img src="./assets/images/pugjs.png" alt="PugJs logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">SASS</div>
<div class="card-icon">
<img src="./assets/images/sass.png" alt="SASS logo" />
</div>
</div>
</li>
</ul>
<ul class="tools-list">
<li>
<div class="skill-card">
<div class="tooltip">Ajax</div>
<div class="card-icon">
<img src="./assets/images/ajax.png" alt="Ajax logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Gulp</div>
<div class="card-icon">
<img src="./assets/images/gulp.png" alt="Gulp logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Webpack</div>
<div class="card-icon">
<img src="./assets/images/webpack.png" alt="Webpack logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Git</div>
<div class="card-icon">
<img src="./assets/images/git.png" alt="Git logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Npm</div>
<div class="card-icon">
<img src="./assets/images/npm.png" alt="Npm logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Command Line</div>
<div class="card-icon">
<img src="./assets/images/command.png" alt="Command Line logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">VS Code</div>
<div class="card-icon">
<img src="./assets/images/vs-code.png" alt="VS Code logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Trello</div>
<div class="card-icon">
<img src="./assets/images/trello.png" alt="Trello logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">ClickUp</div>
<div class="card-icon">
<img src="./assets/images/clickup.png" alt="ClickUp logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Slack</div>
<div class="card-icon">
<img src="./assets/images/slack.png" alt="Slack logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Photoshop</div>
<div class="card-icon">
<img src="./assets/images/photoshop.png" alt="Photoshop logo" />
</div>
</div>
</li>
<li>
<div class="skill-card">
<div class="tooltip">Adobe XD</div>
<div class="card-icon">
<img src="./assets/images/adobe-xd.png" alt="Adobe XD logo" />
</div>
</div>
</li>
</ul>
</div>
</section>