Главная Обзор Помощь
Вход
mrcat323
/
mrcat323.github.io
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Initial commit: Happy 2023

- New era
- New life
Mr. CaT 1 год назад
Сommit
5336a2d9d1
15 измененных файлов с 801 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 108 0
      about.html
  2. 77 0
      contact.html
  3. 378 0
      css/main.css
  4. BIN
      img/background.jpg
  5. BIN
      img/cat150.jpeg
  6. BIN
      img/cat250.jpeg
  7. BIN
      img/projects/1313.png
  8. BIN
      img/projects/babolo.png
  9. BIN
      img/projects/pizza.png
  10. BIN
      img/projects/spotfire.png
  11. BIN
      img/projects/upsdt.png
  12. BIN
      img/projects/yov.png
  13. 79 0
      index.html
  14. 33 0
      js/main.js
  15. 126 0
      work.html

+ 108 - 0
about.html
Просмотреть файл 

@@ -0,0 +1,108 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 
+    crossorigin="anonymous">
 
+
 
+  <link rel="stylesheet" href="css/main.css">
 
+  <title>About Me</title>
 
+</head>
 
+
 
+<body>
 
+  <header>
 
+    <div class="menu-btn">
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+    </div>
 
+
 
+    <nav class="menu">
 
+      <div class="menu-branding">
 
+        <div class="portrait"></div>
 
+      </div>
 
+      <ul class="menu-nav">
 
+        <li class="nav-item">
 
+          <a href="index.html" class="nav-link">
 
+            Home
 
+          </a>
 
+        </li>
 
+        <li class="nav-item current">
 
+          <a href="about.html" class="nav-link">
 
+            About Me
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="work.html" class="nav-link">
 
+            My Work
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="contact.html" class="nav-link">
 
+            How To Reach Me
 
+          </a>
 
+        </li>
 
+      </ul>
 
+    </nav>
 
+  </header>
 
+
 
+  <main id="about">
 
+    <h1 class="lg-heading">
 
+      About
 
+      <span class="text-secondary">Me</span>
 
+    </h1>
 
+    <h2 class="sm-heading">
 
+      Let me tell you a few things...
 
+    </h2>
 
+    <div class="about-info">
 
+      <img src="img/cat250.jpeg" alt="Mr. CaT" class="bio-image">
 
+
 
+      <div class="bio">
 
+        <h3 class="text-secondary">BIO</h3>
 
+        <p>I've got about 6 years of experience in Web Development. Have good experience in such technologies like:
 
+	  Git, PHP, Laravel, JavaScript, Vuejs, JQuery, HTML, CSS, SASS, Bootstrap, Bulma, TailwindCSS, Emacs Lisp.</p>
 
+	<p>With all heart I'm a GNU/Linux enthusiast, even built my own distro <b>BoldOS</b> with LFS project. <b>FSF, Open Source</b> follower.</p>
 
+      </div>
 
+
 
+      <div class="job job-1">
 
+        <h3>Netchits <small>2018</small></h3>
 
+        <h6>Co-Founder</h6>
 
+        <p>Social network which not only provides <i>links</i> storage, also you can save you YouTube videos here and watch anytime.</p>
 
+	<a href="https://github.com/mrcat323/netchits" target="_blank" class="btn-dark">
 
+          <i class="fab fa-github"></i> Github
 
+        </a>
 
+
 
+      </div>
 
+
 
+      <div class="job job-2">
 
+        <h3>Babolo <small>2020-2021</small></h3>
 
+        <h6>Backend Developer</h6>
 
+        <p>Job searching platform</p>
 
+      </div>
 
+      <div class="job job-3">
 
+        <h3>American Space Bokhtar <small>2019</small></h3>
 
+        <h6>Volunteer</h6>
 
+        <p>I enjoy helping, teaching people. With my English, IT skills, I provide unique knowledge for everyone, either kinds, teenagers or adults. </p>
 
