من یک صفحه فرود پویا و همهجانبه را برای چالش Wecoded 2025 طراحی کردم که از تنوع و گنجاندن در صنعت فناوری تجلیل می کند. چشم انداز من ایجاد تجربه ای بود که نه تنها داستانهای الهام بخش از جامعه را به نمایش می گذارد بلکه یک رابط تعاملی جذاب و تعاملی را نیز ارائه می دهد که نشان دهنده انرژی پر جنب و جوش جنبش wecoded است.
کد منبع: https://github.com/imbios/landing-wecoded
نسخه آزمایشی
نمایش نسخه ی نمایشی زنده: صفحه فرود Wecoded 2025
بخش قهرمان با عناصر پس زمینه انیمیشن سه بعدی
چگونه من آن را ساختم
فن آوری های مورد استفاده
من این صفحه فرود را با استفاده از یک پشته مدرن متمرکز بر تعامل و عملکرد ساختم:
- بعد. js: برای ارائه سمت سرور و چارچوب کلی
- شرح: برای نوع ایمنی و تجربه توسعه دهنده بهبود یافته
- Three.js و React سه فیبر: برای ایجاد عناصر سه بعدی همهجانبه مانند کره های پس زمینه شناور و کره تعاملی
- حرکت قاب: برای انیمیشن های صاف و انتقال در سراسر صفحه
- Tailwind CSS: برای یک ظاهر طراحی شده پاسخگو با پشتیبانی از حالت تاریک/نور
- محور: برای درخواست های API به سیستم عامل DEV
ادغام Dev API
قلب این پروژه ادغام با API مقالات DEV است. من یک سیستم محتوای پویا را اجرا کردم که:
- پست های واکشی با برچسب “wecoded” و “shecoded” از Dev API
- آنها را در یک شبکه پاسخگو و در دسترس با استفاده از تصویر مناسب نمایش می دهد
- به کاربران اجازه می دهد تا بین پست های wecoded و shecoded جابجا شوند
- اطلاعات نویسنده ، زمان خواندن و معیارهای نامزدی را برای هر پست نشان می دهد
// Example of how I fetch posts from the DEV API
export async function fetchWeCodedPosts(): Promise<Post[]> {
try {
const response = await axios.get(`${BASE_URL}/articles?tag=wecoded&per_page=12`);
return response.data;
} catch (error) {
console.error('Error fetching WeCoded posts:', error);
return [];
}
}
ویژگی های منحصر به فرد
عناصر تعاملی سه بعدی
من چندین عنصر سه بعدی را با استفاده از Three.js ایجاد کردم تا صفحه فرود جذاب تر شود:
- پس زمینه انیمیشن: حوزه های شناور با مواد اعوجاج در رنگ های برند wecoded که به تعامل کاربر پاسخ می دهند
- کره تعاملی: یک کره سه بعدی که مشارکت جهانی با نقاط مهم تعاملی را نشان می دهد که شهرهای مختلف جهان را نشان می دهد
حالت تاریک/نور
من با استفاده از:
- متغیرهای CSS برای مضامین مداوم
- یک عرف
cnابزاری که ترکیب می شودclsxوتtailwind-mergeبرای مدیریت کلاس انعطاف پذیر -
next-themesبرای تداوم تم
// Custom utility for conditional class names
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
تجسم جدول زمانی
من یک جدول زمانی تعاملی ایجاد کردم که تکامل را از سالها به صورت شکتی به Wecoded نشان می دهد ، با انتقال انیمیشن به عنوان کاربران در صفحه حرکت می کنند.
قابلیت دسترسی
من دسترسی را در اولویت قرار دادم:
- تضمین نسبت مناسب کنتراست برای همه متن
- اضافه کردن برچسب های آریا برای عناصر تعاملی
- اطمینان حاصل کنید که سایت با ناوبری صفحه کلید به خوبی کار می کند
- آزمایش با خوانندگان صفحه
- حمایت از کاهش ترجیحات حرکتی
آنچه من به آن افتخار می کنم
من به خصوص از نحوه کار عناصر و انیمیشن های سه بعدی برای ایجاد یک تجربه همهجانبه بدون قربانی کردن عملکرد افتخار می کنم. کره تعاملی که مشارکت جهانی Wecoded را نشان می دهد یک چالش فنی بود که نیاز به درک هندسه سه بعدی و سیستم های مختصات جغرافیایی داشت.
انتقال حالت تاریک/نور یکپارچه نیز یک اجرای پاداش بود ، زیرا برای حفظ هویت برند پر جنب و جوش Wecoded در هر دو حالت نیاز به توجه متفکرانه از طرح رنگ داشت.
به طور کلی ، این پروژه به من این امکان را می دهد تا اشتیاق خود را به تنوع در فناوری با عشق من به توسعه وب خلاقانه ترکیب کنم ، در نتیجه یک صفحه فرود که امیدوارم دیگران را ترغیب کند تا به جنبش Wecoded بپیوندند.
