Общеизвестно, что как разработчик в целом вы должны быть в состоянии продемонстрировать, что вы можете сделать, любому потенциальному клиенту или работодателю. С помощью ряда стандартных инструментов, включая 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, вы можете легко настроить собственный домен с ними. Кроме того, добавьте в свое приложение дополнительный контент, например блог, чтобы показать еще больше знаний разработчика.

Сделайте свое личное портфолио выражением себя и того, чем вы увлечены как разработчик, и вы добьетесь успеха!