From 9bc4c17f55b1ea65cef569d42baa28335fb8f840 Mon Sep 17 00:00:00 2001 From: Samlon Date: Thu, 24 Jul 2025 01:36:12 +0200 Subject: first commit --- styles.css | 297 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 styles.css (limited to 'styles.css') diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3568aeb --- /dev/null +++ b/styles.css @@ -0,0 +1,297 @@ +/* Base Styles */ +:root { + --primary: #3b82f6; + --primary-hover: #60a5fa; + --text: #e5e7eb; + --text-secondary: #9ca3af; + --bg: #111827; + --bg-secondary: #1f2937; + --bg-tertiary: #374151; + --border: #374151; + --white: #ffffff; + --black: #111827; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: var(--text); + background-color: var(--bg); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Header */ +header { + background: rgba(17, 24, 39, 0.8); + backdrop-filter: blur(8px); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + position: fixed; + width: 100%; + top: 0; + z-index: 100; + padding: 1.5rem 0; + border-bottom: 1px solid var(--border); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); + text-decoration: none; +} + +.nav-links a { + color: var(--text); + text-decoration: none; + margin-left: 2rem; + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--primary); +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 8rem 0 4rem; + background: linear-gradient(135deg, #111827 0%, #1f2937 100%); +} + +.hero-content { + max-width: 800px; +} + +.greeting { + font-size: 1.25rem; + color: var(--primary); + margin-bottom: 1rem; +} + +h1 { + font-size: 3rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1.5rem; + background: linear-gradient(90deg, #60a5fa, #3b82f6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + color: transparent; +} + +.tagline { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 600px; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 0.75rem 1.5rem; + border-radius: 0.375rem; + font-weight: 500; + text-decoration: none; + transition: all 0.3s ease; + margin-right: 1rem; +} + +.btn-primary { + background-color: var(--primary); + color: white; + border: 2px solid var(--primary); +} + +.btn-primary:hover { + background-color: var(--primary-hover); + border-color: var(--primary-hover); +} + +.btn-outline { + background-color: transparent; + color: var(--primary); + border: 2px solid var(--primary); +} + +.btn-outline:hover { + background-color: rgba(59, 130, 246, 0.1); + color: var(--primary-hover); + border-color: var(--primary-hover); +} + +/* Sections */ +section { + padding: 6rem 0; + background-color: var(--bg); +} + +.section-title { + text-align: center; + font-size: 2.25rem; + margin-bottom: 3rem; +} + +/* About Section */ +.about-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.skills { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.5rem; +} + +.skill-tag { + background-color: rgba(59, 130, 246, 0.1); + color: #60a5fa; + padding: 0.375rem 0.75rem; + border-radius: 9999px; + font-size: 0.875rem; + border: 1px solid rgba(59, 130, 246, 0.2); +} + +/* Projects Section */ +.projects { + background-color: var(--bg); + padding: 6rem 0; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.project-card { + background: var(--bg-secondary); + border-radius: 0.5rem; + padding: 1.5rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid var(--border); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); +} + +.project-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--text); + margin-bottom: 0.75rem; +} + +.project-description { + color: var(--text-secondary); + margin-bottom: 1.25rem; + line-height: 1.6; +} + +.project-links { + margin-bottom: 1rem; +} + +.project-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 1rem; +} + +.project-tag { + background: rgba(96, 165, 250, 0.1); + color: #60a5fa; + padding: 0.25rem 0.75rem; + border-radius: 9999px; + font-size: 0.75rem; + font-weight: 500; +} + +/* Contact Section */ +.contact { + background-color: var(--bg-secondary); + text-align: center; + border-radius: 1rem; + margin: 2rem auto; + max-width: 1400px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.contact-content { + max-width: 600px; + margin: 0 auto; +} + +/* Footer */ +footer { + text-align: center; + padding: 2rem 0; + color: var(--text-secondary); + font-size: 0.875rem; + background-color: var(--bg-secondary); + border-top: 1px solid var(--border); +} + +/* Responsive */ +@media (max-width: 768px) { + .nav-links { + display: none; + } + + h1 { + font-size: 2.25rem; + } + + .about-content { + grid-template-columns: 1fr; + gap: 2rem; + } +} + +/* Hover Effects */ +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); +} + +.btn-outline:hover { + transform: translateY(-2px); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); +} + +/* Image Placeholder */ +.image-placeholder { + background-color: var(--bg-tertiary); + height: 300px; + border-radius: 0.5rem; + border: 1px solid var(--border); +} -- cgit v1.2.3