diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c746ae --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + NekoScripty | System Automation & Scripting + + + + + + + + +
+
+
+

Hello World, I'm

+

NekoScripty

+

Scripting, Programming & System Automation

+
+ View Repositories +
+
+
+
+ NekoScripty Profile +
+
+
+
+ +
+
+

About Me

+
+

+ I am a dedicated Technology Enthusiast and Automation Learner with a focus on system-level logic. + I am mastering Python and Bash Scripting to create efficient Linux environments and Automation Utility Tools + that streamline complex tasks and optimize digital workflows. +

+
+
+
+ +
+
+

Tech Stack

+
+
Linux OS
+
Python
+
Bash Scripting
+
GitHub
+
Vim
+
+
+
+ +
+
+

Featured Repositories

+
+
+
+

NekoDots

+
+

Personal configuration scripts designed to rapidly deploy highly-optimized and customized Linux and Vim environments.

+
+ Repository +
+
+ +
+
+

nekoplay

+
+

A Bashscript mpv and yt-dlp Music player for 32-bit float precision. Spatial soundstage. Pure IEM protection. Minimalist soul, elite sound.

+
+ Repository +
+
+
+
+
+ + + + + + diff --git a/pfp.jpg b/pfp.jpg new file mode 100644 index 0000000..49c7b35 Binary files /dev/null and b/pfp.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..db9923d --- /dev/null +++ b/style.css @@ -0,0 +1,246 @@ +:root { + --crust: #11111b; + --mantle: #181825; + --base: #1e1e2e; + --surface0: #313244; + --surface1: #45475a; + --text: #cdd6f4; + --subtext1: #bac2de; + --subtext0: #a6adc8; + --blue: #89b4fa; + --mauve: #cba6f7; + --sapphire: #74c7ec; + --gradient: linear-gradient(90deg, var(--mauve), var(--blue)); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; + scroll-behavior: smooth; +} + +body { + background-color: var(--base); + color: var(--text); + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 7%; +} + +.text-gradient { + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +/* --- Navigation --- */ +nav { + position: fixed; + top: 0; + width: 100%; + background: rgba(24, 24, 37, 0.85); + backdrop-filter: blur(12px); + z-index: 2000; + border-bottom: 1px solid var(--surface0); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; + max-width: 1200px; + margin: 0 auto; + padding: 0 5%; +} + +.logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; } + +.nav-menu { display: flex; align-items: center; gap: 2.5rem; } + +.nav-links { display: flex; gap: 2rem; } + +.nav-links a { + color: var(--subtext1); + text-decoration: none; + font-size: 0.95rem; + font-weight: 500; + transition: 0.3s; +} + +.nav-links a:hover { color: var(--mauve); } + +.menu-toggle { + display: none; + background: none; + border: none; + color: var(--text); + font-size: 1.5rem; + cursor: pointer; +} + +/* --- Buttons --- */ +.btn-primary, .btn-github { + padding: 0.7rem 1.6rem; + border-radius: 10px; + font-weight: 700; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 0.6rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.btn-primary { + background: var(--gradient); + color: var(--crust) !important; +} + +.btn-github { + background: var(--surface0); + color: var(--text) !important; + border: 1px solid var(--surface1); +} + +.btn-primary:hover, .btn-github:hover { + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); + filter: brightness(1.1); +} + +/* --- Hero --- */ +header { + min-height: 100vh; + display: flex; + align-items: center; + padding-top: 80px; +} + +.hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 4rem; +} + +.hero-text h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; margin: 1rem 0; } +.hero-text h2 { font-weight: 400; color: var(--subtext1); } +.hero-text .subtitle { font-size: 1.2rem; margin-bottom: 2.5rem; } + +.image-wrapper { + background: var(--gradient); + padding: 6px; + border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; + animation: morph 8s ease-in-out infinite; + box-shadow: 0 20px 40px rgba(0,0,0,0.3); +} + +.hero-image img { + width: 320px; + height: 320px; + object-fit: cover; + border-radius: inherit; + border: 6px solid var(--base); +} + +@keyframes morph { + 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } + 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } +} + +/* --- Sections --- */ +section { padding: 6rem 0; } +.alt-bg { background: var(--mantle); } +.section-title { font-size: 2.5rem; text-align: center; margin-bottom: 4rem; } + +.about-card { + background: var(--surface0); + padding: 3rem; + border-radius: 20px; + border: 1px solid var(--surface1); + max-width: 850px; + margin: 0 auto; + font-size: 1.1rem; +} + +.skills-container { + display: flex; + flex-wrap: wrap; + gap: 1.2rem; + justify-content: center; +} + +.skill-tag { + background: var(--mantle); + padding: 0.8rem 1.5rem; + border-radius: 12px; + border: 1px solid var(--surface0); + display: flex; + align-items: center; + gap: 0.8rem; + transition: 0.3s; +} + +.skill-tag:hover { border-color: var(--blue); transform: scale(1.05); } + +/* --- Projects --- */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2.5rem; +} + +.project-card { + background: var(--base); + padding: 2.5rem; + border-radius: 18px; + border: 1px solid var(--surface0); + transition: 0.4s; +} + +.project-card h3 { margin-bottom: 1rem; color: var(--mauve); } +.project-card p { color: var(--subtext0); margin-bottom: 2rem; } +.project-card:hover { + border-color: var(--mauve); + transform: translateY(-8px); + box-shadow: 0 15px 30px rgba(0,0,0,0.2); +} + +footer { + text-align: center; + padding: 3rem 0; + background: var(--crust); + border-top: 1px solid var(--surface0); +} + +/* --- Responsive Layout --- */ +@media (max-width: 968px) { + .hero-content { flex-direction: column-reverse; text-align: center; } + .hero-image img { width: 260px; height: 260px; } + + .menu-toggle { display: block; } + + .nav-menu { + position: fixed; + top: 70px; + left: -100%; + width: 100%; + height: calc(100vh - 70px); + background: var(--mantle); + flex-direction: column; + padding: 3rem; + transition: 0.4s; + } + + .nav-menu.active { left: 0; } + + .nav-links { flex-direction: column; align-items: center; gap: 2.5rem; } + .nav-links a { font-size: 1.2rem; } +}