second commit

CODING-ALPHA · Jul 2, 2024 · 48a4a24 · 48a4a24
1 parent 21f559a
commit 48a4a24
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/images/slackprofilepic.jpg b/images/slackprofilepic.jpg
diff --git a/index.html b/index.html
@@ -8,9 +8,6 @@
   </head>
   <body>
     <section data-testid="main-section">
-      <header data-testid="header">
-        <h1>My goals in web development for the next two years</h1>
-      </header>
       <main>
         <article>
           <figure class="details">
@@ -20,30 +17,31 @@ <h1>My goals in web development for the next two years</h1>
               data-testid="slackProfilePicture"
             />
             <figcaption>
-              <h3 data-testid="slackDisplayName">Iam_Perfection</h3>
+              <h4 data-testid="slackDisplayName">
+                Slack display name: Iam_Perfection
+              </h4>
               <h4 id="currentTime" data-testid="currentTimeUTC"></h4>
               <h4 id="currentDay" data-testid="currentDay"></h4>
               <p>
                 Email:
                 <a
                   href="mailto:[email protected]"
                   data-testid="slackEmail"
-                >
-                  [email protected]
+                  >[email protected]
                 </a>
               </p>
             </figcaption>
           </figure>
         </article>
         <div class="goals" data-testid="goals-section">
-          <h3>My goals in tech</h3>
+          <h3>My tech goals in two years</h3>
           <ul data-testid="goals-list">
             <li>Master React.js and Next.js</li>
             <li>Deepen my knowledge of javascript</li>
             <li>Master Node.js to become a fullstack web developer</li>
             <li>Contribute to a lot open source projects</li>
             <li>Build a lot of projects to solve problems</li>
-            <li>Land my first role as a web developer</li>
+            <li>Land my first full time role as a web developer</li>
           </ul>
         </div>
       </main>

diff --git a/readme.md b/readme.md
@@ -0,0 +1,7 @@
+# HNG Internship - Track 1: My Tech Goals
+
+- This repository holds the code for a single-page website showcasing my tech goals for the next two years.
+
+# Project Overview:
+
+- This website serves as a roadmap for my aspirations in the tech industry over the next 24 months.
diff --git a/script.js b/script.js
@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.getElementById(
       "currentTime"
-    ).textContent = `Current Time in UTC: ${utcTime}`;
+    ).textContent = `Current Time (UTC): ${utcTime}`;
     document.getElementById(
       "currentDay"
     ).textContent = `Current Day: ${dayOfWeek}`;

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 /* Font api */
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
 
-/* css rest */
+/* css reset */
 *,
 ::after,
 ::before {
@@ -14,6 +14,11 @@
   --dark-blue: #272e36;
   --offwhite: #f0e9e6;
   --headingfontsize: 2.5rem;
+  --figcaptionfontsize: 1.8rem;
+}
+
+a {
+  transition: 0.3s ease;
 }
 
 body {
@@ -24,14 +29,7 @@ body {
   padding: 20px;
 }
 
-header h1 {
-  font-size: 2rem;
-  text-transform: capitalize;
-  width: 100%;
-}
-
 section {
-  /* width: max-content; */
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -41,6 +39,7 @@ section {
   margin: 2% auto;
   row-gap: 40px;
 }
+
 figure {
   display: flex;
   flex-direction: column;
@@ -55,12 +54,17 @@ figcaption {
   gap: 10px;
 }
 
-figcaption h3 {
-  font-size: var(--headingfontsize);
+figcaption h4 {
+  font-size: var(--figcaptionfontsize);
+}
+
+figcaption p {
+  font-size: var(--figcaptionfontsize);
 }
+
 figcaption p a {
   color: var(--offwhite);
-  text-underline-offset: 5px;
+  text-underline-offset: 10px;
 }
 
 .goals {
@@ -89,18 +93,29 @@ figcaption p a {
   text-underline-offset: 5px;
 }
 
+a:hover {
+  text-underline-offset: 15px;
+}
+
 @media only screen and (max-width: 443px) {
   .footer {
     flex-direction: column;
   }
 }
 
+@media only screen and (max-width: 578px) {
+  :root {
+    --figcaptionfontsize: 1.3rem;
+  }
+}
+
 @media only screen and (max-width: 345px) {
   figcaption h3 {
     font-size: 2.1rem;
   }
 
   :root {
     --headingfontsize: 2rem;
+    --figcaptionfontsize: 1rem;
   }
 }