Добре известен факт е, че като разработчик като цяло трябва да можете да покажете какво можете да направите пред всеки потенциален клиент или работодател. С помощта на редица индустриални стандартни инструменти, включително 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 remote и git push -u origin master.

След като нашият проект е в GitHub, можем да се насочим към Netlify и да изберем опцията „Избор на сайт от Git“. След това ще изберем GitHub за нашето непрекъснато внедряване и ще изберем хранилището на GitHub, към което току-що изпратихме нашия код.

След това нашият проект ще бъде автоматично разгърнат в мрежата!

Какво следва

Честито! Вече имате приложение за портфолио на живо в мрежата, което показва всички ваши проекти и умения на потенциални работодатели.

Следващата стъпка, която трябва да предприемете, е да настроите персонализиран домейн, за предпочитане с вашето име. Тъй като Netlify включва DNS, можете лесно да настроите потребителски домейн с тях. Освен това добавете повече съдържание, като например блог към приложението си, за да покажете още повече познания на разработчиците.

Направете личното си портфолио израз на себе си и това, към което сте страстен като разработчик, и ще имате успех!