-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
techstack.html
253 lines (234 loc) · 20.8 KB
/
techstack.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
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
250
251
252
253
<!DOCTYPE html>
<html lang="en" light-mode="dark">
<head>
<title>John Doe | Tech Stack</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO -->
<meta name="keywords"
content="free portfolio template,portfolio template, portfolio website template, open source and contribution to open source" />
<meta name="description"
content="This project serves as a free and beautiful portfolio template for everyone who needs the perfect portfolio. Anyone can showcase their work including moocs, education, projects, experience,etc. to the world." />
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G6D61F5TL4"></script>
<!-- Robot.txt -->
<meta name="robots" content="index,follow" />
<meta name="Googlebot" content="index,follow" />
<meta name="AdsBot-Google" content="index,follow" />
<!-- Open Graph for Social Media -->
<meta property="og:site_name" content="https://portfolio.smaranjitghose.codes/techstack.html" />
<meta property="og:title" content="John Doe | Tech Stack" />
<meta property="og:description"
content="This project serves as a free and beautiful portfolio template for everyone who needs the perfect portfolio. Anyone can showcase their work including moocs, education, projects, experience,etc. to the world." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://portfolio.smaranjitghose.codes/techstack.html" />
<meta name="twitter:card" content="summary" />
<!-- Twitter Posts -->
<meta name="twitter:site" content="https://portfolio.smaranjitghose.codes/techstack.html" />
<meta name="application-name" content="John Doe | Tech Stack" />
<meta name="apple-mobile-web-app-title" content="John Doe | Tech Stack" />
<meta name="summary"
content="An open source project aimed at providing free and beautiful templates to everyone for building their portfolio websites and showcase their work to the world." />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!--For Dark/Light mode Toggle-->
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet">
<!--Import animation.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="assets/css/preloader.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
<link rel="stylesheet" type="text/css" href="assets/css/techstack.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/cursor.css">
<link id='favicon' rel="icon" href="assets/images/favicon.png" type="image/png">
<!--Favicon-->
<script defer src="./assets/js/dynamicTitle.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M11CMZ12Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-M11CMZ12Q');
</script>
<style>
</style>
</head>
<body class="no-scroll-preload">
<!-- loader -->
<div class="loader-container">
<div class="atom">
<div class="electron"></div>
<div class="electron-alpha"></div>
<div class="electron-omega"></div>
</div>
</div>
<!-- Dynamic Navbar -->
<div class="main pt-5">
<section>
<div class="container-fluid px-3">
<div class="row">
<div class="godown col-md-6">
<svg width="90%" height="450" viewBox="0 0 1010 526" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g id="board">
<path
d="M443.078 6.14067L361.35 295.153L873.69 440.035L955.419 151.023L443.078 6.14067Z"
fill="#3F3D56" />
<path
d="M451.929 22.4719C454.272 22.4719 456.172 20.5721 456.172 18.2287C456.172 15.8852 454.272 13.9855 451.929 13.9855C449.585 13.9855 447.686 15.8852 447.686 18.2287C447.686 20.5721 449.585 22.4719 451.929 22.4719Z"
fill="#6C63FF" />
<path
d="M464.995 26.1667C467.338 26.1667 469.238 24.267 469.238 21.9235C469.238 19.5801 467.338 17.6803 464.995 17.6803C462.651 17.6803 460.751 19.5801 460.751 21.9235C460.751 24.267 462.651 26.1667 464.995 26.1667Z"
fill="#6C63FF" />
<path
d="M478.061 29.8616C480.404 29.8616 482.304 27.9618 482.304 25.6184C482.304 23.2749 480.404 21.3751 478.061 21.3751C475.717 21.3751 473.817 23.2749 473.817 25.6184C473.817 27.9618 475.717 29.8616 478.061 29.8616Z"
fill="#6C63FF" />
<path
d="M714.984 189.53C708.125 188.233 701.07 188.4 694.28 190.018C696.257 183.23 696.756 176.096 695.743 169.098C688.751 171.629 682.424 175.713 677.237 181.041C675.609 173.785 672.357 166.993 667.725 161.175C663.198 166.607 659.888 172.945 658.017 179.764C653.08 174.829 647.157 170.992 640.635 168.505C640.635 168.505 637.545 184.221 644.984 197.117C651.606 208.595 664.328 213.966 667.047 215.009L667.111 215.086L667.145 215.047C667.421 215.152 667.576 215.205 667.576 215.205C667.576 215.205 667.634 214.903 667.715 214.364C667.764 214.304 667.813 214.243 667.867 214.175C667.878 214.261 667.888 214.339 667.898 214.416C667.684 214.917 667.576 215.205 667.576 215.205C667.576 215.205 667.736 215.24 668.026 215.296L668.034 215.347L668.129 215.315C670.992 215.85 684.643 217.937 696.294 211.627C709.386 204.536 714.984 189.53 714.984 189.53Z"
fill="#6C63FF" />
<path id="circle1"
d="M689.592 149.384C695.685 149.384 700.625 144.445 700.625 138.352C700.625 132.259 695.685 127.319 689.592 127.319C683.499 127.319 678.56 132.259 678.56 138.352C678.56 144.445 683.499 149.384 689.592 149.384Z"
fill="#6C63FF" />
<path
d="M828.117 281.591L496.569 187.835L494.529 195.048L826.077 288.805L828.117 281.591Z"
fill="#6C63FF" />
<path id="box1"
d="M574.603 248.706L517.44 232.541L501.275 289.705L558.438 305.87L574.603 248.706Z"
fill="#6C63FF" />
<path
d="M680.764 278.727L623.6 262.562L607.435 319.725L664.599 335.89L680.764 278.727Z"
fill="#6C63FF" />
<path id="box3"
d="M786.924 308.747L729.761 292.582L713.596 349.746L770.759 365.911L786.924 308.747Z"
fill="#6C63FF" />
<path
d="M547.855 315.224L505.391 303.216L504.006 308.115L546.47 320.124L547.855 315.224Z"
fill="#6C63FF" />
<path
d="M654.016 345.244L611.552 333.236L610.166 338.136L652.631 350.144L654.016 345.244Z"
fill="#6C63FF" />
<path
d="M760.177 375.265L717.712 363.257L716.327 368.157L758.791 380.165L760.177 375.265Z"
fill="#6C63FF" />
</g>
<path
d="M289.6 407C446.449 407 573.6 402.299 573.6 396.5C573.6 390.701 446.449 386 289.6 386C132.751 386 5.60016 390.701 5.60016 396.5C5.60016 402.299 132.751 407 289.6 407Z"
fill="#D0CDE1" />
<path
d="M794.128 526C916.183 526 1015.13 521.299 1015.13 515.5C1015.13 509.701 916.183 505 794.128 505C672.073 505 573.128 509.701 573.128 515.5C573.128 521.299 672.073 526 794.128 526Z"
fill="#D0CDE1" />
<path id="svg_css_text"
d="M685.736 434H749.494V460.664H712.4V487.327H749.497V513.989H685.736V434ZM762.247 434H826.007V457.186H788.911V461.822H826.007V515.15H762.249V490.802H799.345V486.165H762.245V434H762.247ZM838.76 434H902.519V457.186H865.424V461.822H902.519V515.15H838.76V490.802H875.856V486.165H838.762V434H838.76Z"
fill="#3F3D56" />
<path id="svg_html_text"
d="M128.49 312H154.792V337.986H178.853V312H205.157V390.693H178.855V364.342H154.794V390.693H128.492V312H128.49ZM239.744 338.096H216.592V312H289.217V338.096H266.051V390.693H239.749V338.096H239.744ZM300.743 312H328.169L345.039 339.651L361.893 312H389.33V390.693H363.134V351.688L345.039 379.668H344.585L326.478 351.688V390.693H300.743V312ZM402.419 312H428.73V364.682H465.718V390.693H402.418V312H402.419Z"
fill="#3F3D56" />
<path d="M82.034 366.091L79.876 390.558L97.146 389.118V368.25L82.034 366.091Z"
fill="#FFB8B8" />
<path d="M66.203 366.091L68.362 390.558L51.092 389.118V368.25L66.203 366.091Z"
fill="#FFB8B8" />
<path
d="M111.538 178.276C111.538 178.276 117.295 212.816 117.295 217.854C117.295 222.891 115.136 255.273 111.538 261.749C107.94 268.226 107.22 271.104 108.66 273.982C110.099 276.861 109.379 276.141 108.66 278.3C107.94 280.459 106.501 279.739 108.66 282.618C109.541 283.885 110.014 285.392 110.014 286.935C110.014 288.479 109.541 289.986 108.66 291.253C107.22 293.412 111.538 351.699 105.781 356.017C100.024 360.334 98.5852 374.726 98.5852 374.726L79.8756 372.568V356.736C79.8756 356.736 75.558 345.223 78.4364 338.027C81.3148 330.831 82.754 292.692 82.754 292.692C82.754 292.692 82.0344 289.094 82.754 286.935C83.4736 284.776 82.754 283.337 81.3148 282.618C79.8756 281.898 79.156 279.02 79.156 279.02L76.9972 226.489L68.362 278.3C68.362 278.3 76.9972 348.821 68.362 358.176V374.726H49.6524L52.5308 356.736C52.5308 356.736 46.774 340.186 49.6524 336.588C52.5308 332.99 41.0172 275.422 42.4564 273.263C43.8956 271.104 43.176 270.384 42.4564 268.945C41.7368 267.506 39.578 266.067 40.2976 264.628C41.0172 263.188 40.2976 260.31 40.2976 260.31C40.2976 260.31 26.6252 192.668 33.1016 186.191C39.578 179.715 111.538 178.276 111.538 178.276Z"
fill="#2F2E41" />
<path
d="M84.1932 381.203C84.1932 381.203 85.6324 374.301 97.146 376.673C97.146 376.673 100.024 382.642 100.024 385.52C100.024 388.399 102.903 407.828 102.903 407.828C102.903 407.828 114.416 427.257 100.024 427.257C85.6324 427.257 80.5952 422.22 79.8756 417.183C79.156 412.146 80.5952 410.706 77.7168 408.548C74.8384 406.389 73.3992 406.389 74.1188 403.51C74.8384 400.632 76.2776 386.24 76.2776 386.24C76.2776 386.24 76.9972 375.446 80.955 378.324L84.9128 381.203"
fill="#2F2E41" />
<path
d="M64.0444 381.203C64.0444 381.203 62.6052 374.301 51.0916 376.673C51.0916 376.673 48.2132 382.642 48.2132 385.52C48.2132 388.399 45.3348 407.828 45.3348 407.828C45.3348 407.828 33.8212 427.257 48.2132 427.257C62.6052 427.257 67.6424 422.22 68.362 417.183C69.0816 412.146 67.6424 410.706 70.5208 408.548C73.3992 406.389 74.8384 406.389 74.1188 403.51C73.3992 400.632 71.96 386.24 71.96 386.24C71.96 386.24 71.2404 375.446 67.2826 378.324L63.3248 381.203"
fill="#2F2E41" />
<path
d="M84.9128 45.8693C95.6432 45.8693 104.342 37.1706 104.342 26.4401C104.342 15.7097 95.6432 7.01091 84.9128 7.01091C74.1823 7.01091 65.4836 15.7097 65.4836 26.4401C65.4836 37.1706 74.1823 45.8693 84.9128 45.8693Z"
fill="#FFB8B8" />
<path
d="M69.0816 29.3185C69.0816 29.3185 61.166 60.2613 59.7268 60.9809C58.2876 61.7005 92.8284 64.5789 92.8284 64.5789C92.8284 64.5789 84.1932 37.9537 92.8284 33.6361L69.0816 29.3185Z"
fill="#FFB8B8" />
<path
d="M64.0264 48.1749L64.0255 48.1709L40.2976 64.5789L44.6152 193.387C44.6152 193.387 76.2776 189.789 83.4736 190.509C90.6696 191.228 113.697 184.032 113.697 184.032L103.61 62.9967C103.413 60.6317 102.377 58.4151 100.688 56.7477C98.9992 55.0803 96.7696 54.072 94.4022 53.905L90.0805 53.6003C90.0805 53.6003 85.7632 64.2896 72.7737 58.7749C70.5836 57.8222 68.6496 56.3655 67.1295 54.5234C65.6094 52.6813 64.5461 50.506 64.0264 48.1749V48.1749Z"
fill="#D0CDE1" />
<path
d="M64.6002 47L35.2604 60.9809L29.5036 143.735C29.5036 143.735 17.99 193.387 27.3448 207.779C36.6996 222.171 52.5308 223.61 52.5308 223.61C52.5308 223.61 73.3992 140.856 67.6424 112.792C61.8856 84.7277 64.6002 47 64.6002 47Z"
fill="#575A89" />
<path
d="M9.35479 171.799V182.593C9.35479 182.593 5.03719 206.34 18.7096 205.62C32.382 204.901 25.9056 179.715 25.9056 179.715L21.588 171.799H9.35479Z"
fill="#FFB8B8" />
<path
d="M136.004 193.387L134.565 205.62C134.565 205.62 141.761 230.087 128.089 230.806C114.416 231.526 124.341 205.771 124.341 205.771L128.808 191.948L136.004 193.387Z"
fill="#FFB8B8" />
<path
d="M89.6475 51.0854C102.759 54.315 114.91 60.6311 125.086 69.5075L125.21 69.6161L115.136 122.866L113.697 142.296C113.697 142.296 140.322 237.283 109.379 223.61C109.379 223.61 82.754 140.856 86.352 102.718C89.95 64.5789 89.6475 51.0854 89.6475 51.0854Z"
fill="#575A89" />
<path
d="M115.856 68.8965C116.575 68.1769 125.21 69.8965 125.21 69.8965C125.21 69.8965 141.042 125.745 141.042 135.1C141.042 144.454 143.2 197.705 143.2 197.705L124.205 199.62L108.83 125.633L115.856 68.8965Z"
fill="#575A89" />
<path
d="M40.2976 60.9809H35.2604C35.2604 60.9809 20.8684 66.7377 20.1488 73.2141C19.4292 79.6905 0 145.174 0 145.174L5.0372 178.276L23.7468 175.397L27.3448 138.698L46.0544 98.4001L40.2976 60.9809Z"
fill="#575A89" />
<path
d="M81.1382 31.8626L81.8831 26.6697C82.0567 25.4593 82.7651 23.8679 83.9427 24.1971C84.9443 24.4771 87.1265 25.3344 87.4918 25.0756C88.86 24.1064 90.9305 25.8012 92.3692 24.9402C92.972 24.5794 93.3652 23.8066 94.0659 23.755C94.5359 23.785 94.9788 23.9857 95.3114 24.3192C96.2453 25.1314 97.3458 25.7293 98.5355 26.0707C99.1323 26.2332 99.7618 26.2332 100.359 26.0705C100.955 25.9078 101.498 25.5885 101.93 25.1456C102.082 24.9096 102.288 24.7126 102.53 24.5702C102.814 24.4883 103.118 24.5022 103.393 24.6099L107.069 25.6108C107.61 23.6505 107.721 21.5965 107.395 19.5894C107.068 17.5822 106.313 15.6692 105.179 13.9809C103.688 11.9566 101.88 10.186 99.825 8.73727C97.5485 7.00535 95.1991 5.37634 92.7768 3.85026C90.2087 2.0333 87.2938 0.76512 84.2138 0.124877C81.1138 -0.345873 77.6426 0.496343 75.6927 2.95187C74.7755 2.28806 74.0861 1.35677 73.7191 0.285705C73.5004 0.484624 73.3281 0.729123 73.2143 1.00192C73.1005 1.27472 73.0479 1.56917 73.0604 1.8645C73.0728 2.15983 73.1499 2.44883 73.2862 2.7111C73.4226 2.97338 73.6148 3.20254 73.8494 3.38238L70.7404 1.39703C69.8664 2.3147 71.574 3.97872 70.8293 5.00413C70.6041 5.25775 70.3151 5.44645 69.9923 5.55063C68.3042 6.20859 66.757 7.1824 65.4337 8.41988C63.7582 10.3287 62.5314 12.5885 61.8434 15.0334C59.9908 20.3484 58.6443 26.4436 61.2765 31.4188C61.575 31.9828 65.514 41.2923 66.0387 41.6553C67.8127 42.8825 66.6579 39.9126 67.9291 41.6553C68.9259 43.0219 68.7393 37.7915 70.2207 38.9396C70.8015 39.3552 71.4903 39.5934 72.2038 39.6255C72.9172 39.6576 73.6246 39.4821 74.2404 39.1204C74.8546 38.6944 74.6567 36.3291 74.3253 34.1571C74.2619 33.7433 74.301 33.3204 74.439 32.9253C74.5771 32.5302 74.81 32.1749 75.1173 31.8908C75.4246 31.6066 75.797 31.4022 76.2017 31.2953C76.6064 31.1885 77.0311 31.1826 77.4386 31.2781C79.2837 31.7122 81.1066 32.0831 81.1382 31.8626Z"
fill="#2F2E41" />
<path opacity="0.2" d="M117.655 134.02L125.57 199.504H120.533L117.655 134.02Z"
fill="black" />
<path opacity="0.2" d="M34.181 108.834L30.179 134.02L37.779 108.834H35.62H34.181Z"
fill="black" />
<defs>
<clipPath id="clip0_0_1">
<rect width="1015.13" height="526" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="dropdown px-md-5 col-md-6 d-flex flex-column align-items-center justify-content-center animate__animated animate__fadeInUp animate__delay-1s">
<h2 class="main-heading mb-0 techstack_head">My <span class="my_techstacks">Tech
Stacks</span>
</h2>
<p class="pre-heading font-weight-bolder"
class="mb-0 mt-3 text-center animate__animated animate__zoomIn animate__delay-2s">
The combination of technology that i like to work with
</p>
<div class="techstacks_icons" style="display: flex;flex-wrap: wrap;">
<div class="html_icon techstack_icon"><i class="fab fa-html5"></i></div>
<div class="css_icon techstack_icon"><i class="fab fa-css3-alt"></i></div>
<div class="js_icon techstack_icon"><i class="fab fa-js-square"></i></div>
<div class="node_icon techstack_icon"><i class="fab fa-node"></i></div>
<div class="python_icon techstack_icon"><i class="fab fa-python"></i></div>
<div class="cpp_icon techstack_icon"><i class="fab fa-cuttlefish">++</i></div>
<div class="c_icon techstack_icon"><i class="fab fa-cuttlefish"></i></div>
<div class="git_icon techstack_icon"><i class="fab fa-git-alt"></i></div>
<div class="bootstrap_icon techstack_icon"><i class="fab fa-bootstrap"></i></div>
<div class="react_icon techstack_icon"><i class="fab fa-react"></i></div>
</div>
</div>
</div>
</div>
</section>
<h4 class="text-center heading1 skill-head">MY <span class="my_skill">SKILLS</span></h4>
<main class="techstack-box" style="padding: 20px;">
<!-- <div class="row page-content techstackcards"></div> -->
<!-- Dynamic techstack card -->
</main>
</div>
<!--Cursor-->
<div class="cursor-dot-outline"></div>
<div class="cursor-dot"></div>
<!-- Dynamic footer section -->
<!-- script -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/cursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="assets/js/techstack.js"></script>
</body>
</html>