this is great! can you change the color schema to black and white or grey scaled and add a blog section?
7bffc23
verified
| /* Custom CSS for additional styling */ | |
| .prose-xl { | |
| font-size: 1.25rem; | |
| line-height: 1.6; | |
| } | |
| /* Smooth hover transitions */ | |
| .shadow-md { | |
| transition: box-shadow 0.3s ease, transform 0.3s ease; | |
| } | |
| .shadow-md:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* Publication card hover */ | |
| #publications .shadow-md:hover { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) ; | |
| } | |
| /* Blog post hover effect */ | |
| #blog .group:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Project card hover */ | |
| #projects .group:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* Custom underline for section headings */ | |
| .section-heading { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-heading::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: -8px; | |
| width: 50px; | |
| height: 4px; | |
| background: rgb(234, 179, 8); | |
| } | |
| /* Smooth scroll behavior */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Animation for hero section */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Apply animation to hero content */ | |
| .hero-content { | |
| animation: fadeInUp 0.8s ease forwards; | |
| } | |
| /* Custom button styles */ | |
| .btn-primary { | |
| background-color: rgb(23, 23, 23); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: rgba(23, 23, 23, 0.9); | |
| } | |
| .btn-outline { | |
| border: 2px solid rgb(23, 23, 23); | |
| color: rgb(23, 23, 23); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-outline:hover { | |
| background-color: rgba(23, 23, 23, 0.1); | |
| } | |
| /* Blog post styling */ | |
| .blog-post { | |
| transition: all 0.3s ease; | |
| } | |
| .blog-post:hover { | |
| transform: translateY(-5px); | |
| } | |
| .blog-tag { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| } | |