AI के साथ पोर्टफोलियो वेबसाइट कैसे बनाएं

बिल्डर खोलने से पहले, न्यूनतम scope लिख लें। ज़्यादातर व्यक्तिगत पोर्टफोलियो को बहुत सारे पेज नहीं चाहिए होते, लेकिन उन्हें स्पष्ट content ज़रूर चाहिए।

एक सामान्य संरचना यह हो सकती है:

• होम पेज: नाम, भूमिका, छोटा परिचय, और कुछ featured projects
• Projects पेज या project sections: screenshots, summaries, इस्तेमाल किए गए tools, और outcomes
• About पेज: background, skills, और working style
• Contact section: email, social links, और चाहें तो एक form

यह भी तय करें कि साइट किसके लिए है:

• Hiring managers, जो काम का तेज़ proof देखना चाहते हैं
• Clients, जो देखना चाहते हैं कि आप उनके तरह के project के लिए fit हैं या नहीं
• Collaborators, जो आपका process और taste देखना चाहते हैं

फिर वह content लिख लें जो आपके पास पहले से है:

• Project titles
• हर project के लिए 1–3 screenshots
• Short descriptions
• Live work या GitHub के links
• Bio और headshot

अगर आप यह पहले कर लेते हैं, तो AI के पास first pass में उपयोगी चीज़ बनाने के लिए पर्याप्त context होता है, बजाय इसके कि वह एक generic template दे।

Moremade में आप site को plain language में describe करते हैं। AI agent source code लिखता है, live preview देता है, और आप chat के जरिए बदलाव करते रह सकते हैं।

आपके पहले prompt में यह शामिल होना चाहिए:

• यह किस तरह का portfolio है
• कौन से pages या sections चाहिए
• कौन सा content शामिल करना है
• visual direction
• कोई functional detail, जैसे contact form या links

इसे specific रखें। अगर आप सिर्फ "मेरे लिए एक portfolio बनाओ" कहेंगे, तो result ठीक करने में ज़्यादा समय लगेगा।

उदाहरण first prompt:

Maya Chen नाम की freelance product designer के लिए एक personal portfolio website बनाएं। एक clean, minimal layout, strong typography, muted colors, और generous spacing इस्तेमाल करें। एक home page बनाएं जिसमें short hero intro, featured projects, about section, testimonials placeholder, और contact section हो। 4 case study cards वाला एक projects page जोड़ें। हर project में title, one-line summary, tools used, और more details के लिए एक button दिखे। navigation, footer, mobile-friendly layout, और contact form शामिल करें। React और Tailwind style conventions का उपयोग करें और site को flashy के बजाय professional महसूस कराएं।

एक straightforward portfolio के लिए, पहले core pages और एक sensible default layout माँगें। Visual details को बाद में preview देखकर refine किया जा सकता है।

पहला version generate होने के बाद, live preview को ध्यान से देखें। पहले content structure देखें, फिर visual polish।

इन बिंदुओं की जाँच करें:

• क्या first screen में hierarchy साफ़ है?
• क्या projects को जल्दी scan किया जा सकता है?
• क्या about section पर्याप्त personal लग रहा है?
• क्या buttons, spacing, और text sizes consistent हैं?
• क्या कुछ filler text जैसा लग रहा है जिसे बदलना चाहिए?

Moremade आपको chat करके बदलाव करने देता है, और इसमें एक visual inspector भी है जिससे आप किसी element पर point करके उसे edit कर सकते हैं। ऐसे short follow-up prompts इस्तेमाल करें जो एक समय में एक issue को target करें।

तीन उपयोगी उदाहरण:

• "Hero section की height कम करें, featured projects को पेज पर ऊपर ले जाएँ, और intro text को और concise बनाएं।"
• "Project cards को case study previews में बदलें, ऊपर एक thumbnail, tool tags, और हर summary के नीचे एक short outcome line जोड़ें।"
• "ज़्यादा warm neutral color palette इस्तेमाल करें, body text contrast बढ़ाएँ, और contact form button को सिर्फ mobile पर full width करें।"

यह stage आम तौर पर तेज़ होती है अगर आप तब तक total redesign न माँगें जब तक पहली structure साफ़ तौर पर गलत न हो।

बहुत से portfolios को database, sign-in, या payments की ज़रूरत नहीं होती। पहले version को simple रखना उसे पूरा करना आसान बनाता है।

Supabase का उपयोग तभी करें जब portfolio में ऐसी चीज़ें चाहिए हों जैसे:

• Contact form जो submissions store करे
• Protected content behind sign-in
• Project entries को data से update करने के लिए छोटा CMS-like setup

Stripe का उपयोग तभी करें जब portfolio कुछ बेच भी रहा हो, जैसे:

• Paid design templates
• Consultation sessions
• Digital downloads

Moremade में Supabase और Stripe के लिए built-in connectors हैं, साथ ही Resend और SendGrid जैसे email providers भी हैं। अगर इनमें से कुछ जोड़ते हैं, तो requirement साफ़-साफ़ लिखें।

उदाहरण:

• "Contact form को Supabase से connect करें ताकि submissions name, email, और message के साथ store हों।"
• "मेरी set की हुई price पर 60-minute portfolio review session के लिए Stripe checkout page जोड़ें।"

अगर आपका लक्ष्य एक professional personal site live करना है, तो इन integrations को तब तक छोड़ दें जब तक वे किसी real need को solve न करें।

Portfolio अक्सर पहले फोन पर देखा जाता है, खासकर email या social profiles के link से। Mobile issues अच्छे काम को लापरवाह दिखाने का सबसे आसान तरीका हैं।

Preview में यह देखें:

• Navigation menu का behavior
• Hero text wrapping
• Project card spacing
• Image cropping
• Button size और tap targets
• Contact form field spacing
• Footer link readability

"mobile बेहतर बनाओ" कहने के बजाय precise fixes माँगें।

उदाहरण:

• "Mobile width से नीचे की screens पर hero content को vertically stack करें और headline size एक step कम करें।"
• "सभी project thumbnails को एक जैसा aspect ratio दें और captions को phones पर तीन lines में wrap होने से रोकें।"
• "Contact section में side padding बढ़ाएँ और छोटे screens पर submit button को tap करना आसान बनाएं।"

Moremade आपको code view भी देता है, जो तब उपयोगी होता है जब आप देखना चाहें कि React और Tailwind code में क्या बदला।

जब site सही लगने लगे, उसे publish करें। Moremade एक क्लिक में free yourname.moremade.ai subdomain पर publish कर सकता है। Paid plans पर आप custom domain connect कर सकते हैं। Domains को Moremade के अंदर भी खरीदा जा सकता है।

एक practical launch order यह हो सकता है:

• पहले free subdomain पर publish करें
• Desktop और phone पर live site खोलें
• आख़िरी content या spacing issues ठीक करें
• अगर आप paid plan पर हैं, तो custom domain connect करें

Moremade websites के लिए real React + Tailwind code बनाता है। आप कभी भी full source को ZIP के रूप में export कर सकते हैं या GitHub पर push कर सकते हैं। यह portfolio के लिए महत्वपूर्ण है, क्योंकि बाद में आप इसे कहीं और host करना चाह सकते हैं, किसी developer को hand off कर सकते हैं, या platform के बाहर भी आगे iterate कर सकते हैं।

अगर आप site को अक्सर बदलते रहने की उम्मीद करते हैं, तो paid plans पर version history edits की तुलना करने और वापस जाने के लिए उपयोगी होती है।

मुख्य failure mode technical नहीं होता। समस्या तब होती है जब portfolio दिखने में तो finished लगे, लेकिन कहे बहुत कम।

इन common problems पर ध्यान दें:

• Home page पर बहुत ज़्यादा sections, और कोई clear priority नहीं
• Vague project summaries जो कभी नहीं बताते कि आपने क्या किया
• Generic visual prompts जो template जैसा result देते हैं
• बिना real use case के Stripe, sign-in, या database features जोड़ना
• Mobile review छोड़ देना
• Placeholder text, stock images, या empty case study pages publish करना

एक अच्छा portfolio आम तौर पर कुछ सरल काम अच्छी तरह करता है:

• बताता है कि आप कौन हैं और किस तरह का काम करते हैं
• Selected projects दिखाता है, सब कुछ नहीं
• आपके thinking को judge करने लायक पर्याप्त detail देता है
• आपसे contact करना आसान बनाता है

AI का इस्तेमाल तेज़ draft तक पहुँचने के लिए करें, फिर अपना समय content की substance सुधारने में लगाएँ।