aboutsummaryrefslogtreecommitdiff
path: root/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css176
1 files changed, 176 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..528b0c3
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,176 @@
+/* Hide scrollbar but allow scrolling */
+body {
+ overflow: auto;
+ scrollbar-width: none !important; /* Firefox */
+ -ms-overflow-style: none !important; /* IE/Edge */
+}
+
+body::-webkit-scrollbar {
+ display: none !important; /* Chrome/Safari */
+}
+
+
+
+/* Catppuccin Latte inspired palette */
+:root {
+ --base: #eff1f5;
+ --mantle: #e6e9ef;
+ --text: #4c4f69;
+ --subtext: #6c6f85;
+ --accent: #f4b8e4;
+ --accent-strong: #ea76cb;
+ --border: #dce0e8;
+}
+
+/* Reset */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ background: var(--base);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+/* Layout */
+.container {
+ max-width: 800px;
+ margin: auto;
+ padding: 2rem 1.5rem;
+}
+
+/* Header */
+header {
+ margin-bottom: 2rem;
+}
+
+h1 {
+ font-size: 2rem;
+ font-weight: 600;
+}
+
+.subtitle {
+ color: var(--subtext);
+ margin-top: 0.25rem;
+}
+
+/* Card sections */
+.card {
+ background: rgba(255, 255, 255, 0.6);
+ backdrop-filter: blur(6px);
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ padding: 1.2rem 1.2rem;
+ margin-bottom: 1.5rem;
+
+ transition: all 0.25s ease;
+}
+
+/* Subtle hover lift */
+.card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+ border-color: var(--accent);
+}
+
+/* Section titles */
+h2 {
+ font-size: 1.1rem;
+ margin-bottom: 0.6rem;
+ color: var(--accent-strong);
+ position: relative;
+}
+
+/* Accent underline */
+h2::after {
+ content: "";
+ display: block;
+ width: 40px;
+ height: 3px;
+ background: var(--accent);
+ border-radius: 2px;
+ margin-top: 4px;
+}
+
+/* Items */
+.item {
+ margin-bottom: 0.8rem;
+}
+
+h3 {
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.date {
+ font-size: 0.8rem;
+ color: var(--subtext);
+}
+
+/* Lists */
+ul {
+ list-style: none;
+}
+
+ul li {
+ margin-bottom: 0.3rem;
+ position: relative;
+ padding-left: 1rem;
+}
+
+/* Custom bullet */
+ul li::before {
+ content: "•";
+ position: absolute;
+ left: 0;
+ color: var(--accent-strong);
+}
+
+/* Skills */
+.skills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.skills li {
+ background: var(--mantle);
+ padding: 0.3rem 0.6rem;
+ border-radius: 999px;
+ font-size: 0.8rem;
+ transition: all 0.2s ease;
+}
+
+/* Skill hover */
+.skills li:hover {
+ background: var(--accent);
+ color: white;
+}
+
+/* Footer */
+footer {
+ text-align: center;
+ font-size: 0.75rem;
+ color: var(--subtext);
+ margin-top: 1rem;
+}
+
+/* Subtle fade-in */
+body {
+ animation: fadeIn 0.6s ease;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(6px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}