diff --git a/about/index.html b/about/index.html index d11d0e5..2624077 100644 --- a/about/index.html +++ b/about/index.html @@ -37,9 +37,30 @@ + + + + + + + + + + + + + + + diff --git a/aboutUs/index.html b/aboutUs/index.html new file mode 100644 index 0000000..80e28b8 --- /dev/null +++ b/aboutUs/index.html @@ -0,0 +1,310 @@ + + + + + + + + + About Us | Vimal Tech - Software & Backend Engineering + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+

About Vimal Tech

+

+ Innovation Through Code. Reliability Through Partnership. +

+

+ We specialize in building + the digital backbone of modern businesses, engineering systems that + help you + grow, automate, and succeed in a digital-first world. +

+
+
+ +
+
+
+

+ Who We Are +

+

+ Based in Valsad, Gujarat, Vimal Tech is a government-registered MSME + (UDYAM-GJ-25-0089795) dedicated to delivering high-performance software solutions, + robust backend architectures, and intuitive web experiences. +

+

+ Founded and led by Vimal Patel, a specialist in Java backend development and + cloud-integrated systems, our firm was born out of a passion for clean code and scalable technology. + We don’t just build websites; we engineer comprehensive digital infrastructures. +

+
+
+
+ Vimal Patel + Founder & Lead Engineer +
+
+
+
+
+ +
+
+

What We Do

+

We bridge the gap between complex technical requirements and seamless user + experiences. Our core competencies include:

+
+ +
+
+
+

Backend Engineering

+

Expert Java-based development focusing on secure, scalable, and high-concurrency systems.

+
+
+
+

Full-Stack Web

+

Designing responsive, SEO-optimized, and high-speed web applications using modern HTML/CSS and + frontend frameworks.

+
+
+
+

Cloud & Infrastructure

+

Deploying and managing applications on cloud environments to ensure 99.9% uptime and enterprise-grade + security.

+
+
+
+

Digital Transformation

+

Helping local enterprises and medical agencies transition from traditional workflows to highly + efficient digital platforms.

+
+
+
+ +
+
+

Why Partner With Us?

+
+ +
+
+
+
+

Technical Excellence

+

Our strict focus on Git best practices and clean architecture ensures that your software is + maintainable and future-proof.

+
+
+
+
+
+

MSME Verified

+

As a registered Micro Enterprise, we bring a rigorous level of professional accountability and + transparency to every contract.

+
+
+
+
+
+

Client-Centric Approach

+

From initial mockup to final deployment, we work as an extension of your team to ensure the final + product exceeds expectations.

+
+
+
+
+
+

Local Roots, Global Standards

+

Whether we are supporting a local business in Valsad or pitching to international clients, our + quality remains world-class.

+
+
+
+
+ +
+
+

Our Mission

+

+ To empower businesses with technology that is as reliable as it is innovative. We aim to be the + preferred technology partner for small to medium enterprises looking to scale their digital presence + with confidence. +

+ Partner With Us Today +
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/contact/index.html b/contact/index.html index b09c1f0..0095769 100644 --- a/contact/index.html +++ b/contact/index.html @@ -34,9 +34,30 @@ + + + + + + + + + + + + + + + - - + \ No newline at end of file diff --git a/contactUs/index.html b/contactUs/index.html new file mode 100644 index 0000000..2d69d63 --- /dev/null +++ b/contactUs/index.html @@ -0,0 +1,279 @@ + + + + + + + + + Contact Vimal Tech | Software Development Services + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+

Contact Vimal Tech

+

+ Get in Touch to fulfill your desired requirements. + + Expert Software Solutions. +

+

+ Have a project in your + mind or need + technical support? Reach out to us directly. We are ready + to engineer your next big idea. +

+
+
+ +
+
+ +
+ +
+
+
+

Vimal Patel

+

Founder & Software Developer

+
+
+ + vimal.patel@vimaltech.dev + +91 9638 474047 + Valsad, Gujarat, India - 396001 +
+ +
+
+
+
+
+
+

Vimal Tech

+

Independent Software Development Studio

+
+

+ Providing freelance software development services, robust backend architectures, and + cloud + integrations. +

+
+ Open 24 Hours (Mon - Sun) +
+
+
+
+
+ +
+

Put Quick Details and get Quotation +

+
+
+
+ + +
+
+ + +
+
+ + +
+ + Go to Contact Form + +
+
+
+
+
+

Official Registration

