main.js

/* data for projects*/
const projects = [
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/tesla-landing-clone',
    live: 'https://jazzy-haupia-293b11.netlify.app/',
    title: 'Tesla Clone',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1687457208/Proyectos/Tesla%20clone/tesla-preview_wsg3im.jpg',
    details: 'Astro / JavaScript / Tailwindcss / Netlify',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'nextjs',
    github: 'mailto:guacig@hotmail.com',
    live: 'https://airbnb-clone-project-red.vercel.app/',
    title: 'Airbnb Clone',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1670596218/Proyectos/Airbnb%20clone/airbnb-preview_rmzc6u.jpg',
    details: 'Nextjs / Tailwindcss / Vercel',
    isPrivate: true,
    isFinished: true
  },
  {
    projectType: 'react',
    github: 'mailto:guacig@hotmail.com',
    live: '#',
    title: 'Netflix Clone',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651502/Proyectos/Netflix%20clone/netflix-preview_xnstdg.jpg',
    details: 'React / Redux / TMDB Api / Firebase',
    isPrivate: true,
    isFinished: false
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/rock-paper-scissors-game',
    live: 'https://guacig.github.io/rock-paper-scissors-game/',
    title: 'Rock-Paper-Scissors Game',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651660/Proyectos/Rock-Paper-Scissors/rock-paper-scissors-game-app-preview_tcfgll.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/techiesgirls-website',
    live: 'https://guacig.github.io/techiesgirls-website/',
    title: 'TechiesGIRLS Website',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651580/Proyectos/TechiesGIRLS-website/techies-girls-preview_hy5rqn.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'react',
    github: 'https://github.com/GuaciG/todo-list-react-app',
    live: 'https://guacig.github.io/todo-list-react-app/',
    title: 'ToDo List React App',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667922766/Proyectos/To-Do%20List/todo-list-app-preview_ti0bg6.jpg',
    details: 'React Hooks',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/tic-tac-toe-game',
    live: 'https://guacig.github.io/tic-tac-toe-game/',
    title: 'Tic Tac Toe Game',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651628/Proyectos/TicTacToe/tic-tac-toe-game-app-preview_e3k157.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/local-weather-app',
    live: 'https://guacig.github.io/local-weather-app/',
    title: 'Local Weather App',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667922826/Proyectos/Weather/local-weather-app-preview_hpcglg.jpg',
    details: 'JavaScript / Openweather API',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'react',
    github: 'https://github.com/GuaciG/pomodoro-timer',
    live: 'https://guacig.github.io/pomodoro-timer/',
    title: 'Pomodoro Clock',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667922881/Proyectos/Pomodoro%20Clock/pomodoro-clock-app-preview_dvikgy.jpg',
    details: 'React',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/calculator',
    live: 'https://guacig.github.io/calculator/',
    title: 'JavaScript Calculator',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651312/Proyectos/Calculator/calculator-app-preview_zertq3.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/drum-machine',
    live: 'https://guacig.github.io/drum-machine/',
    title: 'Drum Machine',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667922649/Proyectos/Drum%20Machine/drum-machine-app-preview_y5dvml.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javaScript',
    github: 'https://github.com/GuaciG/landing-page-travel',
    live: 'https://guacig.github.io/landing-page-travel/',
    title: 'Travel Single Page',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651532/Proyectos/Product%20Landing%20Page/travel-single-page-preview_wqhyrj.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'react',
    github: 'https://github.com/GuaciG/random-quote-machine',
    live: 'https://guacig.github.io/random-quote-machine/',
    title: 'Random Quote Machine',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667922941/Proyectos/Random%20Quote%20Machine/random-quote-machine-app-preview_sbuilt.jpg',
    details: 'React',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'javascript',
    github: 'https://github.com/GuaciG/product-landing-page',
    live: 'https://guacig.github.io/product-landing-page/',
    title: 'Product Landing Page',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651558/Proyectos/Product%20Landing%20Page%20Cookies/cookies-preview_efqcko.jpg',
    details: 'JavaScript',
    isPrivate: false,
    isFinished: true
  },
  {
    projectType: 'react',
    github: 'https://github.com/GuaciG/markdown-previewer',
    live: 'https://guacig.github.io/markdown-previewer/',
    title: 'Markdown Previewer',
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1667651474/Proyectos/Markdown%20Previewer/markdown-previewer-preview_zx6mqs.jpg',
    details: 'React',
    isPrivate: false,
    isFinished: true
  }
]

