gemmen29 / portfolio

My portfolio project built with HTML, CSS, and javascript

Hi I'm George Magdy

I'm a remote Full-stack web developer

About

• I have a degree in computer science.
• I finished a scholarship in my country called ITI in full-stack development.
• I finished Microverse.
• Now, I'm looking for new opportunity.

Github Status

You can check out my portfolio here
You can check out my CV here

portfolio's Issues

Morning session code review

Peer to peer code review

Hello @gemmen29 you are doing a very good job with your website.
Here are some recommendations you can implement to improve your work.

• When the modal window and mobile menu is shown you could disable the body scroll to avoid accidentally scrolling
• You can make the Header fixed to the top, so you can access the menu options all the time
• When you are creating the modal window with the projects array you can use the method forEach instead of a for loop to make you code looks more clean.

  Portfolio/index.js

  Lines 97 to 124 in 7578051

  	for (let index = 0; index < seeProjects.length; index += 1) {
  	seeProjects[index].addEventListener('click', (e) => {
  	const projectTitle = projectModal.querySelector('h3#project-header');
  	const projectDescription = projectModal.querySelector('p.dis--');
  	const technologiesUL = projectModal.querySelector('ul#technologies');
  	const projectImage = projectModal.querySelector('img.project-image');
  	const projectId = e.target.getAttribute('data-projectId');
  	projectTitle.textContent = projects[projectId - 1].name;
  	projectDescription.textContent = projects[projectId - 1].description;
  	projectImage.src = projects[projectId - 1].featuredImage;
  	technologiesUL.innerHTML = '';
  	projects[projectId - 1].technologies.forEach((project) => {
  	const li = document.createElement('li');
  	li.classList.add('technology-list');
  	const liText = document.createTextNode(project);
  	li.appendChild(liText);
  	technologiesUL.appendChild(li);
  	});
  	projectModal.classList.remove('d-none');
  	for (let index = 0; index < allBlur.length; index += 1) {
  	allBlur[index].classList.add('blur-see-project-modal');
  	}
  	});
  	}

• You can also use the same method to create the cards of the project dynamically using JavaScript.

  Portfolio/index.html

  Lines 150 to 238 in 7578051

  	<div class="project">
  	<img class="scaled" src="images/project1.png" alt="Tonic project screenshot">
  	<div class="project-body">
  	<h2 class="project-title">Tonic</h2>
  	<div class="project-sub-header">
  	<span>CANOPY</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">Back End Dev</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">2015</span>
  	</div>
  	<p>
  	A daily selection of privately personalized reads; no accounts or sign-ups required.
  	</p>
  	<ul>
  	<li>html</li>
  	<li>css</li>
  	<li>javascript</li>
  	</ul>
  	<a data-projectId='1' class="see-pro-btn main-button">See Project</a>
  	</div>
  	</div>
  	<div class="project">
  	<img class="scaled" src="images/project2.png" alt="Multi-Post Stories project screenshot">
  	<div class="project-body">
  	<h2 class="project-title">Multi-Post Stories</h2>
  	<div class="project-sub-header">
  	<span>CANOPY</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">Back End Dev</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">2015</span>
  	</div>
  	<p>
  	A daily selection of privately personalized reads; no accounts or sign-ups required.
  	</p>
  	<ul>
  	<li>html</li>
  	<li>css</li>
  	<li>javascript</li>
  	</ul>
  	<a data-projectId='2' class="see-pro-btn main-button">See Project</a>
  	</div>
  	</div>
  	<div class="project">
  	<img class="scaled" src="images/project3.png" alt="Tonic project screenshot">
  	<div class="project-body">
  	<h2 class="project-title">Tonic</h2>
  	<div class="project-sub-header">
  	<span>CANOPY</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">Back End Dev</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">2015</span>
  	</div>
  	<p>
  	A daily selection of privately personalized reads; no accounts or sign-ups required.
  	</p>
  	<ul>
  	<li>html</li>
  	<li>css</li>
  	<li>javascript</li>
  	</ul>
  	<a data-projectId='3' class="see-pro-btn main-button">See Project</a>
  	</div>
  	</div>
  	<div class="project">
  	<img class="scaled" src="images/project4.png" alt="Multi-Post Stories project screenshot">
  	<div class="project-body">
  	<h2 class="project-title">Multi-Post Stories</h2>
  	<div class="project-sub-header">
  	<span>CANOPY</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">Back End Dev</span>
  	<span class="sub-different-color bullet">•</span>
  	<span class="sub-different-color">2015</span>
  	</div>
  	<p>
  	A daily selection of privately personalized reads; no accounts or sign-ups required.
  	</p>
  	<ul>
  	<li>html</li>
  	<li>css</li>
  	<li>javascript</li>
  	</ul>
  	<a data-projectId='4' class="see-pro-btn main-button">See Project</a>
  	</div>
  	</div>
  	</div>

Good job 👍

Keep working so hard

Morning code review

Very nice and clean code both HTML and CSS.
There are some suggestions for changes as follow:

1. Fix the footer background image in the Contact section
2. Rename the headline section with your name and the title of the document.
3. Buttons See Project and Get my Resume needs styling on hover and click.
4. About Myself section is about 40% of the length of the whole width.
5. Make the links in the menu works.

Keep rocking 🚀