नमस्कार, हेब्र! मैं आपके लिए एम्मा वेसकाइंड के लेख "हाउ टू बिल्ड ए ग्रेट टेक्निकल पोर्टफोलियो" का अनुवाद प्रस्तुत करता हूं।

एक पोर्टफोलियो आपके व्यक्तित्व का प्रतिबिंब होता है, आमतौर पर आपके और आपके काम की पहली छाप, पोर्टफोलियो की बदौलत ही बनती है। इस प्रकार, यह अनिवार्य है कि आप एक ऐसा पोर्टफोलियो बनाएं जो आपको और आपके काम को सबसे अच्छे से प्रकट करे।

मेरा सुझाव है कि आप सही तकनीकी पोर्टफोलियो बनाने के लिए मेरे कुछ सुझावों पर एक नज़र डालें।

नोट: ये टिप्स मेरे व्यक्तिगत अनुभव पर आधारित हैं। एक शानदार पोर्टफोलियो बनाने के कई तरीके हैं, इसलिए उन्हें दिशा-निर्देशों के रूप में उपयोग करें न कि कठोर नियमों के रूप में।

एक अच्छा पोर्टफोलियो क्या है?

पोर्टफोलियो बताता है कि आप किस तरह के व्यक्ति हैं और आप क्या कौशल प्रदान कर सकते हैं। इसके अलावा, एक पोर्टफोलियो आपके विकास कौशल को प्रदर्शित करने का एक आदर्श तरीका है!

यहां यह सुनिश्चित करने के लिए महत्वपूर्ण कारक हैं कि आपके पोर्टफोलियो में प्रथम श्रेणी है।

आपके पोर्टफोलियो को लोगों को आपके बारे में बताना चाहिए।

पोर्टफोलियो स्पार्कल करने का आपका तरीका है। आपको आनंद के लिए क्या करना पसंद है? संक्षेप में आपकी जीवन कहानी क्या है? आप क्या चाहेंगे कि लोग आपके बारे में जानें?

कुछ व्यक्तिगत स्पर्शों को जोड़कर, आप संभावित नियोक्ताओं को यह अनुमान देते हैं कि यह आपके साथ कैसे काम करता है!

यहाँ मेरे पोर्टफोलियो पेज से एक छोटा सा अंश है। इसे यहां पूरी तरह से देखने के लिए स्वतंत्र महसूस करें।

आपके पोर्टफोलियो को आपके सबसे अच्छे काम या प्रोजेक्ट का प्रदर्शन करना चाहिए।

यदि आपके पास ऐसी कोई परियोजना या कार्य है, जिस पर आपको गर्व है, जो आपकी प्रोग्रामिंग या डिज़ाइन क्षमताओं का वर्णन करता है, तो आपका पोर्टफोलियो उन्हें प्रदर्शित करने के लिए सही जगह है।

कई कंपनियां अपना स्वयं का (गोपनीय) काम करती हैं, इसलिए आप सोच रहे होंगे कि आप उन्हें सार्वजनिक पोर्टफोलियो में कैसे शामिल कर सकते हैं।

दुर्भाग्य से, आप ऐसा नहीं कर सकते। मेरा सुझाव दो से तीन तृतीय-पक्ष परियोजनाओं को ले जाने का है जो आपकी क्षमताओं को प्रदर्शित करेगा। मुझे पता है कि यह सभी के लिए संभव नहीं है, लेकिन जब आपका काम गोपनीय होगा तब आप कुछ और नहीं कर सकते।

अपना काम प्रदर्शित करने के लिए, उपयोग की गई तकनीकों का वर्णन करें, परियोजना में आपकी भूमिका (यदि लागू हो), एक स्क्रीनशॉट या दो शामिल करें और कोड के लिए एक लिंक पोस्ट करें (यदि संभव हो तो)।

इस तरह से मैंने अपने पोर्टफोलियो में कार्य अनुभाग निर्धारित किया है। आप इसे पूरी तरह से यहां देख सकते हैं ।

आपके पोर्टफोलियो को आपके प्रभावशाली विकास (और डिज़ाइन) कौशल का वर्णन करना चाहिए।

