diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 000000000..94f079525 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,28 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - main + - deploy-spa + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + permissions: + contents: read + pages: write + id-token: write + + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v5 + with: + node-version: '20' + - run: npm ci + - run: npm run build + - uses: actions/configure-pages@v4 + - uses: actions/upload-pages-artifact@v1 + with: + path: ./dist + - uses: actions/deploy-pages@v1 diff --git a/Bhavik_Raiyani_Resume_2026.pdf b/Bhavik_Raiyani_Resume_2026.pdf new file mode 100644 index 000000000..d87749d6f Binary files /dev/null and b/Bhavik_Raiyani_Resume_2026.pdf differ diff --git a/index.html b/index.html index 452ca1f32..03d080ca1 100644 --- a/index.html +++ b/index.html @@ -2,20 +2,20 @@ - + - + - React App + Bhavik K. Raiyani diff --git a/jsconfig.json b/jsconfig.json index 8e881cf9c..52359bc2a 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,5 @@ { "compilerOptions": { - "moduleResolution": "node" + "moduleResolution": "bundler" } } diff --git a/mypic.jpg b/mypic.jpg new file mode 100644 index 000000000..273a98e99 Binary files /dev/null and b/mypic.jpg differ diff --git a/public/mypic.jpg b/public/mypic.jpg new file mode 100644 index 000000000..273a98e99 Binary files /dev/null and b/public/mypic.jpg differ diff --git a/src/App.css b/src/App.css index fce9cc9d8..dca6dbbe7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,31 +1,456 @@ .App { - text-align: center; + min-height: 100vh; + background: radial-gradient(circle at top, rgba(56, 58, 64, 0.95), #050505 45%); + color: #f4f4f8; } -.App-logo { - height: 40vmin; - pointer-events: none; +.page-shell { + max-width: 1140px; + margin: 0 auto; + padding: 0 24px 48px; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.site-header { + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 1000; + background: transparent; + transition: background 220ms ease, padding 220ms ease, backdrop-filter 220ms ease; +} + +.site-header.scrolled { + background: rgba(0, 0, 0, 0.82); + backdrop-filter: blur(18px); +} + +.header-inner { + width: 100%; + max-width: 1140px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 24px; +} + +.brand { + font-size: 0.95rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + line-height: 1; +} + +.site-nav { + display: flex; + gap: 18px; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + margin-left: auto; +} + +.site-nav a { + color: #cbd5e1; + text-decoration: none; + transition: color 180ms ease; +} + +.site-nav a:hover, +.site-nav a:focus-visible { + color: #7dd3fc; +} + +main { + display: grid; + gap: 64px; +} + +.hero { + padding: 80px 0 24px; + min-height: 72vh; display: flex; flex-direction: column; + justify-content: center; + gap: 24px; +} + +.profile-pic { + display: flex; + justify-content: center; + margin-bottom: 24px; +} + +.profile-pic img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + border: 4px solid #7dd3fc; + cursor: zoom-in; + transition: transform 180ms ease; +} + +.profile-pic img:hover { + transform: scale(1.02); +} + +.profile-zoom-overlay { + position: fixed; + inset: 0; + display: flex; align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + background: rgba(0, 0, 0, 0.95); + z-index: 1000; + padding: 24px; } -.App-link { - color: #61dafb; +.profile-zoom-overlay img { + width: min(95vw, 95vh); + max-width: 95vw; + max-height: 95vh; + object-fit: cover; + border-radius: 24px; + box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6); } -.heart { - color: #ff0000; +.zoom-close { + position: absolute; + top: 24px; + right: 24px; + border: none; + background: rgba(15, 23, 42, 0.92); + color: #f4f4f8; + font-size: 1.4rem; + line-height: 1; + width: 44px; + height: 44px; + border-radius: 50%; + cursor: pointer; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); } -.small { - font-size: 0.75rem; -} \ No newline at end of file +.zoom-close:hover, +.zoom-close:focus-visible { + background: #0f172a; +} + +.eyebrow { + margin: 0; + color: #7dd3fc; + letter-spacing: 0.16em; + text-transform: uppercase; + font-size: 0.8rem; +} + +.hero h1 { + margin: 0; + font-size: clamp(2.8rem, 4vw, 4.8rem); + line-height: 1.03; + max-width: 760px; +} + +.hero-copy { + max-width: 680px; + color: #cbd5e1; + font-size: 1.05rem; + line-height: 1.8; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 24px; + border: 1px solid transparent; + border-radius: 999px; + font-weight: 600; + text-decoration: none; + transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; +} + +.btn:hover, +.btn:focus-visible { + transform: translateY(-1px); +} + +.btn-primary { + background-color: #0ea5e9; + color: #000; +} + +.btn-secondary { + background-color: transparent; + border-color: #334155; + color: #cbd5e1; +} + +.section { + padding-bottom: 8px; +} + +.section-header { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 24px; +} + +.section-number { + color: #7dd3fc; + font-weight: 700; +} + +.section h2 { + margin: 0; + font-size: clamp(2rem, 2.5vw, 2.6rem); +} + +.about p, +.contact-panel p { + color: #cbd5e1; + max-width: 760px; + line-height: 1.8; + margin-bottom: 18px; +} + +.project-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.project-card { + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(15, 23, 42, 0.7); + border-radius: 24px; + padding: 28px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.project-tag { + display: inline-flex; + padding: 6px 12px; + border-radius: 999px; + background: rgba(125, 211, 252, 0.14); + color: #7dd3fc; + font-size: 0.85rem; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.project-card h3 { + margin: 0; + font-size: 1.3rem; +} + +.project-card p { + margin: 0; + color: #cbd5e1; + line-height: 1.75; +} + +.project-meta { + margin-top: auto; + color: #94a3b8; + font-size: 0.95rem; +} + +.experience-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; +} + +.experience-card { + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(15, 23, 42, 0.72); + border-radius: 24px; + padding: 28px; + display: flex; + flex-direction: column; + gap: 14px; +} + +.experience-card h3 { + margin: 0; + font-size: 1.2rem; +} + +.experience-company { + color: #94a3b8; + margin: 0; +} + +.experience-card p { + margin: 0; + color: #cbd5e1; + line-height: 1.8; +} + +.education-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.education-card { + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(15, 23, 42, 0.72); + border-radius: 24px; + padding: 24px; +} + +.education-card h3 { + margin: 0 0 10px; + font-size: 1.1rem; +} + +.education-card p { + margin: 0; + color: #cbd5e1; + line-height: 1.75; +} + +.certifications-list { + display: grid; + gap: 16px; +} + +.certification-item { + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(15, 23, 42, 0.72); + border-radius: 16px; + padding: 20px; +} + +.certification-item h3 { + margin: 0; + font-size: 1.1rem; +} + +.contact-links { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.skills-categories { + display: grid; + gap: 32px; +} + +.skill-category h3 { + margin: 0 0 16px; + font-size: 1.1rem; + color: #7dd3fc; +} + +.skill-grid span { + display: inline-flex; + padding: 16px 18px; + background: rgba(148, 163, 184, 0.08); + border: 1px solid rgba(148, 163, 184, 0.12); + border-radius: 16px; + color: #e2e8f0; + font-weight: 600; +} + +.contact-panel { + display: grid; + grid-template-columns: 1.6fr 1fr; + gap: 24px; + align-items: center; + padding: 32px; + border-radius: 24px; + background: rgba(15, 23, 42, 0.75); + border: 1px solid rgba(148, 163, 184, 0.14); +} + +.contact-panel h2 { + margin: 0 0 18px; +} + +.social-links { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.social-links a { + color: #cbd5e1; + text-decoration: none; + border-bottom: 1px solid transparent; +} + +.social-links a:hover, +.social-links a:focus-visible { + color: #7dd3fc; + border-bottom-color: #7dd3fc; +} + +.site-footer { + padding: 28px 0 12px; + color: #94a3b8; + text-align: center; + font-size: 0.95rem; +} + +@media (max-width: 880px) { + .project-grid, + .skill-grid, + .experience-grid, + .education-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .contact-panel { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .page-shell { + padding: 0 18px 36px; + } + + .site-header { + flex-direction: column; + align-items: flex-start; + gap: 14px; + padding-top: 20px; + } + + .hero { + padding-top: 56px; + } + + .hero h1 { + font-size: clamp(2.3rem, 8vw, 3.4rem); + } + + .site-nav { + width: 100%; + justify-content: space-between; + gap: 12px; + } + + .project-grid, + .skill-grid, + .experience-grid, + .education-grid { + grid-template-columns: 1fr; + } +} diff --git a/src/App.jsx b/src/App.jsx index 8b32d0718..bbc5cfce5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,27 +1,415 @@ +import { useEffect, useState } from 'react'; import './App.css'; function App() { + const [zoomed, setZoomed] = useState(false); + const [headerScrolled, setHeaderScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => setHeaderScrolled(window.scrollY > 20); + handleScroll(); + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + return (
-
- logo -

- GitHub Codespaces ♥️ React -

-

- Edit src/App.jsx and save to reload. -

-

- - Learn React - -

+
+
+
BHAVIK K. RAIYANI
+ +
+ +
+
+
+
+ Bhavik K. Raiyani setZoomed(true)} /> +
+

Senior Full-Stack Engineer

+

+ Driving enterprise modernization with .NET, Azure, and modern front-end + frameworks. +

+

+ I bring 9+ years of experience building scalable enterprise applications across + e-commerce, finance, property management, and AI. I specialize in cloud migrations, + microservices, and CI/CD automation for reliable production systems. +

+ +
+ {zoomed && ( +
setZoomed(false)}> + + Bhavik K. Raiyani event.stopPropagation()} /> +
+ )} + +
+
+

