A 19-page React website concept for a property developer, built to turn browsers into site-visit bookings — with an animated blueprint-to-photo intro, searchable project listings with shareable filters, and a dedicated buying guide for NRI customers.
Skyline Homes is a placeholder brand for a residential and commercial developer working across six South Indian cities. The site follows the page structure of a large developer's website, then adds new ideas on top: an architectural-sketch intro, smart search from the hero, an NRI corner with a document checklist and currency converter, and a lead-capture form on almost every page. All content is sample data, ready to be swapped for the company's real projects.
Buying a home is a big, slow decision. Developer sites are often long lists of brochures: hard to filter, hard to compare, and little help for people buying from abroad. Visitors leave before they ever enquire.
A fast, themeable React site where search leads: filters that save to the URL, a gallery and blog to build trust, an NRI section that explains the process step by step, and one reusable lead form that turns interest into a booked site visit.
A detailed house sketch draws itself line by line, then a scan line turns it into the real photo. Skippable, plays once per visit, and its speed is a single setting.
A pill-shaped navbar that shrinks on scroll, with dropdown menus that describe each page and a mobile menu.
City, type, status, BHK, budget slider and amenities, with 5 sort options. Filters live in the URL, so a filtered view can be shared as a link.
Image panels that open on hover to reveal each project's details, with a Grid view toggle.
A clickable five-step buying journey, a document checklist with a progress bar, and a currency converter.
Category and project filters, a mixed-size photo grid, and a lightbox with thumbnails, keyboard and swipe controls.
Article pages with a reading-progress bar and share buttons, plus a searchable FAQ with highlighted matches.
Site visit, NRI callback, careers, partners and land enquiry all run on one form component.
Every colour comes from CSS variables, so the whole site can be re-themed to a client's brand by editing a few lines.
The front end is a single-page React app with client-side routing, deployed on Vercel. Forms currently log to the console; the dashed step shows the planned backend for storing leads.
A hand-drawn animation would be heavy and hard to change. The intro needed to feel like an architect's sketch while staying light and adjustable.
→ Wrote the house as SVG paths, generated repeating textures (wood boards, tiles, cobblestones, grass) with small helper functions, and animated each line with staggered stroke-dashoffset delays, all controlled by one SPEED value.With seven filters and five sort options, buyers and sales staff need to send each other exactly the view they are looking at.
→ Stored every filter in the URL query string with React Router's useSearchParams, so a filtered list works as a link and the hero search bar can open it pre-filtered.Nineteen pages with six different form layouts could easily drift into nineteen different looks.
→ Built shared pieces (LeadForm, PageHero, Faq, Reveal, Counter) and moved every colour into CSS variables, so a new page or a full re-theme takes minutes, not hours.The site lives in a private GitHub repo, and needed to go live on a subdomain of an existing production domain without affecting the main site.
→ Connected the repo to Vercel directly (auto-detected as a Vite build), then added realestate.lokesh-dev.in as a project domain with a CNAME record pointed at Vercel — kept it fully isolated from the main portfolio deployment.