Feature/se21045

docs/README.md

@@ -0,0 +1,22 @@
+# 🎨 My Personal Portfolio
+
+## 📌 Project Description
+This is my personal portfolio website created for the **SENG31313-2025** course. It showcases my skills, projects, and allows visitors to contact me.
+
+## 🚀 Live Hosted Link
+🔗 [Click here to view the site](https://gobi0516.github.io/SENG31313-2025/)
+
+## 🛠️ Libraries Used
+
+- **Bootstrap/Tailwind (if used)**
+- **GSAP (if used for animations)**
+- **FontAwesome (for icons)**
+
+## 🏗️ How to Run the Project Locally
+
+1. Clone the repository:
+   git clone https://github.com/dasaCoder/SENG31313-2025.git
+2. Navigate to your folder:
+   cd SENG31313-2025/se/2021/055
+
+3. Open `index.html` in your browser.

docs/css/about.css

@@ -0,0 +1,40 @@
+.about-section {
+  padding: 60px 20px;
+  background: #f9f9f9;
+}
+
+.about-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  flex-wrap: wrap;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.about-image img {
+  width: 250px;
+  height: 250px;
+  border-radius: 20px;
+  object-fit: cover;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.about-content {
+  flex: 1;
+  max-width: 600px;
+}
+
+.about-content h2 {
+  font-size: 32px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.about-content p {
+  font-size: 16px;
+  line-height: 1.7;
+  color: #555;
+  margin-bottom: 15px;
+}

docs/css/contact.css

@@ -0,0 +1,16 @@
+#contact {
+    background-color: #f4f4f4;
+  }
+
+  .contact-form {
+    animation: fadeIn 1s ease-in-out;
+
+
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+

docs/css/portfolio.css

@@ -0,0 +1,17 @@
+#portfolio {
+    background-color: #fff;
+  }
+
+  .portfolio-item {
+    background-color: #f0f0f0;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    animation: zoomIn 0.5s ease-in-out;
+  }
+
+  @keyframes zoomIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+

docs/css/skill.css

@@ -0,0 +1,17 @@
+#skills {
+    background-color: #eaeaea;
+  }
+
+  .skill-item {
+    background: #fff;
+    padding: 15px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    animation: slideIn 0.5s ease-in-out;
+  }
+
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+

docs/html/BioData.html

@@ -0,0 +1,13 @@
+<section id="biodata" class="biodata-section">
+    <div class="biodata-content">
+        <h2>Bio Data</h2>
+        <ul>
+            <li><strong>Name:</strong> Gobinath Ehamparam</li>
+            <li><strong>Age:</strong> 23</li>
+            <li><strong>Education:</strong> undergraduate in software engineering</li>
+            <li><strong>Experience:</strong> 2 years in learning  Languages</li>
+            <li><strong>Email:</strong> egobinath2001@gmail</li>
+            <li><strong>Location:</strong> Karainagar,jaffna,srilanka</li>
+        </ul>
+    </div>
+</section>

docs/html/about.html

@@ -0,0 +1,17 @@
+<section id="about" class="about-section" data-aos="fade-up">
+    <div class="about-container">
+
+      <div class="about-content" data-aos="fade-left" data-aos-delay="400">
+        <h2 class="section-title">About Me</h2>
+        <p>
+          Hi, I'm a <strong>creative designer</strong> with a passion for <strong>UI/UX</strong> and front-end development.
+          I love crafting user-friendly experiences and turning ideas into reality. With a strong foundation in design
+          principles, I ensure every project is visually appealing and functional.
+        </p>
+        <p>
+          When I'm not designing, I enjoy exploring new technologies and improving my skills in coding and digital art.
+        </p>
+      </div>
+    </div>
+  </section>
+

docs/html/contact.html

@@ -0,0 +1,40 @@
+
+<section id="contact" class="contact-section">
+    <div class="contact-content">
+        <link rel="stylesheet" href="stylesheet.css">
+        <h2>Contact Me</h2>
+        <form class="contact-form">
+            <label for="name">Name</label>
+            <input type="text" id="name" name="name" required>
+
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required>
+
+            <label for="message">Message</label>
+            <textarea id="message" name="message" rows="5" required></textarea>
+
+            <button type="submit">Send Message</button>
+        </form>
+    </div>
+</section>
+
+<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
+<script>
+    (function(){
+        emailjs.init("DqnH4BvpGST-knBy5"); // Replace with your actual EmailJS user ID
+    })();
+
+    function sendEmail(e) {
+        e.preventDefault();
+
+        emailjs.sendForm('service_k0nha2p', 'template_9ax64kw','.contact-form')
+
+            .then(function(response) {
+                alert('Message sent successfully!');
+            }, function(error) {
+                alert('Failed to send message. Try again later.');
+            });
+    }
+
+    document.querySelector('.contact-form').addEventListener('submit', sendEmail);
+</script>

docs/html/portfolio.html

@@ -0,0 +1,41 @@
+<section id="portfolio" class="portfolio-section" data-aos="fade-up">
+    <div class="portfolio-content">
+      <h2>My Work</h2>
+      <div class="portfolio-grid">
+        <div class="portfolio-item">
+          <h3>Find Your Mechanic</h3>
+          <p>Find a mechanic when vechicle need a help.</p>
+          <div class="project-buttons">
+
+            <a href="https://github.com/isharadh2002/findyourmechanic.lk" class="btn secondary" target="_blank">GitHub</a>
+          </div>
+        </div>
+        <div class="portfolio-item">
+          <h3>Fuel Quta System</h3>
+          <p>we use the fuel quto when we have limited fuel in the station that time we can use this system.</p>
+          <div class="project-buttons">
+
+            <a href="https://github.com/Thushakaran/Fuel-Quota-Management-System" class="btn secondary" target="_blank">GitHub</a>
+          </div>
+        </div>
+        <div class="portfolio-item">
+            <h3>Online Learning System</h3>
+            <p>Our O/L and A/L students can use this web sites for their needs .</p>
+            <div class="project-buttons">
+
+              <a href="https://github.com/Gobi0516/OnlineLearningSystem" class="btn secondary" target="_blank">GitHub link</a>
+            </div>
+          </div>
+          <div class="portfolio-item">
+            <h3>ToDo List</h3>
+            <p>Todo list in mobile App for create our daily activities.</p>
+            <div class="project-buttons">
+
+              <a href="https://github.com/Gobi0516/todo" class="btn secondary" target="_blank">GitHub link</a>
+            </div>
+          </div>
+        <!-- Repeat for other projects -->
+      </div>
+    </div>
+  </section>
+

docs/html/skill.html

@@ -0,0 +1,22 @@
+<section id="skills" class="skills-section">
+    <div class="skills-content">
+        <h2>My Skills</h2>
+        <div class="skills-list">
+            <div class="skill-item">HTML</div>
+            <div class="skill-item">CSS</div>
+            <div class="skill-item">JavaScript</div>
+            <div class="skill-item">PHP</div>
+            <div class="skill-item">UI/UX Design</div>
+            <div class="skill-item">Figma</div>
+            <div class="skill-item">React</div>
+            <div class="skill-item">React-native</div>
+            <div class="skill-item">SpringBoot</div>
+            <div class="skill-item">C</div>
+            <div class="skill-item">Phython</div>
+            <div class="skill-item">Java</div>
+            <div class="skill-item">DSA</div>
+            <div class="skill-item">My Sql</div>
+            <div class="skill-item">Mongo DB</div>
+        </div>
+    </div>
+</section>