CodeYourFuture · IakubDubachev · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
   </head>
   <body>
     <header>
-      <h1>My Name</h1>
+      <h1>Iakub Dubachev</h1>
       <nav>
         <ul>
           <li><a href="#about">About Me</a></li>
@@ -51,28 +51,32 @@ <h1>My Name</h1>
       <section id="about">
         <header><h2>About Me</h2></header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
+          I am Iakub Dubachev, a software development trainee at Code Your Future. I have experience in HTML, CSS, JavaScript, and I am expanding my skills in React and Node.js. I love solving problems and building web applications that provide great user experiences.
+  </p>
         </p>
       </section>
       <section id="projects">
         <header><h2>Projects Showcase</h2></header>
-        <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
-        </p>
+        <div class="project-item">
+          <h3>1 - Hometown Page</h3>
+          <p>A personal endeavour that showcases my community's significant sites, history, and culture.</p>
+          <p><strong>Technologies Used:</strong> HTML, CSS, JavaScript</p>
+          <button><a href="https://iakubdubachev-hometownpageupdated.netlify.app/" target="_blank">View Project</a></button>
+        </div>
+
+        <div class="project-item">
+          <h3>2 - T-shirt Order Form </h3>
+          <p>An interactive project that implements form controls for data input and validation.</p>
+          <p><strong>Technologies Used:</strong> HTML, CSS, JavaScript</p>
+          <button><a href="https://deploy-preview-234--cyf-ufd.netlify.app/" target="_blank">View Project</a></button>
+        </div>
       </section>
       <section id="contact">
         <header><h2>Contact me</h2></header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
+          <p><strong>Email:</strong> <a href="[email protected]">[email protected]</a></p>
+          <p><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/iakub-dubachev-5566422b3/">Iakub Dubachev</a></p>
+          </p>
         </p>
       </section>
     </main>

diff --git a/style.css b/style.css
@@ -1,57 +1,122 @@
-/* Design tokens */
-:root {
-  --paper: hsla(251, 28%, 88%, 0.99);
-  --ink: hsla(244, 16%, 17%, 0.95);
-  --brand: hsla(0, 79%, 63%, 0.9);
-  --font: "Raleway", system-ui, sans-serif;
-  --gap: 20px;
-  --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px);
-}
-/* General Styles */
-html,
-body {
-  scroll-behavior: smooth;
-  background: var(--paper);
-  color: var(--ink);
-  font-family: var(--font);
+/* General Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
+/* Base Styles */
 body {
-  display: grid;
+  font-family: 'Raleway', sans-serif;
+  line-height: 1.8;
+  background-color: yellow;
+  color: blue;
+}
+
+header, footer {
+  background-color: #1a1a1a;
+  color: white;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+header h1 {
+  font-size: 2rem;
+}
+
+header nav ul {
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+header nav a {
+  color: #f8f8f8;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1.1rem;
+}
+
+header nav a:focus,
+header nav a:hover {
+  outline: 3px dashed #fff;
+  outline-offset: 3px;
+  text-decoration: underline;
+}
+
+main {
+  padding: 2rem;
+  max-width: 800px;
   margin: auto;
-  min-height: 100vh;
-  gap: var(--gap);
-  max-width: var(--container);
 }
-a,
-a:any-link {
-  color: currentColor;
+
+section {
+  margin-bottom: 2.5rem;
+}
+
+section h2 {
+  font-size: 1.8rem;
+  color: darkblue;
+  margin-bottom: 1rem;
+}
+
+.project-item {
+  border: 1px solid #ccc;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.project-item h3 {
+  font-weight: 800;
+  font-size: 1.4rem;
+  color: darkblue;
+}
+
+.project-item a.button {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.6rem 1.2rem;
+  background-color: #1a1a1a;
+  color: #f8f8f8;
   text-decoration: none;
-  border-bottom: 2px solid transparent;
-  transition: border-color ease-in-out 0.3s;
+  border-radius: 4px;
 }
-a:hover,
-a:focus {
-  color: var(--brand);
-  border-color: currentColor;
+
+.project-item a.button:hover {
+  background-color: #333;
 }
-/* Site header and navigation */
-body > header {
-  background: var(--paper);
-  display: flex;
-  justify-content: space-between;
+
+footer a {
+  color: #f8f8f8;
+  font-size: 1rem;
+  display: inline-flex;
   align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 1;
 }
-nav ul {
-  display: flex;
-  list-style: none;
-  gap: var(--gap);
+
+footer svg {
+  margin-right: 0.5rem;
+  transition: transform 0.3s;
 }
 
-/* Text readability */
-section p {
-  line-height: 1.5;
-  max-width: 55ch;
+footer a:hover svg {
+  transform: scale(1.1);
 }
+
+/* Focus and Hover Effects for Accessibility */
+a:focus, button:focus, .button:focus {
+  outline: 3px dashed #555;
+  outline-offset: 3px;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+  header nav ul {
+    flex-direction: column;
+  }
+
+  header h1 {
+    font-size: 1.5rem;
+  }
+}