stoa: मॉस्को और दुबई की एक आर्किटेक्चर फ़र्म के लिए कॉन्सेप्ट साइट

stoa एक काल्पनिक आर्किटेक्चर फ़र्म है, जिसके स्टूडियो मॉस्को और दुबई में हैं और जो इमारतें, सार्वजनिक स्थान और इंटीरियर डिज़ाइन करती है। VITON¹³ ने इसकी साइट कॉन्सेप्ट के रूप में बनाई, यह दिखाने के लिए कि हम किसी डिज़ाइन फ़र्म का एडिटोरियल पोर्टफ़ोलियो कैसे बनाते हैं: ऐसी साइट जिसमें पेज को प्रोजेक्ट संभालते हैं और टेक्स्ट संयमित रहता है।

नाम जान-बूझकर छोटे अक्षरों में लिखा जाता है। stoa प्राचीन यूनानी शहर का ढका हुआ स्तंभ-गलियारा था — बिना दीवारों वाला सार्वजनिक कमरा — और साइट भी वही संयम रखती है: काला और सफ़ेद, छोटे अक्षरों वाली अंग्रेज़ी टाइपोग्राफ़ी, चौकोर कोष्ठकों में बटन। मोशन को धीमा और वज़नदार महसूस होना था, फिर भी किसी प्रोजेक्ट, लेख या नौकरी तक पहुँचने में रुकावट नहीं बनना था।

दस पेज: होम, प्रोजेक्ट सूची, प्रोजेक्ट पेज, स्टूडियो, जर्नल, लेख, करियर, संपर्क, प्राइवेसी और 404। कंटेंट काल्पनिक है, पर पूरा है: 10 प्रोजेक्ट, जर्नल की 5 कहानियाँ, 6 खुली नौकरियाँ और गहरे रंग के मैप पर 2 स्टूडियो।

होम पेज गिनती वाले लोडर और वीडियो हीरो से खुलता है, फिर आते हैं स्क्रॉल पर रोशन होने वाले “we” मूल्य, सेवाएँ, काउंटरों के साथ फ़र्म की कहानी, तैरती तस्वीर वाले चुनिंदा प्रोजेक्ट, [ + ] अकॉर्डियन में पुरस्कार और खींचकर चलने वाला जर्नल स्लाइडर। प्रोजेक्ट सूची में विधा के फ़िल्टर हैं और सीढ़ीनुमा ग्रिड व कर्सर प्रीव्यू वाली सूची के बीच स्विच है। हर प्रोजेक्ट के अपने पेज पर मेटाडेटा, लीड, पैरालैक्स तस्वीर, खींचकर चलने वाली गैलरी और अगले प्रोजेक्ट का लिंक है। जर्नल श्रेणी के हिसाब से फ़िल्टर होता है, करियर पेज पर आवेदन फ़ॉर्म के साथ अकॉर्डियन हैं, और संपर्क पेज पर गहरे रंग का मैप, दोनों पते और पूछताछ फ़ॉर्म है।

आम रास्ता प्रोजेक्ट सूची से किसी प्रोजेक्ट तक और फिर जर्नल के लेख तक जाता है। टेक्स्ट नपी-तुली पंक्तियों में बँटकर एक-एक पंक्ति करके आता है; तस्वीरें नीचे से खुलती हैं और हल्के ज़ूम से अपनी जगह टिकती हैं; हीरो से आगे बढ़ने पर वह छोटा और मद्धिम होता जाता है। हर आंतरिक लिंक पेज को एक हल्के रंग के पैनल से बंद करता है जो 100 तक गिनता है, पूरी स्क्रीन वाला मेन्यू ऊपर से खुलता है और हर आइटम के साथ एक फ़ोटो दिखाता है, और कस्टम कर्सर पर [ view project ] और [ read ] लिखा आता है।

साइट बिना बिल्ड स्टेप के सादे HTML, CSS और JavaScript में है। हेडर, फ़ुटर और ओवरले एक साझा स्क्रिप्ट से बनते हैं, इसलिए हर पेज पर वे एक जैसे रहते हैं। मोशन GSAP, ScrollTrigger और Lenis स्मूद स्क्रॉलिंग पर चलता है; मैप Leaflet पर है। फ़ॉर्म डेमो मोड में हैं: डेमो डेटा ब्राउज़र के localStorage में रहता है और कहीं नहीं भेजा जाता। Unsplash की फ़ोटो और Pexels के वीडियो लाइसेंस वाले स्टॉक हैं, जो सीधे CDN लिंक से लोड होते हैं।

कॉन्सेप्ट अंग्रेज़ी में 10 तैयार पेजों के रूप में मौजूद है। 22 सितंबर 2026 को VITON¹³ ने Chrome में रेंडर किए गए इनमें से 9 पेज जाँचे, 404 पेज को छोड़कर: सभी 9 के title अलग-अलग हैं और भाषा घोषित है, 390 px पर लेआउट बिना साइड-स्क्रॉल के टिकता है, 100% तस्वीरों में alt टेक्स्ट है और कोई आंतरिक लिंक टूटा नहीं है।

होम पेज पर Lighthouse। मोबाइल पर: परफ़ॉर्मेंस 88, एक्सेसिबिलिटी 95, बेस्ट प्रैक्टिसेज़ 77 और SEO 100, साथ में LCP 2.9 सेकंड, CLS 0.008 और TBT 0 ms। डेस्कटॉप पर: परफ़ॉर्मेंस 99, LCP 0.9 सेकंड और CLS 0.003। मोबाइल पर होम पेज 21 रिक्वेस्ट में 13.4 MB का है, जिसकी वजह हीरो का फ़ुल-HD वीडियो है।

stoa एक कॉन्सेप्ट है, किसी ग्राहक का ऑर्डर किया हुआ प्रोजेक्ट नहीं। फ़र्म, लोग, प्रोजेक्ट, पुरस्कार और पते काल्पनिक हैं; फ़ोटो और वीडियो Unsplash और Pexels के लाइसेंस वाले स्टॉक हैं। साइट का न कोई डोमेन है, न विज़िटर, न सर्च ट्रैफ़िक, न पूछताछ, इसलिए यह केस रैंकिंग, लीड या किसी आर्किटेक्चर फ़र्म के ग्राहकों के इस्तेमाल के बारे में कुछ नहीं बताता।

Lighthouse का SEO 100 सिर्फ़ बुनियादी बातें जाँचता है। कैनोनिकल URL, Open Graph, JSON-LD, sitemap.xml और robots.txt अभी नहीं हैं, 9 में से 8 title 30–65 अक्षरों की सीमा से बाहर हैं, और Lighthouse के आँकड़े एक दिन में एक पेज का लैब माप हैं, असली विज़िटरों का डेटा नहीं।