diff --git a/Portfolio.html b/Portfolio.html
new file mode 100644
index 0000000000000000000000000000000000000000..18b31b4696bdbc575641be631007920e6512e806
--- /dev/null
+++ b/Portfolio.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>My Portfolio</title>
+ <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+ <header class="header">
+ <div class="nav-box">
+ <span>My Portfolio</span>
+ <ul class="nav">
+ <li><a href="index.html">Main Page</a></li>
+ <li><a href="Portfolio.html">Portfolio</a></li>
+ <li><a href="contact.html">Contact Me</a></li>
+ </ul>
+ <button id="changeBackgroundButton">Change Background</button>
+ </div>
+ </header>
+ </header>
+ <div class="banner">
+ Welcome!
+ </div>
+ <div class="portfolio">
+ <div class="introduce-tit">My Works</div>
+ <div class="portfolio-items">
+
+ <div class="portfolio-item">
+ <div class="carousel">
+ <div class="carousel-images">
+ <img src="./img/work01.png" alt="Work 1" class="active">
+ <img src="./img/work02.png" alt="Work 2">
+ <img src="./img/work03.png" alt="Work 3">
+ <img src="./img/work04.png" alt="Work 4">
+ <img src="./img/work05.png" alt="Work 5">
+ <img src="./img/work06.png" alt="Work 6">
+ </div>
+ <button class="carousel-button prev">â†</button>
+ <button class="carousel-button next">→</button>
+ </div>
+
+ <p class="work-title">E-shop</p>
+ <p class="work-description">This is an online shopping mall composed of HTML, CSS, JavaScript, and PHP.
+ </p>
+
+
+ </div>
+
+ </div>
+ <div class="comment-section">
+ <div class="introduce-tit">Comments</div>
+ <form class="comment-form" onsubmit="submitComment(event)">
+ <input type="text" name="name" placeholder="Your Name" required>
+ <textarea name="comment" placeholder="Your Comment" required></textarea>
+ <button type="submit">Submit Comment</button>
+ </form>
+
+
+ <div class="comments-list">
+ <div class="comment">
+ <p class="comment-author"></p>
+ <p class="comment-text"></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script src="./js/script.js"></script>
+ <script>
+ document.addEventListener('DOMContentLoaded', function () {
+ document.querySelector('.comment-form').addEventListener('submit', function (event) {
+ event.preventDefault();
+
+
+ var formData = new FormData(this);
+
+
+ fetch('https://formspree.io/f/xdoqoqyz', {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'Accept': 'application/json'
+ },
+ })
+ .then(response => {
+ if (response.ok) {
+
+ addCommentToList(formData.get('name'), formData.get('comment'));
+ this.reset();
+ } else {
+
+ console.error('Form submission failed');
+ }
+ });
+ });
+
+ function addCommentToList(name, comment) {
+ var commentsList = document.querySelector('.comments-list');
+ var commentDiv = document.createElement('div');
+ commentDiv.classList.add('comment');
+
+ var namePara = document.createElement('p');
+ namePara.classList.add('comment-author');
+ namePara.textContent = name;
+
+ var commentPara = document.createElement('p');
+ commentPara.classList.add('comment-text');
+ commentPara.textContent = comment;
+
+ commentDiv.appendChild(namePara);
+ commentDiv.appendChild(commentPara);
+
+ commentsList.appendChild(commentDiv);
+ }
+ });
+
+ </script>
+ <script>
+ function addCommentToPage(name, comment) {
+ const commentDiv = document.createElement('div');
+ commentDiv.className = 'comment';
+
+ const commentAuthor = document.createElement('p');
+ commentAuthor.className = 'comment-author';
+ commentAuthor.textContent = name;
+
+ const commentText = document.createElement('p');
+ commentText.className = 'comment-text';
+ commentText.textContent = comment;
+
+ commentDiv.appendChild(commentAuthor);
+ commentDiv.appendChild(commentText);
+
+ const commentsList = document.querySelector('.comments-list');
+ commentsList.appendChild(commentDiv);
+ }
+ const images = document.querySelectorAll('.carousel-images img');
+ let currentIndex = 0;
+
+ function showImage(index) {
+ images[currentIndex].classList.remove('active');
+ images[index].classList.add('active');
+ currentIndex = index;
+ }
+
+ document.querySelector('.prev').addEventListener('click', () => {
+ const newIndex = currentIndex - 1 < 0 ? images.length - 1 : currentIndex - 1;
+ showImage(newIndex);
+ });
+
+ document.querySelector('.next').addEventListener('click', () => {
+ const newIndex = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
+ showImage(newIndex);
+ });
+ </script>
+ <script>
+ const commentForm = document.getElementById('commentForm');
+ const nameInput = document.getElementById('nameInput');
+ const commentInput = document.getElementById('commentInput');
+ const commentsList = document.getElementById('commentsList');
+
+
+ commentForm.addEventListener('submit', function (event) {
+ event.preventDefault();
+
+
+ const name = nameInput.value.trim();
+ const comment = commentInput.value.trim();
+
+
+ if (name === '' || comment === '') {
+ alert('Please enter both your name and comment.');
+ return;
+ }
+
+
+ const commentElement = document.createElement('div');
+ commentElement.className = 'comment';
+ commentElement.innerHTML = `
+ <p class="comment-author">${name}</p>
+ <p class="comment-text">${comment}</p>
+ `;
+ commentsList.appendChild(commentElement);
+
+
+ nameInput.value = '';
+ commentInput.value = '';
+ });
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..39113c86f2bb0d6f41fc4b725ac46d2e1e5114fa
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Concat Me!</title>
+ <link rel="stylesheet" href="./css/index.css">
+
+</head>
+
+<body>
+ <header class="header">
+ <div class="nav-box">
+ <span>Contact Me!</span>
+ <ul class="nav">
+ <li><a href="index.html">Main Page</a></li>
+ <li><a href="Portfolio.html">Portfolio</a></li>
+ <li><a href="contact.html">Contact Me</a></li>
+ </ul>
+ <button id="changeBackgroundButton">Change Background</button>
+ </div>
+
+ </header>
+ <div class="banner">
+ Contact Me!
+ </div>
+ <div class="introduce">
+ <div class="introduce-tit">
+ Contact Information
+ </div>
+ <div class="introduce-main">
+ <div class="l">
+ <img src="./img/my photo.jpg" width="220">
+
+ </div>
+ <div class="r">
+ <p>Telephone: +44 7421875678</p>
+ <P>E-Mail: MaS20@cardiff.ac.uk</P>
+ <P>Wechat: Masq2001</P>
+ <P>Address: Cardiff,UK</P>
+ </div>
+ </div>
+ <form class="myform" id="myForm" method="post" action="https://formspree.io/f/mwkgkgyk">
+ <div class="inp-box">
+ <input type="text" name="name" class="inp" placeholder="name" />
+ <input type="email" name="email" class="inp" placeholder="email">
+ </div>
+ <div class="inp-box">
+ <textarea class="msg" name="message" placeholder="message"></textarea>
+ </div>
+ <button class="but" type="submit">submit</button>
+ </form>
+ </div>
+ <script>
+ const myForm = document.getElementById('myForm');
+ const nameInput = document.querySelector('input[name="name"]');
+ const emailInput = document.querySelector('input[name="email"]');
+ const messageInput = document.querySelector('textarea[name="message"]');
+ myForm.addEventListener('submit', async (event) => {
+ event.preventDefault();
+ const name = nameInput.value;
+ const email = emailInput.value;
+ const message = messageInput.value;
+ if (!name || !email || !message) {
+ alert('Please fill in all the fields.');
+ return;
+ }
+ const formData = new FormData();
+ formData.append('name', name);
+ formData.append('email', email);
+ formData.append('message', message);
+
+ const response = await fetch('https://formspree.io/f/mwkgkgyk', {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+ if (response.ok) {
+ alert('Message sent successfully!');
+ nameInput.value = '';
+ emailInput.value = '';
+ messageInput.value = '';
+ } else {
+ alert('Message sending failed. Please try again later.');
+ }
+ });
+ </script>
+ <script src="./js/script.js"></script>
+ <script>
+ function onButtonClick() {
+ alert("submit success!");
+ }
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea7c4ba822cfd2a22c5d34655848051a26492bf4
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,466 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+ul {
+ list-style: none;
+}
+
+a {
+ color: #333;
+ text-decoration: none;
+}
+
+body {
+ transition: background-color 0.5s ease;
+}
+
+.header {
+ height: 80px;
+ width: 100%;
+ background: #fff;
+ border-bottom: 1px solid #ddd;
+}
+
+.nav {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f9f9f9;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+}
+
+#changeBackgroundButton {
+ background: linear-gradient(45deg, #6D83F3, #48A9A6);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ margin-left: 20px;
+
+}
+
+#changeBackgroundButton:hover {
+ background: linear-gradient(45deg, #48A9A6, #6D83F3);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+#changeBackgroundButton:active {
+ transform: scale(0.95);
+}
+
+.dropdown-content li {
+ display: block;
+}
+
+.dropdown-content li a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ text-align: left;
+}
+
+.dropdown-content li a:hover {
+ background-color: #f1f1f1;
+}
+
+
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.nav>li {
+ position: relative;
+ display: inline-block;
+}
+
+.nav-box {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ height: 40px;
+ padding-top: 20px;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 30px;
+ color: #333;
+}
+
+.nav-box .nav {
+ display: flex;
+ font-size: 16px;
+ color: #555;
+}
+
+.nav-box .nav li {
+ padding-left: 20px;
+
+}
+
+.nav-box .nav a.on,
+.nav-box .nav a:hover {
+ color: #000;
+ padding-bottom: 10px;
+ border-bottom: 2px solid #333;
+}
+
+.banner {
+ width: 1200px;
+ margin: 0 auto;
+ background: url(../img/background.png)no-repeat center center;
+ height: 312px;
+ text-align: center;
+ line-height: 312px;
+ color: #fff;
+ font-size: 30px;
+ font-weight: bold;
+ text-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
+}
+
+.introduce {
+ width: 1200px;
+ margin: 0 auto;
+ padding: 40px 0;
+}
+
+.introduce-tit {
+ line-height: 50px;
+ font-size: 28px;
+ font-weight: 600;
+ padding-bottom: 50px;
+ color: #444;
+ padding-top: 40px;
+
+}
+
+.introduce-main {
+ display: flex;
+}
+
+.introduce-main .l {
+
+ margin-right: 20px;
+}
+
+.introduce .l img {
+ border-radius: 50%;
+}
+
+.introduce-main .r {
+ line-height: 50px;
+ font-size: 18px;
+ color: #555;
+}
+
+.edu-box {
+ display: flex;
+ flex-direction: column;
+}
+
+.edu {
+ display: flex;
+ margin-bottom: 50px;
+}
+
+.r-box {
+ margin-left: 40px;
+ line-height: 26px;
+
+}
+
+.r-box .tit {
+ font-size: 18px;
+ color: #333;
+ font-weight: 600;
+ padding-bottom: 20px;
+}
+
+.r-box .small {
+ font-size: 16px;
+ color: #666;
+}
+
+.r-box .time {
+
+ height: 40px;
+ line-height: 40px;
+ background: #333;
+ color: #fff;
+ font-size: 14px;
+ margin-top: 20px;
+ display: flex;
+ padding-right: 20px;
+}
+
+.r-box .time .icon {
+ width: 40px;
+ height: 40px;
+ background: url(../img/date.png) no-repeat center center;
+ background-size: 30px;
+}
+
+.skill {
+ width: 50%;
+ margin-bottom: 40px;
+}
+
+.skill .tit {
+ font-size: 18px;
+ line-height: 24px;
+ margin-bottom: 20px;
+ font-weight: 600;
+ color: #333;
+ display: flex;
+ justify-content: space-between;
+}
+
+.progress {
+ width: 100%;
+ height: 7px;
+ border-radius: 7px;
+ background: #ddd;
+ position: relative;
+ overflow: hidden;
+}
+
+.progress-in {
+ position: absolute;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background-color: rgb(245, 137, 70);
+ border-radius: 5px;
+ width: 0;
+ transition: width 2s;
+}
+
+.myform {
+ margin-top: 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.inp-box {
+ width: 100%;
+ display: flex;
+ height: 80px;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+
+.inp {
+ flex: 1;
+ height: 40px;
+ text-indent: 10px;
+ border: 1px solid #ddd;
+ font-size: 20px;
+ margin: 0 20px;
+ margin-bottom: 40px;
+}
+
+.msg {
+ flex: 1;
+ margin: 0 20px;
+ border: 1px solid #ddd;
+ text-indent: 10px;
+ line-height: 24px;
+ padding: 10px 0;
+ font-size: 20px;
+ min-height: 100px;
+}
+
+.but {
+ margin: 20px;
+ width: 120px;
+ height: 34px;
+ line-height: 34px;
+ border: none;
+ color: #fff;
+ text-align: center;
+ background: #028397;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.but:hover {
+ opacity: 0.8;
+ background-color: #4CAF50;
+ color: white;
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.but:active {
+ transform: scale(0.95);
+ background-color: #026373;
+}
+
+@media screen and (max-width: 768px) {
+
+ .nav-box,
+ .banner,
+ .introduce {
+ max-width: 100%;
+ padding: 0 10px;
+ }
+
+ .nav-box .nav li {
+ padding-left: 10px;
+ }
+
+ .introduce-main {
+ flex-direction: column;
+ }
+
+ .edu,
+ .skill {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .r-box,
+ .skill .tit {
+ text-align: center;
+ }
+
+ .progress {
+ width: 90%;
+ }
+
+ .introduce-main {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .l img {
+ max-width: 100%;
+ height: auto;
+ }
+}
+
+.portfolio {
+ width: 1200px;
+ margin: 0 auto;
+ padding: 40px 0;
+}
+
+.portfolio-items {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+}
+
+.portfolio-item {
+ width: 1200px;
+ text-align: center;
+}
+
+.portfolio-item img {
+ width: 100%;
+ height: auto;
+ border-radius: 5px;
+}
+
+.work-title {
+ margin-top: 20px;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.work-description {
+ margin-top: 10xp;
+ font-size: 14px;
+ color: #666;
+}
+
+
+.comment-section {
+ margin-top: 40px;
+}
+
+.comment-form input,
+.comment-form textarea {
+ width: 100%;
+ margin: 10px 0;
+ padding: 10px;
+}
+
+.comment-form button {
+ width: 100%;
+ padding: 10px;
+ background-color: #028397;
+ color: white;
+ border: none;
+ cursor: pointer;
+}
+
+.comments-list {
+ margin-top: 20px;
+}
+
+.comment {
+ border-bottom: 1px solid #ddd;
+ padding: 10px 0;
+}
+
+.comment-author {
+ font-weight: bold;
+}
+
+.comment-text {
+ font-size: 14px;
+}
+
+.carousel {
+ display: flex;
+ justify-content: center;
+ position: relative;
+ height: 500px;
+ width: 100%;
+ overflow: hidden;
+ margin: auto;
+}
+
+.carousel-images img {
+ object-fit: contain;
+ display: none;
+}
+
+.carousel-images img.active {
+ display: block;
+}
+
+.carousel-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+}
+
+.carousel-button.prev {
+ left: 10px;
+}
+
+.carousel-button.next {
+ right: 10px;
+}
\ No newline at end of file
diff --git a/img/background.png b/img/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..a733efd508782ebf7bc2fe899520fe1bdf9f50d4
Binary files /dev/null and b/img/background.png differ
diff --git a/img/date.png b/img/date.png
new file mode 100644
index 0000000000000000000000000000000000000000..b08cf871ed0d57c3b094629168ce164a90b8b131
Binary files /dev/null and b/img/date.png differ
diff --git a/img/edu.png b/img/edu.png
new file mode 100644
index 0000000000000000000000000000000000000000..de3d5aa17a3a314d08fcf403028f2f3415677db3
Binary files /dev/null and b/img/edu.png differ
diff --git a/img/my photo.jpg b/img/my photo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0616a3e3456762b62f86badc4bb6fe91f46b7c5b
Binary files /dev/null and b/img/my photo.jpg differ
diff --git a/img/project.png b/img/project.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9acfda0188bec5b73feec4e739e1e612576e2e3
Binary files /dev/null and b/img/project.png differ
diff --git a/img/work01.png b/img/work01.png
new file mode 100644
index 0000000000000000000000000000000000000000..94bce83b1f11a4d7a23d2b46861ca0ea399fb785
Binary files /dev/null and b/img/work01.png differ
diff --git a/img/work02.png b/img/work02.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2c0244a034b9e888fcd0adb5a90f92851429331
Binary files /dev/null and b/img/work02.png differ
diff --git a/img/work03.png b/img/work03.png
new file mode 100644
index 0000000000000000000000000000000000000000..23aac734c352def4a7ef2ac17456accd96efd463
Binary files /dev/null and b/img/work03.png differ
diff --git a/img/work04.png b/img/work04.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccade7e0079f52df459f643b619d0f16d1303d24
Binary files /dev/null and b/img/work04.png differ
diff --git a/img/work05.png b/img/work05.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1195a943f127186670ba1480f6d4e8e80c8001d
Binary files /dev/null and b/img/work05.png differ
diff --git a/img/work06.png b/img/work06.png
new file mode 100644
index 0000000000000000000000000000000000000000..5899011c35fabd7342dc15395958fbe09b688573
Binary files /dev/null and b/img/work06.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3da51f17ed08b9fca9fcc2631269d72cbb08023
--- /dev/null
+++ b/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Welcome!</title>
+ <link rel="stylesheet" href="./css/index.css">
+
+</head>
+
+<body>
+ <header class="header">
+ <div class="nav-box">
+ <span>Welcome !</span>
+ <ul class="nav">
+ <li class="dropdown">
+ <a href="index.html">Main Page</a>
+
+ <ul class="dropdown-content">
+ <li><a href="#about-me">About Me</a></li>
+ <li><a href="#education">Education</a></li>
+ <li><a href="#skill">Skill</a></li>
+ <li><a href="#works">Works</a></li>
+ </ul>
+ </li>
+ <li><a href="Portfolio.html">Portfolio</a></li>
+ <li><a href="contact.html">Contact Me</a></li>
+ </ul>
+ <button id="changeBackgroundButton">Change Background</button>
+ </div>
+
+ </header>
+ <div class="banner">
+ Welcome!
+ </div>
+ <div class="introduce">
+ <div id="about-me" class="introduce-tit">
+ About Me
+ </div>
+ <div class="introduce-main">
+ <div class="l">
+ <img src="./img/my photo.jpg" width="220">
+
+ </div>
+ <div class="r">
+ <p>Name: Shengqi Ma</p>
+ <P>Brith: 28-03-2001</P>
+ <P>Hobby: Reading, Video Games, Football, Traveling</P>
+
+ </div>
+ </div>
+ <div id="education" class="introduce-tit">
+ Education
+ </div>
+ <div class="edu-box">
+ <div class="edu">
+ <img src="./img/edu.png" width="30" height="30" />
+ <div class="r-box">
+ <p class="tit">Wenzhou Bussness College</p>
+ <p class="small">Diploma in Computing</p>
+ <div class="time">
+ <samp class="icon"></samp>
+ September 2019-June 2022
+ </div>
+ </div>
+ </div>
+ <div class="edu">
+ <img src="./img/edu.png" width="30" height="30" />
+ <div class="r-box">
+ <p class="tit">De Montfort University</p>
+ <p class="small">Bachelor of Science in Computer Science</p>
+ <div class="time">
+ <samp class="icon"></samp>
+ September 2022-June 2023
+ </div>
+ </div>
+ </div>
+ <div class="edu">
+ <img src="./img/edu.png" width="30" height="30" />
+ <div class="r-box">
+ <p class="tit">Cardiff University</p>
+ <p class="small">Msc Computing and IT management</p>
+ <div class="time">
+ <samp class="icon"></samp>
+ September 2023-Now
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="skill" class="introduce-tit">
+ Skill
+ </div>
+ <div class="skill">
+ <p class="tit">
+ <samp>html+css</samp>
+ <samp>80%</samp>
+ </p>
+ <div class="progress">
+ <div class="progress-in" data-progress="80" style="width: 0;"></div>
+ </div>
+ </div>
+ <div class="skill">
+ <p class="tit">
+ <samp>Python</samp>
+ <samp>70%</samp>
+ </p>
+ <div class="progress">
+ <div class="progress-in" data-progress="70" style="width: 0;"></div>
+ </div>
+ </div>
+ <div class="skill">
+ <p class="tit">
+ <samp>Java</samp>
+ <samp>88%</samp>
+ </p>
+ <div class="progress">
+ <div class="progress-in" data-progress="88" style="width: 0;"></div>
+ </div>
+ </div>
+ <div class="skill">
+ <p class="tit">
+ <samp>Kotlin</samp>
+ <samp>60%</samp>
+ </p>
+ <div class="progress">
+ <div class="progress-in" data-progress="60" style="width: 0;"></div>
+ </div>
+ </div>
+ <div id="works" class="introduce-tit">
+ Works
+ </div>
+ <div class="edu-box">
+ <div class="edu">
+ <img src="./img/project.png" width="30" height="30" />
+ <div class="r-box">
+ <p class="tit">Questionnaire App</p>
+ <p class="small">Developing an Android app for survey questionnaires using Kotlin</p>
+ <div class="time">
+ <samp class="icon"></samp>
+ December 2022-January 2023
+ </div>
+ </div>
+ </div>
+ <div class="edu">
+ <img src="./img/project.png" width="30" height="30" />
+ <div class="r-box">
+ <p class="tit">E-shop</p>
+ <p class="small">Online shopping mall developed with HTML, CSS, and PHP</p>
+ <div class="time">
+ <samp class="icon"></samp>
+ December 2022-May 2023
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <script src="./js/script.js"></script>
+ <script>
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+ </script>
+ <script>
+ function revealProgress() {
+ document.querySelectorAll('.progress-in').forEach(progressBar => {
+
+ const progress = progressBar.getAttribute('data-progress');
+
+ progressBar.style.width = progress + '%';
+ });
+ }
+
+
+ window.addEventListener('scroll', function () {
+
+ document.querySelectorAll('.skill').forEach(skill => {
+ const skillTop = skill.getBoundingClientRect().top;
+ const windowHeight = window.innerHeight;
+
+
+ if (skillTop < windowHeight) {
+ revealProgress();
+ }
+ });
+ });
+
+ </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..135dd9950a1e4de987164502406d0b05586e8861
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,42 @@
+function setRandomLightBackgroundColor() {
+ var randomColor = 'rgb(' +
+ (Math.floor(Math.random() * 128) + 127) + ',' +
+ (Math.floor(Math.random() * 128) + 127) + ',' +
+ (Math.floor(Math.random() * 128) + 127) + ')';
+
+ document.body.style.backgroundColor = randomColor;
+ localStorage.setItem('backgroundColor', randomColor);
+}
+document.getElementById('changeBackgroundButton').addEventListener('click', setRandomLightBackgroundColor);
+document.addEventListener('DOMContentLoaded', function () {
+ var savedColor = localStorage.getItem('backgroundColor');
+ if (savedColor) {
+ document.body.style.backgroundColor = savedColor;
+ }
+});
+
+function setRandomLightBackgroundColor() {
+ var randomColor = 'rgb(' +
+ (Math.floor(Math.random() * 128) + 127) + ',' +
+ (Math.floor(Math.random() * 128) + 127) + ',' +
+ (Math.floor(Math.random() * 128) + 127) + ')';
+
+ document.body.style.backgroundColor = randomColor;
+
+
+ localStorage.setItem('backgroundColor', randomColor);
+}
+
+document.getElementById('changeBackgroundButton').addEventListener('click', setRandomLightBackgroundColor);
+document.addEventListener('DOMContentLoaded', function () {
+
+ var savedColor = localStorage.getItem('backgroundColor');
+ if (savedColor) {
+ document.body.style.backgroundColor = savedColor;
+ }
+});
+
+
+
+
+