CodeYourFuture · apachitech · Nov 10, 2024 · Nov 17, 2024
diff --git a/images/apacci-tv-x.png b/images/apacci-tv-x.png
diff --git a/images/apacci-tv.png b/images/apacci-tv.png
diff --git a/images/bengif-1.png b/images/bengif-1.png
diff --git a/images/birthd-x.png b/images/birthd-x.png
diff --git a/images/dav-business-card-x.png b/images/dav-business-card-x.png
diff --git a/images/dav-liandja-x.png b/images/dav-liandja-x.png
diff --git a/images/google-clone-x.png b/images/google-clone-x.png
diff --git a/images/space-explore-x.png b/images/space-explore-x.png
diff --git a/images/visitkin-x.png b/images/visitkin-x.png
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My Portfolio</title>
+    <title>David Liandja's Portfolio</title>
     <meta
       name="description"
       content="The technical portfolio of trainee name"
@@ -35,10 +35,13 @@
       href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;800&display=swap"
       rel="stylesheet"
     />
+    <link 
+      rel="stylesheet" 
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   </head>
   <body>
     <header>
-      <h1>My Name</h1>
+      <h1>DAVID SELENGA LIANDJA</h1>
       <nav>
         <ul>
           <li><a href="#about">About Me</a></li>
@@ -51,29 +54,128 @@ <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?
+          Hi, I'm David Selenga Liandja, a passionate software developer with 
+          a <!--background in Public Health and a -->commitment to creating meaningful, 
+          user-centric digital solutions.
+          <br>
+          <br>
+          I aim to leverage my diverse skill set and experience to build innovative 
+          solutions that empower communities and drive positive change. 
+          Thank you for visiting my portfolio – feel free to explore my projects and 
+          reach out to discuss potential collaborations!
         </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>
+        <p>Here are some of the projects I've worked on, demonstrating my skills in web development, problem-solving, and design.</p>
+
+        <div class="project-list">
+            <!-- Project 1 -->
+            <div class="project">
+                <img src="images/bengif-1.png" alt="Screenshot of Project 1" />
+                <h3>APACCI FILM</h3>
+                <p>Brief description of the project, including technologies used (e.g., HTML, CSS, JavaScript, React).</p>
+                <p>This project focuses on [describe purpose, e.g., creating a responsive website for a portfolio, building a web app for tracking tasks].</p>
+                <a href="https://github.com/yourusername/project1" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+                <a href="https://bengifilm-7bcde.web.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 2 -->
+            <div class="project">
+              <img src="images/dav-business-card-x.png" alt="Screenshot of Project 2" />
+                <h3>DAVID BUSINESS CARD </h3>
+                <p>Brief description of the project, including technologies used (e.g., Node.js, Express, MongoDB, React).</p>
+                <p>This project focuses on [describe purpose, e.g., building a RESTful API for an e-commerce platform].</p>
+                <a href="https://github.com/yourusername/project2" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+                <a href="https://liandja-business-card.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 3 -->
+            <div class="project">
+                <img src="images/google-clone-x.png" alt="Screenshot of Project 3" />
+                <h3>GOOGLE CLONE </h3>
+                <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+                <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+                <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+                <a href="https://david-google-clone.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 4 -->
+            <div class="project">
+              <img src="images/space-explore-x.png" alt="Screenshot of Project 3" />
+              <h3>SPACE X EXPLORATION SITE </h3>
+              <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+              <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+              <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+              <a href="https://david-space-exploration-site.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 5 -->
+            <div class="project">
+              <img src="images/visitkin-x.png" alt="Screenshot of Project 3" />
+              <h3>VISIT KINSHASA SITE </h3>
+              <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+              <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+              <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+              <a href=" https://david-hometown.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 6 -->
+            <div class="project">
+              <img src="images/apacci-tv-x.png" alt="Screenshot of Project 3" />
+              <h3>APACCI TV SITE </h3>
+              <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+              <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+              <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+              <a href="https://apacci-tv.web.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+          </div>
+
+          <!-- Project 7 -->
+          <div class="project">
+            <img src="images/birthd-x.png" alt="Screenshot of Project 3" />
+            <h3>BIRTHDAY GIFT SITE </h3>
+            <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+            <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+            <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+            <a href="https://dav-birthday-gift.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+          </div>
+
+          <!-- Project 8 -->
+          <div class="project">
+            <img src="images/dav-liandja-x.png" alt="Screenshot of Project 3" />
+            <h3>DAVID LIANDJA'S SITE </h3>
+            <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+            <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+            <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+            <a href="https://davidliandja.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+          </div>
+          </div>
+          <!-- Project 9 -->
+          <div class="project">
+            <img src="/" alt="Screenshot of Project 9" />
+            <h3>Project Name 9</h3>
+            <p>Brief description of the project, including technologies used (e.g., Python, Django, PostgreSQL).</p>
+            <p>This project focuses on [describe purpose, e.g., building a data analytics dashboard for visualizing health metrics].</p>
+            <a href="https://github.com/yourusername/project3" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |
+            <a href="https://your-live-project-link.com" target="_blank" rel="noopener noreferrer">Live Demo</a>
+          </div>
+        </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>
+      <header><h2>Contact me</h2></header>
+      <p>
+        I'm always excited to connect with fellow developers, collaborate on new projects, 
+        or discuss potential job opportunities. If you have a question, a project idea, 
+        or just want to say hello, feel free to reach out!
+
+      </p>
+      <ul>
+        <li><a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope"></i> Email</a></li>
+        <li><a href="https://www.linkedin.com/in/david-selenga-liandja-721a01173/" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
+        <li><a href="https://github.com/apachitech" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i> GitHub</a></li>
+        <li><a href="https://wa.me/0027742932071" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i> WhatsApp</a></li>
+      </ul>
       </section>
     </main>
     <footer>

diff --git a/style.css b/style.css
@@ -55,3 +55,37 @@ section p {
   line-height: 1.5;
   max-width: 55ch;
 }
+
+.project-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5em;
+}
+
+.project {
+  border: 1px solid #ddd;
+  padding: 1em;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.project img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+  margin-bottom: 0.5em;
+}
+
+/* Adjust for larger screens */
+@media (min-width: 768px) {
+  .project-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.project h3 {
+  margin-top: 0;
+}
+