diff --git a/se2021058/README.md b/se2021058/README.md new file mode 100644 index 0000000..68fd6bd --- /dev/null +++ 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 new file mode 100644 index 0000000..a70954e Binary files /dev/null and b/se2021058/assets/fuel.jpg differ diff --git a/se2021058/assets/profile.jpg b/se2021058/assets/profile.jpg new file mode 100644 index 0000000..a9a13da Binary files /dev/null and b/se2021058/assets/profile.jpg differ diff --git a/se2021058/assets/spiritStore.png b/se2021058/assets/spiritStore.png new file mode 100644 index 0000000..afb21bf Binary files /dev/null and b/se2021058/assets/spiritStore.png differ diff --git a/se2021058/assets/web.png b/se2021058/assets/web.png new file mode 100644 index 0000000..187f091 Binary files /dev/null and b/se2021058/assets/web.png differ diff --git a/se2021058/index.html b/se2021058/index.html new file mode 100644 index 0000000..0ae0b36 --- /dev/null +++ b/se2021058/index.html @@ -0,0 +1,216 @@ + + + + + + Chamindu Dilshan Portfolio + + + + + + +
+ + + +
+ + +
+
+

Hello, I'm Chamindu

+

+

+ Digital creator, UI/UX enthusiast, and full-stack developer. I build + elegant, high-impact web experiences with a passion for detail and + innovation. +

+
+ See My Work + Contact +
+ +
+
+ Chamindu Dilshan +
+
+ + +
+
+ About Chamindu +
+
+

About Me

+

+ 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. +

+ Let's Connect +
+
+ + +
+

My Skills

+
+
+ +

HTML5

+
+
+
+ +

CSS3

+
+
+
+ +

JavaScript

+
+
+
+ +

React

+
+
+
+ +

Node.js

+
+
+
+ +

Figma

+
+
+
+
+ + +
+

Services

+
+
+ +

Web Design

+

+ Modern, responsive, and accessible website design with a focus on + user experience and brand identity. +

+
+
+ +

Web Development

+

+ Full-stack development using the latest technologies for robust, + scalable, and maintainable solutions. +

+
+
+ +

UI/UX Consulting

+

+ Expert advice and prototyping for intuitive, engaging, and + conversion-focused user interfaces. +

+
+
+
+ + +
+

+ Selected Projects +

+
+
+ Project 1 +

Beverage World

+

+ Wholesale beverage platform with immersive visuals and seamless + e-commerce functionality. +

+
+
+ Project 2 +

Portfolio Redesign

+

+ Personal portfolio with glassmorphism, dynamic transitions, and a + bold color scheme. +

+
+
+ Project 3 +

UI Kit Pro

+

+ Reusable UI kit for startups, featuring modular components and + dark/light themes. +

+
+
+
+ + +
+

+ Contact Me +

