dasaCoder · Chamindu284 · May 8, 2025 · May 8, 2025 · May 8, 2025
diff --git a/se2021058/README.md b/se2021058/README.md
@@ -0,0 +1,44 @@
+# Personal Portfolio Website
+
+## Project Description
+
+A personal portfolio website showcasing my skills, projects, and services as a software engineer. It includes sections for home, about, skills, services, projects, and contact information.
+
+## Libraries Used
+
+- _Typed.js_ - For text animation effects
+- _AOS (Animate On Scroll)_ - For scroll-based animations
+- _Boxicons_ - For modern icon components
+
+## Live Hosted Link
+
+[Visit Portfolio](https://chamindudilshan.netlify.app/)
+
+## How to Run the Project Locally
+
+1. Clone the repository
+
+bash
+git clone https://github.com/Chamindu284/portfolio.git
+
+2. Navigate to the project directory
+
+bash
+cd Portfolio
+
+3. Open the project
+
+- Open the index.html file in your web browser
+- Alternatively, use a local development server:
+  - If you have Python installed:
+    bash
+    python -m http.server 8000
+  - If you have Node.js installed:
+    bash
+    npx serve
+
+4. View the website
+
+- Open your browser and visit http://localhost:8000 or the URL provided by your local server
+
+Note: Internet connection is required for CDN libraries (Typed.js, AOS, Boxicons) to work properly.
diff --git a/se2021058/assets/fuel.jpg b/se2021058/assets/fuel.jpg
diff --git a/se2021058/assets/profile.jpg b/se2021058/assets/profile.jpg
diff --git a/se2021058/assets/spiritStore.png b/se2021058/assets/spiritStore.png
diff --git a/se2021058/assets/web.png b/se2021058/assets/web.png
diff --git a/se2021058/index.html b/se2021058/index.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chamindu Dilshan Portfolio</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  </head>
+  <body>
+    <header>
+      <a href="#home" class="logo">Chamindu<span>Dilshan</span></a>
+      <nav class="navbar" id="navbar">
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+        <a href="#skills">Skills</a>
+        <a href="#services">Services</a>
+        <a href="#projects">Projects</a>
+        <a href="#contact">Contact</a>
+      </nav>
+      <div class="menu-icon" id="menu-icon">
+        <i class="bx bx-menu"></i>
+      </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero" id="home" data-aos="fade-down">
+      <div class="hero-content" data-aos="fade-right" data-aos-delay="200">
+        <h1>Hello, I'm <span>Chamindu</span></h1>
+        <h2 class="typed-text"></h2>
+        <p>
+          Digital creator, UI/UX enthusiast, and full-stack developer. I build
+          elegant, high-impact web experiences with a passion for detail and
+          innovation.
+        </p>
+        <div class="hero-btns">
+          <a href="#projects" class="btn">See My Work</a>
+          <a href="#contact" class="btn btn-outline">Contact</a>
+        </div>
+        <div class="social-icons">
+          <a href="https://github.com/Chamindu284" target="_blank"
+            ><i class="bx bxl-github"></i
+          ></a>
+          <a
+            href="https://www.linkedin.com/in/chamindu-dilshan-4a4962299/"
+            target="_blank"
+            ><i class="bx bxl-linkedin"></i
+          ></a>
+        </div>
+      </div>
+      <div class="hero-img" data-aos="fade-left" data-aos-delay="400">
+        <img src="./assets/profile.jpg" alt="Chamindu Dilshan" />
+      </div>
+    </section>
+
+    <!-- About Section -->
+    <section class="about" id="about">
+      <div class="about-img" data-aos="fade-right">
+        <img src="./assets/profile.jpg" alt="About Chamindu" />
+      </div>
+      <div class="about-content" data-aos="fade-left" data-aos-delay="200">
+        <h2>About <span>Me</span></h2>
+        <p>
+          I'm Chamindu Dilshan, a web designer and developer passionate about
+          blending technology and art. My approach combines modern aesthetics,
+          usability, and performance to deliver digital products that stand out.
+        </p>
+        <a href="#contact" class="btn">Let's Connect</a>
+      </div>
+    </section>
+
+    <!-- Skills Section -->
+    <section class="skills" id="skills">
+      <h2 class="section-title" data-aos="fade-down">My <span>Skills</span></h2>
+      <div class="skills-grid">
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="100">
+          <i class="bx bxl-html5"></i>
+          <h3>HTML5</h3>
+          <div class="progress-bar"><span style="width: 95%"></span></div>
+        </div>
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="200">
+          <i class="bx bxl-css3"></i>
+          <h3>CSS3</h3>
+          <div class="progress-bar"><span style="width: 90%"></span></div>
+        </div>
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="300">
+          <i class="bx bxl-javascript"></i>
+          <h3>JavaScript</h3>
+          <div class="progress-bar"><span style="width: 85%"></span></div>
+        </div>
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="400">
+          <i class="bx bxl-react"></i>
+          <h3>React</h3>
+          <div class="progress-bar"><span style="width: 80%"></span></div>
+        </div>
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="500">
+          <i class="bx bxl-nodejs"></i>
+          <h3>Node.js</h3>
+          <div class="progress-bar"><span style="width: 75%"></span></div>
+        </div>
+        <div class="skill-card" data-aos="zoom-in" data-aos-delay="600">
+          <i class="bx bxl-figma"></i>
+          <h3>Figma</h3>
+          <div class="progress-bar"><span style="width: 70%"></span></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services Section -->
+    <section class="services" id="services">
+      <h2 class="section-title" data-aos="fade-down">Services</h2>
+      <div class="services-grid">
+        <div class="service-card" data-aos="flip-left" data-aos-delay="100">
+          <i class="bx bx-desktop"></i>
+          <h3>Web Design</h3>
+          <p>
+            Modern, responsive, and accessible website design with a focus on
+            user experience and brand identity.
+          </p>
+        </div>
+        <div class="service-card" data-aos="flip-left" data-aos-delay="200">
+          <i class="bx bx-code"></i>
+          <h3>Web Development</h3>
+          <p>
+            Full-stack development using the latest technologies for robust,
+            scalable, and maintainable solutions.
+          </p>
+        </div>
+        <div class="service-card" data-aos="flip-left" data-aos-delay="300">
+          <i class="bx bx-mobile-alt"></i>
+          <h3>UI/UX Consulting</h3>
+          <p>
+            Expert advice and prototyping for intuitive, engaging, and
+            conversion-focused user interfaces.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Projects Section -->
+    <section class="projects" id="projects">
+      <h2 class="section-title" data-aos="fade-down">
+        Selected <span>Projects</span>
+      </h2>
+      <div class="projects-grid">
+        <div class="project-card" data-aos="fade-up" data-aos-delay="100">
+          <img
+            src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=400&q=80"
+            alt="Project 1"
+          />
+          <h3>Beverage World</h3>
+          <p>
+            Wholesale beverage platform with immersive visuals and seamless
+            e-commerce functionality.
+          </p>
+        </div>
+        <div class="project-card" data-aos="fade-up" data-aos-delay="200">
+          <img
+            src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80"
+            alt="Project 2"
+          />
+          <h3>Portfolio Redesign</h3>
+          <p>
+            Personal portfolio with glassmorphism, dynamic transitions, and a
+            bold color scheme.
+          </p>
+        </div>
+        <div class="project-card" data-aos="fade-up" data-aos-delay="300">
+          <img
+            src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=400&q=80"
+            alt="Project 3"
+          />
+          <h3>UI Kit Pro</h3>
+          <p>
+            Reusable UI kit for startups, featuring modular components and
+            dark/light themes.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section class="contact" id="contact">
+      <h2 class="section-title" data-aos="fade-down">
+        Contact <span>Me</span>
+      </h2>
+      <form class="contact-form" data-aos="fade-up" data-aos-delay="200">
+        <input type="text" placeholder="Your Name" required />
+        <input type="email" placeholder="Your Email" required />
+        <textarea rows="4" placeholder="Your Message" required></textarea>
+        <button type="submit" class="btn">Send Message</button>
+      </form>
+    </section>
+
+    <footer>
+      <div class="footer-social">
+        <a href="https://github.com/Chamindu284" target="_blank"
+          ><i class="bx bxl-github"></i
+        ></a>
+        <a
+          href="https://www.linkedin.com/in/chamindu-dilshan-4a4962299/"
+          target="_blank"
+          ><i class="bx bxl-linkedin"></i
+        ></a>
+      </div>
+      <p>&copy; 2025 Chamindu Dilshan. All rights reserved.</p>
+    </footer>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/se2021058/script.js b/se2021058/script.js
@@ -0,0 +1,64 @@
+const menuIcon = document.querySelector("#menu-icon");
+const navbar = document.querySelector("#navbar");
+
+menuIcon.addEventListener("click", () => {
+  menuIcon.classList.toggle("bx-x");
+  navbar.classList.toggle("active");
+});
+
+document.querySelectorAll(".navbar a").forEach((link) => {
+  link.addEventListener("click", () => {
+    menuIcon.classList.remove("bx-x");
+    navbar.classList.remove("active");
+  });
+});
+
+const typedText = document.querySelector(".typed-text");
+if (typedText) {
+  const phrases = ["Web Designer", "Full-Stack Developer", "UI/UX Enthusiast"];
+  let idx = 0,
+    char = 0,
+    isDeleting = false,
+    delay = 80;
+
+  function type() {
+    let current = phrases[idx];
+    if (!isDeleting) {
+      typedText.textContent = current.substring(0, char + 1);
+      char++;
+      if (char === current.length) {
+        isDeleting = true;
+        delay = 1200;
+      } else {
+        delay = 80;
+      }
+    } else {
+      typedText.textContent = current.substring(0, char - 1);
+      char--;
+      if (char === 0) {
+        isDeleting = false;
+        idx = (idx + 1) % phrases.length;
+        delay = 400;
+      } else {
+        delay = 40;
+      }
+    }
+    setTimeout(type, delay);
+  }
+  type();
+}
+
+document
+  .querySelector(".contact-form")
+  .addEventListener("submit", function (e) {
+    e.preventDefault();
+    alert("Thank you for reaching out!");
+    this.reset();
+  });
+
+// Initialize AOS
+AOS.init({
+  duration: 1000,
+  once: true,
+  offset: 100,
+});