froshtiet.com — FROSH 2K23 Main Site

This is the site that actually flew the froshtiet.com flag for FROSH 2K23 at Thapar: twenty hand-written HTML templates behind a PHP entry point, a full-bleed autoplaying video hero, and a Register button that hands off to the ticketing system. Three FROSH projects sit next to each other on this portfolio and they are easy to confuse, so to be plain about it: the frosh-website entry is an April 2023 parallax and Bing Maps one-pager on his own personal repo, frosh-ticketing is the Django pass-and-scanner system at events.froshtiet.com, and this is the marketing site that ran between them and sent traffic to the second one.

The repo is navansh03/Frosh_FrontEnd, 65 commits between 28 July and 2 August 2023 across three people, 19 of them his. It is not deep work and it should not be sold as such. It is a shipped artefact on a real domain, built in six days, that had to hold a first-year intake's attention before the event opened.

Twenty templates and no framework

There is no build step, no bundler and no templating engine. index.php at the root is four lines of PHP that header("Location: /templates/index.html") and die. Everything after that is static files. Shared chrome is stitched together at runtime rather than at build time: the footer is pulled in with $("#footer").load("/templates/footer.html") on document ready, which is a jQuery-shaped version of a server-side include, and the header is a template that individual pages copy from.

The page set is broader than a landing page usually gets, because the site was also the information pack for people who had never been to the campus:

• index.html is the landing page, 304 lines of it.
• core.html, team.html, team_main.html and faculty.html cover the organising side, with team.html running to 476 lines of generated cards.
• facilities.html walks the academic and residential blocks, the library, the dispensary, the ATM and the post office.
• foodjoints.html and patiala.html are the off-campus guide, the second one covering Qila Mubarak, Sheesh Mahal, Baradari gardens and the city's malls.
• Starter_Kit.html is the fresher's checklist.
• splitworks.html branches into index_T.html and index_NT.html, the technical and non-technical workshop tracks.
• video.html, before.html, final.html, mainpage3rd.html, mainpage4th.html and sponsors.html fill in the rest.

Motion comes off CDNs rather than out of a package manager. The landing page loads typed.js for the typewriter tagline, GSAP with ScrollTrigger, smooth-scrollbar, and jQuery. The nav is a slide-out panel with inline SVG icons and hover tooltips, plus an autohide behaviour on navbar.js that adds scrolled-up or scrolled-down classes off the scroll direction rather than off a scroll threshold, so the bar comes back the moment you move upward.

The 124 megabyte problem

static/ is 124 MB. That is a hero video, a loading video, several animated GIFs with WebP siblings beside them, and photographs of every block on campus, every food joint in Patiala, and every member of the core team and mentor cohort. The hero is backmain.mp4 set to autoplay loop playsinline muted, which is the incantation that gets a video to play inline on iOS without a tap.

The site's answer to its own weight is a loading-overlay div holding loader.gif that covers the page until the assets settle. That is an honest fix rather than a good one. It converts a half-rendered page into a deliberate wait, which is better for a viewer, but it does nothing about the transfer itself, and the transfer is happening over campus mobile data during the week students are arriving. The properly engineered version compresses the hero, serves responsive image sets, and lazy-loads everything below the fold. None of that happened, and there was not time for it to.

map.js embeds a Mapbox GL map with navigator.geolocation.getCurrentPosition and a hardcoded fallback to 76.36, 30.35, which is Patiala, for anyone who declines the permission prompt.

Team pages generated by Python

The most interesting thing in the repo is checked into static/CSS/, which is not where anybody would look for it. Three Python scripts sit among the stylesheets: findname.py lists the files in core-photos/, hello.py holds a list of roughly sixty mentor names alongside the list of uploaded photo filenames, and another.py takes a name-to-photo dictionary and prints out the <a class="card"> markup for each entry, background image URL and heading included.

That is the answer to a real problem. Sixty people submitted photos with filenames like IMG-20230704-WA0061-AnveshikaGupta.jpg and DocScanner4Jul202311-44am-SomyaBansal.pdf, and somebody had to turn that into a grid of cards with correct names under correct faces. Writing a throwaway generator and pasting its output into the template is the right call under a six-day deadline. It is also why the mapping is wrong: the dictionary literal left in another.py pairs 'Aakarsh Mahajan, ECE' with Abhimanyu Mehta.jpg and 'Abhimanyu Mehta, COE' with Akarsh Mahajan.png, an off-by-one from zipping two lists that were not sorted the same way.

What shipped

• Twenty HTML templates totalling roughly 2,550 lines, covering the event, the campus, the city and the organising team.
• Video hero with a typewriter tagline cycling "FROSH" and "Blazing through infinite realms", rewritten at two breakpoints so the line break lands correctly on phones.
• Loading overlay gating the page on asset load.
• Slide-out icon navigation with tooltips, plus a scroll-direction autohide bar.
• Client-side partial loading for the shared footer through jQuery.
• Card grids for core team, mentors and faculty, generated from photo submissions by throwaway Python scripts kept in the repo.
• Campus and city guides covering academic blocks, hostels, the library, the dispensary, banking, food joints and Patiala landmarks.
• Workshop track split into separate technical and non-technical pages.
• Mapbox campus map with browser geolocation and a Patiala fallback.
• Handoff to ticketing, with the Register control navigating to events.froshtiet.com.
• Directory-listing suppression through index.php redirect stubs dropped into every asset folder, which is his commit.

What he actually touched

His commits are template work across the whole tree rather than one feature. The "FROSH" commit on 2 August touches fifteen templates at once, "resolved minor bugs" touches seventeen, and there are separate passes on the footer, the header, the faculty page and the workshop split. The php commit is the one with a distinct shape to it: it adds index.php at the root and drops redirect stubs into fonts/, static/, static/CSS/, static/core-photos/ and templates/, so browsing to any asset directory bounces to the homepage instead of listing its contents.

Honest limitations

The root index.php emits a full HTML document, including a head block with favicon links, before it calls header("Location: ..."). On any server with output buffering off that raises a headers-already-sent warning and the redirect never fires, which means the entry point works by luck of configuration. There is a stray < character sitting on the line above the PHP open tag. jQuery is loaded twice from two CDNs at two versions, and GSAP three times at three versions, in the same document. The typewriter's default string reads "Blazing through infinite ealms" with the R missing, corrected only in the responsive override that runs afterwards, so the typo is visible for one cycle. societies.html is linked from the landing page and is not in the repository. Several sections, including the sponsors block and an earlier four-panel navigation grid, are commented out in place rather than removed, which is what a site edited live during an event looks like. And the whole thing is unversioned static hosting with no CI, so the deploy story is whatever was on the server on 2 August.

None of that was the point. The point was that 3,000 incoming students had somewhere to read about the event and one button to press to get a ticket, and both worked on the night.