summaryrefslogtreecommitdiff
path: root/locations
diff options
context:
space:
mode:
authortalha <talha@talhaamir.xyz>2024-08-11 12:36:08 +0500
committertalha <talha@talhaamir.xyz>2024-08-11 12:36:08 +0500
commitd0549aedbcf940940f061bd50b4592579006f903 (patch)
treee9d1117f49f0ca3ded7a17dc9e3870e512b07f63 /locations
parentf6fe7f7229318bbb877e675be562bf9b17c52172 (diff)
redesigned the identities page
Diffstat (limited to 'locations')
-rw-r--r--locations/identities.html178
1 files changed, 120 insertions, 58 deletions
diff --git a/locations/identities.html b/locations/identities.html
index 89ed2ed..dad9dab 100644
--- a/locations/identities.html
+++ b/locations/identities.html
@@ -5,15 +5,44 @@
<title>talha's corner</title>
</head>
<style>
+ :root {
+ --bright-green: #8ae234;
+ --bright-yellow: #fce94f;
+ --bright-blue: #32afff;
+ --bright-red: #ef2929;
+ --bright-magenta: #ad7fa8;
+ --red: #cc0000;
+ --green: #4e9a06;
+ --yellow: #c4a000;
+ --blue: #729fcf;
+ --magenta: #75507b;
+ --cyan: #06989a;
+ --white: #d3d7cf;
+ }
+
@font-face {
font-family: interceptor;
src: url('/assets/interceptor/Interceptor.otf')
}
+ .fill-available {
+ width: 100%;
+ width: -moz-available;
+ /* WebKit-based browsers will ignore this. */
+ width: -webkit-fill-available;
+ /* Mozilla-based browsers will ignore this. */
+ width: fill-available;
+ }
+ .neon-text {
+ text-shadow: 0 0 1.25rem #61c161;
+ }
+
html {
background-color: black;
color: white;
font-family: interceptor;
+ background-image: url('/assets/terminal-background.png');
+ background-size: cover;
}
.profiles-ctn {
@@ -52,30 +81,46 @@
padding: 5px 10px 5px 10px;
}
- .profile ul li a {
- color: #fce94f;
- }
-
.desc {
font-size: 18px;
- color: white;
+ color: var(--bright-green);
}
.small {
font-size: 16px;
color: white;
+ text-shadow: 0 0 1.25rem var(--white);
}
.high {
- color: #4e9a06;
+ color: var(--green);
+ text-shadow: 0 0 1.25rem var(--bright-green);
}
.medium {
- color: #c4a000;
+ color: var(--yellow);
+ text-shadow: 0 0 1.25rem var(--bright-yellow);
+ }
+
+ .low,
+ .error {
+ color: var(--red);
+ text-shadow: 0 0 1.25rem var(--bright-red);
}
- .low {
- color: #cc0000;
+ .git {
+ color: var(--bright-yellow);
+ text-shadow: 0 0 1.25rem var(--bright-yellow);
+ }
+
+ .linkedin {
+ color: var(--bright-blue);
+ text-shadow: 0 0 1.25rem var(--bright-blue);
+ }
+
+ .email {
+ color: var(--bright-magenta);
+ text-shadow: 0 0 1.25rem var(--magenta);
}
.p1 {
@@ -88,74 +133,91 @@
animation: MoveUpDown 6s ease-in-out infinite;
}
+ .info-text {
+ font-size: 22px;
+ color: #4af626;
+ top: 8%;
+ left: 8%;
+ }
+
.return-link {
- position: fixed;
- color: #ef2929;
- text-decoration: none;
+ color: var(--bright-green);
+ text-decoration: underline dashed var(--bright-green);
padding: 5px;
- border: 2px double #ef2929;
- font-size: 20px;
- top: 5%;
- right: 5%;
- transform: rotate(3deg);
+ font-size: 22px;
+ top: 8%;
+ right: 8%;
}
- @keyframes MoveUpDown {
- 0%,
- 100% {
- translate: 0;
- }
+ .flexv {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ }
- 50% {
- translate: 0 -20px;
- }
+ .flexh {
+ display: flex;
+ flex-direction: row;
}
- @keyframes MoveDownUp {
- 0%,
- 100% {
- translate: 0;
- }
- 50% {
- translate: 0 20px;
- }
+ .sb {
+ justify-content: space-between;
+ }
+
+ .se {
+ justify-content: space-evenly;
+ }
+ .top-ele {
+ margin-top: 5%;
+ max-width: 80%;
+ }
+ .bot-ele {
+ margin-top: 5%;
+ max-width: 80%;
}
</style>
-<body>
- <a class="return-link" href="/index.html">close</a>
- <div class="profiles-ctn">
- <div class="profile-section p1">
- <div class="heading">
- code
- </div>
-
- <div class="profile">
- <ul>
- <li><a href="https://www.git.talhaamir.xyz">cgit</a></li>
- <li class="desc">home to experiments, playground projects <br />
- and graveyards of unfinished works</li>
- <li class="small">usage frequency: <small class="high">high</small></li>
- </ul>
- <ul>
- <li><a href="https://www.github.com/sarcxd">github</a></li>
- <li class="desc">tracker for traces of older works</li>
- <li class="small">usage frequency: <small class="low">low</small></li>
- </ul>
- </div>
+<body class="flexv">
+ <div class="flexh sb fill-available top-ele">
+ <div class="info-text neon-text">
+ Searching recorded profiles... found 5 instances.<br />
+ Loading resources...<br />
+ Loaded profile <b class="git">cgit</b><br />
+ Loaded profile <b class="git">github</b><br />
+ Loaded profile <b class="email">email</b><br />
+ Loaded profile <b class="linkedin">linkedin</b><br />
+ <b class="error">Failed</b> to load profile ☐. Connection timed out... retrying in 5(s)<br />
+ Parsing profiles...<br />
+ Profiled loaded successfully</br>
+ </div>
+ <a class="return-link neon-text" href="/index.html">close</a>
+ </div>
+ <div class="flexh se fill-available bot-ele">
+ <div class="profile">
+ <ul>
+ <li><a class="git" href="https://www.git.talhaamir.xyz">cgit</a></li>
+ <li class="desc neon-text">home to experiments, playground projects <br />
+ and graveyards of unfinished works</li>
+ <li class="small">usage frequency: <small class="high">high</small></li>
+ </ul>
+ <ul>
+ <li><a class="git" href="https://www.github.com/sarcxd">github</a></li>
+ <li class="desc neon-text">tracker for traces of older works</li>
+ <li class="small">usage frequency: <small class="low">low</small></li>
+ </ul>
</div>
- <div class="profile p2">
+ <div class="profile">
<ul>
- <li><a href="https://www.linkedin.com/in/talha-aamir-0253a1168/">linkedin</a></li>
+ <li><a class="linkedin" href="https://www.linkedin.com/in/talha-aamir-0253a1168/">linkedin</a></li>
<li class="small">usage frequency: <small class="medium">medium</small></li>
</ul>
<ul>
- <li><a href="mailto://talhaaamir@gmail.com">email</a></li>
+ <li ><a class="email" href="mailto:talhaaamir@gmail.com">email</a></li>
<li class="small">usage frequency: <small class="high">high</small></li>
</ul>
</div>
</div>
- </profiles-body>
</body>
</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-21 19:01:17 +0000