diff --git a/style.css b/style.css
index 2b3c67d..bee0ccd 100644
--- a/style.css
+++ b/style.css
@@ -131,8 +131,8 @@ body {
.hero { grid-column: span 3; }
.hiring-toggle { grid-column: span 3; }
.selected-work { grid-column: span 2; }
- .personal { grid-column: span 1; }
- .creations { grid-column: span 2; }
+ body:not(.cv-mode) .personal { grid-column: span 3; }
+ .cv-mode .personal { grid-column: span 1; }
.cv-container { grid-column: span 3; }
.experience { grid-column: span 3; }
.skills { grid-column: span 3; }
@@ -151,7 +151,6 @@ body {
.hero { transform: rotate(0.1deg); }
.selected-work { transform: translate(2px, -2px) rotate(-0.2deg); }
.personal { transform: translate(1px, -1px) rotate(-0.15deg); }
- .creations { transform: translate(-1px, 2px) rotate(0.1deg); }
.hiring-toggle { transform: translate(-2px, 3px) rotate(0.2deg); }
.experience { transform: translate(3px, -2px) rotate(-0.2deg); }
.skills { transform: translate(-3px, 4px) rotate(0.6deg); }
@@ -343,71 +342,34 @@ body {
/**
- * Personal interests – narrow side panel, non-interactive
+ * Personal interests – tag cloud
*/
.personal-tags {
display: flex;
- flex-direction: column;
+ flex-wrap: wrap;
gap: 10px;
+ justify-content: center;
}
.personal-tag {
font-size: 0.9rem;
color: var(--text-color);
- opacity: 0.85;
- padding-left: 10px;
- border-left: 2px solid rgba(0, 243, 255, 0.15);
-}
-
-
-/**
- * Notable Creations
- */
-.creations-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: 16px;
-}
-
-.creation-item {
- display: flex;
- flex-direction: column;
+ padding: 6px 14px;
+ border-radius: 20px;
background: rgba(0, 243, 255, 0.05);
- border: 1px solid rgba(0, 243, 255, 0.2);
- border-radius: 6px;
- padding: 12px;
- text-decoration: none;
- color: var(--text-color);
+ border: 1px solid rgba(0, 243, 255, 0.15);
transition: all 0.2s ease;
}
-.creation-item:hover {
- background: rgba(0, 243, 255, 0.1);
- border-color: rgba(0, 243, 255, 0.5);
- transform: translateY(-2px);
- box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
+.personal-tag:hover {
+ background: rgba(0, 243, 255, 0.15);
+ border-color: rgba(0, 243, 255, 0.4);
}
-.creation-item img {
- width: 100%;
- height: 120px;
- object-fit: cover;
- border-radius: 4px;
- margin-bottom: 10px;
- border: 1px solid rgba(0, 243, 255, 0.3);
-}
-
-.creation-info h3 {
- margin: 0 0 4px 0;
- font-size: 0.95rem;
- color: #fff;
-}
-
-.creation-info p {
- margin: 0;
- font-size: 0.8rem;
- opacity: 0.7;
-}
+/* Varying shades for tag cloud */
+.personal-tag:nth-child(3n+1) { opacity: 0.6; }
+.personal-tag:nth-child(3n+2) { opacity: 0.8; }
+.personal-tag:nth-child(3n) { opacity: 1.0; }
.hiring-toggle {
@@ -740,7 +702,7 @@ a { color: var(--link-color); text-decoration: none; }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.profile, .about, .interests, .links, .contact,
- .experience, .skills, .education, .creations {
+ .experience, .skills, .education {
grid-column: span 1;
}
.avatar {
@@ -758,7 +720,6 @@ a { color: var(--link-color); text-decoration: none; }
.hero-contacts, .hero-nav { justify-content: center; }
.pill { white-space: normal; gap: 4px 6px; padding: 5px 10px; }
.pill-url { display: inline; }
- .creations-grid { grid-template-columns: 1fr; }
}