Общеизвестно, что как разработчик в целом вы должны быть в состоянии продемонстрировать, что вы можете сделать, любому потенциальному клиенту или работодателю. С помощью ряда стандартных инструментов, включая React и Heroku, я создал именно это в виде онлайн-портфолио. Я считаю это одним из самых важных приложений, которые я создал для себя, и моим любимым проектом, который я создал на своем пути к тому, чтобы стать инженером-программистом. На самом деле это мое третье портфолио и, скорее всего, его окончательная версия, поскольку я не верю, что смогу его улучшить.
Как выглядит портфолио?
Мое портфолио — это мое онлайн-представление работы, которую я создал, а также моих навыков и опыта. Он включает в себя мое резюме, видеообзор моей квалификации и навыков, изображения и ссылки на проекты и многое другое. Ниже ссылка на него: Живое демо.
Скриншоты:
Какие инструменты я использовал?
- Я использовал React, включая useState, useEffect и react-scroll, чтобы создать пользовательский интерфейс приложения и обеспечить бесперебойную работу пользователя. Это позволило мне скомпоновать каждую часть одностраничного приложения с помощью повторно используемых компонентов.
- Для оформления приложения я использовал CSS. Чтобы придать моему приложению профессиональный вид, я использовал ванильный CSS, позволяющий легко применять несколько стилей к различным элементам React.
- Для размещения приложения в Интернете я использовал бесплатный сервис Heroku. Он обслуживал мой проект на пользовательском домене для пользователей.
С чего начать
Вы можете начать с запуска команды Create React App. Он настраивает вашу среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечивает приятный опыт разработки и оптимизирует ваше приложение для производства. Вам понадобится Node и npm на вашем компьютере. Команды для создания и запуска проекта будут выглядеть примерно так:
npx create-react-app my-app
cd my-app
npm start
Как построить структуру портфеля
Преимущество использования React заключается в том, что мы можем расширить наше приложение до любого количества страниц и добавить дополнительный контент. Вы можете организовать каждый компонент так, как считаете нужным. Однако, если вы следуете и хотите создать портфолио, подобное моему, с той же файловой структурой, я разделил каждый компонент по папке в соответствии с тем, с каким разделом на странице он был связан. Например, все компоненты навигации сгруппированы в одной папке, которая отделена от других разделов, таких как раздел «О программе» и раздел «Проект».
Это позволило мне выяснить, как я хотел бы, чтобы мои компоненты были названы и в каком порядке. Затем я добавил их все в файл App.js (в src):
// src/App.js import "./App.css"; import { Route, Routes } from "react-router-dom"; import Header from "./components/Header"; import Portfolio from "./components/Portfolio"; import Footer from "./components/Footer"; import TermsOfService from "./pages/terms-of-service"; import NoMatch from "./pages/404"; function App() { return ( <div className="App"> <Routes> <Route exact path="/" element={ <> <Header /> <Portfolio /> <Footer /> </> } ></Route> <Route path="/terms-of-service" element={ <> <TermsOfService /> <Footer /> </> } ></Route> <Route path="*" element={<NoMatch />}></Route> </Routes> </div> ); } export default App;
Как развернуть свое портфолио
Для развертывания я использовал Heroku, но, к сожалению, Heroku объявил, что прекратит работу всех своих бесплатных сервисов, и с 28 ноября пользователям потребуются платные планы. Итак, в качестве альтернативы вы можете отправить свое приложение на GitHub и развернуть его через Netlify.
Если вы не знакомы с Git и GitHub, мне потребуется немного времени, чтобы узнать, как в первый раз отправить ваш код в вашу учетную запись GitHub. Это важный навык, который должен знать любой разработчик.
Как только вы ознакомитесь с этим процессом, мы можем сначала создать новый репозиторий GitHub. После этого мы запустим git add .
, git commit -m "Deploy"
, создадим наш удаленный git и git push -u origin master
.
Как только наш проект появится на GitHub, мы можем перейти к Netlify и выбрать опцию «Выбрать сайт из Git». Затем мы выберем GitHub для нашего непрерывного развертывания и выберем репозиторий GitHub, в который мы только что отправили наш код.
После этого наш проект будет автоматически развёрнут в сети!
Что дальше
Поздравляем! Теперь у вас есть онлайн-приложение для портфолио, которое демонстрирует потенциальным работодателям все ваши проекты и навыки.
Следующим шагом будет настройка собственного домена, желательно с вашим именем. Поскольку Netlify включает в себя DNS, вы можете легко настроить собственный домен с ними. Кроме того, добавьте в свое приложение дополнительный контент, например блог, чтобы показать еще больше знаний разработчика.
Сделайте свое личное портфолио выражением себя и того, чем вы увлечены как разработчик, и вы добьетесь успеха!