About me

+
+

+ Senior Full-Stack Engineer with 9+ years of expertise in designing, developing, and + modernizing scalable enterprise applications across e-commerce, finance, property + management, and AI sectors. Proven track record of leading technical transformations, + migrating systems to microservices and cloud architectures, and implementing CI/CD + automation to enhance performance, reliability, and business value. +

+

+ Based in Surat, Gujarat, India. Available for remote consultation and fulltime + hire. Contact: sendtoraiyani@ymail.com | +91 96010 72320 | linkedin.com/in/bhavik-raiyani +

+
+ +
+
+

Featured projects

+
+
+
+
Enterprise Portal
+

ActionTruck Booking Platform

+

+ Built a Canadian truck parts booking portal with scalable backend workflows, + Azure Service Bus, NCache, and automated Azure DevOps CI/CD. +

+
.NET Core · Azure · Microservices
+
+ +
+
Wealth Tech
+

InvestCloud Wealth Platform

+

+ Led frontend modernization from AngularJS to Angular and developed modular + ASP.NET Core APIs with CQRS, improving test coverage and release velocity. +

+
Angular · ASP.NET Core · Jest
+
+ +
+
Commerce
+

Cymax Furniture eCommerce Portal

+

+ Migrated a legacy .NET Framework portal to .NET Core with Azure integration, + reducing latency and supporting higher traffic volumes. +

+
Azure · .NET Core · CI/CD
+
+ +
+
AI Surveillance
+

CCTV Tracking System

+

+ Developed an AI-powered surveillance system for mask violation detection using + Azure Cognitive Services and AWS Rekognition. +

+
Azure Cognitive Services · AWS · AI
+
+ +
+
Booking System
+

Restaurant Booking Management

+

+ Built a platform for table reservations and online food ordering with admin + panels and reporting analytics. +

+
Web APIs · Reporting · Analytics
+
+ +
+
Transportation
+

Bus Booking Management System

+

+ Developed a system for bus listings, schedules, seat availability, and real-time + booking confirmations. +

+
Real-time Processing · Payments
+
+ +
+
Property Management
+

Property Management Portal (USA)

+

+ Designed architecture and repository pattern for U.S. housing association + management with Excel import and Azure Functions. +

+
Azure Functions · Cosmos DB
+
+ +
+
Logistics
+

Consignment & Logistics Management

+

+ Built consignment booking, real-time tracking, and shipment management + workflows with issue resolution features. +

+
Tracking · Workflows · Reporting
+
+ +
+
Safety Compliance
+

SAFE-ZYDUS Platform

+

+ Developed attendance, incident management, site inspection, and safety + compliance modules with RBAC authorization. +

+
RBAC · Compliance · Inspections
+
+ +
+
Trading
+

Copy Trading Platform (Singapore)

+

+ Integrated OANDA API for automated trading actions, allowing users to follow + experienced traders and replicate trades. +

+
OANDA API · Automated Trading
+
+
+
+ +
+
+

Experience

+
+
+
+

Senior Software Engineer

+

Cosnet Global Solutions — Aug 2024 - Present

+

+ Lead development for ActionTruck Portal, a Canadian truck parts booking platform + serving 10,000+ monthly users. Improved application performance by 30% by + optimizing the .NET Core backend and Entity Framework workflows and introducing + Azure Service Bus and NCache for scalable, asynchronous processing. Automated + CI/CD pipelines using Azure DevOps, reducing deployment time by 25%. +

+
+ +
+

Senior .NET Developer

+

Volumetree — Apr 2023 - Jul 2024

