EGN ConnectX

• The website

  • One site for five kinds of visitor: school leaders, exhibitors, partners, speakers and award nominees.
  • Five conference tracks, each with its own schedule and speakers, that must read as one family.
  • A 13-page exhibitor login area with a dashboard and 11 forms for electricity, internet, furniture, fabrication, hospitality and more.
  • An exhibitor can't judge a stall without seeing where it sits among 264.

• The business

  • The organizer expects more than 20,000 visitors on 3–4 November 2026, so the pages have to hold up and load fast on phones.
  • Stall sales and registrations are the goal, so every page ends in one of two buttons: Book Your Stall or Register Now.
  • The event has a theme, “Catalyst 2047: Architecting Viksit Bharat”, that every page has to carry.
  • The site has to be easy for Google and AI tools to find and read.

• The build

  • The live site runs on the company's own server, which I can't push to, so my work reaches it as a hand-off folder that mirrors its file layout.
  • My side is front end only. Every form checks its input in the browser and then does nothing more.
  • Classic PHP pages with no framework and no build step, so the company's developer can take them as they are.
  • Pages have to stay light enough for phones.

• What I wanted to improve

  • One design across every page, using the brand's three colors.
  • Make it quick to book a stall or register from anywhere on the site.
  • Let exhibitors explore the venue before they pay.
  • Make the round-table discussion feel real before the event.

Instead of relying only on a static exhibition map, the EGN ConnectX website includes an interactive 3D floor planner that lets exhibitors and visitors explore the venue before arriving.

Users can orbit around the exhibition hall, zoom and pan through the layout, search for a booth by ID, move directly to its location and inspect a booth's zone, area and footprint.

• DragtoOrbit
• ScrolltoZoom
• Right dragtoPan
• SearchtoFind booth
• ClicktoInspect

On a touch screen: drag to orbit, pinch to zoom and drag with two fingers to pan. The arrow keys orbit the camera too.

1. 01Orbit

   Explore the exhibition hall spatially.

2. 02Search

   Find a booth directly by its ID.

3. 03Navigate

   Move the camera directly toward the selected booth.

4. 04Inspect

   View useful booth and zone information.

Explore the 3D floor plan (opens in a new tab)

Opens the live page. Use “Enter Virtual Space” there for full screen.

Search, move, inspect

Why a 3D floor plan

Building the interaction

• An embedded 3D app

  The planner is a self-contained page with its own scene and toolbar, shown in a lazy-loaded iframe: its look and code stay apart from the site's, and the browser doesn't fetch the scene until a visitor scrolls toward it. The three.js library is bundled into it, so nothing loads from an outside host.

• Full screen that keeps its controls

  Full screen is requested on the wrapper around the frame, not the frame alone, so Enter and Exit stay on screen. Esc exits, and a browser without full-screen support scrolls the frame into view instead.

• A frame that fits the screen

  The frame is 16:9 on desktop and never taller than 80% of the screen, then a taller 4:5 on phones, with the how-to hints under it stacking into one column.

• Not mouse-only

  Touch has pinch-to-zoom and two-finger pan, and the arrow keys orbit the camera. The search box is labeled for screen readers and suggests matching booth IDs as you type, and camera moves are instant for people who prefer reduced motion.

What changed

How a visitor moves through it

• Two buttons, always there

  Whatever the page, the visitor can book a stall or register without hunting for the way.

• Track pages share one shell

  Every conference track uses the same intro, schedule table and side list, so a visitor who learns one page knows them all.

• Tables become cards on phones

  Schedule tables stack into cards below 720 px, so no one scrolls sideways.

Colors

• Brand blue

  #1453BC

  The first stop of the gradient and the main button.

• Brand purple

  #822966

  The middle stop of the gradient.

• Brand red

  #D51024

  The main accent: buttons and the active menu item.

• Gradient

  Signature strips, dividers and highlights.

• Dark red

  #A10F1B

  Hover and pressed state of the red button.

• Text

  #1A1A1A

  Body text on white.

• Secondary text

  #555555

  Descriptions and small print.

• Hairline

  #E5E5E5

  The only color for dividers and card borders.

Design principles

• Colors live in one place

  Every color is a named value in one shared stylesheet. A page never types its own hex code, and the gradient never gets a fourth color.