+
+ + + + +
+
+ + + + + + diff --git a/se2021058/script.js b/se2021058/script.js new file mode 100644 index 0000000..0d4b847 --- /dev/null +++ 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, +}); diff --git a/se2021058/styles.css b/se2021058/styles.css new file mode 100644 index 0000000..38d1fd7 --- /dev/null +++ b/se2021058/styles.css @@ -0,0 +1,430 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); + +:root { + --bg: #e9ecef; + --glass: rgba(255,255,255,0.6); + --primary: #1b4965; + --accent: #ff6f59; + --secondary: #cae9ff; + --text: #22223b; + --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.13); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; +} + +body { + background: var(--bg); + color: var(--text); +} + +header { + width: 100%; + position: fixed; + top: 0; + left: 0; + background: var(--glass); + box-shadow: var(--shadow); + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.5rem 10vw; + z-index: 100; + backdrop-filter: blur(10px); + animation: fadeDown 1s; +} + +.logo { + font-size: 2.2rem; + font-weight: 700; + color: var(--primary); + letter-spacing: 2px; +} +.logo span { + color: var(--accent); +} + +.navbar { + display: flex; + gap: 2rem; + transition: left 0.3s; +} + +.navbar a { + color: var(--primary); + font-size: 1.1rem; + text-decoration: none; + font-weight: 500; + position: relative; + transition: color 0.2s; + padding-bottom: 2px; +} +.navbar a:hover { + color: var(--accent); + border-bottom: 2px solid var(--accent); +} + +.menu-icon { + display: none; + font-size: 2.1rem; + color: var(--primary); + cursor: pointer; +} + +@media (max-width: 900px) { + header { + padding: 1.2rem 4vw; + } + .navbar { + position: absolute; + top: 100%; + left: -100vw; + flex-direction: column; + background: var(--glass); + width: 100vw; + padding: 2rem 0; + gap: 2rem; + box-shadow: var(--shadow); + backdrop-filter: blur(10px); + } + .navbar.active { + left: 0; + } + .menu-icon { + display: block; + } +} + +section { + padding: 100px 10vw 60px 10vw; +} + +.hero { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 90vh; + gap: 4rem; + background: linear-gradient(120deg, var(--secondary) 60%, var(--bg) 100%); + margin-top: 60px; + border-radius: 0 0 3rem 3rem; + box-shadow: var(--shadow); + animation: fadeUp 1s; +} + +.hero-content { + flex: 1; + animation: slideRight 1.2s; +} +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; + color: var(--primary); +} +.hero-content h1 span { + color: var(--accent); +} +.hero-content h2 { + font-size: 1.6rem; + color: var(--accent); + margin-bottom: 1.2rem; + font-weight: 600; + letter-spacing: 1.5px; + min-height: 2.5rem; +} +.hero-content p { + font-size: 1.1rem; + color: var(--primary); + margin-bottom: 2rem; + line-height: 1.7; +} +.hero-btns { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} +.btn { + padding: 0.9rem 2.2rem; + border: none; + border-radius: 2rem; + background: var(--primary); + color: #fff; + font-weight: 700; + font-size: 1rem; + cursor: pointer; + box-shadow: var(--shadow); + transition: transform 0.2s, box-shadow 0.2s, background 0.2s; +} +.btn:hover { + transform: translateY(-4px) scale(1.05); + background: var(--accent); +} +.btn-outline { + background: transparent; + color: var(--primary); + border: 2px solid var(--primary); +} +.btn-outline:hover { + background: var(--accent); + color: #fff; + border: none; +} + +.social-icons { + margin-top: 1.2rem; +} +.social-icons a { + color: var(--primary); + margin-right: 1rem; + font-size: 1.6rem; + transition: color 0.2s; +} +.social-icons a:hover { + color: var(--accent); +} + +.hero-img { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + animation: slideLeft 1.2s; +} +.hero-img img { + width: 320px; + border-radius: 50%; + box-shadow: 0 8px 32px 0 rgba(27, 73, 101, 0.12); + border: 6px solid var(--accent); + object-fit: cover; + transition: transform 0.4s; + background: var(--glass); +} +.hero-img img:hover { + transform: scale(1.05) rotate(-2deg); +} + +.about { + display: flex; + align-items: center; + justify-content: space-between; + gap: 4rem; + background: var(--glass); + border-radius: 3rem; + margin: 2rem 0; + padding: 3rem 2rem; + box-shadow: var(--shadow); + animation: fadeUp 1.2s; +} +.about-img img { + width: 240px; + border-radius: 2rem; + box-shadow: var(--shadow); +} +.about-content h2 { + font-size: 2.2rem; + margin-bottom: 1.2rem; + color: var(--primary); +} +.about-content h2 span { + color: var(--accent); +} +.about-content p { + color: var(--primary); + font-size: 1.15rem; + line-height: 1.7; + max-width: 600px; + margin: 0 0 1.5rem 0; +} + +.section-title { + font-size: 2.2rem; + text-align: center; + margin-bottom: 2.5rem; + color: var(--primary); +} +.section-title span { + color: var(--accent); +} + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 2rem; + margin: 0 auto; + max-width: 900px; +} +.skill-card { + background: var(--glass); + border-radius: 1.5rem; + box-shadow: var(--shadow); + padding: 2rem 1.2rem; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; + position: relative; + overflow: hidden; +} +.skill-card i { + font-size: 2.5rem; + color: var(--primary); + margin-bottom: 0.7rem; +} +.skill-card h3 { + color: var(--accent); + margin-bottom: 1rem; + font-size: 1.2rem; +} +.progress-bar { + width: 100%; + height: 8px; + background: var(--secondary); + border-radius: 4px; + margin: 0 auto; + overflow: hidden; +} +.progress-bar span { + display: block; + height: 100%; + background: linear-gradient(90deg, var(--accent) 60%, var(--primary) 100%); + border-radius: 4px; + transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 2rem; + margin: 0 auto; + max-width: 900px; +} +.service-card { + background: var(--glass); + border-radius: 1.5rem; + box-shadow: var(--shadow); + padding: 2rem 1.2rem; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; +} +.service-card i { + font-size: 2.5rem; + color: var(--accent); + margin-bottom: 1rem; +} +.service-card h3 { + color: var(--primary); + margin-bottom: 1rem; + font-size: 1.2rem; +} +.service-card p { + color: var(--primary); + font-size: 1rem; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 2rem; + margin: 0 auto; + max-width: 900px; +} +.project-card { + background: var(--glass); + border-radius: 1.5rem; + box-shadow: var(--shadow); + padding: 1.5rem; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; + cursor: pointer; + border: 2px solid transparent; +} +.project-card:hover { + transform: translateY(-8px) scale(1.04) rotate(-1deg); + box-shadow: 0 8px 32px 0 var(--accent); + border: 2px solid var(--accent); +} +.project-card img { + width: 100%; + border-radius: 1rem; + margin-bottom: 1rem; + object-fit: cover; + height: 160px; +} +.project-card h3 { + color: var(--primary); + margin-bottom: 0.5rem; +} +.project-card p { + color: var(--primary); + font-size: 1rem; +} + +.contact { + text-align: center; + margin-top: 3rem; + animation: fadeUp 1.2s; +} +.contact-form { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 400px; + margin: 0 auto; + margin-top: 1.5rem; +} +.contact-form input, +.contact-form textarea { + padding: 0.9rem 1.2rem; + border-radius: 1.2rem; + border: 1.5px solid var(--primary); + background: var(--glass); + color: var(--primary); + font-size: 1rem; + resize: none; + outline: none; + transition: border 0.2s; +} +.contact-form input:focus, +.contact-form textarea:focus { + border: 1.5px solid var(--accent); +} +.contact-form button { + margin-top: 0.5rem; +} + +footer { + text-align: center; + padding: 2rem 0 1rem 0; + background: var(--glass); + margin-top: 2rem; + border-top-left-radius: 2rem; + border-top-right-radius: 2rem; + box-shadow: var(--shadow); +} +.footer-social { + margin-bottom: 0.8rem; +} +.footer-social a { + color: var(--primary); + margin: 0 0.5rem; + font-size: 1.6rem; + transition: color 0.2s; +} +.footer-social a:hover { + color: var(--accent); +} +footer p { + color: var(--primary); + font-size: 1rem; +} + +/* Animations */ +@keyframes fadeUp { + from { opacity: 0; transform: translateY(40px);} + to { opacity: 1; transform: translateY(0);} +} +@keyframes fadeDown { + from { opacity: 0; transform: translateY(-40px);} + to { opacity: 1; transform: tran