initial
This commit is contained in:
BIN
assets/lain.png
Normal file
BIN
assets/lain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
97
css/content.css
Normal file
97
css/content.css
Normal file
@@ -0,0 +1,97 @@
|
||||
/* content.css - Layout, glassmorphism, and content styles */
|
||||
.glass {
|
||||
background: rgba(20, 20, 20, 0.125);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.125);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.10);
|
||||
backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
padding: 32px 24px;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
min-width: 26rem;
|
||||
max-width: 26rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.email-tooltip {
|
||||
position: absolute;
|
||||
background: rgba(40, 40, 40, 0.95);
|
||||
color: #fff;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
width: max-content;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Stylish tooltip for email copy */
|
||||
.email-tooltip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -32px;
|
||||
transform: translateX(-50%) scale(1);
|
||||
background: rgba(40, 40, 40, 0.95);
|
||||
color: #fff;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
}
|
||||
58
css/matrix.css
Normal file
58
css/matrix.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* matrix.css - Matrix animation styles */
|
||||
.matrix-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
background-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,40,0.7) 100%);
|
||||
filter: brightness(0.55);
|
||||
}
|
||||
|
||||
.matrix-dot {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.connection-line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(100, 149, 237, 0) 0%,
|
||||
rgba(138, 43, 226, 0.8) 50%,
|
||||
rgba(100, 149, 237, 0) 100%);
|
||||
transform-origin: left center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.connection-line.active {
|
||||
opacity: 1;
|
||||
animation: connectionPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes connectionPulse {
|
||||
0% {
|
||||
filter: brightness(1);
|
||||
box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
50% {
|
||||
filter: brightness(1.5);
|
||||
box-shadow: 0 0 8px rgba(138, 43, 226, 0.6), 0 0 16px rgba(100, 149, 237, 0.3);
|
||||
}
|
||||
100% {
|
||||
filter: brightness(1);
|
||||
box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
}
|
||||
153
css/sections/hero.css
Normal file
153
css/sections/hero.css
Normal file
@@ -0,0 +1,153 @@
|
||||
.hero-details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.hero-main-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
padding: 48px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 32px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
padding: 12px 20px;
|
||||
background: rgba(10, 18, 40, 0.85);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
box-shadow: 0 2px 16px 0 rgba(31, 38, 135, 0.12);
|
||||
transition: background 0.18s, transform 0.18s;
|
||||
}
|
||||
/* Modern underline effect under text */
|
||||
.social-link span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
.social-link span::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #fff 0%, #667eea 100%);
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
opacity: 0.7;
|
||||
transition: height 0.18s, opacity 0.18s;
|
||||
}
|
||||
.social-link:hover {
|
||||
background: rgba(20, 30, 60, 0.95);
|
||||
transform: translateY(-1px) scale(1.03);
|
||||
}
|
||||
.social-link:hover span::after {
|
||||
height: 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-details {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
.hero-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-card {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-card {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
68
css/sections/homelab.css
Normal file
68
css/sections/homelab.css
Normal file
@@ -0,0 +1,68 @@
|
||||
.homelab-section {
|
||||
margin-top: 18px;
|
||||
padding: 32px 24px;
|
||||
background: rgba(20, 20, 30, 0.10);
|
||||
backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255,255,255,0.10);
|
||||
min-width: 26rem;
|
||||
max-width: 26rem;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
.homelab-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.03em;
|
||||
background: linear-gradient(270deg, #764ba2, #2b2e6c, #764ba2, #2b2e6c);
|
||||
background-size: 400% 400%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: homelab-gradient-move 12s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes homelab-gradient-move {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
.homelab-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.homelab-btn {
|
||||
padding: 12px 28px;
|
||||
background: rgba(10, 18, 40, 0.85);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.18), 0 1.5px 0 rgba(255,255,255,0.08);
|
||||
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.homelab-btn:hover {
|
||||
background: rgba(20, 30, 60, 0.95);
|
||||
transform: translateY(-2px) scale(1.04);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.28);
|
||||
}
|
||||
.homelab-btn:active {
|
||||
transform: translateY(0px) scale(1.0);
|
||||
}
|
||||
78
css/sections/profile.css
Normal file
78
css/sections/profile.css
Normal file
@@ -0,0 +1,78 @@
|
||||
/* Profile Info Section Styles */
|
||||
.profile-info {
|
||||
margin-top: 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.profile-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.95rem;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.profile-info-item i {
|
||||
font-size: 1.3rem;
|
||||
color: #4fc3f7;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.profile-info-label {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.profile-info-value {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.profile-info-value span {
|
||||
display: block;
|
||||
}
|
||||
/* profile.css - Styles for avatar and avatar-container */
|
||||
|
||||
.profile-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.avatar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 24px;
|
||||
}
|
||||
74
css/sections/projects.css
Normal file
74
css/sections/projects.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.projects-section {
|
||||
flex: 0 0 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding: 32px 24px;
|
||||
background: rgba(20, 20, 30, 0.10);
|
||||
backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255,255,255,0.10);
|
||||
min-width: 280px;
|
||||
max-width: 340px;
|
||||
margin-left: 20px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.projects-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
letter-spacing: 0.03em;
|
||||
background: linear-gradient(135deg, #667eea 0%, #fff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.project {
|
||||
padding: 18px 16px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px 0 rgba(31, 38, 135, 0.10);
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
transition: transform 0.18s, box-shadow 0.18s;
|
||||
}
|
||||
.project:nth-child(odd) {
|
||||
background: linear-gradient(135deg, rgba(20, 30, 60, 0.75) 0%, rgba(40, 50, 120, 0.75) 100%);
|
||||
}
|
||||
.project:nth-child(even) {
|
||||
background: linear-gradient(135deg, rgba(10, 10, 10, 0.82) 0%, rgba(30, 30, 30, 0.82) 100%);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 2px;
|
||||
letter-spacing: 0.01em;
|
||||
background: linear-gradient(90deg, #fff 0%, #667eea 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
font-size: 0.98rem;
|
||||
color: rgba(255,255,255,0.85);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.projects-section {
|
||||
flex: unset;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
17
css/style.css
Normal file
17
css/style.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* style.css - Glassmorphism and layout styles */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; */
|
||||
font-family: "Lexend", sans-serif;
|
||||
background: #000000;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
108
index.html
Normal file
108
index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ivanch - Portfolio</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/button.css">
|
||||
<link rel="stylesheet" href="css/matrix.css">
|
||||
<link rel="stylesheet" href="css/content.css">
|
||||
|
||||
<link rel="stylesheet" href="css/sections/profile.css">
|
||||
|
||||
<link rel="stylesheet" href="css/sections/hero.css">
|
||||
<link rel="stylesheet" href="css/sections/projects.css">
|
||||
<link rel="stylesheet" href="css/sections/homelab.css">
|
||||
<!-- Remix Icon CDN for social icons -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Matrix-like background animation -->
|
||||
<div class="matrix-canvas" id="matrixCanvas"></div>
|
||||
|
||||
<!-- Main hero section -->
|
||||
<main class="main-container">
|
||||
<div class="hero-card glass">
|
||||
<div class="profile-container">
|
||||
<div class="avatar">
|
||||
<img src="/assets/lain.png" alt="Avatar" />
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-info-item">
|
||||
<i class="ri-graduation-cap-fill"></i>
|
||||
<span class="profile-info-value">
|
||||
<span>UTFPR</span>
|
||||
<span>Informations Systems</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="profile-info-item">
|
||||
<i class="ri-building-2-fill"></i>
|
||||
<span class="profile-info-value">
|
||||
<span>EposNow</span>
|
||||
<span>Software Engineer</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="profile-info-item">
|
||||
<i class="ri-book-2-fill"></i>
|
||||
<span class="profile-info-value">5+ years</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-details">
|
||||
<div class="hero-main-column">
|
||||
<div class="content">
|
||||
<h2 class="name">ivanch</h2>
|
||||
<p class="description">Developer and Self Hoster</p>
|
||||
<div class="social-links">
|
||||
<a href="https://www.linkedin.com/in/joseivanch/" class="social-link" target="_blank">
|
||||
<i class="ri-linkedin-fill"></i> <span>LinkedIn</span>
|
||||
</a>
|
||||
<a href="#" class="social-link" id="email-link">
|
||||
<i class="ri-mail-fill"></i> <span>Email</span>
|
||||
</a>
|
||||
<span class="email-tooltip" id="email-tooltip">Copied!</span>
|
||||
<a href="https://github.com/ivanch" class="social-link" target="_blank">
|
||||
<i class="ri-github-fill"></i> <span>GitHub</span>
|
||||
</a>
|
||||
<a href="https://git.ivanch.me/ivanch" class="social-link" target="_blank">
|
||||
<i class="ri-git-repository-fill"></i> <span>Gitea</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homelab-section">
|
||||
<h3 class="homelab-title">Homelab</h3>
|
||||
<div class="homelab-buttons">
|
||||
<a href="#" class="homelab-btn">Diagram</a>
|
||||
<a href="#" class="homelab-btn">Main Applications</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-section">
|
||||
<h3 class="projects-title">Projects</h3>
|
||||
<div class="project">
|
||||
<div class="project-title">OpenCand</div>
|
||||
<div class="project-desc">Brazilian Candidate Viewer.</div>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="project-title">Vision Start</div>
|
||||
<div class="project-desc">Chrome Startpage.</div>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="project-title">Kasbot</div>
|
||||
<div class="project-desc">Discord DJ bot.</div>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="project-title">Candlebright</div>
|
||||
<div class="project-desc">C++ project game.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/matrix.js"></script>
|
||||
<script src="js/social.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
314
js/matrix.js
Normal file
314
js/matrix.js
Normal file
@@ -0,0 +1,314 @@
|
||||
class MatrixBackground {
|
||||
constructor() {
|
||||
this.canvas = document.getElementById('matrixCanvas');
|
||||
this.dots = [];
|
||||
this.connections = [];
|
||||
this.config = {
|
||||
dotCount: 50,
|
||||
dotSpeed: 0.2, // pixels per frame
|
||||
connectionDuration: { min: 2000, max: 6000 }, // milliseconds
|
||||
connectionChance: 0.0002, // chance per frame per dot pair
|
||||
maxConnections: 8, // maximum simultaneous connections
|
||||
dotSize: 3,
|
||||
colors: {
|
||||
dotDefault: 'rgba(255, 255, 255, 0.8)',
|
||||
dotDefaultGlow: 'rgba(255, 255, 255, 0.4)',
|
||||
dotConnected: 'rgba(100, 149, 237, 0.8)',
|
||||
dotConnectedGlow: 'rgba(100, 149, 237, 0.6)',
|
||||
connection: {
|
||||
start: 'rgba(100, 149, 237, 0)',
|
||||
middle: 'rgba(138, 43, 226, 0.8)',
|
||||
end: 'rgba(100, 149, 237, 0)'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createDots();
|
||||
this.animate();
|
||||
this.handleResize();
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', () => this.handleResize());
|
||||
}
|
||||
|
||||
handleResize() {
|
||||
// Recreate dots with new screen dimensions
|
||||
// Clear previous DOM elements to avoid orphan/sticky dots
|
||||
this.clearCanvas();
|
||||
this.createDots();
|
||||
}
|
||||
|
||||
clearCanvas() {
|
||||
// Remove all dot and connection elements from the canvas
|
||||
try {
|
||||
while (this.canvas.firstChild) {
|
||||
this.canvas.removeChild(this.canvas.firstChild);
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
// Reset arrays
|
||||
this.dots = [];
|
||||
this.connections = [];
|
||||
}
|
||||
|
||||
createDots() {
|
||||
this.dots = [];
|
||||
for (let i = 0; i < this.config.dotCount; i++) {
|
||||
this.createDot();
|
||||
}
|
||||
}
|
||||
|
||||
createDot() {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'matrix-dot';
|
||||
|
||||
// Random starting position within screen bounds
|
||||
const startX = Math.random() * (window.innerWidth - 20) + 10;
|
||||
const startY = Math.random() * (window.innerHeight - 20) + 10;
|
||||
|
||||
// Random movement direction (flying in all directions)
|
||||
let velocityX = 0, velocityY = 0;
|
||||
let attempts = 0;
|
||||
while ((Math.abs(velocityX) < 0.15 || Math.abs(velocityY) < 0.15) && attempts < 10) {
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const speed = this.config.dotSpeed * (0.8 + Math.random() * 0.4); // Ensure minimum speed
|
||||
velocityX = Math.cos(angle) * speed;
|
||||
velocityY = Math.sin(angle) * speed;
|
||||
attempts++;
|
||||
}
|
||||
// Final fallback if still too low
|
||||
if (Math.abs(velocityX) < 0.15) velocityX = velocityX < 0 ? -0.15 : 0.15;
|
||||
if (Math.abs(velocityY) < 0.15) velocityY = velocityY < 0 ? -0.15 : 0.15;
|
||||
const dotData = {
|
||||
element: dot,
|
||||
x: startX,
|
||||
y: startY,
|
||||
vx: velocityX,
|
||||
vy: velocityY,
|
||||
opacity: Math.random() * 0.3 + 0.7,
|
||||
size: this.config.dotSize + Math.random() * 2,
|
||||
isConnected: false,
|
||||
connectionCount: 0,
|
||||
stuckFrames: 0 // Track how long dot is stuck
|
||||
};
|
||||
|
||||
// Set initial styles (white by default)
|
||||
dot.style.left = startX + 'px';
|
||||
dot.style.top = startY + 'px';
|
||||
dot.style.width = dotData.size + 'px';
|
||||
dot.style.height = dotData.size + 'px';
|
||||
dot.style.opacity = dotData.opacity;
|
||||
dot.style.background = this.config.colors.dotDefault;
|
||||
dot.style.boxShadow = `0 0 6px ${this.config.colors.dotDefaultGlow}, 0 0 12px rgba(255, 255, 255, 0.2)`;
|
||||
|
||||
this.canvas.appendChild(dot);
|
||||
this.dots.push(dotData);
|
||||
}
|
||||
|
||||
updateDots() {
|
||||
this.dots.forEach((dot, index) => {
|
||||
// Update position
|
||||
dot.x += dot.vx;
|
||||
dot.y += dot.vy;
|
||||
|
||||
// Track if dot is stuck (velocity very low for several frames)
|
||||
if (Math.abs(dot.vx) < 0.03 && Math.abs(dot.vy) < 0.03) {
|
||||
dot.stuckFrames = (dot.stuckFrames || 0) + 1;
|
||||
} else {
|
||||
dot.stuckFrames = 0;
|
||||
}
|
||||
// If stuck for more than 30 frames, give a strong nudge
|
||||
if (dot.stuckFrames > 30) {
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const speed = this.config.dotSpeed * (0.8 + Math.random() * 0.4);
|
||||
dot.vx = Math.cos(angle) * speed;
|
||||
dot.vy = Math.sin(angle) * speed;
|
||||
dot.stuckFrames = 0;
|
||||
} else {
|
||||
// Prevent dots from getting stuck - add small random nudge if velocity is too low
|
||||
if (Math.abs(dot.vx) < 0.05) {
|
||||
dot.vx += (Math.random() - 0.5) * 0.1;
|
||||
}
|
||||
if (Math.abs(dot.vy) < 0.05) {
|
||||
dot.vy += (Math.random() - 0.5) * 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
// Bounce off screen edges (consider dot size so centers stay inside)
|
||||
const maxX = window.innerWidth - dot.size;
|
||||
const maxY = window.innerHeight - dot.size;
|
||||
if (dot.x <= 0 || dot.x >= maxX) {
|
||||
dot.vx = -dot.vx;
|
||||
dot.x = Math.max(0, Math.min(maxX, dot.x));
|
||||
}
|
||||
if (dot.y <= 0 || dot.y >= maxY) {
|
||||
dot.vy = -dot.vy;
|
||||
dot.y = Math.max(0, Math.min(maxY, dot.y));
|
||||
}
|
||||
|
||||
// Update DOM element position (top-left)
|
||||
dot.element.style.left = dot.x + 'px';
|
||||
dot.element.style.top = dot.y + 'px';
|
||||
|
||||
// Update dot color based on connection status
|
||||
if (dot.connectionCount > 0 && !dot.isConnected) {
|
||||
dot.isConnected = true;
|
||||
dot.element.style.background = this.config.colors.dotConnected;
|
||||
dot.element.style.boxShadow = `0 0 6px ${this.config.colors.dotConnectedGlow}, 0 0 12px rgba(100, 149, 237, 0.3)`;
|
||||
} else if (dot.connectionCount === 0 && dot.isConnected) {
|
||||
dot.isConnected = false;
|
||||
dot.element.style.background = this.config.colors.dotDefault;
|
||||
dot.element.style.boxShadow = `0 0 6px ${this.config.colors.dotDefaultGlow}, 0 0 12px rgba(255, 255, 255, 0.2)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createConnection(dot1, dot2) {
|
||||
if (this.connections.length >= this.config.maxConnections) {
|
||||
return;
|
||||
}
|
||||
|
||||
const connection = document.createElement('div');
|
||||
connection.className = 'connection-line';
|
||||
|
||||
// Calculate center positions of dots
|
||||
const dot1Rect = dot1.element.getBoundingClientRect();
|
||||
const dot2Rect = dot2.element.getBoundingClientRect();
|
||||
const canvasRect = this.canvas.getBoundingClientRect();
|
||||
const dot1CenterX = dot1Rect.left - canvasRect.left + dot1Rect.width / 2;
|
||||
const dot1CenterY = dot1Rect.top - canvasRect.top + dot1Rect.height / 2;
|
||||
const dot2CenterX = dot2Rect.left - canvasRect.left + dot2Rect.width / 2;
|
||||
const dot2CenterY = dot2Rect.top - canvasRect.top + dot2Rect.height / 2;
|
||||
|
||||
const dx = dot2CenterX - dot1CenterX;
|
||||
const dy = dot2CenterY - dot1CenterY;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
|
||||
// Position and style the connection line from center to center
|
||||
const lineHalf = 1;
|
||||
connection.style.left = Math.round(dot1CenterX) + 'px';
|
||||
connection.style.top = Math.round(dot1CenterY - lineHalf) + 'px';
|
||||
connection.style.width = Math.round(distance) + 'px';
|
||||
connection.style.transformOrigin = '0 50%';
|
||||
connection.style.transform = `rotate(${angle}deg)`;
|
||||
connection.style.background = `linear-gradient(90deg,
|
||||
${this.config.colors.connection.start} 0%,
|
||||
${this.config.colors.connection.middle} 50%,
|
||||
${this.config.colors.connection.end} 100%)`;
|
||||
|
||||
this.canvas.appendChild(connection);
|
||||
|
||||
// Fade in
|
||||
setTimeout(() => {
|
||||
connection.classList.add('active');
|
||||
}, 50);
|
||||
|
||||
const connectionData = {
|
||||
element: connection,
|
||||
dot1: dot1,
|
||||
dot2: dot2,
|
||||
startTime: Date.now(),
|
||||
duration: Math.random() * (this.config.connectionDuration.max - this.config.connectionDuration.min) + this.config.connectionDuration.min
|
||||
};
|
||||
|
||||
// Mark dots as connected
|
||||
dot1.connectionCount++;
|
||||
dot2.connectionCount++;
|
||||
|
||||
this.connections.push(connectionData);
|
||||
}
|
||||
|
||||
updateConnections() {
|
||||
this.connections.forEach((connection, index) => {
|
||||
const elapsed = Date.now() - connection.startTime;
|
||||
|
||||
// Update connection position as dots move (using center positions)
|
||||
const dot1Rect = connection.dot1.element.getBoundingClientRect();
|
||||
const dot2Rect = connection.dot2.element.getBoundingClientRect();
|
||||
const canvasRect = this.canvas.getBoundingClientRect();
|
||||
const dot1CenterX = dot1Rect.left - canvasRect.left + dot1Rect.width / 2;
|
||||
const dot1CenterY = dot1Rect.top - canvasRect.top + dot1Rect.height / 2;
|
||||
const dot2CenterX = dot2Rect.left - canvasRect.left + dot2Rect.width / 2;
|
||||
const dot2CenterY = dot2Rect.top - canvasRect.top + dot2Rect.height / 2;
|
||||
|
||||
const dx = dot2CenterX - dot1CenterX;
|
||||
const dy = dot2CenterY - dot1CenterY;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
|
||||
const lineHalf = 1;
|
||||
connection.element.style.left = Math.round(dot1CenterX) + 'px';
|
||||
connection.element.style.top = Math.round(dot1CenterY - lineHalf) + 'px';
|
||||
connection.element.style.width = Math.round(distance) + 'px';
|
||||
connection.element.style.transformOrigin = '0 50%';
|
||||
connection.element.style.transform = `rotate(${angle}deg)`;
|
||||
|
||||
// Remove expired connections
|
||||
if (elapsed > connection.duration) {
|
||||
connection.element.classList.remove('active');
|
||||
|
||||
// Mark dots as no longer connected
|
||||
connection.dot1.connectionCount--;
|
||||
connection.dot2.connectionCount--;
|
||||
|
||||
setTimeout(() => {
|
||||
connection.element.remove();
|
||||
}, 500); // Wait for fade out
|
||||
this.connections.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tryCreateConnections() {
|
||||
// Randomly try to create connections between nearby dots
|
||||
for (let i = 0; i < this.dots.length; i++) {
|
||||
for (let j = i + 1; j < this.dots.length; j++) {
|
||||
if (Math.random() < this.config.connectionChance) {
|
||||
const dot1 = this.dots[i];
|
||||
const dot2 = this.dots[j];
|
||||
|
||||
// Calculate distance between dot centers
|
||||
const dot1CenterX = dot1.x + dot1.size / 2;
|
||||
const dot1CenterY = dot1.y + dot1.size / 2;
|
||||
const dot2CenterX = dot2.x + dot2.size / 2;
|
||||
const dot2CenterY = dot2.y + dot2.size / 2;
|
||||
|
||||
const dx = dot2CenterX - dot1CenterX;
|
||||
const dy = dot2CenterY - dot1CenterY;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 150 && distance > 30) {
|
||||
// Check if these dots are already connected
|
||||
const alreadyConnected = this.connections.some(conn =>
|
||||
(conn.dot1 === dot1 && conn.dot2 === dot2) ||
|
||||
(conn.dot1 === dot2 && conn.dot2 === dot1)
|
||||
);
|
||||
|
||||
if (!alreadyConnected) {
|
||||
this.createConnection(dot1, dot2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animate() {
|
||||
this.updateDots();
|
||||
this.updateConnections();
|
||||
this.tryCreateConnections();
|
||||
|
||||
requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the matrix background when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new MatrixBackground();
|
||||
});
|
||||
60
js/social.js
Normal file
60
js/social.js
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
// Initialize the matrix background when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new MatrixBackground();
|
||||
|
||||
// Email copy-to-clipboard and tooltip logic
|
||||
const emailLink = document.getElementById('email-link');
|
||||
const emailTooltip = document.getElementById('email-tooltip');
|
||||
const obfuscatedEmail = 'Bg4aC0IJDAAeCBgbCU8AGA0PKQkBAAACQgIGAw=='; // generated through utils/xor-enc.py
|
||||
const xorKey = 'lain';
|
||||
|
||||
function decodeEmail(obf, key) {
|
||||
// Double base64 decode
|
||||
let b64 = atob(obf);
|
||||
// XOR decode
|
||||
let email = '';
|
||||
for (let i = 0; i < b64.length; i++) {
|
||||
email += String.fromCharCode(b64.charCodeAt(i) ^ key.charCodeAt(i % key.length));
|
||||
}
|
||||
return email;
|
||||
}
|
||||
const emailAddress = decodeEmail(obfuscatedEmail, xorKey);
|
||||
|
||||
if (emailLink && emailTooltip) {
|
||||
emailLink.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
// Copy email to clipboard
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(emailAddress);
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = emailAddress;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
// Position tooltip above email link
|
||||
const emailRect = emailLink.getBoundingClientRect();
|
||||
const socialLinksRect = emailLink.parentElement.getBoundingClientRect();
|
||||
|
||||
const left = emailRect.left - socialLinksRect.left + (emailRect.width / 2);
|
||||
const top = emailRect.top - socialLinksRect.top - 10;
|
||||
|
||||
emailTooltip.style.left = left + 'px';
|
||||
emailTooltip.style.top = top + 'px';
|
||||
emailTooltip.style.transform = 'translateX(-50%) translateY(-75%)';
|
||||
|
||||
// Show tooltip
|
||||
emailTooltip.style.opacity = '1';
|
||||
|
||||
// Hide after 1.5s
|
||||
setTimeout(() => {
|
||||
emailTooltip.style.opacity = '0';
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
});
|
||||
27
utils/xor-enc.py
Normal file
27
utils/xor-enc.py
Normal file
@@ -0,0 +1,27 @@
|
||||
import base64
|
||||
import sys
|
||||
|
||||
KEY = b"lain"
|
||||
|
||||
def xor_bytes(data: bytes, key: bytes) -> bytes:
|
||||
return bytes(b ^ key[i % len(key)] for i, b in enumerate(data))
|
||||
|
||||
def encrypt(text: str) -> str:
|
||||
data = text.encode("utf-8")
|
||||
xored = xor_bytes(data, KEY)
|
||||
return base64.b64encode(xored).decode("ascii")
|
||||
|
||||
def decrypt(b64text: str) -> str:
|
||||
xored = base64.b64decode(b64text)
|
||||
return xor_bytes(xored, KEY).decode("utf-8")
|
||||
|
||||
def main():
|
||||
if len(sys.argv) > 1:
|
||||
# Use command-line arguments as the text
|
||||
text = " ".join(sys.argv[1:])
|
||||
else:
|
||||
text = input("Text to encrypt: ")
|
||||
print(encrypt(text))
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Reference in New Issue
Block a user