diff --git a/SE-2021-010/.gitattributes b/SE-2021-010/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/SE-2021-010/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/SE-2021-010/ReadMe.md b/SE-2021-010/ReadMe.md new file mode 100644 index 0000000..1fb93a0 --- /dev/null +++ b/SE-2021-010/ReadMe.md @@ -0,0 +1,67 @@ +# Sandaru Mihiran Portfolio Website + +A modern, responsive personal portfolio website showcasing skills, projects, and contact information. + + + +## Project Description + +This portfolio website was built to showcase Sandaru Mihiran's skills and projects as a software engineering student. The site features a clean, modern design with smooth animations and a fully responsive layout that works across all device sizes. + +### Features +- Interactive navigation with smooth scrolling +- Typewriter text animation effect +- Project filtering by category +- Responsive design for all screen sizes +- Contact form with validation +- Animated skill bars +- Scroll reveal animations for sections +- Mobile-friendly navigation menu + +## Technologies Used + +- **HTML5** - Structure and content +- **CSS3** - Styling with custom variables and responsive design +- **JavaScript** - Interactivity, animations, and form validation +- **Font Awesome** - Icons for UI elements +- **FormSubmit** - Backend for the contact form + +## Live Hosted Link + +[View the live website](#) https://sandaruuok.github.io/ + +## How to Run the Project Locally + +1. **Clone the repository** + ```bash + git clone https://github.com/SandaruUOK/portfolio-website.git + cd portfolio-website + ``` + +2. **Open the project** + - Simply open the `index.html` file in your web browser + - Alternatively, you can use a live server plugin to open the index.html: + + + + +## Project Structure + +``` +├── index.html # Main HTML document +├── styles.css # CSS styles +├── script.js # JavaScript functionality +└── assests/ # Images and media files +``` + +## Future Improvements + +- Add a blog section +- Implement dark/light mode toggle +- Add more interactive project demos +- Expand the skills section with more technologies +- Add project search functionality + +## Author + +- **Sandaru Mihiran** - [GitHub](https://github.com/SandaruUOK) | [LinkedIn](https://www.linkedin.com/in/sandarumuok17/) diff --git a/SE-2021-010/assests/cal.mp4 b/SE-2021-010/assests/cal.mp4 new file mode 100644 index 0000000..263cd63 Binary files /dev/null and b/SE-2021-010/assests/cal.mp4 differ diff --git a/SE-2021-010/assests/calculator.jpg b/SE-2021-010/assests/calculator.jpg new file mode 100644 index 0000000..6eaf36c Binary files /dev/null and b/SE-2021-010/assests/calculator.jpg differ diff --git a/SE-2021-010/assests/digisolve.mp4 b/SE-2021-010/assests/digisolve.mp4 new file mode 100644 index 0000000..3bca38c Binary files /dev/null and b/SE-2021-010/assests/digisolve.mp4 differ diff --git a/SE-2021-010/assests/img3.jpg b/SE-2021-010/assests/img3.jpg new file mode 100644 index 0000000..4884ff2 Binary files /dev/null and b/SE-2021-010/assests/img3.jpg differ diff --git a/SE-2021-010/assests/portfolio.png b/SE-2021-010/assests/portfolio.png new file mode 100644 index 0000000..514706f Binary files /dev/null and b/SE-2021-010/assests/portfolio.png differ diff --git a/SE-2021-010/assests/pump1.jpg b/SE-2021-010/assests/pump1.jpg new file mode 100644 index 0000000..11a36db Binary files /dev/null and b/SE-2021-010/assests/pump1.jpg differ diff --git a/SE-2021-010/assests/smarthome.jpg b/SE-2021-010/assests/smarthome.jpg new file mode 100644 index 0000000..c19d579 Binary files /dev/null and b/SE-2021-010/assests/smarthome.jpg differ diff --git a/SE-2021-010/assests/stayfinder.png b/SE-2021-010/assests/stayfinder.png new file mode 100644 index 0000000..faacbc4 Binary files /dev/null and b/SE-2021-010/assests/stayfinder.png differ diff --git a/SE-2021-010/assests/weather.mp4 b/SE-2021-010/assests/weather.mp4 new file mode 100644 index 0000000..3c67fbe Binary files /dev/null and b/SE-2021-010/assests/weather.mp4 differ diff --git a/SE-2021-010/assests/weather.png b/SE-2021-010/assests/weather.png new file mode 100644 index 0000000..ed65134 Binary files /dev/null and b/SE-2021-010/assests/weather.png differ diff --git a/SE-2021-010/index.html b/SE-2021-010/index.html new file mode 100644 index 0000000..bb0692d --- /dev/null +++ b/SE-2021-010/index.html @@ -0,0 +1,360 @@ + + + + + + Sandaru Mihiran + + + + + + +
+
+ +
+
+ Home + About + Projects + Contact +
+
+ +
+
+
+

