Что нужно учесть приступая к работе

1. Проект должен отражать востребованные навыки и быть действительно нужным для клиента или компании. Решайте реальные проблемы через свои проекты. Объясняйте и показывайте – какие.
2. Показывайте, чем вы хотели бы заниматься в дальнейшем.
3. Постарайтесь, чтобы ваши работы выглядели оригинально, добавьте что-то необычное.
4. 5-7 проектов для начала – это неплохо, но если вы делали что-то объемное, может хватить и 3.

Где брать работы для портфолио

1. Вы наверняка делали какие-то проекты в процессе или после обучения. Бесплатные курсы иногда включают их в программу. Такое практикуется, например, в сертификации Free Code Camp или в недорогом курсе Bootcamp от Udemy. Он пропитан практикой, предоставляет возможность общаться с другими студентами и получать фидбек.

Как сделать архитектурное портфолио?

2. Сделайте сайт-визитку и реализуйте там интересные фичи:

• подписку/отписку на почтовую рассылку;
• фотогалерею;
• удобную навигацию, которая не сводится только к меню-гамбургеру;
• новостную ленту по вашим интересам;
• форму для регистрации и входа на сайт;
• контактную форму с валидацией, сообщением о неверно введенной информации и подтверждением;
• часы и дату;
• индикатор загрузки;
• цитату дня – случайный вывод каких-то элементов из набора.

3. Участвуйте в конкурсах и хакатонах. Даже если вы делали проект в команде, его можно положить в портфолио, указав свой вклад с доказательствами в виде скриншотов.

4. Загляните в генераторы челленджей. Например, на Sharpen или Briefz . Просто замените design на develop и пробуйте создавать то, что там предлагается.

5. Стажировки . Если вас не возьмут на работу, вы все равно успеете «прикоснуться к великому» и пополнить портфолио проектом, над которым работали в компании. Даже если не попадете на саму стажировку, скорее всего останется сделанное вами тестовое задание. Его можно доработать и тоже приложить к портфолио (о некоторых других вариантах мы уже писали ). Также можно посмотреть вакансии для начинающих на форуме DOU и стажировки в их дайджестах .

6. Рассказывайте своим родственникам и друзьям , на кого вы учитесь и чем хотите заниматься. Возможно они сами попросят сделать сайт или добавить какую-то фичу на существующий.

7. Создайте сайт по бартеру. Можно, например, помочь начинающему дизайнеру с разработкой, чтобы он помог вам с дизайном. Если таких знакомых на примете нет, предлагайте свои услуги на разных платформах: ищите людей, которые предлагают что-то в обмен на разработку. Вот несколько вариантов:

ПОРТФОЛИО АРХИТЕКТОРА. КАКИЕ ПРОГРАММЫ ДОЛЖЕН ЗНАТЬ КАЖДЫЙ В 2022. КАКОЕ ДОЛЖНО БЫТЬ РЕЗЮМЕ.

• группа ВК « По бартеру »;
• Simbi ;
• Trade Made (приложение, правда только под Android);
• Swap Right (сразу из объявления понятно, что нужно человеку и что он может дать взамен).

8. Попробуйте себя в волонтерском проекте . Представьте, что новичку можно получить международный опыт, не выходя из дома! Искать интересные варианты стоит на разных платформах:

• IT-волонтер – здесь некоммерческие организации публикуют «вакансии» по IT-профессиям.
• Social Coder пишут, что опыт не важен (но начинающие участники проекта будут помогать более опытным) и ищут именно ИТ-специалистов. Списка задач на выбор здесь нет: для участия нужно зарегистрироваться, рассказать о своем опыте и чем хотите заниматься. После этого вас соединяют с некоммерческой организацией, которая ищет как раз такого человека. В среднем проекты длятся 2 месяца, но бывает по-разному.
• Volunteermatch – программа, которая специализируется на волонтерских вакансиях.
• Волонтерские программы ООН для разработчиков .
• В Free UK Genealogy можно присоединиться к команде разработчиков открытых проектов. Найти совпадающий с вашими интересами несложно.

Такие проекты предполагают в основном удаленное участие, а здесь можно посмотреть еще. Другой вариант – найти небольшую некоммерческую организацию, которая недостаточно хорошо представлена в интернете или нуждается в специальных фичах.

