A single-page symposium companion created for the Department of Computer Science & Engineering at Priyadarshini Engineering College.
Note
Event archive: the interface describes the October 15, 2025 edition. Dates, registration links, fees, routes, contacts, availability, and prize information may no longer be current. Treat the deployed site as a project showcase and confirm future events with the institution.
This repository turns a dense college-symposium programme into one navigable experience: discover competitions, compare event rules, understand registration, plan the day, and find transportation guidance without leaving the page.
| 🎓 Technical arena | 🎨 Open arena | 🧭 Visitor essentials |
|---|---|---|
| Technical Quiz · Paper Presentation · AI Web Design · Poster Design · Project Expo | Non-Tech Quiz · Esports · Gully Cricket · Photography · Drawing | Registration · schedule · guidelines · venue · bus routes · support |
flowchart LR
A["Land on the event stage"] --> B{"Choose an arena"}
B -->|Technical| C["Open an event card"]
B -->|Non-technical| D["Open an event card"]
C --> E["Read format, rules & prize details"]
D --> E
E --> F["Review guide, date & fee"]
F --> G["Plan travel and arrival"]
G --> H["Use the archived registration path"]
Technical events — build, explain, compete
- Technical Quiz — programming, algorithms, data structures, and technology.
- Paper Presentation — research storytelling and original technical ideas.
- AI Web Design Challenge — responsive interface creation with modern tools.
- Poster Design — visual communication for technical concepts and findings.
- Project Expo — working demonstrations supported by project documentation.
Non-technical events — play, observe, create
- Non-Tech Quiz, Esports, Gully Cricket, Photography, and Drawing Competition broaden the programme beyond the lab.
No framework, compiler, or package manager is required. The project is deliberately portable.
flowchart TB
HTML["index.html · content & sections"]
CSS["styles.css · responsive visual system"]
JS["scripts.js · navigation, filters, modals & motion"]
MEDIA["assets/ · institutional and event media"]
BROWSER["Any modern browser"]
HTML --> BROWSER
CSS --> BROWSER
JS --> BROWSER
MEDIA --> BROWSER
The experience includes a responsive navigation shell, technical/non-technical filtering, expandable event information, animated transitions, a symposium guide, registration prompts, and route cards.
git clone https://github.com/QizarBilal/PEC_Sympo.git
cd PEC_Sympo
python -m http.server 8080Open http://localhost:8080. You can also open index.html directly, although a small local server provides behavior closer to deployment hosting.
- Update dates, venue, event rules, fees, contacts, and external links in
index.html. - Keep design changes in
styles.cssand interactions inscripts.js. - Test every modal, anchor, filter, registration link, and phone-sized layout.
- Replace legacy event claims rather than layering a new year over the old copy.
- Confirm all public contact and transportation information with the institution before publishing.
- Navigation reaches every section
- Both event filters reveal the correct cards
- Event detail actions are keyboard accessible
- Registration actions point to the intended form
- Schedule and transportation information agree
- Mobile layout remains readable at 320 px
- Archived-year notice is visible when the event has passed
Small, focused improvements are welcome. Open an issue describing the affected section and include before/after screenshots for visual changes. Please avoid committing real attendee data or unverified public contact details.
Code in this repository is available under the MIT License. Institutional names, logos, photographs, and third-party marks remain the property of their respective owners and are not relicensed by the MIT grant.
Designed as a programme, preserved as a build story.