diff --git a/images/health-fit.png b/images/health-fit.png deleted file mode 100644 index 34b5dac..0000000 Binary files a/images/health-fit.png and /dev/null differ diff --git a/images/hotpot.png b/images/hotpot.png deleted file mode 100644 index 897d882..0000000 Binary files a/images/hotpot.png and /dev/null differ diff --git a/images/project-one.png b/images/project-one.png deleted file mode 100644 index a3843ba..0000000 Binary files a/images/project-one.png and /dev/null differ diff --git a/index.html b/index.html index d44e27f..2967305 100644 --- a/index.html +++ b/index.html @@ -185,6 +185,7 @@

My Projects

+

Articles

Apart from coding and developing projects, I am also interested in writing IT-related articles. @@ -247,7 +248,7 @@

Contact Information

\ No newline at end of file diff --git a/project.css b/project.css new file mode 100644 index 0000000..98e0664 --- /dev/null +++ b/project.css @@ -0,0 +1,67 @@ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: #a8dadc; + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: #121212; +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} +.player-card img{ + width: 100%; +} +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} \ No newline at end of file diff --git a/project.html b/project.html new file mode 100644 index 0000000..63690cc --- /dev/null +++ b/project.html @@ -0,0 +1,93 @@ + + + + + + + + Min Thway Htut's Projects + + + + +

My Projects

+
+
+

+

+

+

+
+ + +
+
+ +
+

Personal Portfolio Project

+
+

The website on which you are currently viewing is one of my projects. I have developed this website + using HTML, CSS, and javaScript. +

+
+
+
+
+
+
+ +
+

CPU Scheduler and Memory Manager

+
+

Scheduling algorithms such as First Come First Served (FCFS), Shortest Job First (SJF), and Round Robin (RR) + as well as memory managemet techniques such as Best Fit and First Fit were implemented using Python + in this project. +

+
+
+
+ +

Nutri Log

+
+
+
+

Nutri Log is a website for the users who want to calculate their BMI, and the amount of calories + required for a day. HTML, CSS, and javaScript were used for this project.

+
+
+
+
+ +
+

Cozy Corner

+

I developed a simple restaurant website where the customers can see the menus, the contact details, + and the location of the restaurant. However, online order system is yet to be implemented. +
+ Languages used: HTML, CSS, and javaScript +

+
+
+ +
+
+

Data Pipeline

+
+

This is an end-to-end machine learning pipeline. +
+ Language used: Python +

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/project.js b/project.js new file mode 100644 index 0000000..46eb3f6 --- /dev/null +++ b/project.js @@ -0,0 +1,97 @@ +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "", + sport: "", + year: null, + headCoach: { + coachName: "", + matches: 7, + }, + players: [ + { + name: "Personal Portfolio Project", + position: "forward", + image: "images/personal-portfolio.png", + description: "The website on which you are currently viewing is one of my projects. I have developed this website using HTML, CSS, and javaScript." + }, + { + name: "Nutri Log", + position: "forward", + image: "images/image.png", + description: "Scheduling algorithms such as First Come First Served (FCFS), Shortest Job First (SJF), and Round Robin (RR) as well as memory managemet techniques such as Best Fit and First Fit were implemented using Python in this project." + }, + { + name: "Cozy Corner", + position: "forward", + image: "images/cozycorner.png", + description: "I developed a simple restaurant website where the customers can see the menus, the contact details, and the location of the restaurant. However, online order system is yet to be implemented." + }, + { + name: "Process Scheduler and Memory Manager", + position: "defender", + image: "images/cpu-scheduler.png", + description: "Scheduling algorithms such as First Come First Served (FCFS), Shortest Job First (SJF), and Round Robin (RR) as well as memory managemet techniques such as Best Fit and First Fit were implemented using Python in this project.", + }, + { + name: "Data Pipeline", + position: "midfielder", + image: "images/datapipeline.png", + description: "This is an end-to-end machine learning pipeline.", + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.textContent = sport; +teamName.textContent = team; +worldCupYear.textContent = year; +headCoach.textContent = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, description, image}) => + ` +
+ ${name} +

${name}

+
+

${description}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + + default: + setPlayerCards( + ); + break; + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e123723..963dc0a 100644 --- a/styles.css +++ b/styles.css @@ -490,6 +490,7 @@ button{ cursor: pointer; } + #project-button{ display: block; margin-left:auto;