नियोक्ता का ध्यान आकर्षित करने का एक शानदार तरीका यह है कि आप अपने पोर्टफोलियो को साइड प्रोजेक्ट के रूप में इस्तेमाल करें। मैंने अपने पोर्टफोलियो को सरल बनाने के लिए रिएक्ट.जेएस पर गैट्सबी का उपयोग किया क्योंकि मैं साइट जनरेटर के साथ प्रयोग करना चाहता था और रिएक्ट के साथ काम करने में अपने कौशल का प्रदर्शन करता था।

एक पोर्टफोलियो बनाने से पहले, मैंने इसे पूरी तरह से स्केच में संकलित किया। मैं एक योजना बनाने की सलाह देता हूं कि आप अपने बारे में जानकारी कैसे प्रस्तुत करना चाहते हैं।

आपका पोर्टफोलियो प्रासंगिक होना चाहिए।

रिक्रूटर और संभावित नियोक्ता आपके पोर्टफोलियो को देख सकते हैं, भले ही आपने इसे सालों तक अपडेट नहीं किया हो। इसलिए, जितना संभव हो सके अपने बारे में जानकारी रखना इतना महत्वपूर्ण है।

यदि आपकी कोई नई भूमिका है, तो अपने पोर्टफोलियो को अपग्रेड करें। यदि आपने एक अच्छा नया ऐप बनाया है, तो अपने पोर्टफोलियो को अपडेट करें!

आप चाहते हैं कि यह आपके और आपके वर्तमान कौशल सेट का प्रतिनिधित्व हो। इसलिए, कुछ बनाना महत्वपूर्ण है जो बाद में ठीक करना आसान है और जो समय की कसौटी पर खड़ा होगा।

आपके पोर्टफोलियो में आपके संपर्क होने चाहिए।

आपको हमेशा अपने पोर्टफोलियो में संवाद करने का एक तरीका प्रदान करना चाहिए। ईमानदारी से, फिलहाल, मेरे पोर्टफोलियो में मेरे संपर्क नहीं हैं (मुझ पर शर्म करो!)

यदि आप अपने संपर्क प्रदान नहीं करते हैं, तो भर्तीकर्ता संभावित रिक्तियों के बारे में आपसे संपर्क नहीं कर पाएंगे।

इसलिए अपने सोशल नेटवर्क पर एक लिंक जोड़ें (यदि आप उन्हें अपने संचार के प्राथमिक साधन के रूप में उपयोग करते हैं), आपका ईमेल या आपका फ़ोन नंबर (यदि आपको बहुत अधिक कॉल करने का मन नहीं है)।

उन्हें आपसे संपर्क करने का कोई तरीका दें।

मैं एक अच्छे डिजाइन के साथ कैसे आऊं?

पोर्टफोलियो डिज़ाइन बनाना सबसे कठिन कामों में से एक हो सकता है, खासकर यदि आप बैक-एंड डेवलपर हैं या यदि आपको प्रोजेक्ट डिज़ाइन में व्यावहारिक रूप से कोई अनुभव नहीं है।

जब मैं एक वेबसाइट या एप्लिकेशन बनाता हूं, तो मैं रंग पट्टियों को प्रेरित करने और चयन करने के लिए ड्रिबल का उपयोग करता हूं। आप Wix और Squarespace एप्लिकेशन टेम्प्लेट का भी उपयोग कर सकते हैं। मैं आपको अन्य लोगों के डिजाइनों की चोरी करने की सलाह नहीं देता, लेकिन प्रेरणा के लिए यह एक अच्छा शुरुआती बिंदु है।

मैं डिजाइन को यथासंभव सरल बनाने की सलाह देता हूं। आप कुछ ऐसा करना चाहते हैं जो 5 या 10 साल बाद भी अच्छा लगे। सरल लेकिन सस्ती रंग चुनें। उचित आकार के पठनीय फोंट का उपयोग करें।

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

यदि आपको ग्राफिक्स की आवश्यकता है, तो मैं अनड्रा सेवा की सलाह देता हूं , जो मुफ्त और उपयोग में आसान है।

पोर्टफोलियो बनाने के लिए मुझे किन तकनीकों का उपयोग करना चाहिए?

कई अलग-अलग प्रौद्योगिकियां हैं जिनके साथ आप अपना पोर्टफोलियो बना सकते हैं। चलो बैक-एंड और फ्रंट-एंड डेवलपर्स के लिए कई विकल्पों से परिचित हैं।

बैक-एंड डेवलपर्स

यदि आप एक बैक-एंड डेवलपर हैं, या आप वास्तव में UI विकसित करना पसंद नहीं करते हैं, तो आप कुछ युक्तियों पर ध्यान दे सकते हैं।

1. पूरी तरह से सीएमएस

एक सामग्री प्रबंधन प्रणाली डिजिटल सामग्री के निर्माण और सामग्री का प्रबंधन करती है।

वर्डप्रेस सबसे लोकप्रिय सामग्री प्रबंधन प्रणालियों में से एक है, और यह उन डेवलपर्स के लिए एक बढ़िया विकल्प है जो अपने यूआई को विकसित करने में बहुत सहज नहीं हैं।

2. वेनिला HTML और सीएसएस का उपयोग करें

यदि आप वेब विकास की मूल बातें जानते हैं, तो एक बढ़िया विकल्प वेनिला एचटीएमएल और सीएसएस का उपयोग करके एक साइट बनाना शुरू करना होगा। यह मत सोचिए कि यदि आपको इस में शानदार कौशल नहीं आता है, तो आपको इंटरफ़ेस के डिजाइन / मॉडलिंग के साथ खुद को पीड़ा देना होगा। लेकिन एचटीएमएल और सीएसएस में अपनी साइट बनाने से पता चलेगा कि आप अपने कम्फर्ट जोन से बाहर के कौशल सीख सकते हैं।

आपको एक प्रभावशाली पोर्टफोलियो बनाने के लिए जावास्क्रिप्ट की भी आवश्यकता नहीं है!

3. CSS फ्रेमवर्क का उपयोग करें

यदि आप मूल HTML और CSS के साथ सहज हैं, लेकिन अधिक संगत UI चाहते हैं, तो आप CSS चौखटे आज़मा सकते हैं।

सीएसएस चौखटे शैली के तत्वों के साथ तेजी से और आसानी से काम कर रहे हैं। यह ध्यान रखना महत्वपूर्ण है कि यदि आप फ्रंट-एंड डेवलपर नौकरी के लिए आवेदन कर रहे हैं, तो सीएसएस फ्रेमवर्क का उपयोग करना सबसे अच्छा विकल्प नहीं हो सकता है, क्योंकि नियोक्ता एक ऐसे डेवलपर की तलाश में होंगे जो सीएसएस विकसित कर सके। लेकिन बैक-एंड डेवलपर के लिए, यह एक शानदार अवसर हो सकता है।

मैं आपको सलाह देता हूं कि आप फाउंडेशन , बुल्मा , सेमेटिकयू , या बूटस्ट्रैप पर ध्यान दें ।



4. साइट बिल्डरों का उपयोग करें

यदि आप केवल सामग्री को जितनी जल्दी हो सके पोस्ट करना चाहते हैं, तो आप साइट बिल्डरों जैसे विक्स या स्क्वेर्सस्पेस का भी उपयोग कर सकते हैं।

वे यथासंभव जल्दी और आसानी से एक वेबसाइट बना सकते हैं। आप अपने स्वयं के डोमेन को भी एकीकृत कर सकते हैं।

हालांकि, यदि आप एक फ्रंट-एंड डेवलपर होने का दावा कर रहे हैं, तो मैं वेबसाइट डेवलपमेंट प्लेटफॉर्म का उपयोग करने के खिलाफ चेतावनी देता हूं। आखिरकार, यह आपके डेवलपर कौशल को दिखाने का एक मौका है! सभी या कुछ भी नहीं!

फ्रंट-एंड डेवलपर्स

यदि आप एक फ्रंट-एंड डेवलपर हैं, तो आपके पास साइट बनाने के लिए कई विकल्प उपलब्ध हैं।

1. वेनिला एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करें

एक साधारण वेनिला साइट का उपयोग करके आप कभी भी गलत नहीं होंगे। यदि आप यह नहीं चाहते हैं या आपको इसकी आवश्यकता नहीं है तो पोर्टफोलियो आर्किटेक्चर को बहुत अधिक जटिल बनाने का कोई मतलब नहीं है। साधारण तथ्य यह है कि आपने अपनी साइट को खरोंच से बनाया है, संभावित नियोक्ताओं को दिखाता है कि आप अपने कौशल का प्रदर्शन करने के लिए कुछ अतिरिक्त समय बिताने के इच्छुक हैं।