Hello, I'm Mihiran

+
+

Software engineering student passionate about DevOps and cloud computing, focused on scalable, secure, and efficient software delivery. Eager to tackle real-world challenges in modern development.

+ + + Hire Me +
+
+ profile_image +
+
+
+ +
+
+

About Me

+ +
+
+ About Image + +
+ +
+

Passionate about building practical tech solutions using JavaScript, React, and MongoDB while exploring DevOps..

+ +
+

I'm a curious and motivated software engineering undergraduate from University of Kelaniya with a strong interest in creating practical tech solutions that improve everyday life. I've worked on a variety of projects, from hostel rental systems, fuel quota systems and weather forecasting tools..

+

I'm currently building my skills in web development using JavaScript, Node.js, React, and MongoDB. I'm also new to DevOps and hope to specialize in that path, as I continue learning how to build, deploy, and manage scalable systems

+
+ +
+

My Skills

+
+
+
HTML/CSS
+
+
+
+
+
+
JavaScript
+
+
+
+
+
+
React
+
+
+
+
+
+
Node.js
+
+
+
+
+
+
UI/UX Design
+
+
+
+
+
+
+
+
+ +
+

What I Do

+
+
+
+ +
+

Web Development

+

Creating responsive and interactive websites using modern technologies and best practices.

+
+
+
+ +
+

Responsive Design

+

Building layouts that work seamlessly across all devices and screen sizes.

+
+
+
+ +
+

UI/UX Design

+

Creating intuitive user interfaces with engaging user experiences that meet client goals.

+
+
+
+
+
+ + +
+
+

My Projects

+ +
+ + + + +
+ +
+
+
+ E-commerce Project +
+
+

Accommodation Rental Platform

+

A full-featured online platform with accommadation management, cart functionality, and payment integration.

+
+ HTML/CSS + JavaScript + PHP +
+
+ Preview + Code +
+
+
+ +
+
+ fuel quota app +
+
+

Fuel Quota System

+

A fuel management application for monitoring and regulating fuel distribution based on user quotas, vehicle types, and refill schedules.

+
+ Java + React + MySQL +
+
+ Preview + Code +
+
+
+
+
+ UI/UX Design +
+
+

Smart Home UI/UX

+

Complete UI/UX design for a Smart Home Application, focusing on intuitive navigation and seamless user interaction.

+
+ Figma + Sketch + Prototyping +
+
+ Preview + Details +
+
+
+ +
+
+ calculator app +
+
+

Calculator Application

+

A fully functional calculator that performs basic arithmetic operations with an intuitive user interface.

+
+ HTML + CSS + JavaScript +
+
+ Preview + Details +
+
+
+ +
+
+ Portfolio Website +
+
+

Portfolio Website

+

A responsive portfolio website showcasing projects and skills with modern design principles.

+
+ HTML5 + CSS3 + JavaScript +
+
+ Preview + Code +
+
+
+ +
+
+ Weather App +
+
+

