Proyektlar Shabloni

Bu repozitoridan foydalanib siz o'z proyektlaringizni bitta joyga yig'ib, foydalanuvchiga sodda UI ko'rinishida taqdim etishingiz mumkin.

Proyekt react app ko'rinishida qilingan bo'lib, typescript da yozilgan. Va har bir komponenta uchun test lar ham mavjud.

Saytingiz chizib beradigan komponenta App.tsx komponentasi hisoblanadi.

Shablonda ishlatiladigan barcha rasmlar formati .png formatda bo'lishi shart. Profil egasi rasmi profileImage papkasi ichida, qilingan proyektlar rasmlari esa projectImages papkasi ichida turishi kerak.

Shablon foydalanuvchi taqdim etayotgan ma'lumotlar asosida yaratiladi. Bu ma'lumotlar data.tsx faylida turadi.

data.tsx faylida data degan o'zgaruvchi yaratilgan. Bu o'zgaruvchi array ko'rinishida bo'lib, u ikkita elementdan tashkil topgan.

Birinchi element ham array ko'rinishida bo'lib, u to'rtta string elementdan tashkil topgan.

1. profil egasini ism - familiyasi
2. profil egasini linkedin manzili
3. profil egasini github manzili
4. profil egasini telegram manzili

Ikkinchi element qilingan proyektlar ma'lumotlari uchun ajratilgan. U ham array ko'rinishida bo'ladi. Va bu array elementlari obyekt shaklida bo'lib, har bir obyekt ma'lum proyektlar guruhi uchun bag'ishlangan.

Bu obyekt 2 ta property dan tashkil topgan.

1. proyektlar guruhi nomi - projectsTitle
2. shu guruhdagi proyekt ma'lumotlari - projectsInfo

projectsInfo ham array ko'rinishida bo'lib, har bir array elementi obyekt ko'rinishida bo'ladi.

Bu obyekt uchta name, deployPath, sourcePath propertylaridan tashkil topgan. Bu propertylar ham string ko'rinishida bo'ladi.

1. name - proyekt nomi uchun
2. deployPath - proyektni ko'rish uchun link
3. sourcePath - proyekt kodlarini ko'rish uchun link

Siz data o'zgaruvchisini yuqorida aytilgandek to'ldirishingiz, App.tsx komponentasi uchun o'z ishini ustalik bilan qilishiga imkon yaratgan bo'ladi.

1 - Eslatma

profileImage papkasi ichidagi rasm nomi aynan profileImg.png shaklida bo'lishi kerak.

2 - Eslatma

Qilingan proyekt nomi va bu proyektni projectImages papkasidagi unga mos rasm nomi aynan bir xil bo'lishi kerak. Va bu nom defaultProjectImg bo'lishi mumkin emas.

3 - Eslatma

projectImages papkasi ichidagi barcha rasmlar nisbati bir xilda bo'lishi talab etilmaydi. Lekin ularni bir xilda olish tavsiya etiladi.