Как я изменил дизайн своего портфолио, от начала до конца.

Я сделал свое первое портфолио около 7 месяцев назад. Оно мне нравилось. Оно было простым и статичным, а дизайн был действительно прекрасным. Я взял дизайн из BootCamp, в котором я участвовал, и сделал сайт с помощью HTML, SCSS и немного JavaScript. Не так давно я решил, что пришло время изменить его по своему вкусу, сделать сайт более динамичным и использовать полученные знания.


Шаг первый: Дизайн

Я front-end разработчик, и мне всегда нравилось создавать дизайн, следовать основам и использовать красивые цветовые схемы. Первое, что я сделал, это определился с цветовой схемой портфолио и выбрал шрифты. Проведя небольшое исследование и выяснив, чего я хочу, я остановился вот на чем:
Цветовая схема.

Очень минималистичная и простая цветовая схема, я не хотел переусложнять ее.

Шрифт, который я выбрал, также был очень простым: Roboto .

Я не дизайнер, поэтому, когда дело доходит до этого, я просто оперирую ощущениями, и что получается, то получается. Первый вариант выглядел так:

Инструмент, который я использовал для проектирования — Figma.

Он выглядел очень просто, и мне это понравилось, поэтому я выбрал его.

Мне нравится разбивать свои проекты на компоненты:

Как вы можете видеть, есть некоторые вещи, которые я пробовал, в процессе проектирования я менял его около 100 раз, а когда я разрабатывал, я менял его еще 100 раз.


Шаг второй: Разработка.

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

NextJS

NextJS, согласно официальному сайту, является Full-Stack React Framework. У него много хороших функций, но главная из них для меня — генерация статических сайтов. Вкратце, генерация статических сайтов делает SEO вашего сайта более эффективным, поскольку все содержимое рендерится на сервере и подается в виде статических страниц, что делает ваши сайты очень эффективными и легко читаемыми для SEO ботов.

В качестве первого шага я настроил среду и начал разработку с использованием подхода mobile-first. В этом случае TailwindCSS был очень полезен, он значительно облегчил стилистику при разработке.

Страницы на сайте:

  • главная
  • страницы с деталями проекта
  • о
  • контакт
  • блог

Я решил использовать разные страницы, чтобы у каждой страницы была одна цель и чтобы все было очень просто. К тому же, NextJS позволяет очень легко работать со страницами.

Для главной страницы и страницы проекта я собирался использовать безголовую CMS, такую как Strapi или Sanity, но пару месяцев назад я начал изучать Ruby on Rails и решил сделать простой RESTful API для хранения данных о моих проектах.

Страница блога

Для страницы блога я планировал использовать средний API для получения данных о моем профиле. Но документация по API была очень сложной, и я отказался от этой идеи… Пока не нашел API, который все упростил. Большое спасибо автору этого хранилища, они проделали огромную работу по поиску постов для пользователей Medium, благослови их Бог.

https://mediumpostapi.herokuapp.com/?usermedium=anuarshaidenov
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, я использовал очень удобную функцию NextJS для страницы блога: Incremental Static Regeneration. По сути, это как статическая генерация сайта, но на стероидах. Каждый раз, когда на сервере происходят какие-либо изменения, например, я добавляю новую запись в блог, NextJS определяет это изменение и перестраивает мои страницы.

То же самое я сделал для главной страницы и страниц с деталями проекта.

API Ruby on Rails

Как я уже упоминал, вместо использования безголовой CMS я решил создать свой собственный API. Ruby on Rails — лучший и самый простой вариант для этого. Я создал конечные точки для получения, добавления и редактирования данных для моих проектов, пример ответа выглядит следующим образом:

{
 "id": 1,
 "title": "Car Booking",
 "description": "A web app that allows you to register and reserve premium cars. The project was dne in a group of 5 people. It consisits of front-end and back-end. I was working mainly in a front-end team, leading the teammates and controlling the proccess of the app.",
 "created_at": "2022–05–23T12:13:03.248Z",
 "updated_at": "2022–05–23T12:13:03.248Z",
 "image": "https://raw.githubusercontent.com/anuarshaidenov/car-booking-service-front-end/dev/screenshot-1.png",
 "technologies": [
 "React",
 "Redux",
 "TailwindCSS",
 "Ruby on Rails",
 "Authentication",
 "CRUD",
 "RSpec Testing",
 "TDD"
 ],
 "repository": "https://github.com/DelhinRharl/car-booking-service-front-end",
 "live": "https://deploy-preview-37--willowy-empanada-95e169.netlify.app/"
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Главная страница

Я использовал данные из бэкенда для получения данных для моих проектов и использовал для этого ISR.

Шаг 3: Развертывание

Я развернул сайт на Vercel. Это лучший вариант, когда речь идет о сайтах на NextJS. Перед этим я добавил Google Analytics на страницу и настроил свой домен.


Мне понравился процесс, но я бы не сказал, что он был простым, мне потребовалось 2 месяца, чтобы закончить сайт, потому что на протяжении всего процесса я сталкивался с множеством блокирующих факторов, иногда у меня просто не было времени, чтобы сесть и сделать это, иногда синдром самозванца нападал на меня из ниоткуда. Главное — я его закончил.

Теперь наймите меня. Пожалуйста.
И загляните на сайт. И скажите мне свое мнение, не стесняйтесь.

Оцените статью
Procodings.ru
Добавить комментарий