यह पोर्टफोलियो
आप अभी इसी को देख रहे हैं।
मैं चाहता था कि मेरा पोर्टफोलियो किसी résumé जैसा न लगे, बल्कि एक बातचीत जैसा महसूस हो - इसलिए मैंने इसे एक AI चैट विंडो की तरह बनाया। आप बड़े सर्च बॉक्स में टाइप करते हैं, और साइट वही दिखा देती है जो आप ढूँढ रहे हैं।
आइडिया
ज़्यादातर पोर्टफोलियो बस कार्ड्स की एक लंबी दीवार होते हैं, जिन्हें आप स्क्रॉल करते जाते हैं। मैं कुछ ऐसा चाहता था जिससे आप बात कर सकें। पूरी साइट एक ही सर्च इनपुट के इर्द-गिर्द बनी है: टाइप करना शुरू कीजिए, और प्रोजेक्ट्स और पोस्ट्स आपकी आँखों के सामने फ़िल्टर होते जाते हैं। कोई बैकएंड नहीं, कोई लोडिंग स्पिनर नहीं - एक छोटा JSON इंडेक्स बिल्ड के वक़्त बन जाता है और सीधे ब्राउज़र में फ़िल्टर होता है।
बना कैसे है
मैंने Astro 6 इसलिए चुना क्योंकि यह डिफ़ॉल्ट रूप से ज़ीरो JavaScript भेजता है और Markdown को पूरी अहमियत देता है। साइट का ज़्यादातर हिस्सा सादा static HTML है - झट से लोड होता है, hydrate करने को कुछ नहीं।
जिन दो चीज़ों को सच में इंटरैक्टिव होना ज़रूरी था - सर्च बार और थीम स्विचर - वे Preact islands की तरह चलती हैं। बाकी सब कुछ static रहता है।
थीमिंग
पूरा लुक CSS custom properties से चलता है, इसलिए पूरा कलर पैलेट बदलना बस कुछ tokens बदलने भर की बात है। चार थीम पहले से तैयार आती हैं:
| थीम | मिज़ाज |
|---|---|
| Dark | लगभग काला, नीला accent - डिफ़ॉल्ट |
| Light | साफ़-सुथरा ऑफ़-व्हाइट, वही नीला |
| Solarized | Ethan Schoonover का क्लासिक पैलेट |
| Aderberry | गरम amber और sepia, थोड़ा टर्मिनल वाला nostalgia |
एक छोटी बात जिस पर मुझे फ़ख़्र है: पेज पेंट होने से पहले ही एक नन्हा inline script आपकी सेव की हुई थीम पढ़ लेता है, ताकि लोड होते वक़्त गलत रंगों की झलक आँखों में न चुभे।
आगे क्या
- असली प्रोजेक्ट केस स्टडीज़
- डिज़ाइन और इंजीनियरिंग पर और लेखन
- पूरी multilingual routing (हो सकता है आप अभी उन्हीं अनुवादों में से एक पढ़ रहे हों)
बनाया गया Astro 6 · Preact · Archivo + Space Grotesk से