Denis
/
student


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Сайт-визитка | Семён Бирюков</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Montserrat', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 10px;
    }
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    }
    .profile-pic {
      display: block;
      margin: 0 auto 20px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid #6172a2;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    .intro {
      text-align: center;
      margin-bottom: 40px;
      line-height: 1.6;
    }
    .skills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 40px;
    }
    .skill {
      background-color: #6172a2;
      color: white;
      padding: 8px 16px;
      margin: 4px;
      border-radius: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: transform 0.3s;
    }
    .skill:hover {
      transform: scale(1.1);
    }
    .section {
      margin-bottom: 40px;
    }
    .section h2 {
      color: #6172a2;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      position: relative;
      padding-bottom: 10px;
    }
    .section h2::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 3px;
      background-color: #6172a2;
    }
    .contacts {
      text-align: center;
    }
    .contacts a {
      display: inline-block;
      margin: 0 10px;
      color: #333;
      font-size: 30px;
      transition: color 0.3s, transform 0.3s;
    }
    .contacts a:hover {
      color: #6172a2;
      transform: scale(1.2);
    }
    .projects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
    }
    .project {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: transform 0.3s;
      position: relative;
      overflow: hidden;
    }
    .project::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 70%);
      transition: 0.5s;
      transform: skewX(-25deg);
    }
    .project:hover::before {
      left: 100%;
    }
    .project:hover {
      transform: translateY(-5px);
    }
    .project h3 {
      margin-top: 0;
    }
    .project p {
      margin-bottom: 0;
    }
    .certifications {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
    .certification {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s;
    }
    .certification:hover {
      transform: translateY(-5px);
    }
    .certification img {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Семён Бирюков</h1>
    <div class="intro">
      <p>Я увлеченный и целеустремленный студент 2 курса, специализирующийся на разработке веб-приложений. Мой интерес к программированию зародился еще в школьные годы, и с тех пор я не перестаю совершенствовать свои навыки. Я стремлюсь создавать качественные, эффективные и красивые веб-решения, которые улучшают жизнь людей. Я всегда открыт для новых вызовов и готов учиться новому.</p>
    </div>
    <div class="section">
      <h2>Навыки</h2>
      <div class="skills">
        <span class="skill">Laravel</span>
        <span class="skill">PHP</span>
        <span class="skill">JavaScript</span>
        <span class="skill">HTML/CSS</span>
        <span class="skill">MySQL</span>
        <span class="skill">Git</span>
        <span class="skill">Vue.js</span>
      </div>
    </div>
    <div class="section">
      <h2>Образование</h2>
      <p>Я получаю знания в области информационных технологий в Колледже предпринимательства №11. Помимо основной программы, я прохожу дополнительные курсы и тренинги по веб-разработке, включая курсы по Laravel, Vue.js. Я стремлюсь постоянно расширять свои знания и навыки, чтобы быть конкурентоспособным на рынке труда.</p>
    </div>
    <div class="section">
      <h2>Опыт работы</h2>
      <p>Для колледжа разработал интернет магазин (админскую и пользовательскую часть), а также to-do лист. Также в данный момент я изучаю язык программирования Kotlin для разработки мобильного приложения на платформе Android.</p>
    </div>
    <div class="section">
      <h2>Проекты</h2>
      <div class="projects">
        <div class="project">
          <h3>Админская часть интернет магазина</h3>
          <p>Админская часть на Laravel и JavaScript, в которой можно напрямую изменять пользовательскую часть интернет магазина.</p>
        </div>
        <div class="project">
          <h3>Пользовательская часть интернет магазина</h3>
          <p>Пользовательская часть на Laravel и PHP, где отображаются измения с админской части, также реализовано оформление заказов.</p>
        </div>
        <div class="project">
          <h3>Приложение для учета задач</h3>
          <p>Простое приложение для управления задачами, созданное на PHP. Здесь я изучил PHP и работу с SQL базами данных.</p>
        </div>
      </div>
    </div>
    <div class="section">
      <h2>Сертификаты</h2>
      <div class="certifications">
        <div class="certification">
          <img src="1.png" alt="Сертификат 1">
          <p>Сертификат по PHP</p>
        </div>
        <div class="certification">
          <img src="2.png" alt="Сертификат 2">
          <p>Сертификат по JavaScript</p>
        </div>
        <div class="certification">
          <img src="3.png" alt="Сертификат 3">
          <p>Сертификат по SQL</p>
        </div>
      </div>
    </div>
    <div class="section">
      <h2>Контакты</h2>
      <div class="contacts">
        <a href="mailto:s.biryukov11@gmail.com"><i class="fas fa-envelope"></i></a>
        <a href="https://github.com/birukovs" target="_blank"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </div>
</body>
</html>