diff --git a/README.md b/README.md new file mode 100644 index 0000000..a09aaed --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Portfolio-Website \ No newline at end of file diff --git a/Resources/Game Photos/Ball game.png b/Resources/Game Photos/Ball game.png new file mode 100644 index 0000000..76f281f Binary files /dev/null and b/Resources/Game Photos/Ball game.png differ diff --git a/Resources/Game Photos/Balloon.png b/Resources/Game Photos/Balloon.png new file mode 100644 index 0000000..cdeb648 Binary files /dev/null and b/Resources/Game Photos/Balloon.png differ diff --git a/Resources/Game Photos/Submarine.png b/Resources/Game Photos/Submarine.png new file mode 100644 index 0000000..fbe9a06 Binary files /dev/null and b/Resources/Game Photos/Submarine.png differ diff --git a/Resources/Game Photos/bamboo.png b/Resources/Game Photos/bamboo.png new file mode 100644 index 0000000..eb754a5 Binary files /dev/null and b/Resources/Game Photos/bamboo.png differ diff --git a/Resources/Game Photos/fruit basket.png b/Resources/Game Photos/fruit basket.png new file mode 100644 index 0000000..3e534ec Binary files /dev/null and b/Resources/Game Photos/fruit basket.png differ diff --git a/Resources/Game Photos/learn-isle-app-icon.jpeg b/Resources/Game Photos/learn-isle-app-icon.jpeg new file mode 100644 index 0000000..03bf91c Binary files /dev/null and b/Resources/Game Photos/learn-isle-app-icon.jpeg differ diff --git a/Resources/favicon-16x16.png b/Resources/favicon-16x16.png new file mode 100644 index 0000000..3e6d575 Binary files /dev/null and b/Resources/favicon-16x16.png differ diff --git a/Resources/profile.png b/Resources/profile.png new file mode 100644 index 0000000..3d17170 Binary files /dev/null and b/Resources/profile.png differ diff --git a/assets/.DS_Store b/assets/.DS_Store deleted file mode 100644 index a720f07..0000000 Binary files a/assets/.DS_Store and /dev/null differ diff --git a/assets/scripts/app.js b/assets/scripts/app.js deleted file mode 100644 index 953d2d5..0000000 --- a/assets/scripts/app.js +++ /dev/null @@ -1,192 +0,0 @@ -class DOMhandler { - static appendToDom(newAddress, projectItem) { - newAddress.append(projectItem); - } - static updateDOM(projectItem, type, fnc) { - const switchBtn = projectItem.querySelectorAll('button')[1]; - switchBtn.textContent = type; - switchBtn.addEventListener('click', fnc.bind(null, projectItem.id)); - } - static clearEventListeners(element) { - const clonedElement = element.cloneNode(true); - element.replaceWith(clonedElement); - return clonedElement; - } - static updateInfoBtn(infButtonDOM, func, oldFunc, newFunc) { - infButtonDOM.addEventListener('click', func.bind(null, newFunc, oldFunc)); - } - static clearInfoButton(element) { - const clonedElement = element.cloneNode(true); - element.replaceWith(clonedElement); - return clonedElement; - } -} - -class Components { - constructor() {} - detach() { - this.exInfElement.remove(); - this.projectClassInstance.extraInfoFlag = 0; - } - attach() { - this.projectElement.parentNode.insertBefore( - this.infoCardElement, - this.projectElement.nextSibling - ); - this.projectClassInstance.extraInfoFlag = 1; - } - switch(){ - this.detach(); - this.attach(); - } -} -class Info extends Components { - constructor(projectElement, projectClassInstance) { - super(); - this.projectClassInstance = projectClassInstance; - this.projectClassInstance.extraInfoFlag = 1; - this.projectElement = projectElement; - this.buttonDOM = projectElement.querySelector('button:first-of-type'); - this.exInfoText = this.projectElement.dataset.extraInfo; - this.createInfoElement(); - this.render(this.attach.bind(this), this.detach.bind(this)); //bind dene - this.exInfElement = this.projectElement.nextElementSibling; - } - update(oldFunc, newFunc) { - this.buttonDOM = DOMhandler.clearInfoButton(this.buttonDOM); - DOMhandler.updateInfoBtn( - this.buttonDOM, - this.render.bind(this), - oldFunc, - newFunc - ); - } - render(funcToDo, newFunc) { - funcToDo(); - this.update(funcToDo, newFunc); - } - createInfoElement() { - this.infoCardElement = document.createElement('div'); - this.infoCardElement.className = 'card'; - this.infoCardElement.innerHTML = `
${this.exInfoText}
`; - } -} - -class Project { - constructor(id, switchFunction) { - this.id = id; - this.extraInfoFlag = 0 ; - this.switchHandler = switchFunction; - this.projectDom = document.getElementById(id); - this.infoButtonDom = this.projectDom.querySelector('button'); - - this.switchButtonDom = this.infoButtonDom.nextElementSibling; - this.switchButtonActivate(); - this.moreInfoButtonActivate(); - } - switchButtonActivate() { - this.switchButtonDom.addEventListener( - 'click', - this.switchHandler.bind(null, this.id) - ); - } - infoHandler() { - this.moreInfoClassInstance = new Info(this.projectDom, this); - } - moreInfoButtonActivate() { - this.infoButtonDom.addEventListener('click', this.infoHandler.bind(this)); - } -} - -class ProjectList { - projects = []; - constructor(statusName, btnText) { - this.buttonText = btnText; - this.statusName = statusName; - const listElements = document.querySelectorAll( - `#${statusName}-projects li` - ); - for (const element of listElements) { - this.projects.push( - new Project(element.id, this.switchHandler.bind(this)) - ); - } - } - - switchHandler(id) { - const index = this.projects.findIndex((obj) => obj.id === id); - const projectItemElement = document.getElementById(id); - let switchBtn = projectItemElement.querySelector('button:last-of-type'); - switchBtn = DOMhandler.clearEventListeners(switchBtn); - this.switchAddHandler(this.projects[index]); - this.projects = this.projects.filter((obj) => obj.id != id); - } - switchAddBridge(switchAdd) { - this.switchAddHandler = switchAdd; - } - switchAdd(projectClassInstance) { - this.projects.push(projectClassInstance); - const projectItem = document.getElementById(projectClassInstance.id); - const listDomId = document.querySelector(`#${this.statusName}-projects ul`); - DOMhandler.appendToDom(listDomId, projectItem); - DOMhandler.updateDOM( - projectItem, - this.buttonText, - this.switchHandler.bind(this) - ); - if(projectClassInstance.extraInfoFlag === 1){ - projectClassInstance.moreInfoClassInstance.switch(); - }} -} - -class AddProject{ - constructor(activeProject){ - this.projectNumber = 4; - this.connectAddButton(); - this.activeProjectsList = activeProject; - } - createProjectElement(name, explanation, moreInf){ - const newProjectElement = document.createElement("li"); - newProjectElement.id=`p${this.projectNumber}`; - newProjectElement.dataset.extraInfo = moreInf; - newProjectElement.className ="card"; - newProjectElement.innerHTML=` -

${name}

-

${explanation}

- - `; - return newProjectElement; - } - createProject(){ - const projectName = document.getElementById("project-name-input").value; - const projectExplanation = document.getElementById("explanation-input").value; - const MoreInfo = document.getElementById("more-info-input").value; - const projectElement = this.createProjectElement(projectName, projectExplanation, MoreInfo); - const activeProjectListElement = document.querySelector("#active-projects ul"); - activeProjectListElement.append(projectElement); - this.activeProjectsList.projects.push( new Project(projectElement.id, this.activeProjectsList.switchHandler.bind(this.activeProjectsList))) - this.projectNumber++; - } - - - connectAddButton(){ - const addBtn = document.getElementById("add-button"); - addBtn.addEventListener("click", this.createProject.bind(this)); - } -} - -class App { - static init() { - const activeProjectsList = new ProjectList('active', 'Finish'); - const finishedProjectsList = new ProjectList('finished', 'Activate'); - activeProjectsList.switchAddBridge( - finishedProjectsList.switchAdd.bind(finishedProjectsList) - ); - finishedProjectsList.switchAddBridge( - activeProjectsList.switchAdd.bind(activeProjectsList) - ); - new AddProject(activeProjectsList); - } -} - -App.init(); diff --git a/assets/styles/app.css b/assets/styles/app.css deleted file mode 100644 index 51c1a28..0000000 --- a/assets/styles/app.css +++ /dev/null @@ -1,143 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - font-family: sans-serif; -} - -body { - margin: 0; -} - -#main-header { - width: 100%; - height: 6rem; - display: flex; - justify-content: center; - align-items: center; - background: #ff0062; -} - -#main-header h1 { - color: white; - margin: 0; -} - -footer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - text-align: center; -} - -ul { - list-style: none; - margin: 0; - padding: 0; -} - -li { - margin: 1rem 0; -} - -section { - margin: 1rem auto; - width: 40rem; - max-width: 90%; -} - -section ul { - padding: 1rem; - max-height: 20rem; - overflow: scroll; -} - -section > h2 { - color: white; - margin: 0; -} - -button { - font: inherit; - background: #ff0062; - color: white; - border: 1px solid #ff0062; - padding: 0.5rem 1.5rem; - cursor: pointer; -} - -button.alt { - background: white; - color: #ff0062; -} - -button:focus { - outline: none; -} - -button:hover, -button:active { - background: #ff2579; - border-color: #ff2579; - color: white; -} - -.card { - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); - padding: 1rem; - background: white; -} - -#active-projects { - border: 1px solid #870099; -} - -#active-projects > header { - background: #870099; - padding: 1rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -#active-projects header h2 { - color: white; - margin: 0; -} - -#finished-projects { - border: 1px solid #535353; -} - -#finished-projects > header { - background: #535353; - padding: 1rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -#finished-projects header h2 { - color: white; - margin: 0; -} - -#add-project { - border: 1px solid #535353; -} - -#add-project > header { - background: #535353; - padding: 1rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -#add-project header h2 { - color: white; - margin: 0; -} \ No newline at end of file diff --git a/index.html b/index.html index da73229..539ba20 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,208 @@ - - - - - Project Board - - - - -
-

Project Planner

-
-
-
-

Add New Project

-
-
Project Name:
- Explanation:    
- More Info:        
- -
-
-
-
-

Active Projects

-
- -
-
-
-

Finished Projects

-
- -
- + + + + + + Game Developer Portfolio + + + + + + + +
+
+
+

Mustafa Berkay Uslu

+
+ + + + + Resume +
+
+
+ Profile Image +
+

Game programmer eager to master the creation of game mechanics.

+
+
+

Projects

+
+
+

Learn Isle

+
+ Game Image 1 +
+
+ +
+
+ +
+

Game is designed for children to have fun and learn English. I am responsible for refactoring the + managers and turning mini-games into templates, allowing for quick creation of new game + variations through scriptable objects. The game has been accepted into the OGEM Incubation + Program and is still under development, with a demo available on the App Store.

+
+
+

Fruit Basket Game

+
+ Game Image 2 +
+
+ +
+
+ +
+

I developed this game as a freelance game developer for a company. The game utilizes the OpenCV + for Unity asset to create body tracking features. The game starts by checking if the required + parts of the player's body are within the frame using body pose estimation. + In the game player's body is tracked, and a basket follows their movements. The + objective is to catch falling fruits by moving left and right.

+
+
+

Balloon Game

+
+ Game Image 2 +
+
+ +
+
+ +
+

I developed this game as a freelance game developer for a company. The game utilizes the OpenCV + for Unity asset to create body tracking features. The game starts by checking if the required + parts of the player's body are within the frame using body pose estimation. + In the game, the player's hands are tracked. The objective is to pop the balloons using their + hands within a set time frame.

+
+
+

Submarine Game

+
+ Game Image 2 +
+
+ +
+
+ +
+

I developed this game as a freelance game developer for a company. The game utilizes the OpenCV + for Unity asset to create body tracking features. The game starts by checking if the required + parts of the player's body are within the frame using body pose estimation. + In the game, the player's head is tracked. If the player is too close to the screen, the game + stops to prevent cheating. The objective is to move a submarine vertically and travel without + hitting the barriers.

+
+
+

Bamboo Game

+
+ Game Image 2 +
+
+ +
+
+ +
+

I developed this game as a freelance game developer for a company. The game utilizes the OpenCV + for Unity asset to create body tracking features. The game starts by checking if the required + parts of the player's body are within the frame using body pose estimation. + In the game, the player's full body is tracked. The objective is to move away from the red zone + on the screen. The game stops if the player cannot be detected for a certain time to prevent + cheating.

+
+
+

Ball Game

+
+ Game Image 2 +
+
+ +
+
+ +
+

I developed this game as a freelance game developer for a company. The game utilizes the OpenCV + for Unity asset to create body tracking features. The game starts by checking if the required + parts of the player's body are within the frame using body pose estimation. + In the game, the player's hands are tracked. The player needs to hit the balls coming out of the + tubes while avoiding spiked balls, which decrease their health.

+
+
+
+
+

Personal Projects

+
+
+

Personal Project Title 1

+
+ Personal Project Image 1 +
+
+ +
+
+ + + + +
+

Description of the personal project.

+
+
+

Personal Project Title 2

+
+ Personal Project Image 2 +
+
+ +
+
+ + + + +
+

Description of the personal project.

+
+
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..469a291 --- /dev/null +++ b/script.js @@ -0,0 +1,35 @@ +document.addEventListener('DOMContentLoaded', function() { + const emailIcon = document.getElementById('email-icon'); + const emailAddress = document.getElementById('email-address'); + + emailIcon.addEventListener('click', function(event) { + event.preventDefault(); + emailAddress.style.display = (emailAddress.style.display === 'none' || emailAddress.style.display === '') ? 'inline' : 'none'; + }); + + const toggleButtons = document.querySelectorAll('.toggle-video'); + + toggleButtons.forEach(function(button) { + button.addEventListener('click', function() { + const projectCard = button.closest('.project-card'); + const videoContainer = projectCard.querySelector('.video-container'); + const imageContainer = projectCard.querySelector('.image-container'); + const video = projectCard.querySelector('.project-video'); + + const isVideoVisible = videoContainer.style.display === 'block'; + if (isVideoVisible) { + videoContainer.style.display = 'none'; + imageContainer.style.display = 'block'; + button.textContent = 'Show Video'; + + const videoSrc = video.src; + video.src = ''; + video.src = videoSrc; + } else { + videoContainer.style.display = 'block'; + imageContainer.style.display = 'none'; + button.textContent = 'Hide Video'; + } + }); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f562d6b --- /dev/null +++ b/styles.css @@ -0,0 +1,228 @@ +body { + font-family: 'Montserrat', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: #0d0d0d; + color: #f2f2f2; +} + +main { + padding: 0; + margin: 0; + text-align: center; +} + +.intro-section { + text-align: center; + padding: 0; + margin: 0; +} + +.intro-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + margin: 0; +} + +.name { + color: #8bc5bf; + font-size: 48px; + margin: 0; +} + +.profile-image-container { + width: 250px; + height: 250px; + border-radius: 50%; + overflow: hidden; + margin: 20px auto; + position: relative; +} + +.profile-image { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.links { + display: flex; + justify-content: center; + align-items: center; + gap: 15px; +} + +.links .icon { + color: #ffb6c1; + text-decoration: none; + font-size: 35px; +} + +.email { + display: none; + color: #ffb6c1; + font-size: 18px; + margin-left: 15px; +} + +.resume-button { + font-family: 'Montserrat', sans-serif; + color: #ffb6c1; + border: 1px solid #ffb6c1; + padding: 4px 10px; + border-radius: 5px; + font-size: 16px; + display: inline-flex; + align-items: center; + text-decoration: none; +} + +.resume-button i { + margin-left: 5px; +} + +.resume-button:hover { + background-color: #ffb6c1; + color: #0d0d0d; +} + +.intro-text { + color: #ffb6c1; + font-size: 32px; + margin-top: 20px; +} + +.projects-title { + font-size: 36px; + color: #8bc5bf; + margin-bottom: 20px; +} + +.project-card h3 { + color: #e29ba7; + font-size: 24px; +} + +section { + margin: 40px 0; +} + +.projects-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + width: 90%; + margin: 0 auto; +} + +.project-card { + border: 1px solid #444; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + background-color: #232323; + color: #f2f2f2; + position: relative; +} + +.project-card .image-container { + width: 100%; + height: 390px; /* Default height for larger screens */ + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +/* Media query for smaller screens */ +@media (max-width: 768px) { + .project-card .image-container { + height: 200px; /* Adjusted height for smaller screens */ + } +} + +.project-card img { + width: auto; + height: 100%; + object-fit: cover; + border-radius: 8px; +} + +.project-card p { + text-align: left; + font-size: 18px; +} + +.video-container { + position: relative; + width: 100%; + padding-bottom: 56.25%; + height: 0; + display: none; +} + +.project-video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + border-radius: 8px; +} + +.project-buttons { + display: flex; + gap: 10px; + margin-bottom: 15px; + margin-top: 15px; +} + +.toggle-video { + padding: 10px; + border: none; + background-color: #ffb6c1; + color: #0d0d0d; + border-radius: 5px; + cursor: pointer; +} + +.toggle-video:hover { + background-color: #e29ba7; +} + +.icon { + color: #8bc5bf; + text-decoration: none; + font-size: 32px; /* Default size, adjust as needed */ +} + +.icon i { + font-size: inherit; /* Ensures icons inherit the size of their parent */ +} + +.icon:hover { + color: #78c5bf; +} + +@media (max-width: 768px) { + .projects-container { + grid-template-columns: 1fr; + } + + .intro-row { + flex-direction: column; + align-items: flex-start; + } + + .links { + justify-content: flex-start; + margin-top: 10px; + } +}