Finished Portfolio

se-2021-036/README.md

@@ -0,0 +1,74 @@
+# Hasinthaka Piyumal - Portfolio
+
+Welcome to my portfolio repository! This project showcases my work, skills, and achievements as part of my academic and professional journey as a software engineering student.
+
+## Table of Contents
+
+- [Project Description](#project-description)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Libraries/Tools Used](#libraries/tools-used)
+- [Setup](#setup)
+- [Contact](#contact)
+- [Live Hosted Link](#live-hosted-link)
+
+## Project Description
+
+This portfolio is a modern, responsive website designed to highlight my technical skills, projects, and experience. It features:
+
+- A clean, dark-themed UI with gradient accents
+- Scroll animations for enhanced user experience
+- Interactive project filtering (Mobile, Web, Research)
+- Responsive design that works on all device sizes
+- Animated timeline for showcasing professional experience
+
+The portfolio is built using only HTML, CSS, and JavaScript (without any frameworks like React, Angular, or Vue), as required by the assignment specifications.
+
+## Features
+
+- Overview of my projects
+- Skills and technologies I specialize in
+- Academic and professional achievements
+- Contact information
+
+## Technologies Used
+
+- HTML, CSS, JavaScript
+- Tools: [Git, VS Code]
+
+## Libraries/Tools Used
+
+- **Tailwind CSS** - For utility-first styling
+- **Font Awesome** - For icons
+- **Intersection Observer API** - For scroll animations
+- **Custom CSS Animations** - For typewriter effect and other animations
+
+## Setup
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/HasinthakaPiyumal/SENG31313-2025.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd SENG31313-2025
+   ```
+3. Navigate to the my portfolio directory:
+   ```bash
+   cd se-2021-036
+   ```
+4. Open the project in your preferred code editor or deploy it to a web server.
+
+## Contact
+
+Feel free to reach out to me for collaboration or inquiries:
+
+- **Email:** [your-email@example.com](mailto:hasinthakapiyumal@gmail.com)
+- **LinkedIn:** [Your LinkedIn Profile](https://www.linkedin.com/in/hasinthaka-piyumal/)
+- **GitHub:** [Your GitHub Profile](https://github.com/HasinthakaPiyumal/)
+
+## Live Hosted Link
+
+[Visit My Portfolio](https://hasinthaka-portfolio-html.netlify.app/)
+
+Thank you for visiting my portfolio!

se-2021-036/assets/css/styles.css

@@ -0,0 +1,144 @@
+:root {
+    --typewriter-width: 8.8em;
+}
+
+.text-gradient {
+    background: linear-gradient(to right, #22d3ee, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.container {
+    width: 100%;
+    max-width: 1280px !important;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+.line-1 {
+    width: var(--typewriter-width);
+    margin: 0 0;
+    border-right: 2px solid rgba(255, 255, 255, .75);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/* Animation */
+.anim-typewriter {
+    animation: typewriter 1s steps(20) 1s 1 normal both,
+        blinkTextCursor 500ms steps(20) infinite normal;
+}
+
+.animate-spin-slow {
+    animation: spin-slow 8s linear infinite;
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-move 6s ease infinite;
+}
+
+/* Only animate on hover */
+.group .group-hover-animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-move 6s ease infinite;
+    transform: scale(1.1);
+}
+
+@keyframes gradient-move {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes typewriter {
+    from {
+        width: 0;
+    }
+
+    to {
+        width: var(--typewriter-width);
+    }
+}
+
+@keyframes blinkTextCursor {
+    from {
+        border-right-color: #8b5cf6
+    }
+
+    to {
+        border-right-color: transparent;
+    }
+}
+
+@keyframes spin-slow {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Scroll Animation Classes */
+.scroll-animate {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.animate-on-scroll {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Different animation directions */
+.scroll-animate-left {
+    transform: translateX(-40px);
+}
+
+.scroll-animate-right {
+    transform: translateX(40px);
+}
+
+.animate-on-scroll.scroll-animate-left,
+.animate-on-scroll.scroll-animate-right {
+    transform: translateX(0);
+}
+
+/* Animation delays for cascading effect */
+.delay-100 {
+    transition-delay: 0.1s;
+}
+
+.delay-200 {
+    transition-delay: 0.2s;
+}
+
+.delay-300 {
+    transition-delay: 0.3s;
+}
+
+.delay-400 {
+    transition-delay: 0.4s;
+}
+
+.delay-500 {
+    transition-delay: 0.5s;
+}
+
+.delay-600 {
+    transition-delay: 0.6s;
+}

se-2021-036/assets/js/main.js

@@ -0,0 +1,47 @@
+// Basic tab functionality
+document.addEventListener('DOMContentLoaded', function () {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(btn => btn.classList.remove('active', 'bg-violet-500', 'text-white'));
+            tabButtons.forEach(btn => btn.classList.add('bg-gray-800', 'text-gray-300'));
+            tabContents.forEach(content => content.classList.add('hidden'));
+            tabContents.forEach(content => content.classList.remove('active'));
+
+            // Add active class to clicked button
+            button.classList.add('active', 'bg-violet-500', 'text-white');
+            button.classList.remove('bg-gray-800', 'text-gray-300');
+
+            // Show corresponding content
+            const tabId = button.dataset.tab;
+            const tabContent = document.getElementById(`${tabId}-tab`);
+            tabContent.classList.remove('hidden');
+            tabContent.classList.add('active');
+        });
+    });
+
+    // Scroll animation for elements
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.15
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-on-scroll');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // Get all elements with the class 'scroll-animate'
+    const animateElements = document.querySelectorAll('.scroll-animate');
+    animateElements.forEach(element => {
+        observer.observe(element);
+    });
+});