Spaces:
Running
Running
This Portfolio is for a Freelancer/Media Designer. While he does make Websites, his main focus is on Animation/3D/Videogames. He also has some experience with A.I. The website should be modern, dark and most importantly unique. It also needs an Impressum and Datenschutz page
a07a2f6
verified
| /* Base styles */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| line-height: 1.6; | |
| color: #e5e7eb; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| } | |
| /* Glow effect for interactive elements */ | |
| .glow-on-hover:hover { | |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); | |
| } | |
| /* Custom scrollbar for dark theme */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4b5563; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #8b5cf6; | |
| } | |
| /* Custom animation classes */ | |
| .transition-all { | |
| transition-property: all; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 200ms; | |
| } | |
| .prose { | |
| line-height: 1.75; | |
| } | |
| .prose p { | |
| margin-bottom: 1.25em; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Custom component styles */ | |
| .project-card:hover { | |
| transform: translateY(-4px); | |
| } | |
| /* Responsive tweaks */ | |
| @media (max-width: 640px) { | |
| .hero-text { | |
| font-size: 2.5rem; | |
| } | |
| } |