# Мой личный сайт (ver. 4)

Morshinin портфолио ver.4

Четвертая версия моего сайта портфолио.

# Стэк технологий

  • HTML/CSS
  • JavaScript
  • PHP
  • BEM

# Фичи

  • Адаптивность
  • Семантичная разметка

# Структура проекта

/css
/img
/js
index.php
language.php

# Адаптивность

Версия для смартфонов

Страница адаптирована под смартфоны.

# BEM

Для именования классов я использовал нотацию методологии BEM.

...

.killer {
	...
  }

  .killer__heading {
  	...
  }

  .killer__description {
  	...
  }
}

...

/css/main.css

# Семантичная разметка

В разметке использованы семантические HTML-теги.

...

  <header class="header">
    ...
  </header>

  <main>
    <section class="section-killer">
      ...
    </section>

    ...
  </main>

  <footer class="footer">
    ...
  </footer>

...

# CSS анимации

Появление главного заголовка анимировано с помощью CSS-директив @key-frames.

...

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(10rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

...

/css/main.css

# Интернационализация

Английская версия

Сайт доступен на русском и английском языках. Чтобы сделать это возможным я добавил два массива данных в файл language.php. Нужные данные подтягиваются в зависимости атрибута, переданного в url: en или ru.

<?php 
if (!empty($_GET)) {
	if ($_GET['lang'] === 'en') {
	  $data = array(
	  	...
	  );
	}
} else {
	$data = array(
		...
	);
}

language.php

# Исходный код на GitHub

Morshinin-v4 (opens new window)