v1.0 done

tharinedirisinghe · Jun 14, 2024 · 0f72d51 · 0f72d51
1 parent d47c621
commit 0f72d51
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 134 deletions.
diff --git a/contact.html b/contact.html
@@ -24,13 +24,13 @@ <h3>IT Undergraduate | ICT Teacher | Content Creator</h3>
         <h1>Contact Me</h1>
         <form action="https://formspree.io/f/your-form-id" method="POST">
             <label for="name">Name:</label>
-            <input type="text" id="name" name="name" required>
+            <input type="text" id="name" name="name" placeholder="Enter your name" required>
 
             <label for="email">Email:</label>
-            <input type="email" id="email" name="email" required>
+            <input type="email" id="email" name="email" placeholder="Enter your email" required>
 
             <label for="message">Message:</label>
-            <textarea id="message" name="message" rows="4" required></textarea>
+            <textarea id="message" name="message" rows="4" placeholder="Enter your message" required></textarea>
 
             <button type="submit">Send</button>
         </form>

diff --git a/index.css b/index.css
@@ -27,8 +27,8 @@ nav ul {
     margin: 0;
     padding: 0;
     display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap; /* Allow items to wrap */
+    justify-content: space-evenly;
+    flex-wrap: wrap;
 }
 
 nav ul li {
@@ -55,25 +55,107 @@ section h1{
 #about, #projects, #contact {
     padding: 20px; /* Reduced padding for better fit on small screens */
     background-color: #d6d6d6cd;
-    margin: 20px; /* Reduced margin */
-    margin-bottom: 80px; /* Reduced bottom margin */
+    margin: 20px;
+    margin-bottom: 80px;
+}
+
+/*About Me styling*/
+
+.about-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
+    justify-content: space-evenly;
+}
+
+.about-container img {
+    max-width: 100%;
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 50%;
+    order: 2;
+}
+
+.about-text {
+    max-width: 600px;
+    order: 1;
+}
+
+/*Footer styling*/
+
+footer {
+    background-color: #2C3E50;
+    color: white;
+    text-align: center;
+    position: relative;
+    width: 100%;
+    bottom: 0;
+    padding: 1em 0;
+}
+
+footer a {
+    color: #ffc107;
+    text-decoration: none;
+    margin: 0 5px;
+
+}
+
+footer a:hover {
+    text-decoration: underline;
 }
 
+footer p{
+   margin: 0;
+}
+
+/*Projects styling*/
+
 .project {
     margin-bottom: 30px; /* Space between projects */
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; 
 }
 
 .project h4 {
     margin: 0;
 }
 
+.centered-list {
+    display: inline-block; /* Make the list inline-block to center it */
+    text-align: left; /* Ensure list items are left-aligned */
+  }
+
+.project ul li {
+    list-style-type: disc;
+  }
+
 .project fieldset {
     border: 1px solid #34495E;
-    padding: 10px; /* Adjusted padding */
+    padding: 10px;
     width: 100%; /* Ensures fieldset takes full width */
     box-sizing: border-box; /* Includes padding in the width */
+    border-radius: 5px;
+    overflow: hidden;
+    text-align: center;
 }
 
+legend {
+    font-weight: bold;
+    font-size: 1.2em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    max-width: 100%;
+    box-sizing: border-box;
+    white-space: normal;
+    word-wrap: break-word; /* Ensure text wraps */
+    word-break: break-all;
+    overflow: hidden; /* Ensure long words break */
+    text-align: center;
+  }
+
+/*Contact styling*/
+
 #contact p {
     text-align: center;
 }
