व्यक्तिगत प्रोजेक्ट

पर्सनल पोर्टफोलियो — paurushrai.in

यह पोर्टफोलियो साइट खुद — एक Next.js 14 बिल्ड जिसमें 12-भाषा समर्थन, एक फर्स्ट-पार्टी एनालिटिक्स प्रॉक्सी जो ऐड ब्लॉकर के बावजूद टिकी रहती है, और 99/100 का Lighthouse स्कोर है। ओपन सोर्स।

यह वही साइट है जिस पर आप अभी हैं। यह एक Next.js 14 प्रोजेक्ट है जिसे एक टेम्पलेट के बजाय एक छोटे प्रोडक्ट की तरह बनाया और संभाला गया है — कोडबेस सार्वजनिक है, इसलिए नीचे दिए गए सारे ब्योरे जांचे जा सकते हैं। यह Lighthouse में डेस्कटॉप पर 99/100 और मोबाइल पर 97/100 स्कोर करती है, और Accessibility व SEO में 100।

पर्सनल पोर्टफोलियो — paurushrai.in

इसमें क्या है

  • 12 भाषाएं: साइट अंग्रेज़ी, जर्मन, स्पैनिश, फ्रेंच, हिंदी, इतालवी, जापानी, कोरियाई, पुर्तगाली, रूसी, तुर्की और चीनी में उपलब्ध है। एक टाइप किया हुआ लैंग्वेज कॉन्टेक्स्ट और ट्रांसलेशन मैप स्विचर को चलाते हैं, जो आपकी पसंद याद रखता है और पेज का lang एट्रिब्यूट अपडेट करता है ताकि स्क्रीन रीडर और सर्च इंजन सही भाषा पढ़ें। हर स्ट्रिंग शामिल है, कॉन्टैक्ट फॉर्म समेत।

  • एक पार्टिकल बैकग्राउंड जो तेज़ बना रहता है: कर्सर का पीछा करते बिंदु एक canvas पर बनाए जाते हैं। एक शुरुआती वर्ज़न अटकता था क्योंकि यह हर माउस मूव पर canvas की पोज़िशन नापता था, जिससे लगातार लेआउट दोबारा गणना करनी पड़ती थी। उस माप को कैश करने से झटके हट गए, और पार्टिकल्स को लेज़ी-लोड करना उन्हें पहली पेंट से बाहर रखता है — यही ज़्यादातर वह चीज़ है जिसने डेस्कटॉप स्कोर को 99 तक पहुंचाया।

  • ऐसे एनालिटिक्स जिन्हें ऐड ब्लॉकर चुपचाप नहीं तोड़ते: थर्ड-पार्टी डोमेन से लोड होने वाली एनालिटिक्स स्क्रिप्ट को uBlock और Brave जैसे ब्लॉकर चुपचाप गिरा देते हैं, जिससे बिना किसी चेतावनी के 20–40% इवेंट खो जाते हैं। एनालिटिक्स को साइट के अपने डोमेन के ज़रिये रूट करना डेटा को फर्स्ट-पार्टी और पूरा रखता है। Umami प्राइवेसी-फ्रेंडली आंकड़े संभालता है; Google Tag Manager बाकी।

  • SEO की बुनियादी बातें ठीक से: व्यक्ति और हर प्रोजेक्ट के लिए स्ट्रक्चर्ड डेटा, हर पेज के सभी 12 वर्ज़नों पर सही लैंग्वेज टैग, कैनोनिकल URL ताकि अनुवाद आपस में न भिड़ें, और प्रति प्रोजेक्ट बनाए गए सोशल प्रीव्यू कार्ड।

  • एक्सेसिबिलिटी: एक स्किप-टू-कंटेंट लिंक, कीबोर्ड यूज़र्स के लिए दिखने वाली फोकस आउटलाइन, AA-पास करने वाला टेक्स्ट कॉन्ट्रास्ट, स्क्रीन रीडर से छिपाए गए सजावटी एनिमेशन, और एक लैंग्वेज मेनू जो एक स्टाइल किए हुए div के बजाय सही ढंग से नेविगेट होने लायक मार्कअप के रूप में बना है।

  • कंटेंट बस Markdown है: एक प्रोजेक्ट जोड़ने का मतलब है सही भाषा फोल्डर में एक Markdown फाइल डालना — यह अगले डिप्लॉय पर, पूरी तरह टाइप किया हुआ, बिना किसी कोड बदलाव के दिख जाता है। पेज व्यू एक छोटे सर्वरलेस फंक्शन से गिने जाते हैं जो IP को स्टोर करने के बजाय हैश करता है, इसलिए कोई कुकी या निजी डेटा नहीं है।

यह क्यों मायने रखता है

यह साइट एक चलते-फिरते उदाहरण की तरह भी काम करती है कि बाकी ये प्रोजेक्ट कैसे बने हैं — परफॉर्मेंस, प्राइवेसी का ख्याल रखने वाला एनालिटिक्स, बहु-भाषा समर्थन, और एक्सेसिबिलिटी, सब एक ही जगह जिसे आप जांच सकते हैं। चूंकि रिपॉजिटरी खुली है, कोड को विवरण के मुकाबले परखा जा सकता है।