vfx
एक डेमो साइट बनाएं
NextJS का उपयोग करके एक पोर्टफोलियो साइट बनाएं
June 22, 2024
nextjs
VFX आर्टिस्ट पोर्टफोलियो कैसे बनाएं और उपयोग करें (0 डॉलर)
यह गाइड आपको Next.js का उपयोग करके एक पेशेवर पोर्टफोलियो वेबसाइट बनाने में मदद करेगी, जिसे Tailwind CSS से स्टाइल किया जा सकता है और Vercel पर डिप्लॉय किया जा सकता है। अगर आप तकनीकी रूप से इतने जानकार नहीं हैं तो भी चिंता न करें; बस इन चरणों का पालन करें!
चरण 1: अपना विकास परिवेश स्थापित करें
- Node.js इंस्टॉल करें:
- जाओ nodejs.orgLTS संस्करण डाउनलोड करें और इसे इंस्टॉल करें। Node.js आपको अपने कंप्यूटर पर आवश्यक कमांड चलाने की अनुमति देता है।
- विजुअल स्टूडियो कोड (वीएस कोड) इंस्टॉल करें:
- डाउनलोड करें और इंस्टॉल करेंवीएस कोडएक कोड एडिटर जो आपकी वेबसाइट को संपादित करना आसान बनाता है।
चरण 2: एक नया Next.js प्रोजेक्ट बनाएं
- VS कोड खोलें:
- VS कोड खोलें और फिर एक नई टर्मिनल विंडो खोलने के लिए निम्न बटन पर क्लिक करें।
दृश्य > टर्मिनल.
- VS कोड खोलें और फिर एक नई टर्मिनल विंडो खोलने के लिए निम्न बटन पर क्लिक करें।
- एक नया प्रोजेक्ट शुरू करें:
- टर्मिनल में टाइप करें:
npx create-next-app@latest my-portfolio --typescript --tailwind - निर्देशों का पालन करें:
- अपनी परियोजना का नाम दें:
मेरा पोर्टफोलियो. - TypeScript के लिए "हां" और Tailwind CSS के लिए "हां" चुनें।
- अपनी परियोजना का नाम दें:
- इससे TypeScript और Tailwind CSS के साथ एक नया Next.js प्रोजेक्ट तैयार हो जाएगा।
- टर्मिनल में टाइप करें:
- अपने प्रोजेक्ट पर जाएं:
- टर्मिनल में टाइप करें:
सीडी माय-पोर्टफोलियो
- टर्मिनल में टाइप करें:
चरण 3: अपनी वेबसाइट को स्थानीय रूप से चलाएं
- डेवलपमेंट सर्वर शुरू करें:
- टर्मिनल में टाइप करें:
npm run dev - अपना वेब ब्राउज़र खोलें और यहां जाएं
http://localhost:3000आपकी साइट देखने के लिए।
- टर्मिनल में टाइप करें:
चरण 4: टेलविंड-सीएसएस शैली वाली एक बुनियादी होमपेज बनाएं
- होमपेज फ़ाइल खोलें:
- VS Code में, फ़ाइल ढूंढें और खोलें
app/page.tsx.
- VS Code में, फ़ाइल ढूंढें और खोलें
- अपनी सामग्री जोड़ें:
- मौजूदा सामग्री को निम्नलिखित मूल संरचना से बदलें:
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>My VFX Portfolio</title>
<meta name="description" content="Showcasing my VFX work" />
</Head>
<main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
<h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
<p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
<img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
</div>
</main>
</>
);
}चरण 5: अपनी वेबसाइट को वर्सेल पर तैनात करें
- वर्सेल खाता बनाएं:
- जाओ vercel.comऔर एक निःशुल्क खाते के लिए साइन अप करें।
- अपने प्रोजेक्ट को तैनात करें:
- यदि आपने अभी तक ऐसा नहीं किया है, तो अपने GitHub खाते को Vercel से कनेक्ट करें।
- “नया प्रोजेक्ट” बटन पर क्लिक करें और अपना डेटा आयात करें।
मेरा पोर्टफोलियोभंडार। - निर्देशों का पालन करें, और वर्सेल स्वचालित रूप से आपकी साइट का निर्माण और तैनाती कर देगा।
- अपनी लाइव साइट पर पहुंचें:
- एक बार डिप्लॉय होने के बाद, वर्सेल आपको एक यूआरएल प्रदान करेगा (उदाहरण के लिए,
https://my-portfolio.vercel.appआप इस लिंक को संभावित ग्राहकों या नियोक्ताओं के साथ साझा कर सकते हैं।
- एक बार डिप्लॉय होने के बाद, वर्सेल आपको एक यूआरएल प्रदान करेगा (उदाहरण के लिए,
अंतिम स्पर्श
- एसईओ अनुकूलन: द
सिरघटक मेंपेज.टीएसएक्सयहां आप मेटा टैग, विवरण और कीवर्ड जोड़कर अपनी साइट के एसईओ को बेहतर बना सकते हैं। - अनुकूलनटेलविंड सीएसएस की मदद से डिज़ाइन में बदलाव करना आसान है। उदाहरण के लिए, आप टेलविंड क्लास को एडजस्ट करके रंग, फ़ॉन्ट और लेआउट बदल सकते हैं।
- अपडेट करते रहेंअपने पोर्टफोलियो को नियमित रूप से अपडेट करें, उसमें नए काम जोड़ें और डिजाइन में सुधार करें।
आपकी पोर्टफोलियो वेबसाइट अब लाइव हो गई है! इन चरणों का पालन करके, आपने अपने VFX कार्य को प्रदर्शित करने के लिए एक सरल लेकिन स्टाइलिश साइट बनाई है। शानदार प्रदर्शन करें!