@@ -84,6 +166,7 @@ form {
     gap: 10px;
     max-width: 600px;
     margin: 0 auto;
+    margin-bottom: 30px;
 }
 
 form label {
@@ -110,50 +193,6 @@ form button:hover {
     background-color: #2C3E50;
 }
 
-footer {
-    background-color: #2C3E50;
-    color: white;
-    text-align: center;
-    position: relative;
-    width: 100%;
-    bottom: 0;
-    padding: 1em 0;
-}
-
-footer a {
-    color: #ffc107;
-    text-decoration: none;
-    margin: 0 5px;
-
-}
-
-footer a:hover {
-    text-decoration: underline;
-}
-
-footer p{
-   margin: 0;
-}
-
-.about-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
-    justify-content: space-evenly;
-}
-
-.about-container img {
-    max-width: 100%;
-    height: auto; /* Maintain aspect ratio */
-    border-radius: 50%;
-    order: 2;
-}
-
-.about-text {
-    max-width: 600px;
-    order: 1;
-}
-
 @media (max-width: 768px) {
     nav ul {
         padding: 0;
@@ -164,6 +203,8 @@ footer p{
         padding: 10px 0;
     }
 
+    /*Contact styling*/
+
     #contact {
         padding: 10px;
         margin: 10px;
@@ -172,17 +213,17 @@ footer p{
 
     form {
         padding: 10px;
-        gap: 8px;
     }
 
     form input, form textarea, form button {
-        padding: 8px;
+        padding: 10px;
     }
 
+    /*About Me styling*/
+
     .about-container {
         flex-direction: column; /* Stack items vertically on small screens */
-        text-align: center; /* Center text */
-
+        text-align: center;
     }
 
     .about-container img {
@@ -206,80 +247,25 @@ footer p{
         font-size: 1.5em; /* Adjusted font size for smaller screens */
     }
 
+    /*Projects styling*/
+
     .project fieldset {
         padding: 5px; /* Further reduced padding */
     }
-}
-
-/* Add styles for legend and fieldset */
 
-legend {
-    font-weight: bold;
-    font-size: 1.2em;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #f9f9f9;
-    max-width: 100%;
-    box-sizing: border-box;
-    white-space: normal;
-    /* Ensure text wraps */
-    word-wrap: break-word;
-    word-break: break-all;/* add this */
-    /* Ensure long words break */
-    overflow: hidden;
-  }
-
-  fieldset {
-    border: 1px solid #ccc;
-    padding: 20px;
-    border-radius: 8px;
-    max-width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-  .project {
-    padding: 10px;
-    margin: 10px 0;
-  }
-
-  .project h4,
-  .project p,
-  .project ul {
-    font-size: 1em;
-    padding: 5px 0;
-    margin: 5px 0;
-  }
-
-  .project ul {
-    padding-left: 20px;
-  }
-
-  .project ul li {
-    list-style-type: disc;
-  }
-
-  @media (max-width: 768px) {
     legend {
-      font-size: 1em;
-      padding: 5px;
-      word-break: break-all
-    }
-    fieldset {
-      padding: 10px;
-    }
-    #projects {
-      padding: 20px;
-      margin: 20px;
-      margin-bottom: 50px;
-    }
-    #projects h1 {
-      font-size: 1.5em;
-    }
-    .project h4,
-    .project p,
-    .project ul {
-      font-size: 0.9em;
-    }
-  }
+        font-size: 1em;
+        padding: 5px;
+        word-break: break-all
+      }
+
+      #projects {
+        padding: 20px;
+        margin: 20px;
+        margin-bottom: 50px;
+      }
+
+      #projects h1 {
+        font-size: 1.5em;
+      }
+}
diff --git a/projects.html b/projects.html
@@ -28,14 +28,17 @@ <h1>Projects</h1>
               <h2>tharinedirisinghe.github.io/portfolio/</h2>
             </legend>
             <h4>Description:</h4>
-            <p>Explore my personal portfolio website showcasing my skills, projects, and professional journey.</p>
+            <p>A clean and professional portfolio website showcasing my skills and projects. It features an "About Me" section, detailed "Projects" page, and a "Contact" page for easy communication.</p>
             <h4>Technologies Used:</h4>
-            <ul>
-              <li>HTML, CSS, JavaScript</li>
-              <li>Hosted on GitHub Pages</li>
-            </ul>
+
+              <ul class="centered-list">
+                <li>HTML, CSS, JavaScript</li>
+                <li>Hosted on GitHub Pages</li>
+              </ul>
+
+
             <h4>My Contribution:</h4>
-            <p>As a full-stack developer, I created the entire website and am currently working on the backend.</p>
+            <p>As a <b>full-stack developer</b>, I created the entire website and am currently working on the backend.</p>
           </fieldset>
         </div>