9. Можно помогать и проектам на краудфандинговых платформах. Для этого выбираем любую из них и ищем в Google: создание сайта site:(адрес выбранной вами платформы). Находим какой-нибудь интересный проект, которому требуется разработка сайта, и предлагаем помощь ее создателю. Несколько примеров: на Kickstarter , а также на Mola Mola – раз и два .

10. Копируйте несложные сайты, что-нибудь добавляя, изменяя и улучшая. Попробуйте решить некую проблему или сделать какой-то элемент более удобным. Для вдохновения: Jake Dow-Smith Studio , MCA , TRA , Jonty Davies , Глущенкоиздат , The Storytellers .

11. Есть ряд несложных проектов, которые новичку стоит иметь у себя в портфолио: простые игры, листы To-Do, страницы поисковиков. Представьте, что это ваше практическое задание, но помните – нужно внести в него свое оригинальное видение и решение. Остальные идеи можно посмотреть здесь и здесь .

12. Поработайте над уже существующим открытым проектом . Свое участие в виде скриншотов тоже можно добавлять в портфолио.

На Code Triage собраны проекты c GitHub, которые нуждаются в помощи. Лучше отсортировать их по языку программирования.

Кроме этого подписывайтесь на интересующие вас проекты и получайте уведомления о новых issues на почту: на сайте есть подробная инструкция по взаимодействию с основанными на открытом коде разработками.

На First Timers Only можно посмотреть и другие ресурсы по open source.

Показываем, как выглядят портфолио начинающих веб-разработчиков

1. Fatma Sümer
2. Pritika Roy
3. Ronald , например, добавляет свои работы с курсов.
4. Ritika Soni
5. Портфолио Chigbogu на GitHub

Проекты есть. Что дальше?

1. Регулярно пополняйте портфолио свежими работами.

2. Включайте в описание проекта ссылку на репозиторий GitHub, где клиент или работодатель смогут посмотреть ваше решение задачи через код, а не только красивую картинку. Давайте ссылки на Link to your CodePen projects.

3. Опишите, когда и для кого вы делали этот проект (даже если для мамы или в качестве эксперимента), и какие требования предъявлялись к продукту. Читателю нужно понимать, в каком контексте реализовывалось решение.

4. Самые удачные проекты ставьте в начало портфолио.

5. Подготовьте разные портфолио для фрилансерской работы и для фул-тайма. В первом случае заказчику важнее посмотреть на результат, поэтому его не очень интересуют использованные фреймворки и языки программирования. Во втором – не бойтесь описывать технические подробности реализации проекта.

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

• освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
• сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
• поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
• разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
• углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
• изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.

Источник: proglib.io

Создаем сайт-портфолио с responsive-дизайном

Всем привет! Сегодня мы разберем, как написать полностью отзывчивый сайт-портфолио. При этом мы будем использовать только HTML, CSS и JS. Вы научитесь создавать responsive-дизайн и познакомитесь поближе с псевдоэлементами CSS.

Также мы расскажем вам о модуле nodemailer : с его помощью мы создадим рабочую контактную форму.

Если хотите посмотреть демо или даже весь туториал, вот видео:

И да, это NodeJS-приложение, потому что мы хотим получить рабочую почтовую систему, а отсылать почту могут только серверы, не клиентский браузер.

Как видите, у нас есть файл project.js. В этом файле содержатся данные нашего проекта. Наличие такого файла облегчает добавление, удаление и редактирование проектов. Давайте посмотрим структуру данных в этом файле.