• Shared first, page-only second

  Anything used by two or more pages goes in the shared stylesheet. A page's own stylesheet holds only what that page alone needs, and one rule is never split across both.

• Motion with a budget

  Animations move only position and fade, never size or spacing, and each one switches off for people who ask their device to reduce motion.

• Links that follow the site

  Menu and button links use paths such as /bookstall, not the full web address, so the same pages work on the live domain and on a test build.

• Pills and two corner sizes

  Buttons are pills, 38 px tall, red with a darker red on hover. Cards and inputs use a 12 px corner and larger panels 18 px. There are no sharp corners in the shared parts.

• One loud moment at the top of the home page

  The home hero is a looping, muted Mumbai video with a scroll-driven text animation (“Hello Mumbai”, “Get Ready For”, “India's Largest Education Gathering”), a logo with a date pill, and a board of six chief guests beside it on a desktop and below it on a phone. The script words are the one place the site leaves Poppins, so the rest of the pages stay quiet. This hero is on egnconnectx.com. On the review copy, at 600 px and below, the animation is off, the date shows without its pill frame, and the text is static; that phone layout is not on egnconnectx.com yet. I have not measured the hero's speed.

• One blue exception

  The exhibitor login area uses blue buttons instead of red, so the whole portal reads as its own working space.

• A steady frame

  A 36 px edge gutter (16 px on phones) and a 66 px header on every page. Breakpoints sit at 1280, 991, 768 and 600 px, and the menu becomes a drawer at 991 px.

Home and navigation

Conference

Exhibitor tools

Booking, awards and workshops

Components

• Header with four menus

  Exhibitor, Visitor, Conference and More, driven by one list each, so the desktop menu, the phone drawer and the highlighted item always agree.

• Conference tabs

  A Day 1 and Day 2 tab bar that opens one schedule at a time, with keyboard arrows. The speakers page has its own tab bar in the same style, with School Education, Higher Education and Counselor Conference, and keynote speakers pinned to the top of the first tab. The Workshop page shows its two days side by side, with no tabs.

• Schedule table

  A clean table on desktop that turns into stacked cards on a phone.

• Speaker cards

  A photo, name, role and organization in an equal-height card, with a “Load more” button so the page starts light. Photos are never cropped.

• Rate-card tables

  The exhibitor forms show an item photo that enlarges, a price, a quantity box and a live total with 18% GST. Electricity, furniture, AV rental and hospitality share the same design.

• Exhibitor dashboard cards

  A progress bar and 11 cards, each with a Submitted or Not Started badge. When the Catalog Details gate is on, the other ten show a Locked badge until it is saved. Each form ends in a selection-summary pop-up with a blue “Proceed to Next” button.

• Home hero

  A looping, muted Mumbai video, a scroll-driven line of text in a script face, a logo with a date pill, and a board of six chief guests with the lead guest in the middle.

• Call-to-action bar

  A gradient strip near the end of the page with Register Now and Book Your Stall.

• 17 slidesEGN Education Leadership Summit & Awards 2026Speakers, partner categories and the awards, slide by slide.View the slides
• 12 slidesThe Founders Townhall 2026Scaling & Founding Tomorrow’s Schools, for 4 November 2026.View the slides
• 18 slidesInternational Education Expo & ConferenceThe conference agenda: From Curriculum to Capability, in agenda order.View the slides

• 47

  pages, each one PHP file

• 13

  exhibitor-area pages

• 4

  header menus, one list each

• 0

  frameworks or build steps on the live site

• Tools

  PHP, hand-written CSS with shared values, and JavaScript, with jQuery 3.4.1 on some pages. The 3D scenes use three.js 0.160.1. Both libraries are stored in the project, not loaded from outside.

• Structure

  Every page is one PHP file with the same header and footer. A shared stylesheet holds anything used by two or more pages, and each page has its own small stylesheet for the rest. There is no framework and no build step.

• The exhibitor area

  A login, a dashboard and 11 forms share one script and one stylesheet. The Catalog Details form is meant to come first and unlock the rest. That gate is built and switched off until the server can enforce it for real.

• Internal CSS and JavaScript for hand-offs

  Since 2026-10-13 a page that goes to the company's developer carries its own CSS and JavaScript inside the file, which is the backend team's rule. The workshop page was the first: its stylesheet was folded into the page and the separate file deleted. The live server has also served an old copy of a shared stylesheet (see Problems found along the way).

• 2

  interactive 3D scenes

• 12

  round tables, 8 chairs each

• 264

  stalls on the 3D floor plan

• 4

  conference halls, 2 gates

What it does

• The round-table room

  Each of the 12 tables has a number and a topic on a label that always faces you, like a place name on a map, and 8 chairs. The camera stays above the room so nobody can tilt it into a confusing view. “Explore Table” opens a full-screen view with zoom (buttons, scroll wheel, pinch and double-tap) and an arrow pad to move around.

• The venue floor plan

  I turned the organizer's flat floor plan into 3D: all 264 stalls in zones A to E plus meeting rooms, from 9 to 54 square meters each, four conference halls, two gates, a coffee lounge, the entrance plaza and four service desks. What visitors can do with it is shown above, in the Interactive 3D Floor Planner section.

• Real positions only

  Stall positions and sizes come from the organizer's plan. I never moved or invented one. The planner's colors and banners use the brand's blue, purple and red.

• Built to stay fast

  The round-table room starts building only when you scroll near it, pauses when it is off screen or the tab is hidden, and on a phone doesn't build at all until you tap “Explore Table”. That took its blocking time from 440 ms to 0 ms. The full-screen view reuses the same scene instead of building a second one.

• One look

  Both scenes share a warm cream background, the same soft lighting and the same dark button style, so they read as one product even though they live on different pages.

• Home page

  A hero with a looping, muted Mumbai video, a scroll-driven “Hello Mumbai” line and a board of six chief guests, then an animated stats strip, six sector cards, a Conference Speakers section, a “Who should visit” section that becomes a swipe row on phones, 88 past exhibitor logos with a “Load more” button on phones, and the photo gallery.

• Delegate registration

  A registration form for visitors, with a pop-up “Express Your Interest” form available from every page.

• Stall booking

  An enquiry form, a scrolling strip of 88 past partner logos, and a button that opens the 3D floor plan so an exhibitor can see where a stall would sit.

• Awards nominations

  A nomination pop-up for the Education and Corporate awards that prices each tier, adds 18% GST and lets nominees attach several files.

• Conference tracks and speakers

  Five tracks with schedules in Day 1 and Day 2 tabs, plus the Founders Townhall page. A speakers page with three tabs: School Education, with keynote speakers pinned first, Higher Education, and a Counselor Conference tab of four cards. The first tab shows 42 cards and a “Load more” button. A round-table guide for school leaders.

• Exhibitor login area

  A dashboard and 11 forms for stall name, badges, electricity, internet, furniture, fabrication, AV rental, hospitality, product categories and catalog advertising. Each form ends in a selection-summary pop-up with a “Proceed to Next” button, and hospitality is a rate-card table like furniture.

• Educator workshops

  A two-day series of 6 workshops, three on each day, shown side by side. Registration opens in a pop-up (“Ready to Learn by Doing?”) that lists the same 6 titles. A seventh, Design Thinking Challenge, is switched off in the page and in the form.

• Investor pitch page

  A page for start-ups: a hero with two buttons, a strip of four numbers and a “Meet Our Investors” section of cards with photos and company logos. It is reached from the More menu and the footer.

• Event photo gallery

  27 photos loaded only when the visitor scrolls to them.

• Pop-up forms

  An “Express Your Interest” form that opens from any button on any page, and a separate registration form for The Founders Townhall.

• Travel help

  A travel desk contact page, a delegate checklist and a visa and customs guide for international guests.

• Hand-offs, one zip at a time

  Each batch of changes goes to the company's developer as one zip. On 2026-10-06 it was the V4 package, on 2026-10-13 the home page and the workshop page, and on 2026-10-16 an update of 10 files with the Counselor Conference tab and the keynote order. By 2026-10-20 the new hero, the Counselor tab and the workshop page were on egnconnectx.com. I can't tell from the outside whether every file in every zip was uploaded.

• Forms stop at the browser

  Every form checks its input in the browser and stops there. The awards form works out each nomination tier's price and the 18% GST on the page and then shows the payment link. Nothing is sent or saved yet, because that part belongs to the company's server.

• A hand-off folder that mirrors his server

  The live server keeps its shared parts in one flat folder, while my project groups them under an inc/ folder. The hand-off folder mirrors the server's flat layout and carries the front-end changes. Wherever his copy of a page holds database or mail code, his file wins byte for byte by default, and large photos and videos travel as separate files, not inside the code.

• Checks on the hand-off package

  Before the hand-off of 2026-10-06 I checked every PHP file in the package for errors and found none. I served the package with stand-in settings, and all 17 pages answered with no PHP warnings. I also checked that every one of the 121 files the package refers to but does not contain still loads from the live domain.

• Screen sizes

  I checked the first version of the home page hero in a headless browser at 1440 × 900, 1366 × 768 and 390 × 844. The video played and looped, the page did not scroll sideways, and the video paused when it was scrolled out of view. That hero has since been replaced by the Mumbai video hero, and I have not repeated this check on it.

Speed fixes

• Problem

  The 3D round table froze phones. Building 12 tables took about 400 ms of work right after the page loaded, even if nobody scrolled to it.

  Solution

  On a phone the scene no longer builds by itself. “Explore Table” is the tap that starts it, and the build waits one frame so the tap still feels instant. Desktop builds it only when you scroll near.

  Result

  Blocking time on the page dropped from 440 ms to 0 ms.

• Problem

  The home page video was 34.6 MB and was the slowest thing on the page.

  Solution

  I re-encoded it without sound, since it is always muted, and added a poster image. On phones it doesn't load at all until someone taps play.

  Result

  The file fell to 24.2 MB, and a phone downloads none of it unless asked. That was the first hero; the Mumbai hero that replaced it has not been measured.

• Problem

  On the review copy, the pop-up video at the bottom left of the home page used the 34 MB hero file.

  Solution

  I made a 560 px copy for the pop-up, and told the browser to skip drawing the conference and tracks sections of the home page until they scroll into view. This is on egn-connectx.vercel.app, not yet on egnconnectx.com.

  Result

  The pop-up video is now 2.7 MB, down from 34 MB. I did not measure it with Lighthouse.

• Problem

  A 702 KB logo was shown in a 158-pixel slot on every page, and the page icon was 79 KB.

  Solution

  I made a resized copy of each and pointed every page at them.

  Result

  The logo is 30 KB and the icon 9 KB.

• 43

  of 47 pages carry a description, a canonical address and a share preview

• 30

  of 47 pages carry search-engine data (JSON-LD)

• 13

  exhibitor-portal pages kept out of search

• 179

  of 185 images in the home page file load lazily, all but the six chief-guest photos at the top

• Start from how people search

  I wrote a keyword map before touching any page: phrases for the whole site, then one main phrase per page so pages don't compete with each other. They go into titles, descriptions, image text, search-engine data, link text and new body copy. Existing headings are never rewritten to fit a phrase.

• Event data for search

  The home page describes the event to search engines in a form they can read: name, dates, venue, organizer, ticket offer, official social profiles and last-changed date. The contact pages carry contact details and the About page carries organization details. Every page meant to be found has this data. The 17 pages without it are the 13 hidden portal pages, the photo gallery fragment and three link-only partner forms. The two retired Conference and About Summit addresses are redirects, not pages.

• Keep the wrong pages out

  The 13 pages behind the exhibitor login are marked noindex and nofollow, and none is in the sitemap. Otherwise stall forms would compete with the pages that sell the event and waste the time search engines spend on the site.

• Measure from day one

  A Google Analytics 4 tag is on every page through one shared file. It fires only on the real domain, so my own testing never pollutes the numbers. The Google Search Console verification file is live, and robots.txt points search engines at the sitemap.

• Speed counts as SEO

  Google ranks slow pages lower. The targets I held pages to were a largest paint under 2.5 seconds, layout shift under 0.1 and input delay under 100 ms. Images load lazily with their sizes set, and I worked on the heaviest things: a 34.6 MB home page video, an oversized logo and the 3D scene that froze phones. The numbers are in the results section.

• Old addresses still work

  The retired About Summit address sends visitors and search engines to Exhibitor Profile, and the old Conference address to the home page, both with a permanent redirect, so the old links keep their value. On the Vercel copy, any address ending in .php redirects to its clean version.

The keyword map

• Home

  education leadership summit India 2026

• About EGN India

  about EGN Connect X education summit

• Exhibitor profile

  exhibit at education summit India

• Conference

  Catalyst 2047, Viksit Bharat 2047, India education conference 2026

• Early learning

  early childhood education summit India

• School education

  K-12 school education summit India

• Higher education

  higher education leadership summit India

• International schools

  international schools summit India

• Founders Townhall

  school founders townhall India

• Market insights

  Indian education industry market report

• Floor planner

  interactive floor plan education exhibition Mumbai

• Awards

  education awards India 2026 nomination

• Book your stall

  book exhibition stall education summit Mumbai

• Register

  register education summit Mumbai 2026

• Visitor profile

  visit EGN Connect X education summit

• Visas and customs

  event visa India

• Travel desk

  Mumbai travel guide for exhibitors

What the audit found

• Found

  Share previews were broken on about 30 pages. They pointed at an image file that returns a 404 on the live site. A second wrong filename in the organization data would also have failed on Vercel's case-sensitive hosting.

  Fix

  I batch-fixed every page to the real logo file, including three partner forms that showed a broken logo on the page itself.

  Result

  No page refers to the missing file any more (0 found when I checked), and the home page declares the image's real size, 2106 × 747.

• Found

  The home page title ran 74 characters and its description 239, so search results would cut both off.

  Fix

  I shortened them to 56 and 152 characters and kept the event, the city and the dates in them.

  Result

  Both sit inside the usual limits of about 60 and 160 characters.

• Found

  The three pages every header button leads to (Awards, Book Your Stall and Register) had only a title: no description, canonical address, share preview or search-engine data.

  Fix

  I gave each a full tag block and a sharper title, such as “Book Your Stall | EGN Connect X 2026, Mumbai”.

  Result

  The pages that turn visitors into sign-ups are described to search engines like the rest of the site.

• Found

  Two small leaks ran sitewide. The footer's LinkedIn icon linked to the page's admin dashboard, and the icon in every browser tab loaded from the parent company's separate domain on 42 pages.

  Fix

  The footer now links to the public company page, and the icon is served from the site's own files.

  Result

  Visitors reach the real LinkedIn page, and the icon no longer depends on another website.

• Found

  The home page's organization data had no social profiles and no dates, so search engines couldn't tie the event to its official accounts or see when it last changed.

  Fix

  I added the four official profiles (Facebook, Instagram, LinkedIn and X) and the published and modified dates.

  Result

  The event is linked to its official profiles in a form search engines read.

What every page carries

• Hosting and hand-off

  The real domain runs on the company's own server. A test copy runs on Vercel: a script renders every PHP page to a plain page, 47 in all, and Vercel serves those. I hand the company's developer a folder that mirrors his server's layout, with the front-end changes in it.

• Two copies of the site

  egnconnectx.com runs what the company's developer has uploaded. egn-connectx.vercel.app is the review copy and is ahead of it. As of 2026-10-20, the phone layout of the home hero, the smaller pop-up video and two-day billing (the forms show a price per day and total it for the two event days, plus 18% GST) in the furniture, AV rental and hospitality forms exist only on the review copy.

• The export is a manual step

  Vercel runs no PHP for this project. Only the exported folder is uploaded; the source pages, the project notes and the hand-off folder are kept out. Nothing rebuilds the export automatically, so it has to be run again before every deploy, or the copy keeps serving old content.

From a PHP file to the Vercel copy

• Problem

  On the Vercel copy, every link in the site returned an error, because Vercel refuses any address ending in .php.

  Solution

  I added one redirect rule that sends any .php address to its clean version, with the two About Summit addresses listed ahead of it.

  Result

  Every menu and button link works again.

• Problem

  The home page photo gallery silently never appeared on the Vercel copy.

  Solution

  The page fetched a .php file that didn't exist there. I rendered it as a plain page and let the same redirect rule find it.

  Result

  The gallery loads. This bug shipped once before I found it.

• Problem

  A hand edit to the packed 3D floor-plan file could silently corrupt the whole page, and full-screen mode hid its own exit button.

  Solution

  I keep the readable source separately and pack it with a script that protects a tricky closing tag. Full screen now covers the wrapper around the plan, so the buttons stay in view.

  Result

  The floor plan changes safely, and Enter and Exit Virtual Space both work.

• Problem

  On the Vercel copy the analytics tag was missing from every page, because the export script ran without a host name and the tag only loads on the real domain.

  Solution

  The script now sets the production host name for each page it renders.

  Result

  Every exported page carries the tag, and local testing still stays out of the real numbers.

• Problem

  Error and success boxes in the exhibitor forms showed as empty bars even when they were meant to be hidden.

  Solution

  A class that set the box to show had the same strength as the browser's own rule for hidden boxes, and the class won. I added an explicit rule that hides them.

  Result

  Hidden boxes stay hidden.

• Problem

  Merging to the main branch on GitHub replaced the working Vercel site with a build that returned 404 on every page, because the export folder is not stored in git.

  Solution

  I re-ran the export and deployed it again, and the project notes now say to do this after every merge to main.

  Result

  The working site was restored. A permanent fix, such as turning off automatic production deploys, is still undecided.

• Problem

  Two problems on the Founders Townhall page. It and its pop-up still used the word “school”. And on 2026-10-13 its schedule table looked wrong on a phone on the live domain, though the file was right.

  Solution

  I took the word out of the page and its pop-up on 2026-10-05. The table's file was already correct, so the live server's old cached stylesheet has to be cleared on its side.

  Result

  The word is gone in the files. The phone table is waiting on that cache clear, and I have not confirmed it is done.

• Problem

  On 2026-10-13 I audited the live exhibitor area. Login worked, but the server held a 22 KB copy of the shared portal stylesheet against the project's 46 KB, so the Exhibitor Badge page and six rate forms showed unstyled.

  Solution

  I built a zip with that one CSS file and a short note for the company's developer.

  Result

  The zip was built, not confirmed uploaded.

• Problem

  The workshop page and its registration form must list the same workshops, and the Design Thinking Challenge (workshop 03) is not being offered.

  Solution

  Workshop 03 is switched off in the table and in the registration form, so six are shown and offered.

  Result

  The page and the form both list the same 6 workshops, on the files and on the live site.

• Round-table blocking time

  0 ms

  Was 440 ms

• Home page video

  24.2 MB

  Was 34.6 MB

• Header logo

  30 KB

  Was 702 KB

• Page icon

  9 KB

  Was 79 KB

What changed for visitors

• Design

  • A 3D scene needs a budget as much as a page does. Building it on demand, and not on a phone until asked, mattered more than any visual polish.
  • One shared look, here the cream background and dark buttons, makes separate scenes feel like one product.
  • Fix the camera. A free-tilt orbit makes people lose the table, so the room keeps a fixed overhead view.

• Building

  • Keep the source of any packed file. The floor-plan bundle can't be read or safely edited by hand.
  • A rebuilt test copy doesn't update itself. A stale export quietly serves old content until someone runs the script again.
  • A fix that works locally can still fail on another host: .php links and the gallery both broke only on Vercel.

• Working with others

  • Every hand-off folder mirrors the other developer's file layout, and I note which files changed, so nothing is guessed.
  • Never claim what isn't mine. The database and mail wiring belong to the server side, so this page doesn't claim them.
  • I built 150+ browser tests, then removed them: their saved screenshots used about 1.5 GB of the free storage. Next time, cap how long test artifacts are kept and keep the tests.

• What I'd improve

  • Add the newer pages to the sitemap and the event data to the rest.
  • Run PageSpeed against the live site and record real scores.
  • Connect the forms to a real backend and switch on the Catalog Details gate.
  • Bring the tests back with a short storage limit.

• What I designed

  • The three-color brand look and the shared parts.
  • The round-table room and the way the 3D scenes behave on phones.
  • The tabs, schedule tables and rate-card tables.

• What I built

  • 47 pages and the shared header and footer.
  • The 3D round-table room and the 3D floor plan, from the organizer's plan.
  • The exhibitor dashboard and 11 forms.
  • The Vercel copy and the hand-off folder for the company's server.

• Provided by others

  • The floor plan, price lists, speaker lists, photos and text, from the organizer.
  • The live server, the domain and the database and mail wiring, run by the company's developer.