+

+ Modernized SaaS tooling by migrating monolithic APIs to microservices architecture, + enhancing system reliability by 40%. Integrated Azure Cloud Storage for improved + data management and performance. Awarded "Most Consistent Performer of the Year + (2024)" for delivering high-impact enhancements ahead of schedule. +

+
+ +
+

Senior Software Developer

+

Turing — Jun 2022 - Apr 2023

+

+ Led frontend modernization of InvestCloud Wealth Management Platform from + AngularJS to Angular 9+. Designed modular APIs using ASP.NET Core and CQRS + pattern, increasing test coverage by 35% with Jest. Automated CI/CD processes + using Git, reducing release cycles by 20%. +

+
+ +
+

Senior Software Developer

+

Optimus Information Inc. — Apr 2021 - Jun 2022

+

+ Migrated the Cymax eCommerce portal from .NET Framework to .NET Core, modernizing + the architecture and integrating Azure Service Bus and NCache to enable scalable, + asynchronous processing—resulting in a 40% reduction in latency while supporting + 500K+ users. Integrated ElasticPath API and BuzzerVoice analytics for enhanced + scalability and customer insights. Implemented Azure CI/CD pipelines and Bitbucket + automation for streamlined deployments. +

+
+ +
+

Senior Software Engineer

+

Avishkar IT Services — Mar 2020 - Apr 2021

+

+ Developed AI-powered CCTV Tracking System using Azure Cognitive Services, + reducing manual monitoring by 60%. Built Angular dashboards for violation + analytics and automated image processing via Azure Blob Storage. Mentored 3 + junior developers and conducted code reviews to ensure quality standards. +

+
+ +
+

Software Engineer

+

TekGrid Consulting Services Pvt. Ltd. — July 2018 - Mar 2020

+

+ Built and maintained business-critical web applications using ASP.NET MVC and + Angular. Improved application stability by resolving complex production issues. +

+
+ +
+

Jr. Software Developer

+

ASK-EHS Engineering & Consultancy — July 2015 - Mar 2018

+

+ Built and maintained business-critical web applications using ASP.NET MVC and + Angular. Improved application stability by resolving complex production issues. +

+
+
+
+ +
+
+

Skills

+
+
+
+

Backend & Frameworks

+
+ .NET Core + ASP.NET MVC + C# + Web API + Entity Framework + LINQ + CQRS + Microservices + REST APIs +
+
+
+

Frontend

+
+ Angular (v8+) + ReactJS + TypeScript + JavaScript + jQuery + Bootstrap + AngularJS +
+
+
+

Cloud & DevOps

+
+ Microsoft Azure + Azure Service Bus + NCache + Azure App Services + Azure Functions + Azure Blob Storage + Cosmos DB + Azure Pipelines + AWS (EC2, S3, RDS, IAM, VPC, SES) + Docker + CI/CD + GitHub Actions + Azure DevOps + Bitbucket Pipelines +
+
+
+

Databases

+
+ SQL Server + Cosmos DB + PostgreSQL + MySQL +
+
+
+

Tools & Methods

+
+ Git + Jira + Postman + Visual Studio + VS Code + Agile/Scrum + Unit Testing + Clean Architecture +
+
+
+
+ +
+
+

Education

+
+
+
+

Master of Computer Applications (MCA)

+

G.H. Patel Dept. of Computer Science — 2013

+
+
+

Bachelor of Computer Applications (BCA)

+

Veer Narmad South Gujarat University — 2010

+
+
+
+ +
+
+

Certifications

+
+
+
+

Microsoft Azure Fundamentals (AZ-900)

+
+
+

Microservices Architecture & Implementation on .NET 5

+
+
+

ASP.NET Zero: Development with ASP.NET Core & Angular

+
+
+
+ +
+
+
+

Get in touch

+

+ Based in Surat, Gujarat, India. I am available for remote consultation and fulltime + hire. If you need an engineer with enterprise experience in cloud, + microservices, and full-stack development, let’s talk. +

+
+ +
+ +
+
+ + +
); } diff --git a/src/index.css b/src/index.css index ec2585e8c..4f227cccb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,34 @@ +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + min-height: 100vh; + background: #050505; + color: #f8fafc; + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +button, +a, +input, +textarea { + font: inherit; +} + +img { + max-width: 100%; + display: block; +} + code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/vite.config.js b/vite.config.js index 248c2f847..9a83b701d 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ + base: "/codespaces-react/", plugins: [react()], test: { globals: true,