+
+

MSME Registered + Micro + Enterprise

+

+ Under the Ministry of Micro, Small, and Medium Enterprises
+ Government of India +

+
+ Udyam Number: UDYAM-GJ-25-0089795 +
+ + βœ“ Verify MSME Registration + +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/about.css b/css/about.css index 9a2829a..0a08c9b 100644 --- a/css/about.css +++ b/css/about.css @@ -242,4 +242,12 @@ body.about-body { /* Override common.css section radius to let custom cards control it */ .about-body section { border-radius: var(--radius); -} \ No newline at end of file +} + +@media (max-width: 768px) { + + .service-card-link p { + white-space: pre-line; + } + +} diff --git a/css/aboutUs.css b/css/aboutUs.css new file mode 100644 index 0000000..57feccb --- /dev/null +++ b/css/aboutUs.css @@ -0,0 +1,329 @@ +/* about.css - Elegant & Modern Update */ + +/* ===== HERO SECTION ===== */ +.hero-about { + position: relative; + min-height: 100vh; + /* min-height: 80vh; */ + /* Slightly shorter than services for faster content access */ + display: flex; + justify-content: center; + align-items: center; + text-align: center; + overflow: hidden; + background: radial-gradient(circle at center, #1e293b, #020617); + color: #e5ff7a; + /* your strong green */ +} + +body.dark .hero-about { + background: radial-gradient(circle at center, #0f172a, #000000); +} + +#particles-js { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; +} + +body.dark #particles-js canvas { + filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35)); +} + +.gradient-overlay { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(45deg, rgba(56, 189, 248, 0.1), rgba(0, 0, 0, 0.5)); + z-index: 1; +} + +.hero-about .hero-content { + position: relative; + z-index: 2; + max-width: 850px; + padding: 20px; +} + +/* ===== UTILITIES ===== */ +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-subtitle { + font-size: 1.2rem; + color: var(--color-muted); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; +} + +.alt-bg { + background: rgba(255, 255, 255, 0.4); + border-radius: 20px; + margin-bottom: 2rem; + padding: 4rem 2rem; +} + +body.dark .alt-bg { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +/* ===== STORY CARD (GLASS PANEL) ===== */ +.glass-panel { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 24px; + padding: 50px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +.story-content p { + font-size: 1.15rem; + line-height: 1.8; + color: var(--color-text); + margin-bottom: 20px; +} + +body.dark .glass-panel { + background: rgba(30, 41, 59, 0.85); + border-color: rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +body.dark .story-content p { + color: #cbd5e1; +} + +/* Founder Badge */ +.founder-badge { + display: inline-flex; + align-items: center; + background: rgba(56, 189, 248, 0.1); + padding: 12px 24px; + border-radius: 50px; + margin-top: 15px; + border: 1px solid rgba(56, 189, 248, 0.2); +} + +.founder-icon { + font-size: 1.5rem; + color: var(--color-accent); + margin-right: 15px; +} + +.founder-info { + display: flex; + flex-direction: column; +} + +.founder-info .name { + font-weight: 700; + color: var(--color-text); + font-size: 1.1rem; +} + +.founder-info .role { + font-size: 0.85rem; + color: var(--color-muted); +} + +body.dark .founder-info .name { + color: #fff; +} + +/* ===== WHAT WE DO GRID ===== */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 30px; +} + +.about-card { + background: #fff; + padding: 40px 30px; + border-radius: 16px; + text-align: center; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04); + border-bottom: 4px solid transparent; + transition: all 0.3s ease; +} + +.about-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); + border-bottom-color: var(--color-primary); +} + +.about-card .card-icon { + width: 70px; + height: 70px; + background: rgba(255, 152, 0, 0.1); + color: var(--color-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + margin: 0 auto 20px auto; + transition: transform 0.3s ease; +} + +.about-card:hover .card-icon { + transform: scale(1.1) rotate(5deg); + background: var(--color-primary); + color: #fff; +} + +.about-card h3 { + font-size: 1.3rem; + margin-bottom: 15px; + color: var(--color-text); +} + +.about-card p { + font-size: 1rem; + line-height: 1.6; +} + +body.dark .about-card { + background: #1e293b; + border: 1px solid rgba(255, 255, 255, 0.05); + border-bottom: 4px solid transparent; +} + +body.dark .about-card h3 { + color: #fff; +} + +body.dark .about-card:hover { + border-bottom-color: var(--color-primary); +} + +/* ===== WHY PARTNER WITH US (LIST/ROWS) ===== */ +.partner-features { + display: flex; + flex-direction: column; + gap: 20px; + max-width: 900px; + margin: 0 auto; +} + +.partner-row { + display: flex; + align-items: flex-start; + background: #fff; + padding: 25px 30px; + border-radius: 16px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); + border-left: 4px solid var(--color-accent); + transition: transform 0.3s ease; +} + +.partner-row:hover { + transform: translateX(10px); +} + +.partner-icon { + font-size: 2rem; + color: var(--color-accent); + margin-right: 25px; + margin-top: 5px; +} + +.partner-text h4 { + font-size: 1.25rem; + margin-bottom: 10px; + color: var(--color-text); + font-family: var(--font-primary); +} + +.partner-text p { + font-size: 1.05rem; + line-height: 1.6; + margin: 0; +} + +body.dark .partner-row { + background: #1e293b; + border-color: rgba(255, 255, 255, 0.05); + border-left: 4px solid var(--color-accent); +} + +body.dark .partner-text h4 { + color: #fff; +} + +/* ===== MISSION CTA (NEON STYLE) ===== */ +.cta-card { + background: linear-gradient(135deg, #0f172a, #1e293b); + color: #fff; + padding: 60px 40px; + border-radius: 24px; + text-align: center; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.theme-neon { + background: linear-gradient(135deg, #020617, #0f172a); + position: relative; + overflow: hidden; +} + +.theme-neon::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%); + z-index: 0; +} + +.theme-neon>* { + position: relative; + z-index: 1; +} + +/* Animations */ +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s forwards; +} + +.fade-in.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +@media (max-width: 768px) { + .partner-row { + flex-direction: column; + align-items: center; + text-align: center; + } + + .partner-icon { + margin-right: 0; + margin-bottom: 15px; + } + + .glass-panel { + padding: 30px 20px; + } + +} \ No newline at end of file diff --git a/css/contact.css b/css/contact.css index 67c9217..16044e4 100644 --- a/css/contact.css +++ b/css/contact.css @@ -244,6 +244,17 @@ body.contact-body { border-bottom: 1px solid var(--border); } +.section-title-contact { + font-family: 'DM Serif Display', serif; + font-weight: 400; + font-size: 26px; + color: var(--text-primary); + margin-bottom: 32px; + padding-bottom: 16px; + border-bottom: 1px solid var(--border); + text-align: center; +} + .info-item { display: flex; align-items: flex-start; @@ -586,7 +597,7 @@ body.contact-body { /* ── RESPONSIVE ───────────────────────── */ -@media (max-width: 640px) { +@media (max-width: 768px) { .contact-hero { padding: 120px 20px 80px; } @@ -600,7 +611,8 @@ body.contact-body { } .contact-section { - margin: 48px auto; + margin: 40px auto; + width: 100%; } .contact-info { diff --git a/css/contactUs.css b/css/contactUs.css new file mode 100644 index 0000000..9b3b451 --- /dev/null +++ b/css/contactUs.css @@ -0,0 +1,376 @@ +/* contact.css - Modern Glassmorphic Form & Cards */ + +/* ===== HERO SECTION ===== */ +.hero-contact { + position: relative; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + overflow: hidden; + background: radial-gradient(circle at center, #1e293b, #020617); + color: #e5ff7a; +} + +body.dark .hero-contact { + background: radial-gradient(circle at center, #0f172a, #000000); +} + +#particles-js { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; +} + +body.dark #particles-js canvas { + filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35)); +} + +.gradient-overlay { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(45deg, rgba(56, 189, 248, 0.1), rgba(0, 0, 0, 0.5)); + z-index: 1; +} + +.hero-contact .hero-content { + position: relative; + z-index: 2; + max-width: 850px; + padding: 20px; +} + +/* ===== CONTACT GRID ===== */ +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + align-items: flex-start; +} + +@media (max-width: 900px) { + .contact-grid { + grid-template-columns: 1fr; + } + + .mobile-new-line { + display: block; + margin-top: 15px; + margin-left: -50px; + } + + .mobile-card-content { + margin-top: 20px; + } + + .mobile-new-line-msme { + display: block; + margin-top: 35px; + margin-left: -50px; + } +} + +/* ===== GLASSMORPHIC FORM ===== */ +.glass-panel { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 24px; + padding: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +body.dark .glass-panel { + background: rgba(30, 41, 59, 0.85); + border-color: rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.input-group { + margin-bottom: 20px; + text-align: left; +} + +.input-group label { + display: block; + margin-bottom: 8px; + font-weight: 600; + font-size: 0.95rem; + color: var(--color-text); +} + +body.dark .input-group label { + color: #e2e8f0; +} + +.input-group input, +.input-group textarea { + width: 100%; + padding: 15px; + border-radius: 12px; + border: 1px solid #ccc; + background: rgba(255, 255, 255, 0.9); + font-family: var(--font-primary); + font-size: 1rem; + transition: all 0.3s ease; + outline: none; +} + +body.dark .input-group input, +body.dark .input-group textarea { + background: rgba(15, 23, 42, 0.6); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #fff; +} + +.input-group input:focus, +.input-group textarea:focus { + border-color: var(--color-accent); + box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); +} + +body.dark .input-group input:focus, +body.dark .input-group textarea:focus { + box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2); +} + +.form-status { + margin-top: 15px; + font-size: 0.95rem; + font-weight: 600; + display: none; +} + +.form-status.success { + display: block; + color: #22c55e; +} + +/* Glow Button (from services popup) */ +.glow-btn { + position: relative; + overflow: hidden; +} + +.glow-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; +} + +.glow-btn:hover::before { + left: 100%; +} + +/* ===== CONTACT DETAILS CARDS ===== */ +.contact-details-wrapper { + display: flex; + flex-direction: column; + gap: 20px; +} + +.info-card { + display: flex; + align-items: flex-start; + background: #fff; + padding: 25px; + border-radius: 16px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.info-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); +} + +body.dark .info-card { + background: #1e293b; + border-color: rgba(255, 255, 255, 0.05); +} + +.card-icon { + font-size: 1.8rem; + color: var(--color-primary); + margin-right: 20px; + margin-top: 5px; + background: rgba(255, 152, 0, 0.1); + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 12px; + flex-shrink: 0; +} + +.card-content h4 { + margin-bottom: 5px; + font-size: 1.2rem; + font-family: var(--font-primary); + color: var(--color-text); +} + +body.dark .card-content h4 { + color: #fff; +} + +.role-text { + color: var(--color-accent); + font-weight: 600; + font-size: 0.9rem; + margin-bottom: 15px; +} + +.contact-links { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 15px; +} + +.contact-links a, +.contact-links span { + color: var(--color-muted); + text-decoration: none; + font-size: 0.95rem; + display: flex; + align-items: center; + gap: 10px; + transition: color 0.3s; +} + +.contact-links a:hover { + color: var(--color-primary); +} + +.social-links-inline { + display: flex; + gap: 15px; + margin-top: 15px; + padding-top: 15px; + border-top: 1px solid rgba(0, 0, 0, 0.05); +} + +body.dark .social-links-inline { + border-color: rgba(255, 255, 255, 0.1); +} + +.social-links-inline a { + color: var(--color-text); + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 6px; + transition: color 0.3s; +} + +body.dark .social-links-inline a { + color: #e2e8f0; +} + +.social-links-inline a:hover { + color: var(--color-primary); +} + +/* Business Status Indicator */ +.business-status { + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: 15px; + padding: 8px 15px; + background: rgba(34, 197, 94, 0.1); + color: #16a34a; + border-radius: 30px; + font-size: 0.85rem; + font-weight: 600; +} + +.status-dot { + width: 8px; + height: 8px; + background: #22c55e; + border-radius: 50%; + box-shadow: 0 0 8px #22c55e; + animation: pulse-dot 2s infinite; +} + +@keyframes pulse-dot { + 0% { + box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); + } + + 70% { + box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); + } +} + +/* Highlight Card (Registration) */ +.highlight-card { + border: 2px solid var(--color-accent); + background: linear-gradient(145deg, #ffffff, #f0f9ff); +} + +body.dark .highlight-card { + background: linear-gradient(145deg, #1e293b, #0f172a); + border-color: var(--color-accent); +} + +.udyam-box { + background: rgba(0, 0, 0, 0.04); + padding: 10px 15px; + border-radius: 8px; + margin: 15px 0; + font-family: monospace; + font-size: 0.95rem; + color: var(--color-text); +} + +body.dark .udyam-box { + background: rgba(255, 255, 255, 0.05); + color: #fff; +} + +.verify-link { + display: inline-block; + color: var(--color-accent); + text-decoration: none; + font-weight: 600; + font-size: 0.9rem; + transition: color 0.3s; +} + +.verify-link:hover { + color: var(--color-primary); +} + +/* Animations */ +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s forwards; + animation-delay: var(--delay, 0s); +} \ No newline at end of file diff --git a/css/expertise.css b/css/expertise.css index 8d1a8d7..2651908 100644 --- a/css/expertise.css +++ b/css/expertise.css @@ -345,7 +345,7 @@ body.dark .category-title { .underline-hover { text-decoration: none; position: relative; - color: #333; + color: sandybrown; } .underline-hover::after { @@ -356,7 +356,7 @@ body.dark .category-title { height: 2px; bottom: 0; left: 0; - background-color: #000; + background-color: blue; transform-origin: bottom right; transition: transform 0.25s ease-out; } diff --git a/css/global.css b/css/global.css index 2557848..1012fe1 100644 --- a/css/global.css +++ b/css/global.css @@ -33,7 +33,7 @@ body { h1 { font-size: clamp(2.2rem, 5vw, 3rem); - font-weight: 500; + /* font-weight: 500; */ line-height: 1.2; display: flex; flex-direction: column; @@ -46,7 +46,7 @@ h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-family: "Lexend", sans-serif; font-optical-sizing: auto; - font-weight: 500; + /* font-weight: 500; */ font-style: normal; } @@ -54,7 +54,7 @@ h3 { font-size: 1.3rem; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; - font-weight: 500; + /* font-weight: 500; */ font-style: normal; margin-bottom: 1.5rem; } @@ -63,7 +63,7 @@ h4 { font-size: 1.1rem; font-family: "Poppins", sans-serif; font-optical-sizing: auto; - font-weight: 500; + /* font-weight: 500; */ font-style: normal; margin-bottom: 1rem; } @@ -283,6 +283,29 @@ p { color: #fff; } +body.dark .hero { + background: radial-gradient(circle at center, #0f172a, #000000); +} + +#particles-js { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; +} + +body.dark #particles-js canvas { + filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35)); +} + +.gradient-overlay { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(45deg, rgba(56, 189, 248, 0.1), rgba(0, 0, 0, 0.5)); + z-index: 1; +} + .hero::before { content: ""; position: absolute; @@ -402,17 +425,31 @@ p { padding: var(--section-padding); } -.section-title { +h2.section-title { + /* 1. Typography (This should now reflect correctly) */ + font-size: clamp(1.6rem, 3vw, 2.2rem); + font-family: "Lexend", sans-serif; + font-weight: 500; text-align: center; - margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 1px; - background-color: linear-gradient(90deg, #38bdf8, #22c55e, #a3e635, #38bdf8); + margin-bottom: 10px; + + /* 2. The Gradient Magic */ + background: linear-gradient(90deg, #38bdf8, #22c55e, #a3e635, #38bdf8); background-size: 200% auto; - background-clip: text; + /* Increased for better animation move */ + + /* 3. Clipping (The most important part) */ -webkit-background-clip: text; + background-clip: text; + + /* 4. The Fix: Set this to transparent! */ -webkit-text-fill-color: var(--color-text); - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); + + /* 5. Effects */ + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); + /* Reduced opacity for better visibility */ animation: gradientMove 4s linear infinite; filter: drop-shadow(0 0 6px rgba(163, 230, 53, 0.4)); } diff --git a/css/index.css b/css/index.css index e1bff36..1959ca5 100644 --- a/css/index.css +++ b/css/index.css @@ -3,66 +3,198 @@ =================================================== */ /* 🎨 Premium Typography + Layout */ .hero { - background: url('/images/hero.png') no-repeat center/cover; + /* background: url('/images/hero.png') no-repeat center/cover; */ + overflow: hidden; + background: radial-gradient(circle at center, #1e293b, #020617); +} + +/* Glow Button */ +.glow-btn { + position: relative; + overflow: hidden; +} + +.glow-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s ease; +} + +.glow-btn:hover::before { + left: 100%; +} + +/* Animations */ +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s forwards; + animation-delay: var(--delay, 0s); +} + +.fade-in.visible { + opacity: 1 !important; + transform: translateY(0) !important; +} + +/* ===== UTILITIES & SECTIONS ===== */ +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-subtitle { + font-size: 1.2rem; + color: var(--color-muted); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; +} + +.alt-bg { + background: rgba(255, 255, 255, 0.4); + border-radius: 20px; + margin-bottom: 2rem; + padding: 4rem 2rem; +} + +body.dark .alt-bg { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.text-center { + text-align: center; } /* =================================================== ===== Experience Section ===== =================================================== */ #experience { - background-color: #e9ecef; - padding: 3rem 2rem; - border-radius: 12px; - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); - text-align: center; - margin-bottom: 50px; + margin-top: 20px; + position: relative; + z-index: 10; } -/* =================================================== - ===== Mini Services Preview Section ===== -=================================================== */ -#services-preview { - text-align: center; +#experience p { + font-size: 1.1rem; + line-height: 1.8; + max-width: 800px; + margin: 0 auto; + color: var(--color-text); +} + +/* ===== GLASS PANEL (For Experience Section) ===== */ +.glass-panel { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 24px; + padding: 20px 40px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +body.dark .glass-panel { + background: rgba(30, 41, 59, 0.85); + border-color: rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +body.dark .glass-panel p { + color: #cbd5e1 !important; +} + +.card-icon { + margin: 0 auto 15px auto; + width: 60px; + height: 60px; + background: rgba(56, 189, 248, 0.1); + color: var(--color-accent); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; } -/* Services Preview Animations */ -#services-preview .service-card { - background: #f5f5f5; - padding: 25px 15px; - border-radius: 12px; +/* ===== SERVICES PREVIEW GRID ===== */ +.services-preview-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 25px; +} + +.preview-card { + background: #fff; + padding: 30px 20px; + border-radius: 16px; text-align: center; - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; - cursor: pointer; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04); + border-bottom: 4px solid transparent; + transition: all 0.3s ease; +} + +.preview-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); + border-bottom-color: var(--color-primary); +} + +.preview-card .card-icon { + width: 60px; + height: 60px; + background: rgba(255, 152, 0, 0.1); + color: var(--color-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + margin: 0 auto 15px auto; + transition: transform 0.3s ease; +} + +.preview-card:hover .card-icon { + transform: scale(1.1); + background: var(--color-primary); + color: #fff; } -#services-preview .service-card:hover { - transform: translateY(-8px) scale(1.03); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); - background: #fff3e0; - /* Slight highlight color */ +.preview-card h3 { + font-size: 1.2rem; + margin-bottom: 10px; + color: var(--color-text); } -#services-preview .service-card i { - font-size: 2.5rem; - color: sandybrown; - margin-bottom: 12px; - transition: transform 0.3s ease, color 0.3s ease; +.preview-card p { + font-size: 0.95rem; + line-height: 1.5; } -#services-preview .service-card:hover i { - transform: rotate(10deg) scale(1.1); - color: #ff8c42; - /* Slight color change on hover */ +body.dark .preview-card { + background: #1e293b; + border: 1px solid rgba(255, 255, 255, 0.05); + border-bottom: 4px solid transparent; } -#services-preview .service-card h3 { - transition: color 0.3s ease; +body.dark .preview-card h3 { + color: #fff; } -#services-preview .service-card:hover h3 { - color: #d2691e; - /* Darker highlight on hover */ +body.dark .preview-card:hover { + border-bottom-color: var(--color-primary); } /* =================================================== @@ -74,10 +206,8 @@ body.dark #services-preview .service-card { color: #e0e0e0; } -body.dark #experience, -body.dark #projects, -body.dark #cta-section { - background-color: #467db4; +body.dark #projects { + background: #242424; color: #ffffff; } @@ -86,80 +216,36 @@ body.dark .project-card { color: #e0e0e0; } -/* Wrapper for centering card horizontally */ -.card-container { - display: flex; - justify-content: center; - width: 100%; - /* margin-top: 10px; */ -} - /* CTA Section */ -.cta-section { - text-align: center; - margin-top: 50px; -} - -/* Container */ -.cta-wrap { - text-align: center; - padding: 4rem 1rem; - background: #e9ecef; - /* Match your site bg */ -} - -/* The Card */ +/* ===== CTA SECTION (NEON STYLE) ===== */ .cta-card { - max-width: 800px; - margin: 0 auto; - padding: 2.5rem; - border: 1px solid #333; - border-radius: 12px; - background: #1a1a1a; - /* Slightly lighter than bg */ - box-shadow: 0 4px 20px rgba(0, 255, 0, 0.05); - /* Subtle neon glow */ -} - -/* Typography */ -.cta-title { - font-size: 2rem; + background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff; - margin-bottom: 0.5rem; -} - -.cta-subtitle { - color: #aaa; - font-size: 1.1rem; - margin-bottom: 1.5rem; -} - -.cta-description { - color: #ccc; - font-size: 1.1rem; - line-height: 1.6; - margin-bottom: 2rem; + padding: 60px 40px; + border-radius: 24px; + text-align: center; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); } -.cta-description strong { - color: #00ff88; - /* Your neon color */ +.theme-neon { + background: linear-gradient(135deg, #020617, #0f172a); + position: relative; + overflow: hidden; } -/* The Button */ -.cta-button { - display: inline-block; - padding: 12px 30px; - background-color: #00ff88; - /* Your neon green */ - color: #000; - font-weight: bold; - text-decoration: none; - border-radius: 5px; - transition: transform 0.2s, box-shadow 0.2s; +.theme-neon::before { + content: ''; + position: absolute; + top: -50%; + right: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%); + z-index: 0; } -.cta-button:hover { - transform: translateY(-2px); - box-shadow: 0 0 15px rgba(0, 255, 136, 0.4); +.theme-neon>* { + position: relative; + z-index: 1; } \ No newline at end of file diff --git a/css/latest-works.css b/css/latest-works.css index cdc7dda..a209a3c 100644 --- a/css/latest-works.css +++ b/css/latest-works.css @@ -4,8 +4,10 @@ #projects { text-align: center; - background-color: #ced4da; - margin-bottom: 2rem; + background: #fff; + margin-top: 20px; + margin-bottom: 10px; + border-radius: 16px; } .projects-wrap { @@ -82,7 +84,8 @@ body.dark .project-card a:hover { transform: rotateY(180deg); } -.card-front, .card-back { +.card-front, +.card-back { position: absolute; width: 100%; height: 100%; @@ -227,7 +230,8 @@ body.dark .project-card a:hover { gap: 0.75rem; } -.btn-live, .btn-github { +.btn-live, +.btn-github { flex: 1; padding: 0.7rem 1.2rem; border-radius: 8px; @@ -287,29 +291,55 @@ body.dark .project-card a:hover { .project-filters { display: flex; justify-content: center; - gap: 0.8rem; - margin-bottom: 2rem; + gap: 10px; + margin-bottom: 30px; flex-wrap: wrap; } .filter-btn { - padding: 0.5rem 1.2rem; - border: none; - border-radius: 999px; - background: #e5e7eb; - color: #374151; - font-size: 0.85rem; + padding: 8px 20px; + border-radius: 30px; + border: 1px solid rgba(0, 0, 0, 0.1); + background: #fff; cursor: pointer; + font-weight: 600; + font-family: var(--font-primary); transition: all 0.3s ease; } -.filter-btn:hover { +/* .filter-btn:hover { background: #d1d5db; } .filter-btn.active { background: #6366f1; color: white; +} */ + +body.dark .filter-btn { + background: #1e293b; + border-color: rgba(255, 255, 255, 0.1); + color: #ffffff; +} + +.filter-btn.active, +.filter-btn:hover { + background: var(--color-primary); + color: #fff; + border-color: var(--color-primary); +} + +body.dark .filter-btn.active, +body.dark .filter-btn:hover { + background: var(--color-primary); + color: #fff; + border-color: var(--color-primary); +} + +body.dark #projects { + background: rgba(30, 41, 59, 0.85); + border-color: rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* CARD ANIMATION */ diff --git a/expertise/index.html b/expertise/index.html index af8774e..7fe3078 100644 --- a/expertise/index.html +++ b/expertise/index.html @@ -112,8 +112,8 @@
  • Portfolio
    • -
  • About
    • -
  • Contact
    • +
  • About Us
    • +
  • Contact
    • @@ -128,8 +128,8 @@

    Java Developer Expertise

    - Backend Systems β€’ REST APIs β€’ - Microservices β€’ Cloud Computing + Backend Systems β€’ REST APIs β€’ + Microservices β€’ Cloud Computing β€’ Virtualization

    @@ -276,7 +276,7 @@

    Suman Enterprise

    -

    Modern enterprise products list dashboard built with Vue.js.

    +

    Modern enterprise products lists UI built with Vue.js.

    Vue.jsVuetifyVitePinia
    @@ -370,11 +370,11 @@

    Explore My Full Portfolio

    +