Weather Forecast App

+

Real-time weather application with location detection, forecasts, and customizable alerts.

+
+ React + API + Vite +
+
+ Preview + Code +
+
+
+ + +
+
+
+ + +
+
+

Contact Me

+ +
+
+

Get in Touch

+

Have a project in mind or want to discuss an opportunity? Feel free to reach out using the form or through any of the methods below.

+ +
+
+
+ +
+
+

Email

+

mihiranwee17@gmail.com

+
+
+ +
+
+ +
+
+

Phone

+

+94 777 245 314

+
+
+ +
+
+ +
+
+

Location

+

Colombo, Sri Lanka

+
+
+
+ + +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/SE-2021-010/script.js b/SE-2021-010/script.js new file mode 100644 index 0000000..ca3ae50 --- /dev/null +++ b/SE-2021-010/script.js @@ -0,0 +1,205 @@ +document.addEventListener('DOMContentLoaded', function() { + // Type writer effect + const typeWriterText = document.querySelector('.typewriter-text'); + const phrases = ["Software Developer", "DevOps Enthusiast", "Blogger"]; + let phraseIndex = 0; + let charIndex = 0; + let isDeleting = false; + let typeDelay = 200; + + function typeEffect() { + const currentPhrase = phrases[phraseIndex]; + + if (isDeleting) { + typeWriterText.textContent = currentPhrase.substring(0, charIndex - 1); + charIndex--; + typeDelay = 100; + } else { + typeWriterText.textContent = currentPhrase.substring(0, charIndex + 1); + charIndex++; + typeDelay = 200; + } + + if (!isDeleting && charIndex === currentPhrase.length) { + isDeleting = true; + typeDelay = 1000; // Delay before starting to delete + } else if (isDeleting && charIndex === 0) { + isDeleting = false; + phraseIndex = (phraseIndex + 1) % phrases.length; + typeDelay = 500; // Delay before typing next phrase + } + + setTimeout(typeEffect, typeDelay); + } + + // Start the typewriter effect + typeEffect(); + + // Mobile menu toggle + const hamburger = document.querySelector('.hamburg'); + const dropdown = document.querySelector('.dropdown'); + const cancelBtn = document.querySelector('.cancel'); + const dropdownLinks = document.querySelectorAll('.dropdown .links a'); + + hamburger.addEventListener('click', function() { + dropdown.classList.add('active'); + }); + + cancelBtn.addEventListener('click', function() { + dropdown.classList.remove('active'); + }); + + dropdownLinks.forEach(link => { + link.addEventListener('click', function() { + dropdown.classList.remove('active'); + }); + }); + + // Navbar background change on scroll + const navbar = document.querySelector('nav'); + + window.addEventListener('scroll', function() { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + + // Section animations on scroll + showSections(); + }); + + // Project filtering + const filterBtns = document.querySelectorAll('.filter-btn'); + const projectCards = document.querySelectorAll('.project-card'); + + filterBtns.forEach(btn => { + btn.addEventListener('click', function() { + // Update active button + filterBtns.forEach(b => b.classList.remove('active')); + this.classList.add('active'); + + const filter = this.getAttribute('data-filter'); + + projectCards.forEach(card => { + if (filter === 'all') { + card.style.display = 'block'; + } else if (card.getAttribute('data-category') === filter) { + card.style.display = 'block'; + } else { + card.style.display = 'none'; + } + }); + }); + }); + + // Scroll reveal animation for sections + function showSections() { + const sections = document.querySelectorAll('.section-hidden'); + const triggerBottom = window.innerHeight * 0.8; + + sections.forEach(section => { + const sectionTop = section.getBoundingClientRect().top; + + if (sectionTop < triggerBottom) { + section.classList.add('section-show'); + } + }); + } + + // Initial call to show sections that are already in view + showSections(); + + // Smooth scrolling for navigation links + const navLinks = document.querySelectorAll('nav .links a, .dropdown .links a'); + + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + + const targetId = this.getAttribute('href'); + const targetSection = document.querySelector(targetId); + + window.scrollTo({ + top: targetSection.offsetTop - 70, + behavior: 'smooth' + }); + }); + }); + + // Form handling with validation + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + const submitBtn = contactForm.querySelector('.send-btn'); + + contactForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent default form submission + + const isValid = contactForm.checkValidity(); // Validate the form + if (isValid) { + // Simulate form submission + const originalText = submitBtn.innerHTML; + + submitBtn.innerHTML = 'Sending... '; + submitBtn.disabled = true; + + // Submit the form + contactForm.submit(); + + setTimeout(() => { + submitBtn.innerHTML = 'Message Sent! '; + setTimeout(() => { + submitBtn.innerHTML = originalText; + submitBtn.disabled = false; + }, 2000); + }, 1500); + } + }); + + + } + + function highlightInvalid(input) { + input.style.borderColor = '#ff3860'; + } + + function removeHighlight(input) { + input.style.borderColor = '#ddd'; + } + + function isValidEmail(email) { + const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(String(email).toLowerCase()); + } + + // Add animations to skill bars + const skillBars = document.querySelectorAll('.skill-progress'); + + function animateSkills() { + skillBars.forEach(bar => { + const width = bar.style.width; + bar.style.width = '0'; + + setTimeout(() => { + bar.style.width = width; + bar.style.transition = 'width 1s ease-in-out'; + }, 500); + }); + } + + // Initialize AOS animations + let aboutSection = document.getElementById('about'); + let observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateSkills(); + observer.unobserve(entry.target); + } + }); + }); + + if (aboutSection) { + observer.observe(aboutSection); + } +}); \ No newline at end of file diff --git a/SE-2021-010/styles.css b/SE-2021-010/styles.css new file mode 100644 index 0000000..4f4f5ee --- /dev/null +++ b/SE-2021-010/styles.css @@ -0,0 +1,744 @@ +/* Global Styles & Variables */ +:root { + --primary-color: #4831d4; + --secondary-color: #ccf381; + --dark-color: #1e1e1e; + --light-color: #f9f9f9; + --text-color: #333; + --transition: all 0.3s ease; + --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + --border-radius: 10px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + background-color: var(--light-color); + color: var(--text-color); + line-height: 1.7; +} + +section { + padding: 100px 0; + overflow: hidden; +} + +.section-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.section-title { + font-size: 2.5rem; + margin-bottom: 50px; + position: relative; + display: inline-block; + text-transform: uppercase; + letter-spacing: 1px; +} + +.section-title::after { + content: ''; + position: absolute; + left: 0; + bottom: -10px; + width: 50px; + height: 4px; + background: var(--primary-color); +} + +.section-title span { + color: var(--primary-color); +} + +button { + background-color: var(--primary-color); + color: #fff; + border: none; + padding: 12px 30px; + border-radius: 30px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: var(--transition); + outline: none; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +button:hover { + background-color: #3722bf; + transform: translateY(-3px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +a { + text-decoration: none; + color: inherit; +} + +/* Navigation */ +nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 0; + z-index: 1000; + background-color: transparent; + transition: var(--transition); +} + +nav.scrolled { + background-color: #fff; + box-shadow: var(--shadow); + padding: 15px 0; +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.logo { + font-size: 1.8rem; + font-weight: 700; +} + +.logo span { + color: var(--primary-color); +} + +nav .links { + display: flex; + gap: 30px; +} + +nav .links a { + font-weight: 500; + position: relative; + transition: var(--transition); +} + +nav .links a:hover { + color: var(--primary-color); +} + +nav .links a::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -5px; + left: 0; + background-color: var(--primary-color); + transition: var(--transition); +} + +nav .links a:hover::after { + width: 100%; +} + +.hamburg { + display: none; + cursor: pointer; + font-size: 1.5rem; +} + +.dropdown { + position: fixed; + top: 0; + right: -100%; + width: 70%; + height: 100vh; + background-color: #fff; + z-index: 1001; + padding: 50px 20px; + box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); + transition: var(--transition); + display: flex; + flex-direction: column; + align-items: center; +} + +.dropdown.active { + right: 0; +} + +.dropdown .links { + display: flex; + flex-direction: column; + text-align: center; +} + +.dropdown .links a { + margin: 20px 0; + font-size: 1.2rem; + font-weight: 500; +} + +.cancel { + position: absolute; + top: 20px; + right: 20px; + font-size: 1.5rem; + cursor: pointer; +} + +/* Hero Section */ +#home { + height: 100vh; + display: flex; + align-items: center; + background-color: var(--light-color); + padding: 0; +} + +.main-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.content { + max-width: 600px; +} + +.content h1 { + font-size: 3rem; + margin-bottom: 10px; +} + +.content h1 span { + color: var(--primary-color); +} + +.typewriter { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 20px; + height: 30px; + color: var(--primary-color); +} + +.content p { + margin-bottom: 30px; + font-size: 1.1rem; +} + +.social-links { + display: flex; + gap: 20px; + margin-bottom: 30px; +} + +.social-links a { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--primary-color); + color: #fff; + display: flex; + justify-content: center; + align-items: center; + transition: var(--transition); +} + +.social-links a:hover { + transform: translateY(-5px); + background-color: #3722bf; +} + +.image { + position: relative; + z-index: 1; +} + +.image img { + width: 400px; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + box-shadow: var(--shadow); + /*animation: morph 8s ease-in-out infinite;*/ +} +.button { + display: inline-block; + background-color: var(--primary-color); + color: #fff; + border: 1px solid var(--primary-color); + padding: 8px 20px; + border-radius: 30px; + text-decoration: none; + cursor: pointer; +} + +.button:hover { + background-color: transparent; + color: var(--primary-color); +} + +/* About Section */ +.about-content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 50px; + margin-bottom: 50px; +} + +.about-image { + position: relative; +} + +.about-image img { + width: 100%; + border-radius: var(--border-radius); + box-shadow: var(--shadow); +} + +.experience-badge { + position: absolute; + bottom: -20px; + right: -20px; + width: 120px; + height: 120px; + background-color: var(--primary-color); + color: #fff; + border-radius: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + box-shadow: var(--shadow); +} + +.years { + font-size: 2rem; + font-weight: 700; + line-height: 1; +} + +.text { + font-size: 0.9rem; + margin-top: 5px; +} + +.about-intro { + font-size: 1.3rem; + font-weight: 500; + margin-bottom: 20px; + color: var(--primary-color); +} + +.about-description p { + margin-bottom: 15px; +} + +.skills-container { + margin-top: 30px; +} + +.skills-container h3 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.skills { + display: grid; + gap: 15px; +} + +.skill-item { + display: flex; + flex-direction: column; + gap: 5px; +} + +.skill-name { + font-weight: 500; +} + +.skill-bar { + height: 10px; + background-color: #e9ecef; + border-radius: 5px; + overflow: hidden; +} + +.skill-progress { + height: 100%; + background-color: var(--primary-color); + border-radius: 5px; +} + +.services h3 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.services-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.service-card { + background-color: #fff; + padding: 30px; + border-radius: var(--border-radius); + box-shadow: var(--shadow); + transition: var(--transition); +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +.service-icon { + width: 60px; + height: 60px; + background-color: var(--primary-color); + color: #fff; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + margin-bottom: 20px; +} + +.service-card h4 { + font-size: 1.2rem; + margin-bottom: 15px; +} + +/* Projects Section */ +.filter-tabs { + display: flex; + justify-content: center; + margin-bottom: 30px; + flex-wrap: wrap; + gap: 10px; +} + +.filter-btn { + background-color: transparent; + color: var(--text-color); + border: 1px solid #ddd; + padding: 8px 20px; + border-radius: 30px; + box-shadow: none; +} + +.filter-btn:hover, .filter-btn.active { + background-color: var(--primary-color); + color: #fff; + border-color: var(--primary-color); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 30px; +} + +.project-card { + background-color: #fff; + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: var(--shadow); + transition: var(--transition); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +.project-img { + height: 200px; + overflow: hidden; +} + +.project-img img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +.project-card:hover .project-img img { + transform: scale(1.1); +} + +.project-content { + padding: 20px; +} + +.project-content h3 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +.project-content p { + font-size: 0.9rem; + margin-bottom: 15px; + color: #666; +} + +.project-tech { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 15px; +} + +.project-tech span { + font-size: 0.8rem; + background-color: #f0f0f0; + padding: 5px 10px; + border-radius: 20px; +} + +.project-links { + display: flex; + justify-content: space-between; +} + +.project-link { + font-size: 0.9rem; + color: var(--primary-color); + display: flex; + align-items: center; + gap: 5px; + transition: var(--transition); +} + +.project-link:hover { + color: #3722bf; +} + +/* Contact Section */ +.contact-container { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: 50px; +} + +.contact-info h3 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.contact-info > p { + margin-bottom: 30px; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 30px; +} + +.contact-item { + display: flex; + align-items: center; + gap: 15px; +} + +.contact-icon { + width: 50px; + height: 50px; + background-color: var(--primary-color); + color: #fff; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2rem; +} + +.contact-text h4 { + font-size: 1.1rem; + margin-bottom: 5px; +} + +.contact-social { + justify-content: flex-start; +} + +.contact-form-container { + background-color: #fff; + padding: 30px; + border-radius: var(--border-radius); + box-shadow: var(--shadow); +} + +.form-group { + margin-bottom: 20px; + position: relative; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 12px 15px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; + transition: var(--transition); +} + +.form-group label { + position: absolute; + top: 12px; + left: 15px; + font-size: 1rem; + color: #666; + transition: var(--transition); + pointer-events: none; + background-color: transparent; +} + +.form-group input:focus, +.form-group textarea:focus { + border-color: var(--primary-color); + outline: none; +} + +.form-group input:focus ~ label, +.form-group textarea:focus ~ label, +.form-group input:not(:placeholder-shown) ~ label, +.form-group textarea:not(:placeholder-shown) ~ label { + top: -10px; + left: 10px; + font-size: 0.8rem; + color: var(--primary-color); + background-color: #fff; + padding: 0 5px; +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: transparent; +} + +.send-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; +} + +.send-btn i { + transition: transform 0.3s ease; +} + +.send-btn:hover i { + transform: translateX(5px); +} + +/* Animation for sections */ +.section-hidden { + opacity: 0; + transform: translateY(50px); + transition: opacity 0.5s, transform 0.5s; +} + +.section-show { + opacity: 1; + transform: translateY(0); +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .about-content { + grid-template-columns: 1fr; + gap: 30px; + } + + .about-image { + max-width: 400px; + margin: 0 auto; + } +} + +@media (max-width: 768px) { + html { + font-size: 14px; + } + + nav .links { + display: none; + } + + .hamburg { + display: block; + } + + .main-container { + flex-direction: column-reverse; + text-align: center; + padding-top: 70px; + } + + .image { + margin-bottom: 50px; + } + + .image img { + width: 300px; + } + + .social-links { + justify-content: center; + } + + .services-container { + grid-template-columns: 1fr; + } + + .projects-grid { + grid-template-columns: 1fr; + } + + .contact-container { + grid-template-columns: 1fr; + } +} + +@media (max-width: 576px) { + section { + padding: 70px 0; + } + + .image img { + width: 250px; + } + + .experience-badge { + width: 100px; + height: 100px; + bottom: -15px; + right: -15px; + } +} \ No newline at end of file