CodeYourFuture · apachitech · Nov 10, 2024 · Nov 17, 2024 · Feb 25, 2025
diff --git a/images/My-WordPress-Blog-02-15-2025_04_26_PM.png b/images/My-WordPress-Blog-02-15-2025_04_26_PM.png
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,138 @@ <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/My-WordPress-Blog-02-15-2025_04_26_PM.png" alt="Screenshot of Project 1" />
+              <h3>DAVID ECOMMERCE WORDPRESS SITE</h3>
+              <p>This project is an eCommerce website built using WordPress, WooCommerce, and the Shopfront eCommerce theme. It provides a user-friendly shopping experience with essential eCommerce functionalities.</p>  
+              <p>This project focuses on creating a functional and visually appealing online store, allowing users to browse products, add them to a cart, and complete purchases seamlessly.</p>  
+              <a href="https://github.com/yourusername/project1" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |  
+              <a href="http://david-commerce.rf.gd/" target="_blank" rel="noopener noreferrer">Live Demo</a>
+            </div>
+
+            <!-- Project 1 -->
+            <div class="project">
+                <img src="images/bengif-1.png" alt="Screenshot of Project 1" />
+                <h3>APACCI FILM</h3>
+                <p>This project is a movie streaming website built using HTML, CSS, JavaScript, and Bootstrap. It features a JavaScript array dataset to manage and display movie information dynamically.</p>  
+                <p>This project focuses on providing a responsive and interactive platform for browsing and streaming movies, showcasing a clean UI and smooth user experience.</p>  
+                <a href="https://github.com/yourusername/project2" 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>This project is a digital business card designed for David, built using HTML and CSS. It features a clean and professional layout to showcase contact details and branding.</p>  
+                <p>This project focuses on creating a visually appealing and responsive digital business card, ensuring a modern and accessible way to share personal or professional information.</p>  
+                <a href="https://github.com/yourusername/project4" 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>This project is a Google Search Engine clone built using HTML and CSS. It replicates the basic design and layout of Google's search page.</p>  
+                <p>This project focuses on recreating Google's minimalist and responsive search interface using clean HTML and CSS styling.</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>This project is a SpaceX clone website built using HTML and CSS. It replicates the design and layout of the official SpaceX site, featuring a sleek and modern interface.</p>  
+              <p>This project focuses on creating a visually engaging and responsive web page that showcases space exploration content, with a design inspired by SpaceX’s official website.</p>  
+              <a href="https://github.com/yourusername/project5" 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>This project is a "Visit Kinshasa" website built using HTML and CSS. It highlights the attractions, culture, and key information about Kinshasa, providing a visually engaging experience.</p>  
+              <p>This project focuses on promoting tourism in Kinshasa by offering an informative and well-designed web page that showcases the city's landmarks and cultural heritage.</p>  
+              <a href="https://github.com/yourusername/project6" 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>This project is a movie streaming website built using HTML, CSS, JavaScript, and Bootstrap. It utilizes a JavaScript array dataset to dynamically display movie content.</p>  
+              <p>This project focuses on providing a responsive and user-friendly platform for browsing and streaming movies, featuring an intuitive UI and smooth navigation.</p>  
+              <a href="https://github.com/yourusername/project7" 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>This project is a birthday gift website built using HTML, CSS, JavaScript, and Bootstrap. It features interactive elements to create a memorable and personalized birthday experience.</p>  
+            <p>This project focuses on delivering a visually appealing and engaging birthday-themed web page, incorporating animations and dynamic content using JavaScript.</p>  
+            <a href="https://github.com/yourusername/project8" 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>This project is a simple personal presentation website built using HTML and CSS. It serves as an online introduction, showcasing personal details, skills, and background.</p>  
+            <p>This project focuses on creating a clean and responsive web page to present personal information in a visually appealing and professional manner.</p>  
+            <a href="https://github.com/yourusername/project9" target="_blank" rel="noopener noreferrer">GitHub Repo</a> |  
+            <a href="https://davidliandja.netlify.app" target="_blank" rel="noopener noreferrer">Live Demo</a>
+          </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;
+}
+