Parents researching The Green Valley International School, prospective students, existing families, and school staff directing visitors to official information.
The Green Valley International School — TGVIS
Website project
A school website built to make campus identity, admissions information, and school life easier to explore.

The problem I chose to solve
The most useful way to understand this project is to start with the friction behind it, then examine the system choices made to address that friction.
A school website has to serve multiple audiences at once: parents want trustworthy information and admissions details, students want a sense of campus life, and faculty need clear institutional contact paths. A thin brochure page may contain the facts but fail to communicate the school’s environment or feel credible on a modern phone.
TGVIS uses a strong editorial hierarchy, immersive transitions, a campus gallery, and admissions-focused sections to turn institutional information into a guided experience. The engineering challenge was to create a visually expressive site without discarding responsiveness, navigation, or crawlable page structure.
Where it fits in the real world
A strong implementation has a bounded audience and context. These are the use cases supported by the current design—not a claim that all of them have been validated at scale.
- Dedicated public web experience for one institution
- Scroll-linked and 3D-style animation polish rather than a static template
- Campus imagery and organized information to support discovery
- Mobile-first layouts and clear admission/contact calls to action
What the system actually does
An overview of key capabilities and system features.
School overview
Institutional identity and core details in a prominent hero and About section.
Campus gallery
Responsive image presentation to make the environment discoverable.
Admissions journey
Calls to action guide users toward admission-related content.
Interactive motion
Framer Motion provides scroll-linked and tilt-style effects.
Responsive rendering
Next.js App Router and Tailwind CSS support a modern responsive application.
Architecture & data flow
Architecture and system flow overview.
Parent/student browser
Visitor arrives from search, direct link, or a school communication.
Next.js application
App Router renders the site’s pages and layout.
Content components
Hero, school information, gallery, admission, and contact sections compose the experience.
Contact pathway
Visible enquiry/contact routes lead visitors toward the institution; the full downstream CRM process was not independently verified.
Next.js 15, React, App Router, Tailwind CSS v4, Framer Motion, Lucide React, Geist font family.
Decisions behind the implementation
Engineering choices and design decisions behind the implementation.
- Use motion to communicate hierarchy and pace rather than relying only on card collections.
- Keep school information and admissions as core user journeys.
- Use responsive layouts and modern app routing to serve mobile visitors.
Technical Considerations
Key technical details and system scope considerations.
- GitHub shows only one star and no verified traffic or admission conversion evidence; these are build activity indicators, not business impact.
- No license was detected in the repository metadata; a public repository does not automatically mean reuse is licensed.
- Admissions claims, affiliations, dates, and contact information need ongoing approval by the school.
What I would improve next
The next step is not simply adding features. It is increasing reliability, evidence quality, user trust, and clarity about the boundaries of the system.
Add ownership-approved photography, privacy notices, and current academic/session details.
Measure performance and enquiry conversions using privacy-respecting analytics agreed with the school.
Run accessibility and low-bandwidth mobile tests because many parents will arrive on phones.
Sources & Resources
Project repositories and resource links.