/* data for languages or tools logos */
const toolsLogos = [
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885808/iconos/html5_l9uaty.png',
    alt: 'html'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885808/iconos/css_sa8yg3.png',
    alt: 'css'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1618478985/iconos/JavaScript_ehfdft.jpg',
    alt: 'javascript'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885809/iconos/sass_ytfiqd.png',
    alt: 'sass'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1613751254/iconos/jquery_qflxqt.png',
    alt: 'jquery'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885809/iconos/react_uras0m.png',
    alt: 'react'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1670597946/iconos/nextjs-logo_ye7rad.png',
    alt: 'nextJs'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1670597946/iconos/tailwindcss-logo_fuzeii.png',
    alt: 'tailwindCss'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885808/iconos/bootstrap_smrtex.png',
    alt: 'bootstrap'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885808/iconos/git_dvm9dx.png',
    alt: 'git'
  },
  {
    src: 'https://res.cloudinary.com/drpcjt13x/image/upload/v1600885808/iconos/github_gf0t2u.png',
    alt: 'github'
  }
]

/* JavaScript Template Literals to create projects and tools-logos sections */
/* Template Literals for projects section */
const projectTemplate = project => {
  return `
				<div class="project-tile ${project.projectType}">
				<img
						src=${project.src}
						alt=${project.title}
					/>
					<div class="overlay">
						<div class='overlay-info'>
							<strong>${project.title}</strong>
							<br />
							<p class="details">
								${project.details}
							</p>
							<br />
							<p class="private">
							${project.isPrivate ? 'GitHub repo upon request' : ''}
							</p>
              <br />
              <p class="finished">
							${project.isFinished ? '' : 'UPDATING'}
							</p>
              <div class='overlay-links'>
                <a
                  href=${project.github}
                  title=${project.title}
                  target="_blank"
                >
                  GitHub
                </a>
              
                ${
                  project.isFinished
                    ? `<a
                      href=${project.live}
                      title=${project.title}
                      target="_blank"
                    > 
                      Preview
                    </a>`
                    : ''
                } 
              </div>
						</div>
					</div>
			</div>
		`
}

document.getElementById('display-proyects').innerHTML = `
	<div class="projects-box-wrapper">
		<div class="projects-box">
			${projects.map(projectTemplate).join('')}
		</div>
	</div>

`

/* Template Literals for tools-logos section */
const toolsTemplate = tool => {
  return `
		<img
			src=${tool.src}
			alt=${tool.alt}
		/>
	`
}

document.getElementById('display-tools').innerHTML = `
	<div class="combo">
		${toolsLogos.map(toolsTemplate).join('')}
	</div>
`

/* add an event listener to the document, when the page finishes loading,
runs the functions: filterProjects and typeWriter */
document.addEventListener(
  'DOMContentLoaded',
  function () {
    filterProjects('all')
    typeWriter()
  },
  false
)

/* filterProjects function to display projects based on the button clicked. */
function filterProjects(selection) {
  let i
  const projects = document.getElementsByClassName('project-tile')

  if (selection == 'all') selection = ''
  /* Add the "show" class to the filtered elements, 
	and remove the "show" class from the elements that are not selected */
  for (i = 0; i < projects.length; i++) {
    removeClass(projects[i], 'show')
    if (projects[i].className.indexOf(selection) > -1)
      addClass(projects[i], 'show')
  }
}

// Show filtered elements
function addClass(element, name) {
  let i
  let arr1 = element.className.split(' ')
  let arr2 = name.split(' ')

  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += ' ' + arr2[i]
    }
  }
}

// Hide elements that are not selected
function removeClass(element, name) {
  let i
  let arr1 = element.className.split(' ')
  let arr2 = name.split(' ')

  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1)
    }
  }
  element.className = arr1.join(' ')
}

// Add 'highlighted' class to the current control button (highlight it)
const btnContainer = document.getElementById('btns-wrapper')
const btns = btnContainer.getElementsByClassName('btn')

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function () {
    let current = document.getElementsByClassName('highlighted')
    current[0].className = current[0].className.replace(' highlighted', '')
    this.className += ' highlighted'
  })
}

/* Animation typeWriter in title  */
const H3 = document.getElementById('role')
const txt = 'Front-End Developer.'
const speed = 200
let letter = 0

function typeWriter() {
  //if letter < txt.length writes in h3 the character in that position
  if (letter < txt.length) {
    H3.innerHTML += txt.charAt(letter)
    letter++
    setTimeout(typeWriter, speed)
  }
}

/* navigation-scroll to specific section via navbar links */
const sections = document.querySelectorAll('section')
const navLi = document.querySelectorAll('.nav-content .nav-links li a')

window.addEventListener('scroll', () => {
  let current = ''

  sections.forEach(section => {
    const sectionTop = section.offsetTop
    const sectionHeight = section.clientHeight
    if (scrollY >= sectionTop) {
      current = section.getAttribute('id')
    }
  })

  navLi.forEach(a => {
    a.classList.remove('active')
    if (a.classList.contains(current)) {
      a.classList.add('active')
    }
  })
})