let projects = [ < name: «project one», tags: «#javascript, #fullstack, #ui/ux, #backend», image: «project (1).png», >, < name: «project two», tags: «#javascript, #fullstack», image: «project (2).png», >, // +8 more ]

Здесь у нас есть имя проекта, его теги и путь к изображению. Благодаря этому мы можем легко управлять проектом, не редактируя код.

Начнем работу с инициализации NPM.

NPM init

Откройте командную строку или терминал и перейдите внутрь вашей корневой директории (за пределами директории public). Запустите команду npm init . Это инициализирует NPM для ваших проектов.

Затем запустите следующую команду, чтобы установить библиотеки:

npm i express.js nodemon nodemailer dotenv

• express.js — для создания сервера
• nodemon — для непрерывного запуска сервера
• nodemailer — отвечает за отправку почты
• dotenv — для создания переменных окружения. Нам это пригодится для хранения email id и пароля вне сервера.

После установки библиотек давайте внесем некоторые изменения в package.json. Откройте этот файл и измените данные в scripts .

«scripts»: < «start»: «nodemon server.js» >,

После этого создайте файл server.js в вашей корневой директории (не в папке public). Откройте его.

Server.js

Начнем с импорта библиотек и пакетов.

const express = require(‘express’); const path = require(‘path’); const nodemailer = require(‘nodemailer’); const dotenv = require(‘dotenv’);

Настроим dotenv , чтобы иметь доступ к переменным окружения.

dotenv.config();

Затем сохраните в переменной путь к вашей папке public и создайте сервер.

let initialPath = path.join(__dirname, «public»); let app = express();

Теперь используйте метод app.use для настройки связующих программ (middleware).

app.use(express.static(initialPath)); app.use(express.json());

express.json позволит делиться данными формы, а express.static установит папку public в качестве статичного пути.

После этого создайте путь к home. И отправьте файл index.html.

app.get(‘/’, (req, res) => < res.sendFile(path.join(initialPath, «index.html»)); >)

Наконец, установите прослушивание сервером порта 3000.

app.listen(3000, () => < console.log(‘listening. ‘); >)

Наш сервер готов. Давайте запустим его при помощи команды npm start (в терминале).

Переходим к работе над портфолио.

Портфолио

Откройте index.html и напишите базовую структуру HTML. Затем подключите к этому файлу style.css и app.js. После этого создайте панель навигации navbar.

Напишите стили для нее.

* < margin: 0; padding: 0; box-sizing: border-box; >html < scroll-behavior: smooth; >body < width: 100%; position: relative; background: #1d1d1d; color: #fff; font-family: ‘roboto’, sans-serif; >/* navbar */ .navbar < position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #1d1d1d; padding: 0 10vw; display: flex; justify-content: space-between; align-items: center; z-index: 9; >.brand < text-transform: capitalize; font-weight: 500; >.links-container < display: flex; list-style: none; >.link < text-transform: capitalize; color: #fff; text-decoration: none; margin: 0 10px; padding: 10px; position: relative; >.link:hover:not(.active) < opacity: 0.7; >.link.active::before, .seperator::before < content: »; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #fff; >.link.active::after, .seperator::after

1. В html у нас указано свойство scroll-behavior . Без этого не будет эффекта плавной прокрутки.
2. Вы также могли заметить элемент seperator в стилях: не волнуйтесь, мы создадим его позже.

От редакции Techrocks. Работу свойства scroll-behavior можно посмотреть в статье «10 полезных приемов использования CSS».

Теперь создадим шапку сайта.

Хедер

hi, i am john

web developer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur odit in laudantium suscipit blanditiis asperiores.

contact
/* home section */ .home < width: 100%; min-height: calc(100vh — 60px); height: auto; margin-top: 60px; padding: 0 10vw; display: flex; align-items: center; justify-content: space-between; position: relative; >.hero-content < width: 50%; >.hero-heading < font-size: 5rem; text-transform: capitalize; font-weight: 500; >.highlight < color: #ff3559; >.profession < width: fit-content; display: block; margin: 10px 0 20px; margin-left: auto; text-transform: capitalize; position: relative; padding: 10px 20px; color: #1d1d1d; z-index: 2; >.profession::before < content: »; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #e3e3e3; z-index: -1; transform: skewX(10deg); >.profession::after < content: »; position: absolute; top: 0; left: -100px; width: 100px; height: 2px; background: #e3e3e3; >.info < line-height: 30px; margin-bottom: 50px; >.btn

Отлично! Теперь перейдем к разделу about.

About

about me

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus totam quia numquam tempora nostrum earum similique enim laudantium iusto. Quaerat illo numquam minus pariatur, cum qui ipsum sapiente, atque optio voluptatibus necessitatibus, quis dolores veniam delectus inventore beatae? Accusamus, illum! Non nam dolores assumenda quibusdam repellat beatae quae eum atque sed, velit culpa, at animi cumque suscipit. Ratione delectus dolores odit dicta ipsum libero molestiae et reprehenderit sapiente earum.
Alias aut architecto quis, earum iusto beatae quibusdam maiores, rerum, consequatur aliquid doloribus? Quas accusantium quidem eos ex, aperiam recusandae. Veritatis?

download cv

/* about section */ .about < width: 100%; height: auto; padding: 50px 10vw; >.heading < text-align: center; font-weight: 500; font-size: 3.5rem; text-transform: capitalize; >.sub-heading < text-align: center; font-size: 1rem; margin: 10px; opacity: 0.7; >.seperator < width: 25%; margin: 20px auto; position: relative; >.about-me-container < margin: 150px 0 100px; width: 100%; display: grid; grid-template-columns: 40% 60%; grid-gap: 50px; >.left-col, .right-col < position: relative; >.left-col::before < content: ‘yes, its me’; text-transform: capitalize; position: absolute; right: 0; top: -20px; >.left-col::after < content: »; position: absolute; top: -10px; right: 80px; width: 50px; height: 2px; background: #fff; transform-origin: right; transform: rotate(-30deg); >.about-image < border-radius: 10px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); >.about-para

Следующий на очереди — раздел навыков (skills).

Skills

Эта структура будет находиться внутри раздела about.

//предыдущие элементы

languages and framework i know

HTML

CSS

SCSS

JavaScript

ReactJS

NodeJS

Postgres SQL

Firebase

Much More

Как вы, наверное, заметили, у нас есть style=»—bg: value» для элемента skill-card . Он устанавливает разные —bg для разных элементов. Таким образом мы получаем одинаковый эффект с разными цветами.

.skill-container < position: relative; margin-top: 100px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; >.skill-card < height: 200px; border-radius: 10px; border: 1px solid #464646; text-align: center; position: relative; cursor: pointer; transition: .5s; >.skill < font-size: 2rem; color: #464646; line-height: 200px; >.skill-card:hover < background: var(—bg); >.skill-card:hover .skill < color: #fff; >.skill-card.large

Теперь давайте создадим раздел project.

Project

Начнем с кнопок для фильтров.

Projects

Lorem ipsum dolor sit amet consectetur.

all javaScript ui/ux backend fullStack

Атрибут id в фильтрах поможет нам в фильтрации проектов.

/* project section */ .project, .contact < position: relative; padding: 50px 10vw; >.filters < width: fit-content; display: block; margin: 100px auto; >.filter-btn < padding: 10px 20px; border-radius: 5px; border: none; text-transform: capitalize; margin: 0 5px 10px; cursor: pointer; >.filter-btn.active

Давайте создадим одну карточку проекта — в чисто стилистических целях.

project one #javascript
.project-container < width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; >.project-card < position: relative; cursor: pointer; display: block; >.project-card img < width: 100%; height: 100%; object-fit: cover; >.project-card .content < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; transition: .5s; text-transform: capitalize; opacity: 0; >.project-name < font-weight: 300; font-size: 2.5rem; text-align: center; >.tags < position: absolute; bottom: 20px; opacity: 0.6; width: 90%; >.project-card:hover .content < opacity: 1; >.project-card.hide

Теперь карточку проекта можно закомментировать.

project one #javascript —>

И давайте сделаем эту карточку динамической. Но прежде добавьте ваш файл project.js перед файлом app.js. Без этого вы не сможете получить доступ к данным проекта.

Открываем app.js. Перед созданием карточки проекта сделаем ссылки переключателями активного класса. Напишите такой код:

// links const links = document.querySelectorAll(‘.link’); links.forEach(link => < link.addEventListener(‘click’, () => < links.forEach(ele =>ele.classList.remove(‘active’)); link.classList.add(‘active’); >) >)

Вот теперь можно перейти к карточкам проекта. Пишем код:

// creating dynamic project card const projectContainer = document.querySelector(‘.project-container’); projects.forEach(project => < projectContainer.innerHTML += ` $ $ `; >)

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

Отлично! Теперь сделаем наши кнопки фильтрации рабочими.

// filters const filters = document.querySelectorAll(‘.filter-btn’); filters.forEach(filterBtn => < filterBtn.addEventListener(‘click’, () => < let let projectCards = document.querySelectorAll(‘.project-card’); projectCards.forEach(card => < if(card.getAttribute(‘data-tags’).includes(id))< card.classList.remove(‘hide’); >else < card.classList.add(‘hide’); >>) filters.forEach(btn => btn.classList.remove(‘active’)); filterBtn.classList.add(‘active’); >) >)

В этом коде мы просто добавляем событие click для кнопки filter и переключаем некоторые классы элементов.

Итак, наш раздел project полностью готов. Приступаем к работе над контактной формой.

Contact me

Contact me

Lorem ipsum dolor sit amet consectetur.

contact

made with love by modern web
/* contact form */ .contact-form < width: 100%; margin-top: 100px; position: relative; >.contact-form input, .message < width: 100%; display: block; height: 50px; padding: 20px; border-radius: 5px; background: #000; color: #fff; border: none; outline: none; margin: 30px 0; text-transform: capitalize; resize: none; >.message < height: 200px; >.contact-form .name < display: flex; justify-content: space-between; >.name input < width: 49%; margin: 0; >.contact-form .btn < display: block; margin: auto; cursor: pointer; >/* footer */ .footer

Теперь давайте пропишем почтовый маршрут в server.js.

app.post(‘/mail’, (req, res) => < const < firstname, lastname, email, msg >= req.body; const transporter = nodemailer.createTransport( < service: ‘gmail’, auth: < user: process.env.EMAIL, pass: process.env.PASSWORD >>) const mailOptions = < from: ‘sender email’, to: ‘receiver email’, subject: ‘Postfolio’, text: `First name: $, nLast name: $, nEmail: $, nMessage: $` > transporter.sendMail(mailOptions, (err, result) => < if (err)< console.log(err); res.json(‘opps! it seems like some error occured plz. try again.’) >else < res.json(‘thanks for e-mailing me. I will reply to you within 2 working days’); >>) >)

Таким образом отсылается почта при помощи nodemailer. Тут несть несколько вещей, на которые стоит обратить внимание.

1. process.env.EMAIL и process.env.PASSWORD — ключевые слова, дающие доступ к переменным окружения. Но мы пока ни одной переменной не создали. Поэтому создайте в своей корневой директории файл .env . Имя должно быть точно таким. Откройте его и наберите следующее:

EMAIL=your email PASSWORD=your email’s password

Теперь, как вы понимаете, process.env будет обращаться к этим переменным.

2. Параметры from и to . В коде, приведенном выше, я не вводил свои email-адреса. Но чтобы почта заработала, нужно указать email id в качестве параметров from и to . Идентификатор может быть одинаковым для обоих.

Итак, наш сервер полностью готов. Теперь сделаем контактную форму рабочей.

//contact form const contactBtn = document.querySelector(‘.contact-btn’); const firstName = document.querySelector(‘.first-name’); const lastName = document.querySelector(‘.last-name’); const email = document.querySelector(‘.email’); const msg = document.querySelector(‘.message’); contactBtn.addEventListener(‘click’, () => < if(firstName.value.length lastName.value.length email.value.length msg.value.length)< fetch(‘/mail’, < method: ‘post’, headers: new Headers(), body: JSON.stringify(< firstname: firstName.value, lastname: lastName.value, email: email.value, msg: msg.value, >) >) .then(res => res.json()) .then(data => < alert(data); >) > >)

В этом коде я просто выбираю все input и делаю запрос POST к роуту /mail .

Контактная форма тоже готова.

Пора сделать наш сайт отзывчивым.

Responsive — планшет

Как видите, мы здесь стилизуем toggle-btn. Но функциональность надо прописать в app.js.

//toggle button const toggleBtn = document.querySelector(‘.toggle-btn’); const linkContainer = document.querySelector(‘.links-container’); toggleBtn.addEventListener(‘click’, () => < toggleBtn.classList.toggle(‘active’); linkContainer.classList.toggle(‘show’); >)

Responsive — мобильные устройства

Результат можно посмотреть в видеоруководстве.

Источник: techrocks.ru

Сайт-портфолио для верстальщика и фронтенд разработчика. Каким оно должно быть?

Итак, начнем с содержания сайта-портфолио. Настоятельно рекомендую писать тексты, которые будут цеплять внимание. Наверняка, вы видели довольно сухие тексты на шаблонных сайтах, которые вы в принципе можете найти, например, на сайте ThemeForest. К примеру, данный шаблон Jackie, здесь нет ничего такого, что цепляло бы ваш глаз.

Поэтому, мой вам совет: прорабатывайте тексты и не полагайтесь на одни лишь шаблоны. Если вы сомневаетесь в своих копирайтерских способностях, то я рекомендую вам прочитать книгу «Пиши, сокращай» от издательства Альпина Паблишер. Прочитав эту книгу, вы научитесь составлять грамотные тексты, которые могут быть применимы для ваших сайтов, а не только для составления постов в ВК или Telegram. Главные мысли:

1. Чем проще текст, тем лучше он воспринимается.

Не старайтесь писать длинные предложения и пользоваться сложной терминологией. Вполне вероятно, что пользователь, зайдя на ваш сайт, просто не будет читать этот текст и пролистает дальше или вовсе закроет сайт. Но так как мы с вами говорим все-таки про веб-разработку, то будет актуальнее использовать сложные термины только в том случае, если они касаются IT-сферы.

2. Пишите текст, прежде всего, для себя

Вы должны писать текст как будто вы его пишите для себя. Попробуйте перечитать составленный текст, и если у вас не возникает вопросов к самому себе, значит, ваш текст полностью раскрывает ту тему, о которой вы начали писать. Однако, если вам кажется, что есть какая-то недосказанность, то вероятнее всего ваш текст проработан не до конца.

3. Попробуйте прочитать текст вслух для себя

То, что вы написали, попробуйте прочитать вслух. Если вам это не кажется странным, то значит, вы написали правильный текст. Однако если фраза плохо звучит, то попробуйте просто заменить ее.

4. Разбейте содержимое текста на заголовки

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

5. Сделайте текст «живым», приводите примеры

Приводите примеры. Это именно тот тезис, который позволит сделать ваш текст более живым. Как это можно применить к сайту-портфолио?! Например, у вас будет блок, где вы рассказываете о своих скилах и у вас есть три пункта: HTML, CSS и JavaScript.

Для каждого пункта вы можете придумать конкретный пример, который будет понятен, даже заказчику который может, в принципе, не ориентироваться в веб-разработке. Например, в пункте «JavaScript» вы можете написать примеры того, где вы его используете. Вы можете написать так:

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

А в пункте «CSS» написать:

Применяю его для того, чтобы сделать ваши сайты красивыми!

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

6. Польза важнее содержания

Не старайтесь написать много лишнего текста. По большей степени пользователю важно, почему именно к вам он должен обратиться. Что именно вы предлагаете пользователю и как вы собираетесь решить его проблему, с которой он пришел на этот сайт?! И тогда в таком случае вы получите от него то, что нужно вам.

Какие блоки необходимы на сайте-портфолио?

На любом сайте-портфолио должен быть стартовый блок. По сути, на нем обязательно должна быть ваша фотография, а не просто какая-то картинка из интернета, потому что именно ваше фото вызывает доверие. Так же если ваш сайт-портфолио это лендинг, как в этом случае Gabbar, то обязательны пункты меню по клику, на которые вы можете перемещаться по разным блокам. Так же обязательно укажите имя, короткую информацию о себе и возможность либо перейти сразу к контактной форме, либо как указано в макете выше, скачать ваше резюме.

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

Следующий блок, который вам понадобиться на сайте это блок «About me», то есть тот, где вы рассказываете о себе. Этот сайт мне хотелось бы показать вам в качестве примера, так как, на мой взгляд, он отображает все те сильнейшие стороны, которые должны быть у сайта-портфолио. И это мы видим, уже начиная с главного блока, здесь отражено, что данный специалист занимается и дизайном и веб-разработкой, так же помимо текста на это указывает и само изображение.

Далее, если мы переместимся во вкладку «About me», то здесь мы видим короткое описание с фотографиями, которыми он хотел бы поделиться, что в принципе рассказывает о том, что он увлекается не только кодом, но у него есть и другие увлечения, которыми он готов поделиться.

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

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

По сути на этой странице раскрывается не только блок «About me», но и блок где вы рассказываете о своих скилах. Опять же повторюсь, не пытайтесь сделать это скучно, так как это обычно предлагается на шаблонных сайтах. Старайтесь добавить немножко креатива и ваш сайт наверняка оценят.

Далее на примере мы видим такой блок как «Services», то есть то где вы описываете свои услуги:

Если рассматривать это применительно к веб-разработке, то мне кажется, этот блок в принципе не имеет смысла, потому что если вы позиционируете себя как верстальщик, то понятное дело, что вы предоставляете только одну услугу — верстаете сайты.

Важный пункт это «Портфолио». Вы можете взять такой простой вариант

Но все-таки я бы рекомендовала вам немножко поработать с текстом. Тем более, если сейчас на данный момент у вас сделано не так много сайтов, то лучше всего не располагать это плиткой, а сделать описание для каждого сайта.

Например, для каждого вашего сайта в портфолио вы можете сделать отдельную страницу где будет общий скриншот вашего сайта и далее короткое описание по поводу того, что именно вы сделали с этим сайтом и если клиент позволяет, то можете указать ссылку на этого клиента, его соц.сети и прочую информацию. Если говорить об интересности, то здесь вы можете добавить какую-то веселую информацию о вашем сотрудничества с этим клиентом. но не в том плане, чтобы обидеть клиента, а в том плане с какими трудностями вам пришлось столкнуться. Например, вы случайно пролили чай на ваш ноутбук, но у вас был друг в сервисном центре, который быстро починил ваш компьютер и вы смогли вовремя сдать ваш проект. Такая история будет говорить о том, что вы ответственно подходите к вашей работе и всегда все сдаете в срок. Так же, на этой странице вы можете разместить отзыв от клиента и тех с кем вам пришлось работать при разработке этого сайта.

Еще немного про лого

Так же, если вы ломаете голову над логотипом, то в принципе вы можете разместить в данной части меню, а в другой части ссылки на ваши соц.сети. На мой взгляд, это будет даже лучше, чем установка логотипа, который ничем не помогает вашему сайту и раскрытию того, какой вы специалист. Поэтому если вы планируете установку соц.сетей, то посмотрите на то, как выглядят ваши социальные сети, там обязательно должна быть ваша фотография и страница должна выглядеть «живой» и не содержать той информации которая может оттолкнуть клиента. Сайт с примером.

Так же, соц.сети вы можете продублировать в блок «Контакты». На моем Youtube-канале есть два видео о том, как установить обратную форму связи, вы можете воспользоваться рекомендациями оттуда. В общем и целом, контактные формы везде выглядят одинаково, единственное, что может отличаться — расположение блоков, но тут уже вам необходимо смотреть по собственному вкусу, какую информацию вам хотелось бы выложить и соответственно исходить из этого, как будут располагаться ваши блоки.

Какие цвета стоит использовать для сайта-портфолио?

Как вы понимаете, это креативная часть и здесь нет единого ответа. Меня довольно часто просят скинуть сайты-портфолио которые нравятся лично мне, но вы должны понимать, что вкусы у нас могут отличаться. Например, мне нравятся темные сайты с темными интерфейсами, а вам могут нравиться яркие цвета, может даже розовый и принципе здесь не угадать с выбором цвета.

Поэтому лучшим решением будет обратиться на сайт ThemeForest, где вы можете посмотреть примеры сайтов и взять какую-то идею для себя. Так же вы можете перейти на сайт Dribbble и в поисковой строке написать слово Portfolio, здесь вы также увидите множество решений, как цветовых, так и по расположению блоков.

По такому же принципу работает сайт Pinterest, здесь вы тоже можете ввести в поисковый запрос Portfolio и подобрать варианты под себя. Если вдруг, по какой-то причине, вы не можете подобрать цвета которые хотели бы использовать на сайте, либо вы точно знаете какой хотели бы применить один из оттенков, то воспользуйтесь сервисом ColorScheme, вы можете написать код конкретного оттенка и уже после подобрать оттенки в зависимости от того сколько цветов вам необходимо на сайте. Почти по такому же принципу работает и сервис Palettable, но работает он по принципу Like/Dislake. Если вам не нравиться цветовое решение, то прощелкивайте до необходимого, если нравиться — ставите Like и соответственно дальше подбираете нравиться вам сочетание с первым цветом или нет.

Подводим итоги: