Skip to content

Commit

Permalink
Adding Project Section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Min-Thway-Htut
Min-Thway-Htut committed Sep 28, 2024
1 parent 8ae3481 commit 7570775
Show file tree
Hide file tree
Showing 8 changed files with 260 additions and 1 deletion.
Binary file removed images/health-fit.png
View file
Binary file not shown.
Binary file removed images/hotpot.png
View file
Binary file not shown.
Binary file removed images/project-one.png
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ <h2 id="myProjects">My Projects</h2>
<span class="dot" onclick="currentSlide(4)"></span>
</div>

<button id="project-button"><a href="project.html">View More Projects</a></button>

<h2>Articles</h2>
<div class="article-section-description">Apart from coding and developing projects, I am also interested in writing IT-related articles.
Expand Down Expand Up @@ -247,7 +248,7 @@ <h3>Contact Information</h3>

<footer class="footer">
<p>@minthwayhtut 2024 | Developed by Min Thway Htut</p>
<p id="last-update">Last updated on 27.09.2024</p>
<p id="last-update">Last updated on 28.09.2024</p>
</footer>

</html>
67 changes: 67 additions & 0 deletions project.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
93 changes: 93 additions & 0 deletions project.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Min Thway Htut's Projects
</title>
<link rel="stylesheet" href="project.css" />
</head>
<body>
<h1 class="title">My Projects</h1>
<main>
<div class="team-stats">
<p><span id="team"></span></p>
<p><span id="sport"></span></p>
<p><span id="year"></span></p>
<p><span id="head-coach"></span></p>
</div>
<label class="options-label" for="players">Filter Projects</label>
<select name="players" id="players">
<option value="all">All Projects</option>
<option value="forward">Frontend Projects</option>
<option value="midfielder">Data Science Projects</option>
<option value="defender">Python Projects</option>
</select>
<div class="cards" id="player-cards">
<div class="player-card">
<img src="images/personal-portfolio.png"/>
<br>
<h2>Personal Portfolio Project</h2>
<br>
<p>The website on which you are currently viewing is one of my projects. I have developed this website
using HTML, CSS, and javaScript.
</p>
<br>
<br>
<br>
<br>
</div>
<div class="player-card">
<img src="images/cpu-scheduler.png" />
<br>
<h2>CPU Scheduler and Memory Manager</h2>
<br>
<p>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.
</p>
</div>
<div class="player-card">
<br>
<img src="images/image.png"/>
<h2>Nutri Log</h2>
<br>
<br>
<br>
<p>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.</p>
<br>
<br>
</div>
<div class="player-card">
<img src="images/cozycorner.png"/>
<br>
<h2>Cozy Corner</h2>
<p>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.
<br>
Languages used: HTML, CSS, and javaScript
</p>
</div>
<div class="player-card">
<img src="images/datapipeline.png"/>
<br>
<br>
<h2>Data Pipeline</h2>
<br>
<p>This is an end-to-end machine learning pipeline.
<br>
Language used: Python
</p>
<br>
<br>
<br>
</div>
</div>
</main>
<footer>&copy; Min Thway Htut</footer>
<script src="./project.js"></script>
</body>
</html>
97 changes: 97 additions & 0 deletions project.js
View file
Original file line number Diff line number Diff line change
@@ -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}) =>
`
<div class="player-card">
<img src="${image}" alt="${name}" />
<h2> ${name}</h2>
<br>
<p>${description}</p>
</div>
`
)
.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;
}
});
1 change: 1 addition & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,6 +490,7 @@ button{
cursor: pointer;
}


#project-button{
display: block;
margin-left:auto;
Expand Down

0 comments on commit 7570775

Please sign in to comment.