+      </div>
 
+      <div class="job job-4">
 
+        <h3>Web Dushanbe <small>2021-2022</small></h3>
 
+        <h6>Full Stack Developer</h6>
 
+        <p>Providing better technologies all together with Web Dushanbe. At the same time showing the best practices.</p>
 
+        <a href="https://webdushanbe.com" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <footer id="main-footer">
 
+    Copyright &copy; by Mr. CaT 2017-2023
 
+  </footer>
 
+
 
+  <script src="js/main.js"></script>
 
+</body>
 
+
 
+</html>

+ 77 - 0
contact.html
Просмотреть файл 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 
+    crossorigin="anonymous">
 
+
 
+  <link rel="stylesheet" href="css/main.css">
 
+  <title>Contact Me</title>
 
+</head>
 
+
 
+<body>
 
+  <header>
 
+    <div class="menu-btn">
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+    </div>
 
+
 
+    <nav class="menu">
 
+      <div class="menu-branding">
 
+        <div class="portrait"></div>
 
+      </div>
 
+      <ul class="menu-nav">
 
+        <li class="nav-item">
 
+          <a href="index.html" class="nav-link">
 
+            Home
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="about.html" class="nav-link">
 
+            About Me
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="work.html" class="nav-link">
 
+            My Work
 
+          </a>
 
+        </li>
 
+        <li class="nav-item current">
 
+          <a href="contact.html" class="nav-link">
 
+            How To Reach Me
 
+          </a>
 
+        </li>
 
+      </ul>
 
+    </nav>
 
+  </header>
 
+
 
+  <main id="contact">
 
+    <h1 class="lg-heading">
 
+      Contact
 
+      <span class="text-secondary">Me</span>
 
+    </h1>
 
+    <h2 class="sm-heading">
 
+      This is how you can reach me...
 
+    </h2>
 
+    <div class="boxes">
 
+      <div>
 
+        <span class="text-secondary">Email: </span> mrcat323@protonmail.com
 
+      </div>
 
+      <div>
 
+        <span class="text-secondary">Matrix: </span> @mrcat323:matrix.org
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <footer id="main-footer">
 
+    Copyright &copy; by Mr. CaT 2017-2023
 
+  </footer>
 
+
 
+  <script src="js/main.js"></script>
 
+</body>
 
+
 
+</html>

+ 378 - 0
css/main.css
Просмотреть файл 

@@ -0,0 +1,378 @@
 
