+ Crafting digital projects that inspire me, while exploring everything from books and tea to space and science. First-year computer science student. +
+{education.institution}
+{experience.role}
+{project.description}
+{props.description}
- - ); -} diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css deleted file mode 100644 index f51cfc1..0000000 --- a/src/pages/Home/style.css +++ /dev/null @@ -1,47 +0,0 @@ -img { - margin-bottom: 1.5rem; -} - -img:hover { - filter: drop-shadow(0 0 2em #673ab8aa); -} - -.home section { - margin-top: 5rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: 1.5rem; -} - -.resource { - padding: 0.75rem 1.5rem; - border-radius: 0.5rem; - text-align: left; - text-decoration: none; - color: #222; - background-color: #f1f1f1; - border: 1px solid transparent; -} - -.resource:hover { - border: 1px solid #000; - box-shadow: 0 25px 50px -12px #673ab888; -} - -@media (max-width: 639px) { - .home section { - margin-top: 5rem; - grid-template-columns: 1fr; - row-gap: 1rem; - } -} - -@media (prefers-color-scheme: dark) { - .resource { - color: #ccc; - background-color: #161616; - } - .resource:hover { - border: 1px solid #bbb; - } -} diff --git a/src/style.css b/src/style.css index 13fd296..01a05ee 100644 --- a/src/style.css +++ b/src/style.css @@ -1,70 +1,63 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; +@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Sarala:wght@400;700&display=swap'); +@import "tailwindcss"; - color: #222; - background-color: #ffffff; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; +@theme { + --font-serif: "Aleo", "monospace"; } -body { - margin: 0; -} +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } -#app { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -header { - display: flex; - justify-content: flex-end; - background-color: #673ab8; -} - -header nav { - display: flex; -} - -header a { - color: #fff; - padding: 0.75rem; - text-decoration: none; -} - -header a.active { - background-color: #0005; -} - -header a:hover { - background-color: #0008; -} - -main { - flex: auto; - display: flex; - align-items: center; - max-width: 1280px; - margin: 0 auto; - text-align: center; -} - -@media (max-width: 639px) { - main { - margin: 2rem; + to { + opacity: 1; + transform: translateY(0); } } -@media (prefers-color-scheme: dark) { - :root { - color: #ccc; - background-color: #1a1a1a; - } +.transition-all { + transition: all 0.3s ease; +} + +.hover\:-translate-y-2:hover { + transform: translateY(-8px); +} + +.hover\:-translate-y-1:hover { + transform: translateY(-4px); +} + +.backdrop-blur-sm { + backdrop-filter: blur(8px); +} + +/* Add to style.css */ +.group:hover .group-hover\:translate-x-1 { + transform: translateX(0.25rem); +} + +.transition-transform { + transition: transform 0.3s ease; +} + +.list-disc li::marker { + color: #b8c4b550; +} + +.group:hover .group-hover\:translate-x-1 { + transform: translateX(0.25rem); +} + +.transition-transform { + transition: transform 0.3s ease; +} + +.list-disc li::marker { + color: #b8c4b550; +} + +html { + scroll-behavior: smooth; } diff --git a/vite.config.ts b/vite.config.ts index 0e309b2..e501dd7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,11 @@ import { defineConfig } from 'vite'; import preact from '@preact/preset-vite'; +import tailwindcss from '@tailwindcss/vite'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [preact()], + plugins: [ + tailwindcss(), + preact(), + ], });