TL;DR: В статье рассказывается, как за 7 дней создать портфолио на React с использованием Vite и Tailwind CSS, которое помогло автору получить фриланс-заказы на сумму ₹1.2L. Основные шаги включают настройку проекта, создание компонентов, деплой на Vercel и продвижение портфолио на платформах вроде LinkedIn и Reddit.
Введение
Если вы React-разработчик, который застрял в “tutorial hell” и не имеет реального портфолио, эта статья для вас. В ней я покажу, как я создал портфолио на React с использованием Vite и Tailwind CSS, которое помогло мне получить ₹1.2L+ ($1,400+) фриланс-заказов менее чем за три недели. Никаких платных инструментов или сложных фреймворков — только чистое и работающее портфолио, которое клиенты могут посетить.
Основная часть
Настройка проекта
Первым шагом я создал проект с использованием Vite вместо Create React App. Vite отличается высокой скоростью и позволяет начать кодирование менее чем за минуту.
npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install
npm run dev
После запуска dev-сервера на localhost:5173, я очистил бойлерплейт из App.jsx и был готов к созданию портфолио.
Установка Tailwind CSS
Для стилизации я использовал Tailwind CSS. Установка и настройка Tailwind — важный шаг для дальнейшей кастомизации.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Обновил tailwind.config.js, чтобы он сканировал мои компоненты:
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
dark: '#1e293b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}
Добавил Tailwind-директивы в src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Создание компонентов
Секретный ингредиент успеха — это компонентно-ориентированная архитектура, которая делает итерации безболезненными. Я создал компонент ProjectCard, который использовал несколько раз в портфолио.
const ProjectCard = ({ title, description, tech, liveUrl, githubUrl, image }) => {
return (
<div className="bg-white dark:bg-dark rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src={image} alt={title} className="w-full h-48 object-cover" />
<div className="p-6">
<h3 className="text-2xl font-bold mb-2">{title}</h3>
<p className="text-gray-600 mb-4">{description}</p>
<div className="flex flex-wrap gap-2 mb-4">
{tech.map((t, i) => (
<span key={i} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
{t}
</span>
))}
</div>
<div className="flex gap-4">
<a href={liveUrl} className="text-primary hover:underline">Live Demo</a>
<a href={githubUrl} className="text-gray-700 hover:underline">GitHub</a>
</div>
</div>
</div>
);
};
Использование в основном компоненте:
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<ProjectCard
title="E-commerce Dashboard"
description="Admin panel with real-time analytics"
tech={['React', 'Tailwind', 'Chart.js']}
liveUrl="https://demo.example.com"
githubUrl="https://github.com/user/project"
image="/project1.png"
/>
</div>
Деплой на Vercel
После завершения разработки я загрузил код на GitHub и развернул проект на Vercel.
- Перейдите на vercel.com и войдите через GitHub.
- Нажмите “Import Project” и выберите ваш репозиторий.
- Vercel автоматически определит Vite — просто нажмите “Deploy”.
Ваш сайт станет доступен по адресу yourname.vercel.app. Для использования кастомного домена добавьте его в настройках проекта (я купил домен .tech за ₹800/год).
Практическое применение
Чтобы привлечь клиентов, я сделал следующее:
- Hero секция: Четкий заголовок (“Full-Stack Developer specializing in React + Node.js”).
- 3-4 сильных проекта: Качество важнее количества. Включил live демо и ссылки на GitHub.
- Иконки технологий: Визуальное представление с использованием иконок из
react-icons. - Контактная форма: Использовал Formspree для обработки форм.
Заключение
Создание портфолио на React с использованием Vite и Tailwind CSS — это быстрый и эффективный способ продемонстрировать свои навыки и привлечь клиентов. Ключевым моментом является создание чего-то функционального, пусть и не идеального, и последующая итерация на основе обратной связи клиентов. Мой опыт показал, что даже простой, но качественный портфель может открыть двери к новым возможностям и проектам.
Если вы хотите увидеть мое портфолио вживую, посетите dtechsolutions.tech. Удачи в вашем пути к успеху в фрилансе!