+.menu-btn {
 
+  position: absolute;
 
+  z-index: 3;
 
+  right: 35px;
 
+  top: 35px;
 
+  cursor: pointer;
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu-btn .btn-line {
 
+  width: 28px;
 
+  height: 3px;
 
+  margin: 0 0 5px 0;
 
+  background: #fff;
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu-btn.close {
 
+  transform: rotate(180deg);
 
+}
 
+.menu-btn.close .btn-line:nth-child(1) {
 
+  transform: rotate(45deg) translate(5px, 5px);
 
+}
 
+.menu-btn.close .btn-line:nth-child(2) {
 
+  opacity: 0;
 
+}
 
+.menu-btn.close .btn-line:nth-child(3) {
 
+  transform: rotate(-45deg) translate(7px, -6px);
 
+}
 
+
 
+.menu {
 
+  position: fixed;
 
+  top: 0;
 
+  width: 100%;
 
+  opacity: 0.9;
 
+  visibility: hidden;
 
+}
 
+.menu.show {
 
+  visibility: visible;
 
+}
 
+.menu-branding,
 
+.menu-nav {
 
+  display: flex;
 
+  flex-flow: column wrap;
 
+  align-items: center;
 
+  justify-content: center;
 
+  float: left;
 
+  width: 50%;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+}
 
+.menu-nav {
 
+  margin: 0;
 
+  padding: 0;
 
+  background: #373737;
 
+  list-style: none;
 
+  transform: translate3d(0, -100%, 0);
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu-nav.show {
 
+  transform: translate3d(0, 0, 0);
 
+}
 
+.menu-branding {
 
+  background: #444;
 
+  transform: translate3d(0, 100%, 0);
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu-branding.show {
 
+  transform: translate3d(0, 0, 0);
 
+}
 
+.menu-branding .portrait {
 
+  width: 250px;
 
+  height: 250px;
 
+  background: url("../img/cat250.jpeg");
 
+  border-radius: 50%;
 
+  border: solid 3px #eece1a;
 
+}
 
+.menu .nav-item {
 
+  transform: translate3d(600px, 0, 0);
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu .nav-item.show {
 
+  transform: translate3d(0, 0, 0);
 
+}
 
+.menu .nav-item.current > a {
 
+  color: #eece1a;
 
+}
 
+.menu .nav-link {
 
+  display: inline-block;
 
+  position: relative;
 
+  font-size: 30px;
 
+  text-transform: uppercase;
 
+  padding: 1rem 0;
 
+  font-weight: 300;
 
+  color: #fff;
 
+  text-decoration: none;
 
+  transition: all 0.5s ease-out;
 
+}
 
+.menu .nav-link:hover {
 
+  color: #eece1a;
 
+}
 
+
 
+.nav-item:nth-child(1) {
 
+  transition-delay: 0.1s;
 
+}
 
+
 
+.nav-item:nth-child(2) {
 
+  transition-delay: 0.2s;
 
+}
 
+
 
+.nav-item:nth-child(3) {
 
+  transition-delay: 0.3s;
 
+}
 
+
 
+.nav-item:nth-child(4) {
 
+  transition-delay: 0.4s;
 
+}
 
+
 
+* {
 
+  box-sizing: border-box;
 
+}
 
+
 
+body {
 
+  background: #444;
 
+  color: #fff;
 
+  height: 100%;
 
+  margin: 0;
 
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 
+  line-height: 1.5;
 
+}
 
+body#bg-img {
 
+  background: url(../img/background.jpg);
 
+  background-attachment: fixed;
 
+  background-size: cover;
 
+}
 
+body#bg-img:after {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  z-index: -1;
 
+  background: rgba(68, 68, 68, 0.9);
 
+}
 
+
 
+h1,
 
+h2,
 
+h3 {
 
+  margin: 0;
 
+  font-weight: 400;
 
+}
 
+h1.lg-heading,
 
+h2.lg-heading,
 
+h3.lg-heading {
 
+  font-size: 6rem;
 
+}
 
+h1.sm-heading,
 
+h2.sm-heading,
 
+h3.sm-heading {
 
+  margin-bottom: 2rem;
 
+  padding: 0.2rem 1rem;
 
+  background: rgba(73, 73, 73, 0.5);
 
+}
 
+
 
+a {
 
+  color: #fff;
 
+  text-decoration: none;
 
+}
 
+
 
+small {
 
+  font-weight: 200;
 
+  font-size: 12px;
 
+}
 
+
 
+header {
 
+  position: fixed;
 
+  z-index: 2;
 
+  width: 100%;
 
+}
 
+
 
+.text-secondary {
 
+  color: #eece1a;
 
+}
 
+
 
+main {
 
+  padding: 4rem;
 
+  min-height: calc(100vh - 60px);
 
+}
 
+main .icons {
 
+  margin-top: 1rem;
 
+}
 
+main .icons a {
 
+  padding: 0.4rem;
 
+}
 
+main .icons a:hover {
 
+  color: #eece1a;
 
+  transition: all 0.5s ease-out;
 
+}
 
+main#home {
 
+  overflow: hidden;
 
+}
 
+main#home h1 {
 
+  margin-top: 20vh;
 
+}
 
+
 
+.about-info {
 
+  display: grid;
 
+  grid-gap: 30px;
 
+  grid-template-areas: "bioimage bio bio" "job1 job2 job3";
 
+  grid-template-columns: repeat(3, 1fr);
 
+}
 
+.about-info .bio-image {
 
+  grid-area: bioimage;
 
+  margin: auto;
 
+  border-radius: 50%;
 
+  border: #eece1a 3px solid;
 
+}
 
+.about-info .bio {
 
+  grid-area: bio;
 
+  font-size: 1.5rem;
 
+}
 
+.about-info .bio p {
 
+  text-align: justify;
 
+}
 
+.about-info .job-1 {
 
+  grid-area: job1;
 
+}
 
+.about-info .job-2 {
 
+  grid-area: job2;
 
+}
 
+.about-info .job-3 {
 
+  grid-area: job3;
 
+}
 
+.about-info .job {
 
+  background: #515151;
 
+  padding: 0.5rem;
 
+  border-bottom: #eece1a 5px solid;
 
+}
 
+
 
+.projects {
 
+  display: grid;
 
+  grid-gap: 0.7rem;
 
+  grid-template-columns: repeat(3, 1fr);
 
+}
 
+.projects img {
 
+  width: 100%;
 
+  border: 3px #fff solid;
 
+}
 
+.projects img:hover {
 
+  opacity: 0.5;
 
+  border-color: #eece1a;
 
+  transition: all 0.5s ease-out;
 
+}
 
+
 
+.boxes {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  justify-content: space-evenly;
 
+  align-items: center;
 
+  margin-top: 1rem;
 
+}
 
+.boxes div {
 
+  font-size: 2rem;
 
+  border: 3px #fff solid;
 
+  padding: 1.5rem 2.5rem;
 
+  margin-bottom: 3rem;
 
+  transition: all 0.5s ease-out;
 
+}
 
+.boxes div:hover {
 
+  padding: 0.5rem 1.5rem;
 
+  background: #eece1a;
 
+  color: #000;
 
+}
 
+.boxes div:hover span {
 
+  color: #000;
 
+}
 
+
 
+.btn,
 
+.btn-dark,
 
+.btn-light {
 
+  display: block;
 
+  padding: 0.5rem 1rem;
 
+  border: 0;
 
+  margin-bottom: 0.3rem;
 
+}
 
+.btn:hover,
 
+.btn-dark:hover,
 
+.btn-light:hover {
 
+  background: #eece1a;
 
+  color: #000;
 
+}
 
+
 
+.btn-dark {
 
+  background: black;
 
+  color: #fff;
 
+}
 
+
 
+.btn-light {
 
+  background: #c4c4c4;
 
+  color: #333;
 
+}
 
+
 
+#main-footer {
 
+  text-align: center;
 
+  padding: 1rem;
 
+  background: #2b2b2b;
 
+  color: #fff;
 
+  height: 60px;
 
+}
 
