portfolio/index.html at main · vimal-java-dev/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-3G79ZS5DSS"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-3G79ZS5DSS');
  </script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vimal Tech</title>
  <!-- Favicon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/common.css">
  <link rel="stylesheet" href="/css/latest-works.css">
  <link rel="stylesheet" href="/css/mini-services.css">
  <link rel="stylesheet" href="/css/dropdown.css">
  <!-- Popup Window CSS -->
  <link rel="stylesheet" href="/css/open-modal-btn.css">
  <link rel="stylesheet" href="/css/whatsapp-floating.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
</head>

<style>
  a {
    color: sandybrown;
  }

  a:hover {
    color: blue;
  }
</style>

<body>
  <!-- Header / Navbar -->
  <nav class="navbar">
    <div>
      <a href="index.html" class="brand">
        <img src="/images/logo.jpeg" alt="Brand Logo" class="logo">
        <span class="brand-name">
          <span class="brand-name-vimal">Vimal</span>
          <span class="brand-name-tech">Tech</span>
        </span>
      </a>
    </div>

    <ul class="nav-links" id="nav-links">
      <!-- Dropdown Section -->
      <li class="dropdown">
        <a href="#hero" class="dropdown-toggle active;">Home</a>
        <ul class="dropdown-menu">
          <li><a href="#experience">Experience</a></li>
          <li><a href="#services-preview">Offering</a></li>
          <li><a href="#projects">Live</a></li>
        </ul>
      </li>
      <!-- New Services link -->
      <li><a href="services.html">Services</a></li>
      <!-- New Expertise link -->
      <li><a href="expertise.html">Expertise</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    <!-- hamburger icon -->
    <div style="display: flex; align-items: center;">
      <div class="hamburger" id="hamburger">&#9776;</div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section id="hero" class="hero">
    <div class="hero-content">
      <h1>Hello,<br> I'm <span class="highlight">Vimal</span></h1>
      <h2>A Passionate <strong>Java Developer</strong> building scalable backend applications.</h2>
      <a href="#projects" class="btn">My Work</a>
    </div>
  </section>

  <!-- About Section -->
  <section id="experience" class="container fade-in">
    <h2 class="section-title">Experience</h2>
    <h2>Competency and Proficiency</h2>
    <p>
      I have a good exposure on Java Technologies with hands-on experience in building backend systems, REST APIs, and
      enterprise
      applications.
      Skilled in <strong>Java, Spring Boot, Hibernate, Java Persistence API, Spring Framework, SQL, NoSQL</strong>, and
      <strong>Cloud
        Technologies</strong>.
      Passionate about writing clean, maintainable, and efficient code.
    </p>
  </section>

  <!-- Mini Services Preview Section -->
  <section id="services-preview" class="container fade-in">
    <h2 class="section-title">Services | Offer | Preview</h2>
    <p>Explore professional services to help build and scale your projects:</p><br>

    <div class="services-grid">
      <div class="service-card">
        <i class="fas fa-server"></i>
        <h3>Backend Development</h3>
        <p>Scalable backend apps using Java, Spring Boot, and Microservices.</p>
      </div>
      <div class="service-card">
        <i class="fas fa-cloud"></i>
        <h3>Cloud Integration</h3>
        <p>Deploy and manage applications efficiently on AWS.</p>
      </div>
      <div class="service-card">
        <i class="fas fa-database"></i>
        <h3>Database Management</h3>
        <p>Manage relational and NoSQL databases like Oracle, MySQL, PostgreSQL, MongoDB, Cassandra.</p>
      </div>
      <div class="service-card">
        <i class="fas fa-project-diagram"></i>
        <h3>Project Consulting</h3>
        <p>Architecture guidance and microservices design for enterprise projects.</p>
      </div>
    </div><br>

    <div class="services-preview" style="margin-top:20px; margin-bottom:10px">
      <a href="services.html" class="btn">View All Services</a>
    </div>
  </section>

  <!-- Latest Works Section -->
  <section id="projects" class="projects-wrap">
    <h2 class="section-title">Latest Works</h2>
    <div class="projects-grid">

      <!-- Suman Enterprise Card -->
      <div class="project-card">
        <div class="card-inner">
          <!-- FRONT -->
          <div class="card-front">
            <div class="card-thumbnail">
              <img src="/images/suman-enterprise.png" alt="Suman Enterprise Dashboard" loading="lazy">
            </div>
            <div class="card-content">
              <h3>Suman Enterprise</h3>
              <p>Full-stack enterprise management dashboard with real-time analytics and user authentication.</p>
              <div class="tech-stack">
                <span class="tech-badge">Java</span>
                <span class="tech-badge">Spring Boot</span>
                <span class="tech-badge">Vue.js</span>
              </div>
              <div class="card-links">
                <a href="https://sumanenterprise.vercel.app/" class="btn-live" target="_blank">Live Demo</a>
              </div>
            </div>
          </div>

          <!-- BACK (Dribbble-style reveal) -->
          <div class="card-back">
            <h3>🔧 Tech Deep Dive</h3>
            <p>Scalable Java Spring Boot backend with PostgreSQL, React frontend, real-time analytics via WebSockets.
              Deployed on Vercel with CI/CD.</p>
            <div class="card-links">
              <a href="https://sumanenterprise.vercel.app/" class="btn-live" target="_blank">→ Live Site</a>
              <a href="https://github.com/yourusername/sumanenterprise" class="btn-github" target="_blank">💻 Source
                Code</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Chai Makers Card -->
      <div class="project-card">
        <div class="card-inner">
          <div class="card-front">
            <div class="card-thumbnail">
              <img src="/images/chai-makers.png" alt="Chai Makers App" loading="lazy">
            </div>
            <div class="card-content">
              <h3>Chai Makers</h3>
              <p>Interactive chai shop web app with menu, ordering system, and payment integration.</p>
              <div class="tech-stack">
                <span class="tech-badge">Angular</span>
                <span class="tech-badge">Node.js</span>
                <span class="tech-badge">Stripe</span>
              </div>
              <div class="card-links">
                <a href="https://chaimakers.vercel.app/" class="btn-live" target="_blank">Live Demo</a>
              </div>
            </div>
          </div>
          <div class="card-back">
            <h3>☕ Chai Ordering App</h3>
            <p>Full e-commerce flow: menu browsing → cart → Razorpay/Stripe checkout. PWA-ready with offline support.
            </p>
            <div class="card-links">
              <a href="https://chaimakers.vercel.app/" class="btn-live" target="_blank">→ Live Site</a>
              <a href="https://github.com/vimal-tech-dev/chai-makers" class="btn-github" target="_blank">💻 Source
                Code</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Alex Food Corner Card -->
      <div class="project-card">
        <div class="card-inner">
          <div class="card-front">
            <div class="card-thumbnail">
              <img src="/images/alex-food-corner.png" alt="Alex Food Corner" loading="lazy">
            </div>
            <div class="card-content">
              <h3>Alex Food Corner</h3>
              <p>Modern restaurant website featuring menu display, online ordering, and reservation system.</p>
              <div class="tech-stack">
                <span class="tech-badge">React</span>
                <span class="tech-badge">Tailwind CSS</span>
                <span class="tech-badge">Vite</span>
              </div>
              <div class="card-links">
                <a href="https://alexfoodcorner.netlify.app/" class="btn-live" target="_blank">Live Demo</a>
              </div>
            </div>
          </div>
          <div class="card-back">
            <h3>🍽️ Restaurant Site</h3>
            <p>Responsive design with menu filtering, WhatsApp ordering integration, Google Maps location, and contact
              forms.</p>
            <div class="card-links">
              <a href="https://alexfoodcorner.netlify.app/" class="btn-live" target="_blank">→ Live Site</a>
              <a href="#" class="btn-github" target="_blank">💻 Source Code</a>
            </div>
          </div>
        </div>
      </div>


    </div>
  </section><br><br>

  <!-- Visiting Card Section -->
  <section id="cta-section" class="cta-wrap">
    <div class="cta-card theme-neon">
      <div class="cta-header">
        <div class="cta-titles">
          <h2 class="cta-title">Thanks for visiting 👋</h2>
          <p class="cta-subtitle">Ready to turn your idea into reality?</p>
        </div>
      </div>

      <div class="cta-body">
        <p class="cta-description">
          Helping local businesses thrive in the Digital Era.
          Whether it's a <strong>local business website</strong> or an <strong>enterprise backend system</strong>,
          I am ready to code your vision.
        </p>
      </div>

      <div class="cta-footer">
        <a href="tel:+919638474047" class="cta-button">
          Make your own website
        </a>
      </div>
    </div>
  </section><br><br>

  <!-- Floating WhatsApp -->
  <a href="https://wa.me/919638474047?text=Hello%20Vimal%2C%0AI%20would%20like%20to%20know%20more%20about%20your%20tech%20services."
    class="whatsapp-float" target="_blank">
    <i class="fab fa-whatsapp"></i>
  </a>

  <!-- Footer -->
  <footer>
    <p>Contact No : 9638 474047</p>
    <p>Email ID : vimal.patel@vimaltech.dev</p>
    <p>&copy; 2025 Vimal Patel | Java Developer</p>
  </footer>

  <!-- Dark Mode Toggle -->
  <button id="darkModeToggle" class="tooltip">🌙
    <span class="tooltiptext" id="toggleTooltip">Switch to dark mode</span>
  </button>

  <!-- Scroll to Top Button -->
  <button id="scrollTopBtn" title="Go to top">
    <i class="fas fa-arrow-up"></i>
  </button>

  <!-- JS -->
  <script src="/js/common.js"></script>
  <!-- Popup Window JS -->
  <script src="/js/open-modal-btn.js"></script>
  <script src="/js/dropdown.js"></script>
  <script src="/js/main.js"></script>
</body>

</html>