Spaces:
Running
Running
Create a NextJS web developer portfolio. Style - modern, minimalistic. Focus on the main hero section of the landing page to look well, some inspiration can be Vercel for the style
2e41dd0 verified | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #3b82f6; | |
| --primary-dark: #2563eb; | |
| --secondary: #8b5cf6; | |
| --secondary-dark: #7c3aed; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .dark ::-webkit-scrollbar-track { | |
| background: #1a202c; | |
| } | |
| .dark ::-webkit-scrollbar-thumb { | |
| background: #4a5568; | |
| } | |
| .dark ::-webkit-scrollbar-thumb:hover { | |
| background: #2d3748; | |
| } | |
| /* Animation classes */ | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } |