Skip to content

Commit a33f97b

Browse files
PkLavcPkLavc
committed
up tech
1 parent 2e31e69 commit a33f97b

2 files changed

Lines changed: 70 additions & 7 deletions

File tree

‎css/global.css‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,11 +178,49 @@ body.ready .footer-minimal {
178178
.navigation-links a::before{ content: ""; position: absolute; top:50%; left: 50%; display: flex; justify-content: center; transform: translate(-50%,-50%); align-items: center; font-size: 5em; font-weight: 400; font-family: monoton; color:rgb(255, 255, 255,.1); z-index: 1; pointer-events: none; opacity: 0; letter-spacing: 100px; transition: all .4s ease; }
179179
.navigation-links a:hover::before{ content: attr(data-text); opacity: 1; letter-spacing: 10px; }
180180

181-
.contact{ display: flex; position: absolute; width: 10%; right: 0; top: 0; height: 100%; align-items: center; justify-content: center; flex-direction: column; z-index: 3; }
181+
.contact{
182+
display: flex;
183+
position: absolute;
184+
right: max(12px, 1.8vw);
185+
top: 110px;
186+
height: calc(100% - 130px);
187+
width: 76px;
188+
align-items: flex-start;
189+
justify-content: center;
190+
flex-direction: column;
191+
z-index: 3;
192+
pointer-events: none;
193+
}
182194
.contact a{ z-index: 3; }
183-
.contact img{ margin:10px; height:30px; opacity: .6; transition: all .4s ease; }
195+
.contact img{ margin:8px auto; height:32px; opacity: .72; transition: all .4s ease; }
184196
.contact img:hover{ opacity: 1; transform: scale(1.1); }
185197

198+
.techstack-carousel {
199+
width: 100%;
200+
max-height: min(66vh, 460px);
201+
overflow: hidden;
202+
pointer-events: auto;
203+
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
204+
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
205+
}
206+
207+
.techstack-track {
208+
display: flex;
209+
flex-direction: column;
210+
gap: 6px;
211+
animation: techstackScrollDown 22s linear infinite;
212+
will-change: transform;
213+
}
214+
215+
@keyframes techstackScrollDown {
216+
from {
217+
transform: translateY(-50%);
218+
}
219+
to {
220+
transform: translateY(0);
221+
}
222+
}
223+
186224
/* keep scale animation globally available */
187225
@keyframes scale{ 0%{ transform: scale(.6);} 100%{ transform: scale(1);} }
188226

‎index.html‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1151,11 +1151,36 @@ <h2 class="main-info">Solutions Architect (Technical Owner)<br>| Systems Design
11511151
</div>
11521152
</div>
11531153
<div class="contact" aria-label="Technical skills and technologies">
1154-
<img src="images/Python.svg" alt="Python programming icon" class="contactpic" aria-label="Python programming">
1155-
<lottie-player src="images/Da_Vinci.json" background="transparent" speed="1" loop autoplay class="contactpic contactpic-lottie" title="AI and data engineering icon"></lottie-player>
1156-
<img align="center" alt="PostgreSQL database icon" height="35" src="https://raw.githubusercontent.com/PkLavc/PkLavc/fad9455729c13ae490bad3cda42059019add319f/resources/Icons/Static/postgresql-original.svg" class="contactpic" aria-label="PostgreSQL database">
1157-
<img align="center" alt="Docker containerization icon" height="35" src="https://raw.githubusercontent.com/PkLavc/PkLavc/fad9455729c13ae490bad3cda42059019add319f/resources/Icons/Animated/Docker.svg" class="contactpic" aria-label="Docker containerization">
1158-
<img align="center" alt="RESTful APIs icon" height="35" src="https://raw.githubusercontent.com/PkLavc/PkLavc/fad9455729c13ae490bad3cda42059019add319f/resources/Icons/Animated/APIs%20RESTful.svg" class="contactpic" aria-label="RESTful APIs">
1154+
<div class="techstack-carousel" aria-hidden="true">
1155+
<div class="techstack-track">
1156+
<img src="images/techstack/python-icon.svg" alt="Python icon" class="contactpic" aria-label="Python">
1157+
<img src="images/techstack/aws-icon.svg" alt="AWS icon" class="contactpic" aria-label="Amazon Web Services">
1158+
<img src="images/techstack/docker-icon.svg" alt="Docker icon" class="contactpic" aria-label="Docker">
1159+
<img src="images/techstack/restapi-icon.svg" alt="REST API icon" class="contactpic" aria-label="REST APIs">
1160+
<img src="images/techstack/mysql-icon.svg" alt="MySQL icon" class="contactpic" aria-label="MySQL">
1161+
<img src="images/techstack/django-icon.svg" alt="Django icon" class="contactpic" aria-label="Django">
1162+
<img src="images/techstack/ts-icon.svg" alt="TypeScript icon" class="contactpic" aria-label="TypeScript">
1163+
<img src="images/techstack/js-icon.svg" alt="JavaScript icon" class="contactpic" aria-label="JavaScript">
1164+
<img src="images/techstack/java-icon.svg" alt="Java icon" class="contactpic" aria-label="Java">
1165+
<img src="images/techstack/react-icon.svg" alt="React icon" class="contactpic" aria-label="React">
1166+
<img src="images/techstack/github-icon.svg" alt="GitHub icon" class="contactpic" aria-label="GitHub">
1167+
<img src="images/techstack/csharp-icon.svg" alt="C Sharp icon" class="contactpic" aria-label="C Sharp">
1168+
<img src="images/techstack/cpp-icon.svg" alt="C Plus Plus icon" class="contactpic" aria-label="C Plus Plus">
1169+
<img src="images/techstack/python-icon.svg" alt="" class="contactpic" aria-hidden="true">
1170+
<img src="images/techstack/aws-icon.svg" alt="" class="contactpic" aria-hidden="true">
1171+
<img src="images/techstack/docker-icon.svg" alt="" class="contactpic" aria-hidden="true">
1172+
<img src="images/techstack/restapi-icon.svg" alt="" class="contactpic" aria-hidden="true">
1173+
<img src="images/techstack/mysql-icon.svg" alt="" class="contactpic" aria-hidden="true">
1174+
<img src="images/techstack/django-icon.svg" alt="" class="contactpic" aria-hidden="true">
1175+
<img src="images/techstack/ts-icon.svg" alt="" class="contactpic" aria-hidden="true">
1176+
<img src="images/techstack/js-icon.svg" alt="" class="contactpic" aria-hidden="true">
1177+
<img src="images/techstack/java-icon.svg" alt="" class="contactpic" aria-hidden="true">
1178+
<img src="images/techstack/react-icon.svg" alt="" class="contactpic" aria-hidden="true">
1179+
<img src="images/techstack/github-icon.svg" alt="" class="contactpic" aria-hidden="true">
1180+
<img src="images/techstack/csharp-icon.svg" alt="" class="contactpic" aria-hidden="true">
1181+
<img src="images/techstack/cpp-icon.svg" alt="" class="contactpic" aria-hidden="true">
1182+
</div>
1183+
</div>
11591184
</div>
11601185
</div>
11611186
</div>

0 commit comments

Comments
 (0)