2. जावास्क्रिप्ट चौखटे का प्रयोग करें

आप अपने पोर्टफोलियो का उपयोग जावास्क्रिप्ट में एक फ्रेमवर्क या लाइब्रेरी का उपयोग करके अपनी क्षमताओं का अभ्यास (और प्रदर्शित) कर सकते हैं। मेरा सुझाव है कि आप जिस चीज के साथ काम करने में सहज हैं (या ऐसा ही हो, यह चुनना कि आप क्या सीखना चाहते हैं) या आपकी चुनी हुई विशेषता के लिए क्या उपयुक्त है।

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

3. स्थैतिक साइट जनरेटर का उपयोग करें।

स्थैतिक साइटों के जनरेटर ने लोकप्रिय पुस्तकालयों और रूपरेखा (रिएक्ट, व्यू, कोणीय, आदि) की शुरूआत के साथ कंप्यूटर उद्योग में प्रसिद्धि प्राप्त की है। मैंने Gatsby के साथ अपना पोर्टफोलियो बनाया: रिएक्ट के लिए एक साइट जनरेटर।



कई अलग-अलग साइट जनरेटर हैं, जैसे रिएक्ट एप्लिकेशन के लिए Next.js और Vue.js. के लिए VuePress हैं।

वे छवि अनुकूलन प्लगइन्स, मोबाइल उपकरणों के लिए अनुकूलनशीलता और अभिगम्यता जैसी उपयोगी सुविधाएँ प्रदान करते हैं।

अपने पोर्टफोलियो में कोड सिफारिशें।

• सुनिश्चित करें कि आपका कोड सोच-समझकर और कुशलता से व्यवस्थित किया गया है। अपनी सभी सामग्री को एक पृष्ठ पर रखना बहुत आसान है (और आप इसे कर सकते हैं), लेकिन विभिन्न अनुभागों / सामग्री को अपने वेब घटकों या HTML पृष्ठों में विभाजित करना एक बड़ा अंतर ला सकता है।
• सुनिश्चित करें कि आपका CSS साफ और व्यवस्थित है। पोजिशनिंग एलिमेंट्स (जैसे फ्लेक्सबॉक्स या सीएसएस-ग्रिड ऑन फ्लोट्स) के लिए अधिक आधुनिक सीएसएस के साथ छड़ी करने का प्रयास करें। इससे पता चलता है कि आप विनिर्देशों के साथ अद्यतित रहते हैं।
• अर्थ HTML का उपयोग करें। परिभाषित प्रमुख क्षेत्रों के साथ एक पदानुक्रम में अपने कोड को व्यवस्थित करें। अपने पोर्टफोलियो में महत्वपूर्ण बिंदुओं को उजागर करने के लिए इन प्रमुख क्षेत्रों (अनुभाग, नौसेना, हेडर, एक तरफ, शरीर, आदि) का उपयोग करें। डिव और स्पैन के उपयोग को कम करने की कोशिश करें।

मुझे क्या सामग्री जोड़ने की आवश्यकता है?

मैं हमेशा आपके पोर्टफोलियो में निम्नलिखित मदों को शामिल करने की सलाह देता हूं:

• मेरे बारे में : आप कौन हैं? आप अपने खाली समय में क्या करना पसंद करते हैं? आपके पास क्या मजेदार तथ्य हैं?
• कार्य / परियोजना / कौशल : आपने किन तकनीकों के साथ काम किया? किन परियोजनाओं का विकास हुआ है?
• ब्लॉग (वैकल्पिक) : यदि आप एक ब्लॉग हैं, तो इसे यहाँ साझा करें।
• संपर्क : एक रिक्रूटर आपसे कैसे संपर्क कर सकता है?

फिर, ये मेरी व्यक्तिगत प्राथमिकताएँ हैं। आपको बस एक पृष्ठ बनाने की आवश्यकता हो सकती है जिसे आप विभिन्न प्लेटफार्मों (सामाजिक नेटवर्क, गिटहब, आदि) पर वितरित करते हैं।

---

याद रखें, आपका पोर्टफोलियो खुद का प्रतिबिंब है। किसी पोर्टफोलियो को संकलित करने का यह एकमात्र विकल्प नहीं है जो सभी के लिए उपयुक्त है। अपना खुद का बनाएँ!