डेवलपर्स की एक बुरी आदत है कि वे स्विस आर्मी नाइफ बनाने लगते हैं, जबकि उन्हें केवल एक तेज़ धार वाले ब्लेड की ज़रूरत होती है। हम भारी फ्रोंटे

डेवलपर्स की एक बुरी आदत है कि वे 'स्विस आर्मी नाइफ' (Swiss Army knife) बनाने लगते हैं, जबकि उन्हें सिर्फ एक तेज़ धार वाले ब्लेड की ज़रूरत होती है। HTML की पहली लाइन लिखने से पहले ही हम भारी frontend frameworks का सहारा लेने लगते हैं। हम animation libraries, state management tools और इतने शक्तिशाली build pipelines जोड़ देते हैं जो एक छोटी कंपनी चलाने के लिए काफी हों। फिर हम हैरान होते हैं कि हमारी पोर्टफोलियो साइट्स को लोड होने (paint) में तीन सेकंड क्यों लगते हैं, मोबाइल पर नेविगेशन क्यों टूट जाता है, और हायरिंग मैनेजर्स हमारे उन प्रोजेक्ट्स को देखे बिना ही क्यों चले जाते हैं जिन्हें बनाने में हमने महीनों बिताए हैं।

मैंने अपने नवीनतम पोर्टफोलियो के साथ एक अलग रास्ता चुना। मैंने अंतहीन dependencies के इकोसिस्टम से दूरी बना ली और पूरी साइट को semantic HTML और साफ-सुथरे CSS के साथ बनाया। कोई JavaScript frameworks नहीं। कोई build steps नहीं। कोई third-party animation engines नहीं। बस खुद प्लेटफॉर्म, layout के लिए CSS Grid और Flexbox, और एक डिज़ाइन फिलॉसफी जो स्पीड और स्पष्टता को बाद में सोचने वाली चीज़ों के बजाय मुख्य फीचर्स के रूप में देखती है।

परिणाम हल्का, तेज़ और प्रोफेशनल है। यहाँ बताया गया है कि मैंने इसे ठीक से कैसे किया।

नींव से शुरुआत करें

ज़्यादातर over-engineering की शुरुआत नींव से ही होती है। एक पोर्टफोलियो को single-page application होने की ज़रूरत नहीं है। इसे आपके काम को दिखाने, लोगों को आपसे संपर्क करने का तरीका बताने और अपना काम करने की ज़रूरत है। मैंने semantic HTML का उपयोग किया क्योंकि ब्राउज़र पहले से ही जानता है कि nav, एक article, और एक footer को कैसे रेंडर करना है। जब आप सही काम के लिए सही element का उपयोग करते हैं, तो आपको accessibility, search engine visibility, और responsive behavior लगभग मुफ्त में मिल जाते हैं। आप कम कोड भी लिखते हैं। पाँच ARIA attributes वाला एक div सिर्फ एक button की एक लंबी और जटिल नकल है। मैंने इससे पूरी तरह परहेज किया।

Layout के लिए, CSS Grid और Flexbox पर्याप्त से अधिक हैं। Grid मैक्रो स्ट्रक्चर को संभालता है: पूरे पेज के सेक्शन, प्रोजेक्ट गैलरी, प्रमुख ब्लॉक्स का संरेखण (alignment)। Flexbox माइक्रो इंटरैक्शन को मैनेज करता है: उस कैप्सूल के अंदर नेविगेशन लिंक्स, कार्ड के भीतर टेक्स्ट को बीच में लाना, और फुटर को व्यूपोर्ट के नीचे धकेलना। साथ मिलकर वे हर उस कारण को खत्म कर देते हैं जिसकी वजह से आपको 2018 में किसी twelve-column grid framework को इम्पोर्ट करने की ज़रूरत पड़ती थी। कोड पढ़ने में आसान रहता है। CSS फ़ाइल छोटी रहती है।

रंग, टाइपोग्राफी और संयम

मैं चाहता था कि पोर्टफोलियो लोड होते ही शांत महसूस हो। बैकग्राउंड में सूक्ष्म (subtle) radial gradients के साथ एक हल्का बेस इस्तेमाल किया गया है। कुछ भी आक्रामक नहीं। ग्रेडिएंट कम opacity पर है, जो एक कोमल गहराई (soft depth) बनाता है जिससे पेज सपाट नहीं लगता, लेकिन ध्यान खींचने की कोशिश भी नहीं करता। यह तुरंत लोड होता है क्योंकि यह शुद्ध CSS है। यहाँ कंप्रेस करने के लिए कोई hero images नहीं हैं, मैनेज करने के लिए कोई WebP fallbacks नहीं हैं, और कॉन्फ़िगर करने के लिए कोई JavaScript lazy-loading libraries नहीं हैं।

टाइपोग्राफी व्यक्तित्व (personality) को दर्शाती है। मैंने Outfit को Ovo के साथ जोड़ा। Outfit, एक geometric sans-serif है, जो सभी UI टेक्स्ट को संभालता है: नेविगेशन लेबल, बटन टेक्स्ट, बॉडी कॉपी, मेटा डिटेल्स। यह स्क्रीन पर स्पष्ट है और छोटे आकार में भी पढ़ने योग्य रहता है। Ovo, एक medium-contrast serif है, जो हेडर्स और मुख्य हेडलाइंस के काम आता है। यह जोड़ी पेज को एक शांत एडिटोरियल (editorial) अहसास देती है। यह डिज़ाइन किया हुआ लगता है, न कि केवल कोई थीम। सबसे महत्वपूर्ण बात यह है कि दोनों फ़ॉन्ट एक ही फ़ॉन्ट सर्विस कॉल या self-hosted फ़ाइलों से लोड होते हैं। इसमें कोई layout shift नहीं होता, कोई unstyled text का फ्लैश नहीं होता, और शुरुआती रेंडर के बाद कोई स्क्रिप्ट वेट्स (weights) नहीं बदलती।

फ्लोटिंग कैप्सूल मेनू

नेविगेशन वह जगह है जहाँ पोर्टफोलियो अक्सर अपने ही बोझ तले दब जाते हैं। फुल-स्क्रीन ओवरले मेनू, स्टैगर्ड एनिमेशन स्क्रिप्ट, और हैमबर्गर आइकन जिन्हें एक क्लास टॉगल करने के लिए चालीस लाइनों के JavaScript की आवश्यकता होती है। मुझे इनमें से कुछ भी नहीं चाहिए था।

मैंने एक फ्लोटिंग glassmorphic कैप्सूल मेनू बनाया है। यह एक सिंगल हॉरिजॉन्टल कंटेनर है, जिसके किनारे गोल हैं, और इसे व्यूपोर्ट के ऊपरी हिस्से के पास fixed रखा गया है। Glassmorphism एक semi-transparent बैकग्राउंड कलर और backdrop-filter: blur() प्रॉपर्टी से आता है। यह कंटेंट को छिपाए बिना उसके ऊपर तैरता है, हर सेक्शन तक तुरंत पहुँच प्रदान करता है, और बिना किसी पूर्ण रीडिज़ाइन के छोटे व्यूपोर्ट्स पर सहजता से सिमट जाता है। यह प्रभाव आधुनिक दिखता है क्योंकि ब्राउज़र कंपोजिटिंग (compositing) को संभालता है, न कि कोई canvas library।

स्टेटस बैज