diff --git a/css/common.css b/css/common.css index eeff9b2..cf8f23a 100644 --- a/css/common.css +++ b/css/common.css @@ -46,7 +46,7 @@ section { color: rgb(201, 238, 99); position: fixed; width: 100%; - top: 10; + top: 0.1; z-index: 1000; } diff --git a/css/discount-banner.css b/css/discount-banner.css index 74f95fc..45c95d9 100644 --- a/css/discount-banner.css +++ b/css/discount-banner.css @@ -4,18 +4,18 @@ top: 0; width: 100%; background: linear-gradient(90deg, #639bee, #b7e24d, #639fee); - background-size: 300% 300%; + background-size: 100% 300%; animation: gradientFlow 6s ease infinite; color: #1a1a1a; text-align: center; - padding: 0.9rem 1rem; + padding: 0.1rem 1rem; font-family: 'Poppins', sans-serif; font-size: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; - gap: 0.6rem; + gap: 0rem; z-index: 9999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); overflow: hidden; @@ -26,22 +26,22 @@ /* --- Text --- */ .discount-banner p { - margin: 0; + margin-bottom: 0rem; font-weight: 500; - z-index: 2; + z-index: 0.1; } /* --- Button --- */ .banner-btn { background: #1a1a1a; color: #c9ee63; - padding: 0.45rem 1.1rem; + padding: 0rem 1rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); - z-index: 2; + z-index: 0.1; } .banner-btn:hover { @@ -130,10 +130,10 @@ .discount-banner { flex-direction: column; text-align: center; - padding: 1rem; + padding: 0.1rem; } .banner-btn { - margin-top: 0.4rem; + margin-top: 0.1rem; } } \ No newline at end of file diff --git a/css/main.css b/css/main.css index b285121..60c03b0 100644 --- a/css/main.css +++ b/css/main.css @@ -20,6 +20,7 @@ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); + border-radius: 12px; } .hero-content { @@ -127,6 +128,23 @@ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } +.project-card a { + text-decoration: none; + color: black; +} + +.project-card a:hover { + color: blue; +} + +body.dark .project-card a { + color: white; +} + +body.dark .project-card a:hover { + color: #467db4; +} + /* =================================================== ===== Portfolio Section ===== =================================================== */ @@ -305,4 +323,4 @@ body.dark #darkModeToggle:hover { body.dark .visitor-count-card { background-color: #467db4; color: #000; -} +} \ No newline at end of file diff --git a/css/portfolio-btn.css b/css/portfolio-btn.css new file mode 100644 index 0000000..29c4d9e --- /dev/null +++ b/css/portfolio-btn.css @@ -0,0 +1,71 @@ +/* --- CENTERING THE BUTTON --- */ +.center-content { + /* Use Flexbox to center the content */ + display: flex; + justify-content: center; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + padding: 0px 0px 42px 0px; +} + +/* Base Styling for Elegance */ +.elegant-back-button { + /* ... (rest of the button styles) */ + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 25px; + border: 3px solid #3498db; + border-radius: 15px; + background-color: #ffe88b; + color: #3498db; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + font-weight: 600; + cursor: pointer; + overflow: hidden; + position: relative; + z-index: 1; + transition: all 0.3s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +/* Hover Effect - Color Swap */ +.elegant-back-button:hover { + background-color: #3498db; + color: #ffffff; + box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); +} + +/* Icon and Text Positioning */ +.elegant-back-button .icon { + display: inline-block; + margin-right: 10px; + font-size: 1.5em; + line-height: 1; + transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* Hover Animation: Icon Slide and Rotate */ +.elegant-back-button:hover .icon { + transform: translateX(-3px) rotate(-15deg); +} + +/* -------------------- RIPPLE EFFECT CSS -------------------- */ +.ripple { + position: absolute; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.6); + transform: scale(0); + animation: ripple-effect 0.6s linear; + pointer-events: none; + z-index: 0; +} + +@keyframes ripple-effect { + to { + transform: scale(4); + opacity: 0; + } +} \ No newline at end of file diff --git a/css/portfolio.css b/css/portfolio.css new file mode 100644 index 0000000..e6fd04d --- /dev/null +++ b/css/portfolio.css @@ -0,0 +1,289 @@ +:root { + --accent: #ffd700; + --accent-light: #ffe88b; + --bg-dark: #1a1a1a; + --bg-mid: #333; + --highlight: #00b4d8; + --text-light: #f0f0f0; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} + +body { + font-family: 'Ubuntu', sans-serif; + background: linear-gradient(135deg, var(--bg-dark), var(--bg-mid)); + color: var(--text-light); + overflow-x: hidden; +} + +/* Floating Navbar */ +nav { + position: fixed; + top: 10; + width: 100%; + background: rgba(26, 26, 26, 0.85); + backdrop-filter: blur(8px); + border-bottom: 1px solid rgba(255, 215, 0, 0.3); + display: flex; + justify-content: center; + padding: 10px 0; + z-index: 999; + transition: all 0.3s ease; +} + +nav a { + color: var(--accent); + text-decoration: none; + font-weight: 600; + margin: 0 20px; + transition: color 0.3s ease, transform 0.2s ease; + padding-bottom: 4px; + border-bottom: 2px solid transparent; +} + +nav a:hover { + color: var(--highlight); + transform: translateY(-2px); +} + +/* Active link (based on :target section) */ +section:target~nav a[href*="#overview"], +section:target~nav a[href*="#design"], +section:target~nav a[href*="#links"], +section:target~nav a[href*="#footer"] { + border-bottom: 2px solid var(--highlight); + color: var(--highlight); +} + +/* Header */ +header { + background-color: #6a3800; + text-align: center; + padding: 70px 15px 35px; + color: #fff; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); + margin-top: 45px; + animation: fadeDown 1s ease; +} + +header h1 { + /* text-decoration: underline wavy var(--accent); */ + font-size: 2rem; + letter-spacing: 1px; +} + +h2 { + color: var(--accent); + text-align: center; + margin: 40px 0 20px; + animation: fadeIn 1.2s ease; +} + +/* Collapsible Sections */ +details { + width: 90%; + margin: 20px auto; + background: rgba(255, 255, 255, 0.08); + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); + overflow: hidden; + transition: all 0.4s ease; +} + +summary { + background: rgba(255, 255, 255, 0.12); + color: var(--accent-light); + font-weight: 700; + padding: 18px 20px; + font-size: 1.3rem; + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + transition: background 0.3s ease; +} + +summary:hover { + background: rgba(255, 255, 255, 0.2); +} + +details[open] summary { + background: rgba(255, 215, 0, 0.15); + color: var(--accent); +} + +summary::after { + content: "▼"; + font-size: 0.9rem; + color: var(--accent); +} + +details[open] summary::after { + content: "▲"; +} + +/* Cards inside collapsibles */ +.card-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 25px; + padding: 25px; + animation: slideUp 1.2s ease; +} + +.card { + background: rgba(255, 255, 255, 0.07); + border-radius: 12px; + padding: 20px; + text-align: center; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); + transition: transform 0.3s ease, box-shadow 0.3s ease; + backdrop-filter: blur(6px); +} + +.card:hover { + transform: translateY(-8px); + box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3); +} + +.card h3 { + color: var(--accent-light); + font-size: 1.2rem; + margin-bottom: 10px; +} + +.card ul { + list-style: none; + padding: 0; + margin-top: 8px; +} + +.card ul li { + padding: 5px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} + +/* Links Section */ +.links { + text-align: center; + font-size: 1.2rem; + margin: 50px 0; + animation: fadeIn 1.5s ease; +} + +.links a { + color: var(--accent); + text-decoration: none; + font-weight: 600; + transition: color 0.3s ease; +} + +.links a:hover { + color: var(--highlight); +} + +.links hr { + width: 60%; + border: 0; + height: 1px; + background: linear-gradient(to right, transparent, var(--accent), transparent); + margin: 25px auto; +} + +/* Footer */ +footer { + background-color: #6a3800; + text-align: center; + padding: 25px; + font-size: 1rem; + box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4); + animation: fadeUp 1s ease; +} + +footer a { + color: var(--accent); + font-weight: bold; +} + +footer p { + margin-top: 10px; + font-size: 0.9rem; + color: #ffd700; +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeDown { + from { + transform: translateY(-40px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes fadeUp { + from { + transform: translateY(40px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideUp { + from { + transform: translateY(60px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Responsive */ +@media (max-width: 600px) { + header h1 { + font-size: 1.5rem; + } + + summary { + font-size: 1.1rem; + } + + .card h3 { + font-size: 1.1rem; + } + + .links hr { + width: 80%; + } + + nav a { + margin: 0 10px; + font-size: 0.9rem; + } +} \ No newline at end of file diff --git a/css/services.css b/css/services.css index 051d7e6..9f7c47c 100644 --- a/css/services.css +++ b/css/services.css @@ -1,7 +1,7 @@ /* ===== HERO SECTION ===== */ .hero-services { position: relative; - height: 50vh; + height: 70vh; display: flex; justify-content: center; align-items: center; diff --git a/index.html b/index.html index 4796491..55a0fae 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

- 🪔 Build your own website with "Free of Cost" Diwali Offer! 🪔 + 🪔 Make Website "Free of Cost" Diwali Offer! 🪔

+

GitHub

@@ -225,12 +225,20 @@

Projects

Front-End Projects

-

Chai Makers Café

-

Angular + Components + Services : Embedded G-Maps, Tap to dial, Social link.

+ +

Chai Makers Café

+

+ Angular | Components : CommonModule - RouterLink - RouterLinkActive | Services : MenuData +

+
-

Alex Food Corner

-

React + TailwindCSS + Vite : Embedded G-Maps, Tap to dial, Social link.

+ +

Alex Food Corner

+

+ React + TailwindCSS + Vite | react-router-dom : Routes, Route, BrowserRouter | react-dom/client : ReactDOM +

+

@@ -277,7 +285,7 @@

Desktop Chat Application (Local Area Network)

Portfolio

- View Overview + View Overview
@@ -320,4 +328,4 @@

Contact Me

- + \ No newline at end of file diff --git a/js/portfolio-btn.js b/js/portfolio-btn.js new file mode 100644 index 0000000..0b0aefe --- /dev/null +++ b/js/portfolio-btn.js @@ -0,0 +1,27 @@ +document.getElementById('backButton').addEventListener('click', function (e) { + // 1. Navigation Logic + history.back(); + + // 2. Ripple Effect Logic + const button = e.currentTarget; + const ripple = document.createElement('span'); + + // Calculate ripple position relative to the button + const diameter = Math.max(button.clientWidth, button.clientHeight); + const radius = diameter / 2; + + // Position the ripple where the mouse clicked + ripple.style.width = ripple.style.height = `${diameter}px`; + ripple.style.left = `${e.clientX - (button.offsetLeft + radius)}px`; + ripple.style.top = `${e.clientY - (button.offsetTop + radius)}px`; + + ripple.classList.add('ripple'); + + // Append the ripple + button.appendChild(ripple); + + // Remove the ripple element after the animation finishes + ripple.addEventListener('animationend', () => { + ripple.remove(); + }); +}); \ No newline at end of file diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..4e97a11 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,166 @@ + + + + + + + Portfolio + + + + + + + + + + + + + + + +
+
+
+
+ +

+ 🪔 Make Website "Free of Cost" Diwali Offer! 🪔 +

+ +
+ + + +
+ +

Welcome To +
+ + Java Developer Portfolio +

+
+ + +
+

💻 Tech Stack Overview

+
+ 🧠 Developer Profile & Stack +
+
+

👨‍💻 Profession

+
    +
  • Java Developer
    • +
  • (BE-IT)
    • +
+
+
+

⚙️ Backend

+
    +
  • Java, Spring Boot, Web Services
    • +
  • Microservices, Docker
    • +
+
+
+

🗄️ Database / Workspace

+
    +
  • SQL (Oracle, MySQL, PostgreSQL)
    • +
  • NoSQL (MongoDB, Cassandra)
    • +
+
+
+

🎨 Front-End

+
    +
  • ReactJS
    • +
  • AngularJS
    • +
+
+
+
+
+ +
+

🧩 Design & Architecture

+
+ 🏗️ System & Design Patterns +
+
+

🧱 System Design

+
    +
  • Low-level design
    • +
  • High-level design
    • +
+
+
+

♻️ Design Patterns

+
    +
  • DAO
    • +
  • Singleton
    • +
+
+
+

📚 Core Subjects

+
    +
  • J2SE
    • +
  • J2EE
    • +
+
+
+

🔧 API Tools

+
    +
  • Postman
    • +
  • Swagger
    • +
+
+
+

📘 Field Subjects

+
    +
  • DCN, DBMS, OOADU
    • +
  • OS, DFS, DAA
    • +
+
+
+
+
+ + + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/services.html b/services.html index 345f2ff..eeaf077 100644 --- a/services.html +++ b/services.html @@ -12,6 +12,7 @@ + @@ -31,6 +32,21 @@ + +
+
+
+
+ +

+ 🪔 Make Website "Free of Cost" Diwali Offer! 🪔 +

+ +
+