Mudra Society Website

Mudra is a student society at Thapar, and what its site has to carry is photographs and people: who runs it now, who ran it before, what the annual productions are, and what the last few years looked like. No accounts, no forms, nothing to submit. That narrows the problem to layout, image handling, and making a hand-maintained site not feel hand-maintained.

The constraint underneath all of it was the deploy target. Shared PHP hosting, a folder you drop over FTP, no Composer, no build step and no database. That rules out every answer a static-site generator would give you, and it makes the shared header — the one thing every page needs and nobody wants to edit eleven times — the actual design problem.

What was built

• A home page with a full-bleed hero, an about section, an accordion FAQ, and a floating social panel that slides in from a fixed button.
• An executive board page — twenty cards, one per member, each with a hover overlay carrying their Instagram and LinkedIn links, laid out on a Bootstrap grid.
• A patrons and office bearers page covering the President and Vice President as faculty patrons, then the General Secretary, Finance Secretary, two Joint Secretaries and three Cultural Secretaries.
• An alumni page with eight profiles, structured the same way as the board so the two render from one stylesheet family.
• An events page for the society's five recurring productions — IZHAAR, MUDRANITE, SURNITE, PLAY-NITE and BRAHMGOSH — over a Bootstrap carousel on a three-second interval, with a navbar that gains a solid background once you scroll past 150px, and a separate glimpse section for the most recent IZHAAR.
• Six gallery pages: an index of five tiles that jump straight to the sub-galleries, and five sub-galleries of twelve tiles each, wired to a lightbox modal that opens on click and closes on the button, the backdrop, or an outside click.
• A scroll-linked logo. script.js reads scrollY against total scrollable height and translates the logo diagonally by a proportional amount, then swaps in a fixed-logo class once it clears its own height so it docks into the header instead of scrolling away.
• Custom faces served from /fonts rather than a web font CDN — Bodoni 72 and Bodoni 72 Old Style as .ttc collections, plus Amsterdam, Breadley Sans and California Paradise.
• Anchor rewriting. A DOMContentLoaded pass walks every <a> whose href begins with # and rewrites it against the current document URL, because the root path and the file path for the same page are not the same string once Apache is doing the stitching.
• Directory hardening — an index.php in every asset folder that 302s back to /, so /media/images, /css, /js and /fonts are not browsable.

The build, and the two ways it includes things

index.php is one line: virtual('./html/home_page.html'). Apache's mod_include stitches the pages from partials, which is enough templating for a site with a shared header and no dynamic data, and it keeps the whole thing deployable by dropping a folder onto shared hosting.

Except the inner pages do not use it. team.html carries an empty <div id="header"> and fills it with a jQuery .load("../html/header.html") on ready. So the same shared header arrives server-side on the landing page and client-side everywhere else — one of those splits that happens when a site grows page by page rather than from a layout outwards. The server-side path is the better one: it renders before paint and works with JavaScript off.

Vendored, numbered, and slightly duplicated

The stylesheet directory is 1.css through 9.css, which is a naming scheme that tells you nothing until you open them. They are Font Awesome 6.3.0, animate.css 4.1.1, Bootstrap 5.2.3, Bootstrap 5.2.3 again as a byte-identical copy under a second number, boxicons, Remix Icon 2.5.0, and a BootstrapMade "Medilab" theme, alongside two hand-written files. The home page links all nine.

It also still points at assets/vendor/purecounter, assets/vendor/glightbox, assets/vendor/swiper and assets/js/main.js, none of which exist in the repository — the template's script tags survived the parts of the template that were removed. And despite the locally hosted display faces, jQuery, boxicons and a Font Awesome kit all come off CDNs, which is the opposite of the choice the fonts directory represents.

What would need fixing first

There is no admin surface. Adding an event, rotating the board, or publishing a new gallery means editing HTML and committing images — which is workable for a society that refreshes content once a term, and would not be for anything more frequent. The board page is twenty near-identical blocks of markup; a rotation is twenty edits, and nothing stops one of them from drifting.

The galleries are the honest gap. The five sub-galleries and the gallery index are still carrying their placeholder imagery, hotlinked from Unsplash and from a third-party host, so the lightbox, the grid and the navigation all work against photographs that are not the society's. The plumbing is done and the content pass is not. Team portraits are also checked in as .heic, which most browsers will not decode, and that is the one thing that would need fixing before another year's intake.