+
 
+@media screen and (min-width: 1171px) {
 
+  .projects {
 
+    grid-template-columns: repeat(4, 1fr);
 
+  }
 
+}
 
+
 
+@media screen and (min-width: 769px) and (max-width: 1170px) {
 
+  .projects {
 
+    grid-template-columns: repeat(3, 1fr);
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  main {
 
+    align-items: center;
 
+    text-align: center;
 
+  }
 
+  main .lg-heading {
 
+    line-height: 1;
 
+    margin-bottom: 1rem;
 
+  }
 
+  ul.menu-nav,
 
+  div.menu-branding {
 
+    float: none;
 
+    width: 100%;
 
+    min-height: 0;
 
+  }
 
+  ul.menu-nav.show,
 
+  div.menu-branding.show {
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
+  .menu-nav {
 
+    height: 75vh;
 
+    transform: translate3d(-100%, 0, 0);
 
+    font-size: 24px;
 
+  }
 
+  .menu-branding {
 
+    height: 25vh;
 
+    transform: translate3d(100%, 0, 0);
 
+  }
 
+  .menu-branding .portrait {
 
+    background: url("../img/cat150.jpeg");
 
+    width: 150px;
 
+    height: 150px;
 
+  }
 
+  .about-info {
 
+    grid-template-areas: "bioimage" "bio" "job1" "job2" "job3";
 
+    grid-template-columns: 1fr;
 
+  }
 
+  .projects {
 
+    grid-template-columns: repeat(2, 1fr);
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 500px) {
 
+  main {
 
+    padding: 2rem;
 
+  }
 
+  main #home h1 {
 
+    margin-top: 10vh;
 
+  }
 
+  main .lg-heading {
 
+    margin-top: 1rem;
 
+    font-size: 5rem;
 
+  }
 
+  .projects {
 
+    grid-template-columns: 1fr;
 
+  }
 
+}

BIN
img/background.jpg
Просмотреть файл


BIN
img/cat150.jpeg
Просмотреть файл


BIN
img/cat250.jpeg
Просмотреть файл


BIN
img/projects/1313.png
Просмотреть файл


BIN
img/projects/babolo.png
Просмотреть файл


BIN
img/projects/pizza.png
Просмотреть файл


BIN
img/projects/spotfire.png
Просмотреть файл


BIN
img/projects/upsdt.png
Просмотреть файл


BIN
img/projects/yov.png
Просмотреть файл


+ 79 - 0
index.html
Просмотреть файл 

@@ -0,0 +1,79 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 
+    crossorigin="anonymous">
 
+
 
+  <link rel="stylesheet" href="css/main.css">
 
+  <title>Welcome To My Portfolio</title>
 
+</head>
 
+
 
+<body id="bg-img">
 
+  <header>
 
+    <div class="menu-btn">
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+    </div>
 
+
 
+    <nav class="menu">
 
+      <div class="menu-branding">
 
+        <div class="portrait"></div>
 
+      </div>
 
+      <ul class="menu-nav">
 
+        <li class="nav-item current">
 
+          <a href="index.html" class="nav-link">
 
+            Home
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="about.html" class="nav-link">
 
+            About Me
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="work.html" class="nav-link">
 
+            My Work
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="contact.html" class="nav-link">
 
+            How To Reach Me
 
+          </a>
 
+        </li>
 
+      </ul>
 
+    </nav>
 
+  </header>
 
+
 
+  <main id="home">
 
+    <h1 class="lg-heading">
 
+      Mr.
 
+      <span class="text-secondary">CaT</span>
 
+    </h1>
 
+    <h2 class="sm-heading">
 
+      Web Developer, Language nerd, Open Source Activist, GNU/Linux Enthusiast
 
+    </h2>
 
+    <div class="icons">
 
+      <a target="_blank" href="https://twitter.com/mrcat323">
 
+        <i class="fab fa-twitter fa-2x"></i>
 
+      </a>
 
+      <a target="_blank" href="mailto:mrcat323@protonmail.com">
 
+        <i class="fas fa-envelope fa-2x"></i>
 
+      </a>
 
+      <a target="_blank" href="https://t.me/mrcat323">
 
+        <i class="fab fa-telegram fa-2x"></i>
 
+      </a>
 
+      <a target="_blank" href="https://github.com/mrcat323">
 
+        <i class="fab fa-github fa-2x"></i>
 
+      </a>
 
+    </div>
 
+  </main>
 
+
 
+  <script src="js/main.js"></script>
 
+</body>
 
+
 
+</html>

+ 33 - 0
js/main.js
Просмотреть файл 

@@ -0,0 +1,33 @@
 
+// Select DOM Items
 
+const menuBtn = document.querySelector('.menu-btn');
 
+const menu = document.querySelector('.menu');
 
+const menuNav = document.querySelector('.menu-nav');
 
+const menuBranding = document.querySelector('.menu-branding');
 
+const navItems = document.querySelectorAll('.nav-item');
 
+
 
+// Set Initial State Of Menu
 
+let showMenu = false;
 
+
 
+menuBtn.addEventListener('click', toggleMenu);
 
+
 
+function toggleMenu() {
 
+  if (!showMenu) {
 
+    menuBtn.classList.add('close');
 
+    menu.classList.add('show');
 
+    menuNav.classList.add('show');
 
+    menuBranding.classList.add('show');
 
+    navItems.forEach(item => item.classList.add('show'));
 
+
 
+    // Set Menu State
 
+    showMenu = true;
 
+  } else {
 
+    menuBtn.classList.remove('close');
 
+    menu.classList.remove('show');
 
+    menuNav.classList.remove('show');
 
+    menuBranding.classList.remove('show');
 
+    navItems.forEach(item => item.classList.remove('show'));
 
+
 
+    // Set Menu State
 
+    showMenu = false;
 
+  }
 
+}

+ 126 - 0
work.html
Просмотреть файл 

@@ -0,0 +1,126 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 
+    crossorigin="anonymous">
 
+
 
+  <link rel="stylesheet" href="css/main.css">
 
+  <title>View My Work</title>
 
+</head>
 
+
 
+<body>
 
+  <header>
 
+    <div class="menu-btn">
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+      <div class="btn-line"></div>
 
+    </div>
 
+
 
+    <nav class="menu">
 
+      <div class="menu-branding">
 
+        <div class="portrait"></div>
 
+      </div>
 
+      <ul class="menu-nav">
 
+        <li class="nav-item">
 
+          <a href="index.html" class="nav-link">
 
+            Home
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="about.html" class="nav-link">
 
+            About Me
 
+          </a>
 
+        </li>
 
+        <li class="nav-item current">
 
+          <a href="work.html" class="nav-link">
 
+            My Work
 
+          </a>
 
+        </li>
 
+        <li class="nav-item">
 
+          <a href="contact.html" class="nav-link">
 
+            How To Reach Me
 
+          </a>
 
+        </li>
 
+      </ul>
 
+    </nav>
 
+  </header>
 
+
 
+  <main id="work">
 
+    <h1 class="lg-heading">
 
+      My
 
+      <span class="text-secondary">Work</span>
 
+    </h1>
 
+    <h2 class="sm-heading">
 
+      Check out some of my recent projects...
 
+    </h2>
 
+    <div class="projects">
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/yov.png" alt="Project">
 
+        </a>
 
+        <a href="https://yov.tj" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+      </div>
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/spotfire.png" alt="Project">
 
+        </a>
 
+        <a href="http://spotfire-app.herokuapp.com" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+        <a href="https://github.com/mrcat323/SpotFire-FrontEnd" target="_blank" class="btn-dark">
 
+          <i class="fab fa-github"></i> Github
 
+        </a>
 
+      </div>
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/pizza.png" alt="Project">
 
+        </a>
 
+        <a href="https://pizzadomicilio.ru" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+      </div>
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/babolo.png" alt="Project">
 
+        </a>
 
+        <a href="https://chat.babolo.tj/" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+      </div>
 
+
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/1313.png" alt="Project">
 
+        </a>
 
+        <a href="https://mrcat323.github.io/1313" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+        <a href="https://github.com/mrcat323/1313" target="_blank" class="btn-dark">
 
+          <i class="fab fa-github"></i> Github
 
+        </a>
 
+      </div>
 
+      <div class="item">
 
+        <a href="#!">
 
+          <img src="img/projects/upsdt.png" alt="Project">
 
+        </a>
 
+        <a href="http://upsdt.tj/" target="_blank" class="btn-light">
 
+          <i class="fas fa-eye"></i> Project
 
+        </a>
 
+      </div>
 
+    </div>
 
+  </main>
 
+
 
+  <footer id="main-footer">
 
+    Copyright &copy; by Mr. CaT 2017-2023
 
+  </footer>
 
+
 
+  <script src="js/main.js"></script>
 
+</body>
 
+
 
+</html>