diff --git a/README.md b/README.md deleted file mode 100644 index 213c24a..0000000 --- a/README.md +++ /dev/null @@ -1,88 +0,0 @@ -### **Assignment: Personal Portfolio Web Page Development** - -#### **Objective:** -Develop a **personal portfolio web page** using **HTML, CSS, and JavaScript**. This project will assess your ability to design a creative, functional, and aesthetically pleasing website while ensuring proper use of version control through GitHub. - ---- - -### **Guidelines:** -βœ… **Use only HTML, CSS, and JavaScript** (No frameworks like React (its a framework btw πŸ™ƒ) , Angular, or Vue). -βœ… **Third-party JS/CSS libraries are allowed** (e.g., Bootstrap, Tailwind CSS, jQuery, GSAP). -βœ… The portfolio should be **creative, unique, and visually appealing**. -βœ… Include at least the following sections: - - **Home Page** (Introduction) - - **About Me** (Skills & Interests) - - **Projects** (Showcase your work) - - **Contact Section** (Contact form or social links) -βœ… **Host the website on a free platform** (GitHub Pages, Netlify, Vercel, etc.). **Extra marks will be awarded for hosting.** - ---- - -### **GitHub Submission Instructions:** -1. **Clone the repository**: - ``` - git clone https://github.com/dasaCoder/SENG31313-2025.git - cd SENG31313-2025 - ``` -2. **Create a new branch** with your student number: - ``` - git checkout -b feature/ - ``` - **Example:** `feature/se204123` -3. **Inside the repository, create a folder named after your student number** inside the correct category: - ``` - se/20XX/YYY - ``` - **Example:** `se/2025/001` -4. **Upload all your project files** (HTML, CSS, JS, assets) inside your folder. -5. **Host your website** on a free hosting platform: - - **GitHub Pages:** [Guide](https://pages.github.com/) - - **Netlify:** [Guide](https://www.netlify.com/) - - **Vercel:** [Guide](https://vercel.com/) -6. **Create a `README.md` file** inside your folder with the following details: - - **Project Description** - - **Libraries Used** (if any) - - **Live Hosted Link** (URL of the hosted site) - - **How to Run the Project Locally** -7. **Commit and push your code**: - ``` - git add . - git commit -m "Added portfolio for " - git push origin feature/ - ``` -8. **Create a pull request (PR)** to merge your branch into the main repository. - -πŸš€ **Extra Marks for Proper GitHub Submission & Hosting the Site** - ---- - -### **Evaluation Criteria:** - -| Criteria | Marks (%) | -|---------------------------|----------| -| **Creativity & Uniqueness** | 25% | -| **Design & Appearance** | 25% | -| **Functionality & Usability** | 20% | -| **Code Quality (HTML, CSS, JS)** | 10% | -| **Hosting the Site** | 10% | -| **Proper GitHub Submission** | 10% | - ---- - -### **Submission Deadline:** -πŸ“… ** 8th of May ** - -### **Helpful Resources:** -- [GitHub Docs](https://docs.github.com/en/get-started) -- [Git Basics](https://git-scm.com/doc) -- [GitHub Pages](https://pages.github.com/) -- [Netlify](https://www.netlify.com/) -- [Vercel](https://vercel.com/) -- [W3Schools HTML, CSS, JS](https://www.w3schools.com/) -- [Bootstrap](https://getbootstrap.com/) (For styling) -- [Animate.css](https://animate.style/) (For animations) - -### **Note:** -If you are unfamiliar with Git and GitHub, **learn the basics before starting**. Proper version control and **hosting the site** will be **rewarded with extra marks**. πŸš€ - -Good luck! πŸ’‘ diff --git a/SE-2021-039/README.md b/SE-2021-039/README.md new file mode 100644 index 0000000..353dd4d --- /dev/null +++ b/SE-2021-039/README.md @@ -0,0 +1,48 @@ +# Personal Portfolio Website + +## Project Description +This is a personal portfolio website built using **HTML**, **CSS**, and **JavaScript**. It showcases my skills, projects, education, experience, and contact details in a visually appealing and professional manner. + +The website features an **elegant gold and black theme**, smooth animations, and interactive elements that enhance the user experience. + +### Key Features +- **Home Page** – A welcoming introduction. +- **About Me** – Background information, skills, and interests. +- **Projects** – A gallery of projects with images and descriptions. +- **Education & Experience** – My academic qualifications and work experience. +- **Skills** – A showcase of my technical proficiencies. +- **Contact Section** – Email, phone, and social media links for easy communication. + +The website is fully **responsive** and ensures a smooth experience across all devices. It is hosted on a free platform for easy public access. + +--- + +## Libraries & Technologies Used +- [Google Fonts](https://fonts.google.com/) +- **Custom CSS & JavaScript** +- [Font Awesome](https://fontawesome.com/) (or similar icon library) +- **Vanilla JavaScript** – No external JS frameworks or libraries +- **CSS Class Manipulation** – For triggering animations (`.show`, `.visible`, `.loaded`) +- **Event Listeners** – Used for `DOMContentLoaded`, scroll, mousemove, and click events +- **Custom Cursor** – Follows mouse movement and updates `.custom-cursor` position +- **Smooth Section Reveal on Scroll** – Elements fade in as they appear on screen +- **Hover & Click Effects on Skills** – Tooltips and alerts when interacting with skill elements +- **Collapsible Skill Categories** – Expand/collapse functionality for skill sections + +--- + +## Live Demo + [Click here to view the live website](https://soft-crepe-d2ca02.netlify.app/) + +--- + +## How to Run the Project Locally +1. **Clone or download** the project repository. +2. Open the project folder on your computer. +3. **Double-click** on the `index.html` file to open the website in your browser. + +--- + +## Contact +For feedback or collaboration, feel free to reach out via the **Contact Section** on the website! + diff --git a/SE-2021-039/assets/css/styles.css b/SE-2021-039/assets/css/styles.css new file mode 100644 index 0000000..8482b05 --- /dev/null +++ b/SE-2021-039/assets/css/styles.css @@ -0,0 +1,661 @@ +/* Header Styling */ +header { + background: black; + padding: 10px 40px; + display: flex; + justify-content: space-between; /* Pushes items to both ends */ + align-items: center; +} + +/* Logo (SaNdu) Styling */ +header h1 { + color: gold; + font-family: 'Playfair Display', serif; + font-size: 28px; + letter-spacing: 2px; + margin: 0; /* Removes default margin */ +} + +/* Navigation Styling */ +.navigation ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; /* Aligns items horizontally */ +} + +.navigation ul li { + margin-left: 50px; /* Adds space between links */ +} + +.navigation ul li a { + color: gold; + text-decoration: none; + font-weight: bold; + transition: color 0.3s, text-shadow 0.3s; +} + +.navigation ul li a:hover { + color: white; + text-shadow: 0px 0px 10px gold; +} + + +/* Hero Section */ +.hero { + display: flex; + flex-direction: column; + justify-content: center; /* Centers vertically */ + align-items: center; /* Centers horizontally */ + text-align: center; /* Ensures text is centered */ + height: 35vh; /* Full screen height */ + color: rgb(26, 25, 21); /* Matches your elegant theme */ +} + +.hero h2 { + font-size: 40px; + font-family: 'Playfair Display', serif; + margin-bottom: 10px; +} + +.hero p { + font-size: 20px; + margin-bottom: 20px; +} + +.button { + color: gold; + background: black; + padding: 10px 20px; + text-decoration: none; + font-weight: bold; + border-radius: 5px; + transition: background 0.3s, transform 0.2s; +} + +.button:hover { + background-color: gold; + color: black; + transform: scale(1.05); +} + +/* About Section */ +/* About Section */ +#about { + display: flex; + justify-content: space-between; /* Places image on the left and text on the right */ + align-items: center; /* Vertically aligns both the image and text */ + gap: 20px; /* Adds space between the image and the text */ + padding: 20px; +} + +.about-container { + display: flex; + align-items: center; /* Ensures the content is vertically centered */ + gap: 20px; /* Space between the image and text */ +} + +.about-image { + flex: 1; /* Ensures image takes up equal space */ +} + +.profile-pic { + margin-left: 20px; + width: 250px; + height: 350px; /* Adjust as needed */ + border-radius: 50%; /* Rounded corners */ + + /* Soft Shadow for a professional look */ + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); + + /* Optional: Add a border with a gold accent */ + border: 3px solid rgba(214, 183, 8, 0.7); /* Gold border */ + + /* Smooth transition for hover effects */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Hover Effect */ +.profile-pic:hover { + transform: scale(1.05); /* Slight zoom effect */ + box-shadow: 0px 8px 20px rgba(255, 215, 0, 0.5); /* Gold glow */ +} + +.profile-pic.animate { + opacity: 0; + transform: scale(0.8); + transition: all 0.8s ease-out; +} + +/* When visible */ +.profile-pic.visible { + opacity: 1; + transform: scale(1); +} + +@keyframes fadeZoomIn { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +.profile-pic { + animation: fadeZoomIn 1s ease forwards; + opacity: 0; /* Ensures hidden initially */ +} + + +.about-text { + flex: 2; /* Allows the text area to take more space */ + max-width: 600px; /* Optional: limits the width of the text */ +} + +.about-text h2 { + font-size: 28px; + font-weight: bold; + margin-bottom: 20px; +} + +.about-text p { + font-size: 16px; + line-height: 1.6; +} + +/* Mobile Responsive */ +@media screen and (max-width: 768px) { + #about { + flex-direction: column; /* Stacks the image and text vertically on smaller screens */ + text-align: center; /* Centers the text */ + } + + .about-container { + flex-direction: column; /* Ensures the image and text are stacked */ + align-items: center; /* Centers everything */ + } + + .profile-pic { + max-width: 200px; /* Adjust image size for smaller screens */ + margin-bottom: 20px; /* Adds space between image and text */ + } +} + + +/* Education Section */ +#education { + padding: 50px 20px; + background-color: rgba(255, 215, 0, 0.1); /* Light gold background */ + text-align: center; + border-radius: 15px; + box-shadow: 0px 0px 10px rgba(255, 215, 0, 0.5); +} + +/* Education Title */ +#education h2 { + font-size: 32px; + font-family: 'Playfair Display', serif; + margin-bottom: 30px; +} + +/* Education List */ +.Education-list { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + justify-content: center; +} + +/* Individual Education Entry */ +.Education-list span { + display: flex; + align-items: center; /* Align image and text side by side */ + color: black; + padding: 15px; + border-radius: 10px; + font-size: 18px; + text-align: left; + max-width: 600px; /* Ensure it's not too wide */ + width: 100%; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Image Styling */ +.Education-list span img { + width: 80px; /* Adjust the size of logos */ + height: 80px; + border-radius: 10px; /* Optional rounded corners */ + margin-right: 15px; /* Space between image and text */ +} + +/* Hover Effect */ +.Education-list span:hover { + transform: scale(1.05); + box-shadow: 0px 0px 15px gold; +} + +/* Responsive Design */ +@media screen and (max-width: 768px) { + .Education-list span { + flex-direction: column; /* Stack image and text in smaller screens */ + text-align: center; + align-items: center; + } + + .Education-list span img { + margin-right: 0; + margin-bottom: 10px; + } +} + + + + +/* Expirience Section */ +#expirience { + padding: 50px 20px; + background-color: rgba(255, 215, 0, 0.1); /* Light gold background */ + text-align: center; + border-radius: 15px; + box-shadow: 0px 0px 10px rgba(255, 215, 0, 0.5); +} + +/* Education Title */ +#expirience h2 { + font-size: 32px; + font-family: 'Playfair Display', serif; + margin-bottom: 30px; +} + +/* Education List */ +.Expirinnce-list { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + justify-content: center; +} + +/* Individual Education Entry */ +.Expirinnce-list span { + display: flex; + align-items: center; /* Align image and text side by side */ + color: black; + padding: 15px; + border-radius: 10px; + font-size: 18px; + text-align: left; + max-width: 600px; /* Ensure it's not too wide */ + width: 100%; + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Image Styling */ +.Expirinnce-list span img { + width: 80px; /* Adjust the size of logos */ + height: 80px; + border-radius: 10px; /* Optional rounded corners */ + margin-right: 15px; /* Space between image and text */ +} + +/* Hover Effect */ +.Expirinnce-list span:hover { + transform: scale(1.05); + box-shadow: 0px 0px 15px gold; +} + +/* Responsive Design */ +@media screen and (max-width: 768px) { + .Expirinnce-list span { + flex-direction: column; /* Stack image and text in smaller screens */ + text-align: center; + align-items: center; + } + + .Expirinnce-list span img { + margin-right: 0; + margin-bottom: 10px; + } +} + + + + + +/* Centered Box Style for Skills, Interests, Blog */ +.section { + max-width: 900px; + margin: 50px auto; + padding: 30px; + background: rgba(255, 215, 0, 0.1); /* Light gold background */ + border-radius: 15px; + box-shadow: 0px 0px 10px rgba(255, 215, 0, 0.5); + text-align: center; +} + +/* Skills Section */ +/* General Styles */ +#skills { + padding: 50px 20px; + background-color: rgba(255, 215, 0, 0.1); + text-align: center; + border-radius: 15px; + box-shadow: 0px 0px 10px rgba(255, 215, 0, 0.5); +} + +/* Heading */ +#skills h2 { + font-size: 32px; + font-family: 'Playfair Display', serif; + color: gold; + margin-bottom: 30px; +} + +/* Skills Category - Animation Base */ +.skills-category { + margin-bottom: 30px; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +/* When Visible */ +.skills-category.visible { + opacity: 1; + transform: translateY(0); +} + +/* Category Title */ +.skills-category h3 { + color: white; + background: black; + padding: 20px; + font-weight: bold; + border-radius: 5px; + transition: color 0.3s ease; +} + +.skills-category h3:hover { + color: gold; +} + +/* Skills List - Animated Expand + Fade */ +.skills-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + max-height: 0; + opacity: 0; + overflow: hidden; + transition: max-height 0.8s ease-out, opacity 0.8s ease-out; +} + +/* Reveal animation when parent is visible */ +.skills-category.visible .skills-list { + max-height: 1000px; + opacity: 1; +} + +/* Individual Skill Box */ +.skills-list span { + display: flex; + align-items: center; + justify-content: center; + background: rgb(214, 208, 181); + color: black; + padding: 10px 15px; + border-radius: 8px; + font-weight: bold; + text-align: center; + min-width: 150px; + height: 80px; + border: 1px solid black; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Skill Images */ +.skills-list span img { + width: 40px; + height: 40px; + margin-left: 10px; + transition: transform 0.3s ease; +} + +/* Hover Effect */ +.skills-list span:hover { + transform: scale(1.1); + box-shadow: 0px 0px 10px gold; +} + +/* Responsive */ +@media screen and (max-width: 768px) { + .skills-list { + flex-direction: column; + align-items: center; + } +} + + +.blog-container ul { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; /* Align items vertically */ + align-items: center; /* Center the boxes */ + gap: 15px; /* Space between each box */ +} + +.blog-container li { + width: 80%; /* Adjust width of the boxes */ + max-width: 400px; /* Limit max width */ + text-align: center; + background: black; /* Dark background */ + padding: 5px; + border-radius: 10px; + transition: all 0.3s ease-in-out; +} + +.blog-container a { + display: block; /* Full width inside the box */ + color: gold; + text-decoration: none; + font-weight: bold; + padding: 10px; + transition: all 0.3s ease-in-out; +} + +.blog-container li:hover { + background: gold; + transform: scale(1.05); /* Slight zoom effect */ +} + +.blog-container li:hover a { + color: black; +} + + +.projects-container { + display: flex; + flex-wrap: wrap; /* Allows wrapping on smaller screens */ + justify-content: center; /* Centers the items */ + gap: 20px; /* Space between projects */ +} + +.project-card { + background: rgb(209, 201, 164); /* Dark background for an elegant look */ + color: black; + border: 1px solid black ; + border-radius: 10px; + padding: 20px; + width: 150px; /* Fixed width for each card */ + text-align: center; + transition: all 0.3s ease-in-out; + height: 400px; +} + +.project-card img { + width: 100%; + border-radius: 5px; + margin-bottom: 10px; +} + +.project-card h3 { + font-size: 20px; + margin-bottom: 10px; +} + +.project-card p { + font-size: 14px; + margin-bottom: 20px; +} + +.project-card .button { + display: inline-block; + background: black; + color: gold; + text-decoration: none; + font-weight: bold; + padding: 8px 12px; + border-radius: 5px; + transition: all 0.3s ease-in-out; +} + +.project-card:hover { + transform: scale(1.05); /* Slight zoom on hover */ +} + +.project-card .button:hover { + background: gold; + color: black; + border: 2px solid gold; +} + + +.contact-container { + text-align: center; + padding: 30px; + background: black; /* Matches the footer style */ + color: white; +} + +.contact-list { + list-style: none; + padding: 0; + display: flex; + justify-content: center; + gap: 50px; +} + +.contact-list li { + display: inline-block; +} + +.contact-link { + display: inline-block; + transition: transform 0.3s ease-in-out; +} + +.contact-icon { + width: 50px; /* Set size for icons */ + height: 50px; + border-radius: 50%; + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} + +.contact-link:hover .contact-icon { + transform: scale(1.1); /* Slight zoom effect */ + box-shadow: 0px 0px 15px gold; /* Glow effect */ +} + + +body { + cursor: none; /* Hide default cursor */ +} +.custom-cursor { + position: fixed; + width: 15px; + height: 15px; + background: yellow; + border-radius: 50%; + pointer-events: none; + transform: translate(-50%, -50%); + box-shadow: 0px 0px 10px yellow; +} + +#about p { + font-size: 20px; + font-weight: 500; +} + + +/* Skills Section */ +#skills { + padding: 20px; + background-color: rgba(255, 215, 0, 0.1); /* Light background */ + text-align: center; +} + +/* Container for the skills section */ +.skills-container { + max-width: 1200px; + margin: 0 auto; +} + +/* Skills Title */ +#skills h2 { + font-size: 32px; + color: #333; + margin-bottom: 30px; +} + +/* Skills list style */ +.skills-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + padding: 0; + list-style: none; +} + +/* Individual skill item */ +.skills-list span { + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #333; + border-radius: 10px; + padding: 10px 15px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + width: 150px; + height: 100px; + text-align: center; + border:1px solid black; +} + +/* Skill icons */ +.skills-list span img { + width: 50px; + height: 50px; + margin-left: 10px; + transition: transform 0.3s ease; +} + +/* Hover effects */ +.skills-list span:hover { + transform: scale(1.1); /* Slight zoom */ + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); +} + +.skills-list span:hover img { + transform: rotate(10deg); /* Rotate the icon for a fun effect */ +} + diff --git a/SE-2021-039/assets/education/Ananda_Central_College_Crest.jpg b/SE-2021-039/assets/education/Ananda_Central_College_Crest.jpg new file mode 100644 index 0000000..d0bac29 Binary files /dev/null and b/SE-2021-039/assets/education/Ananda_Central_College_Crest.jpg differ diff --git a/SE-2021-039/assets/education/TCKEA logo.jpeg b/SE-2021-039/assets/education/TCKEA logo.jpeg new file mode 100644 index 0000000..709da26 Binary files /dev/null and b/SE-2021-039/assets/education/TCKEA logo.jpeg differ diff --git a/SE-2021-039/assets/education/imbs.jpeg b/SE-2021-039/assets/education/imbs.jpeg new file mode 100644 index 0000000..5647f72 Binary files /dev/null and b/SE-2021-039/assets/education/imbs.jpeg differ diff --git a/SE-2021-039/assets/education/uok.jpeg b/SE-2021-039/assets/education/uok.jpeg new file mode 100644 index 0000000..9a225b2 Binary files /dev/null and b/SE-2021-039/assets/education/uok.jpeg differ diff --git a/SE-2021-039/assets/icon/email-icon.jpeg b/SE-2021-039/assets/icon/email-icon.jpeg new file mode 100644 index 0000000..3d72fb6 Binary files /dev/null and b/SE-2021-039/assets/icon/email-icon.jpeg differ diff --git a/SE-2021-039/assets/icon/github-icon.jpeg b/SE-2021-039/assets/icon/github-icon.jpeg new file mode 100644 index 0000000..f99ba65 Binary files /dev/null and b/SE-2021-039/assets/icon/github-icon.jpeg differ diff --git a/SE-2021-039/assets/icon/instergram-icon.jpeg b/SE-2021-039/assets/icon/instergram-icon.jpeg new file mode 100644 index 0000000..61db2be Binary files /dev/null and b/SE-2021-039/assets/icon/instergram-icon.jpeg differ diff --git a/SE-2021-039/assets/icon/linkind-icon.jpeg b/SE-2021-039/assets/icon/linkind-icon.jpeg new file mode 100644 index 0000000..5dd5fbf Binary files /dev/null and b/SE-2021-039/assets/icon/linkind-icon.jpeg differ diff --git a/SE-2021-039/assets/icon/phone-icon.jpeg b/SE-2021-039/assets/icon/phone-icon.jpeg new file mode 100644 index 0000000..afee722 Binary files /dev/null and b/SE-2021-039/assets/icon/phone-icon.jpeg differ diff --git a/SE-2021-039/assets/icon/whatsapp-icon.jpeg b/SE-2021-039/assets/icon/whatsapp-icon.jpeg new file mode 100644 index 0000000..4bbf423 Binary files /dev/null and b/SE-2021-039/assets/icon/whatsapp-icon.jpeg differ diff --git a/SE-2021-039/assets/images/CV SE 2021 039.pdf b/SE-2021-039/assets/images/CV SE 2021 039.pdf new file mode 100644 index 0000000..b0bad7a Binary files /dev/null and b/SE-2021-039/assets/images/CV SE 2021 039.pdf differ diff --git a/SE-2021-039/assets/images/Screenshot 2025-04-04 143243.png b/SE-2021-039/assets/images/Screenshot 2025-04-04 143243.png new file mode 100644 index 0000000..46cbec8 Binary files /dev/null and b/SE-2021-039/assets/images/Screenshot 2025-04-04 143243.png differ diff --git a/SE-2021-039/assets/images/fuel managment.png b/SE-2021-039/assets/images/fuel managment.png new file mode 100644 index 0000000..efe5a2a Binary files /dev/null and b/SE-2021-039/assets/images/fuel managment.png differ diff --git a/SE-2021-039/assets/images/gold-cursor.png b/SE-2021-039/assets/images/gold-cursor.png new file mode 100644 index 0000000..8d50a49 Binary files /dev/null and b/SE-2021-039/assets/images/gold-cursor.png differ diff --git a/SE-2021-039/assets/images/my professional 4to.jpg b/SE-2021-039/assets/images/my professional 4to.jpg new file mode 100644 index 0000000..8199500 Binary files /dev/null and b/SE-2021-039/assets/images/my professional 4to.jpg differ diff --git a/SE-2021-039/assets/images/profile.png b/SE-2021-039/assets/images/profile.png new file mode 100644 index 0000000..aa96ad1 Binary files /dev/null and b/SE-2021-039/assets/images/profile.png differ diff --git a/SE-2021-039/assets/images/spirit store.png b/SE-2021-039/assets/images/spirit store.png new file mode 100644 index 0000000..73c3981 Binary files /dev/null and b/SE-2021-039/assets/images/spirit store.png differ diff --git a/SE-2021-039/assets/images/todo.jpg b/SE-2021-039/assets/images/todo.jpg new file mode 100644 index 0000000..8e81dbe Binary files /dev/null and b/SE-2021-039/assets/images/todo.jpg differ diff --git a/SE-2021-039/assets/js/script.js b/SE-2021-039/assets/js/script.js new file mode 100644 index 0000000..ee52bfc --- /dev/null +++ b/SE-2021-039/assets/js/script.js @@ -0,0 +1,98 @@ +document.addEventListener("DOMContentLoaded", function () { + document.body.classList.add("loaded"); +}); + +document.addEventListener("scroll", function () { + let elements = document.querySelectorAll(".hidden"); + elements.forEach((el) => { + if (el.getBoundingClientRect().top < window.innerHeight * 0.8) { + el.classList.add("show"); + } + }); +}); + + +window.addEventListener("scroll", function () { + let parallax = document.querySelector(".parallax"); + let scrollPosition = window.scrollY; + parallax.style.backgroundPositionY = scrollPosition * 0.5 + "px"; +}); + + +// Page Load Animation +window.addEventListener("load", function () { + document.body.classList.add("loaded"); +}); + +// Reveal Sections on Load +document.addEventListener("DOMContentLoaded", function () { + let sections = document.querySelectorAll(".section"); + sections.forEach((section, index) => { + setTimeout(() => { + section.classList.add("show"); + }, index * 500); // Delay each section for a cascading effect + }); +}); + + +document.addEventListener("mousemove", function(e) { + let cursor = document.querySelector(".custom-cursor"); + cursor.style.top = e.clientY + "px"; + cursor.style.left = e.clientX + "px"; +}); + + +// Wait until the document is fully loaded +document.addEventListener('DOMContentLoaded', function() { + + // Get all the skill spans + const skillItems = document.querySelectorAll('.skills-list span'); + + // Loop through each skill item to add event listeners for hover and click + skillItems.forEach(function(skill) { + + // Hover effect: Display skill name when hovering + skill.addEventListener('mouseenter', function() { + const skillText = skill.innerText; + const skillImage = skill.querySelector('img'); + skill.setAttribute('title', skillText); // Show skill name on hover + }); + + // Click effect: Show skill description when clicked + skill.addEventListener('click', function() { + alert(`You clicked on ${skill.innerText}!`); + // You can replace the alert with more complex functionality like showing more details about the skill. + }); + }); + +}); + +document.addEventListener("DOMContentLoaded", function () { + const categories = document.querySelectorAll(".skills-category"); + const categoryTitles = document.querySelectorAll(".category-title"); + + // Scroll Animation - Fade in Categories + function handleScroll() { + categories.forEach((category) => { + const categoryTop = category.getBoundingClientRect().top; + if (categoryTop < window.innerHeight - 100) { + category.classList.add("visible"); + } + }); + } + + window.addEventListener("scroll", handleScroll); + handleScroll(); // Run on page load in case some categories are already in view + + // Toggle Skill Lists on Click + categoryTitles.forEach((title) => { + title.addEventListener("click", function () { + const skillList = this.nextElementSibling; + if (skillList.style.maxHeight) { + skillList.style.maxHeight = null; + } else { + skillList.style.maxHeight = skillList.scrollHeight + "px"; + } + }); + }); +}); diff --git a/SE-2021-039/assets/skill/CSS3.png b/SE-2021-039/assets/skill/CSS3.png new file mode 100644 index 0000000..9673bab Binary files /dev/null and b/SE-2021-039/assets/skill/CSS3.png differ diff --git a/SE-2021-039/assets/skill/C_Logo.png b/SE-2021-039/assets/skill/C_Logo.png new file mode 100644 index 0000000..dc7dbd7 Binary files /dev/null and b/SE-2021-039/assets/skill/C_Logo.png differ diff --git a/SE-2021-039/assets/skill/Java-Logo.jpg b/SE-2021-039/assets/skill/Java-Logo.jpg new file mode 100644 index 0000000..c95f028 Binary files /dev/null and b/SE-2021-039/assets/skill/Java-Logo.jpg differ diff --git a/SE-2021-039/assets/skill/figma.png b/SE-2021-039/assets/skill/figma.png new file mode 100644 index 0000000..59d0a0e Binary files /dev/null and b/SE-2021-039/assets/skill/figma.png differ diff --git a/SE-2021-039/assets/skill/github.png b/SE-2021-039/assets/skill/github.png new file mode 100644 index 0000000..eea3d05 Binary files /dev/null and b/SE-2021-039/assets/skill/github.png differ diff --git a/SE-2021-039/assets/skill/html.png b/SE-2021-039/assets/skill/html.png new file mode 100644 index 0000000..1f7ac36 Binary files /dev/null and b/SE-2021-039/assets/skill/html.png differ diff --git a/SE-2021-039/assets/skill/jira.png b/SE-2021-039/assets/skill/jira.png new file mode 100644 index 0000000..b400274 Binary files /dev/null and b/SE-2021-039/assets/skill/jira.png differ diff --git a/SE-2021-039/assets/skill/js logo.png b/SE-2021-039/assets/skill/js logo.png new file mode 100644 index 0000000..4aecdc4 Binary files /dev/null and b/SE-2021-039/assets/skill/js logo.png differ diff --git a/SE-2021-039/assets/skill/mangodb.jpeg b/SE-2021-039/assets/skill/mangodb.jpeg new file mode 100644 index 0000000..12d73b0 Binary files /dev/null and b/SE-2021-039/assets/skill/mangodb.jpeg differ diff --git a/SE-2021-039/assets/skill/msql logo.png b/SE-2021-039/assets/skill/msql logo.png new file mode 100644 index 0000000..0e032b8 Binary files /dev/null and b/SE-2021-039/assets/skill/msql logo.png differ diff --git a/SE-2021-039/assets/skill/php.png b/SE-2021-039/assets/skill/php.png new file mode 100644 index 0000000..488a13a Binary files /dev/null and b/SE-2021-039/assets/skill/php.png differ diff --git a/SE-2021-039/assets/skill/react logo.png b/SE-2021-039/assets/skill/react logo.png new file mode 100644 index 0000000..f71d01d Binary files /dev/null and b/SE-2021-039/assets/skill/react logo.png differ diff --git a/SE-2021-039/assets/skill/spring boot.png b/SE-2021-039/assets/skill/spring boot.png new file mode 100644 index 0000000..c1ea934 Binary files /dev/null and b/SE-2021-039/assets/skill/spring boot.png differ diff --git a/SE-2021-039/assets/skill/tailwin css.jpeg b/SE-2021-039/assets/skill/tailwin css.jpeg new file mode 100644 index 0000000..051b058 Binary files /dev/null and b/SE-2021-039/assets/skill/tailwin css.jpeg differ diff --git a/SE-2021-039/assets/skill/workbench.png b/SE-2021-039/assets/skill/workbench.png new file mode 100644 index 0000000..2f8750e Binary files /dev/null and b/SE-2021-039/assets/skill/workbench.png differ diff --git a/SE-2021-039/index.html b/SE-2021-039/index.html new file mode 100644 index 0000000..c773110 --- /dev/null +++ b/SE-2021-039/index.html @@ -0,0 +1,375 @@ + + + + + + Sandu's Portfolio + + + + + +
+

SaNdu

+ +
+ +
+

Welcome to My Portfolio....

+ View My Work + +
+ + + + + + + + + + + + +
+ +
+
+ +
+
+

Let's Connect

+

Feel free to reach out to me through any of the following platforms!

+ + + +
+

© 2025 Sanduni Ayeshika. All Rights Reserved.

+
+
+
+ +
+ + + + + +