From aef3559cebab10b3bcc3b6c3b9fcd69197dcdcc3 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Fri, 21 Apr 2023 21:36:12 +0100 Subject: [PATCH 1/6] Pop-Up-Window --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index ed606df..4889d81 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ Toyyib +
From 333bcea948ebad6714214b88fde1453f6d1682a2 Mon Sep 17 00:00:00 2001 From: husush23 <114058667+husush23@users.noreply.github.com> Date: Fri, 21 Apr 2023 23:48:51 +0300 Subject: [PATCH 2/6] Html file updated Html file updated --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 4889d81..e40b0b6 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@

I'm Toyyib. Glad to see you!

- -
    - -
  • - -

    Frameworks

    - - +
    + +
    +
    +
    +
+
+
+
    +

  • diamond-shape  Language

    • +
+
    +
  • JavaScript
    • +
  • Ruby
    • +
  • Nodejs
    • +
  • GoLang
    • +
  • CSS
    • - - -
    - -
  • - -

    Skills

    - - +
+
+
+
    +

  • diamond-shape  Frameworks

    • +
+
    +
  • React.js
    • +
  • Ruby on Rails
    • +
  • Expressjs
    • +
  • Nextjs
    • - - -
    - - - -
- - - - -
- -
- -
- -
- -
-

Contact me

-
- - -
-

- If you have an application you
are - interested in developing, a feature - that you need built or a project that - needs coding.
I’d love to help with it -

-
- -
- - -
- -
- - - - - - -
- - - - + +
+
+
    +

  • diamond-shape  Skills

    • +
+
    +
  • Database Management
    • +
  • Version Control
    • +
  • CLI
    • +
  • API Design
    • +
  • Web Development
    • -
-
-
-
+ +
+
+
back to the top
+ +
+
+
+

I'm always interested in hearing about new projects, so if you'd like to chat please get in touch.

+
- - -
- + +
+
+
+ +
- + + +
+
- +
+
- - + + +
- - - - + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index a5363b5..77fa67c 100644 --- a/index.js +++ b/index.js @@ -1,239 +1,275 @@ -const hamburgMenu = document.querySelector('.right-hamburger'); -const menuList = document.querySelector('.nav-li'); -const xMen = document.querySelector('.x-men'); - -hamburgMenu.addEventListener('click', () => { - menuList.classList.toggle('nav-active'); +const menuBtn = document.querySelector('#open-menu'); +const mobileMenu = document.querySelector('.mobile-nav'); +const closeBtn = document.querySelector('#close-menu'); +const menuItems = document.querySelectorAll('#mobile-menu'); + +menuBtn.addEventListener('click', () => { + menuBtn.classList.toggle('is-active'); + mobileMenu.classList.toggle('is-active'); }); -xMen.addEventListener('click', () => { - xMen.classList.toggle('nav-active'); +closeBtn.addEventListener('click', () => { + mobileMenu.classList.remove('is-active'); }); -menuList.addEventListener('click', () => { - menuList.classList.toggle('nav-active'); +menuItems.forEach((item) => { + item.addEventListener('click', () => { + mobileMenu.classList.remove('is-active'); + }); }); -// cards - -const projectDetails = [ +const cards = [ { id: 1, - name: 'Tonic', - title: 'Canopy', - stack: 'Back End Dev', - year: '2015', - description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends', - mobileImg: './assets/Snapshoot Portfolio.png', - desktopImg: './assets/first-desktop-card.png', - live: '#', - source: '#', - skills: { - skill1: 'html', - skill2: 'css', - skill3: 'javaScript', - }, + title2: 'Multi Post Stories', + title1: 'Keeping track of hundreds of components website', + title3: 'Profesional Art Printing Data', + title4: 'Data Dashboard Healthcare', + title5: 'Website Portfolio', + title6: 'Profesional Art Printing Data More', + tags: ['HTML', 'Bootstrap', 'Ruby on Rails'], + img1: './assets/Snapshoot-Portfolio.png', + img2: './assets/Snapshoot-Portfolio1.png', + description1: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent", + description2: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.", + description3: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releax map lapora verita.", + seelive: 'See live', + seesource: 'See source', }, - { id: 2, - name: 'Multi-Post Stories', - title: 'Canopy', - stack: 'Back End Dev', - year: '2015', - description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', - mobileImg: './assets/Snapshoot Portfolio 2.png', - desktopImg: './assets/second-desktop-card.png', - live: '#', - source: '#', - skills: { - skill1: 'html', - skill2: 'css', - skill3: 'javaScript', - }, + title: 'My Recent Works', + img1: './assets/pic.png', + img2: './assets/gymnst.png', + heading: 'Multi-Post Stories', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.", + description2: "A daily selection of privately personalized reads; no accounts or sign-ups required. This has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.", + tags: ['CSS', 'HTML', 'Bootstrap', 'Ruby'], + button: 'see project', }, - { id: 3, - name: 'Tonic', - title: 'Canopy', - stack: 'Back End Dev', - year: '2015', - description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', - mobileImg: './assets/Snapshoot Portfolio 3.png', - desktopImg: './assets/second-desktop-card.png', - live: '#', - source: '#', - skills: { - skill1: 'html', - skill2: 'css', - skill3: 'javaScript', - }, + img1: './assets/projects-backgound.png', + img2: './assets/whitebg.png', + title1: 'Profesional Art Printing Data', + title3: '', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', }, - { id: 4, - name: 'Multi-Post Stories', - title: 'Canopy', - stack: 'Back End Dev', - year: '2015', - description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.', - mobileImg: './assets/Snapshoot Portfolio 4.png', - desktopImg: './assets/fourth-desktop-card.png', - live: '#', - source: '#', - skills: { - skill1: 'html', - skill2: 'css', - skill3: 'javaScript', - }, + img1: './assets/projects-backgound.png', + img2: './assets/bg2.png', + title1: 'Profesional Art Printing Data', + title3: '', + title2: 'Data Dashboard Healthcare', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', + }, + { + id: 5, + img1: './assets/projects-backgound.png', + img2: './assets/bg3.png', + title1: 'Profesional Art Printing Data', + title2: '', + title3: 'Website Portfolio', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', + }, + { + id: 6, + img1: './assets/projects-backgound.png', + img2: './assets/bg4.png', + title1: 'Profesional Art Printing Data', + title2: 'Profesional Art Printing Data More', + title3: '', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', + }, + { + id: 7, + img1: './assets/projects-backgound.png', + img2: './assets/bg5.png', + title1: 'Profesional Art Printing Data', + title2: 'Data Dashboard Healthcare', + title3: '', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', + }, + { + id: 8, + img1: './assets/projects-backgound.png', + img2: './assets/bg6.png', + title1: 'Profesional Art Printing Data', + title2: '', + title3: 'Website Portfolio', + description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + tags: ['HTML', 'Bootstrap', 'Ruby'], + button: 'see project', }, - ]; -projectDetails.forEach((projects, index) => { - const section = document.createElement('div'); - const isSecond = index === 1; - const isLast = index === 3; - const reverseClass = isSecond ? 'inner-second-containerr' : ''; - const marginB = isLast ? 'inner-second-containerl' : ''; - - section.innerHTML = ` -
-
-
- - -
- -
-

${projects.name}

-
-

${projects.title}

-
    -
  • ${projects.stack}
    • -
  • ${projects.year}
    • +// function to display cardss +function displayCard(card) { + const worksElement = document.getElementById('works'); + // create the card HTML + const cardHTML = ` +
    +
    +

    ${card.title}

    +
    +
    +
    +
    +
    +

    ${card.heading}

    +

    ${card.description1}

    +
    +
      + ${card.tags.map((tag) => `
      • `).join('')}
    -
    -

    ${projects.description}

    -
    - -
      -
    • ${projects.skills.skill1}
      • -
    • ${projects.skills.skill2}
      • -
    • ${projects.skills.skill3}
      • -
    - -
    - + +
    + `; + // add the card HTML to the "works" element + worksElement.innerHTML = cardHTML; +} +displayCard(cards[1]); + +const Cards = document.querySelector('.recent'); + +function display() { + const firstCard = ` +
    +
    +
    +

    ${cards[3].title1}

    +

    ${cards[3].description1}

    +
    +
      + ${cards[3].tags.map((tag) => `
      • `).join('')} +
    - -
    - +
    +
    - -
- + `; - const sections = document.querySelector('.second-container'); - sections.append(section); - - const allButton = document.querySelectorAll('.all-button'); - const pop = document.querySelector('.pop'); - - allButton.forEach((btn) => { - btn.addEventListener('click', (e) => { - let { id } = e.target; - id = Number(id); - if (id === projects.id) { - pop.innerHTML = ` -
-
-
-

${projects.title}

-
-

${projects.title}

-
  • ${projects.stack}
-
  • ${projects.year}
-
-
- -
- -
- -
- - - -
-

${projects.description}

- -
-
  • ${projects.skills.skill1}
-
  • ${projects.skills.skill2}
-
  • ${projects.skills.skill3}
-
- -
- - -
+ let displayCard = ''; + for (let i = 3; i < cards.length; i += 1) { + displayCard += ` +
+
+
+

${cards[i].title1}

+

${cards[i].title3}

+

${cards[i].title2}

+ +

${cards[i].description1}

+
+
    + ${cards[i].tags.map((tag) => `
    • `).join('')} +
- `; - - document.querySelector('.top-container').classList.add('overlay'); - sections.classList.add('overlay'); + +
+
+ `; + } - const closeBtn = document.querySelector('.close-btn'); + const gridContainer = document.createElement('div'); + gridContainer.classList.add('grid-container'); + gridContainer.innerHTML = firstCard + displayCard; + Cards.appendChild(gridContainer); +} - closeBtn.addEventListener('click', (e) => { - e.preventDefault(); +display(); - pop.innerHTML = ''; +const popUpWindow = document.getElementById('modal'); - document.querySelector('.top-container').classList.remove('overlay'); +function popUpDisaplay(card) { + const popUp = ` +
+
+
+

${card.title2}

+

${card.title1}

+
+
+ +
+
+
+
    +
    • +
    • +
    • +
+
+
+
+ IOT-10-image + IOT-10-image2 +
+

${card.description2}

${card.description3}

+

${card.description1}

- sections.classList.remove('overlay'); - }); - } - }); + +
+
+
+
+ `; + popUpWindow.innerHTML = popUp; +} +popUpDisaplay(cards[0]); + +const openModalButtons = document.querySelectorAll('[data-modal-target]'); +const closeModalButtons = document.querySelectorAll('[data-close-button]'); +const overlay = document.getElementById('overlay'); + +function openModal(modal) { + if (modal == null) return; + modal.classList.add('active'); + overlay.classList.add('active'); +} + +function closeModal(modal) { + if (modal == null) return; + modal.classList.remove('active'); + overlay.classList.remove('active'); +} + +openModalButtons.forEach((button) => { + button.addEventListener('click', () => { + const modal = document.querySelector(button.dataset.modalTarget); + openModal(modal); }); }); -const form = document.forms[0]; -form.addEventListener('submit', (e) => { - const email = form.elements.email.value; - const errorMsg = document.querySelector('.error'); - if (email === email.toLowerCase()) { - form.onsubmit(); - } else { - errorMsg.innerHTML = 'Email should be lowercase'; - errorMsg.classList.remove('hidden'); - } - e.preventDefault(); +overlay.addEventListener('click', () => { + const modals = document.querySelectorAll('.modal.active'); + modals.forEach((modal) => { + closeModal(modal); + }); }); -const changeEvent = () => { - const userName = document.querySelector('.name-input').value; - const userEmail = document.querySelector('.email-input').value; - const message = document.querySelector('textarea').value; - const data = { - name: userName, - email: userEmail, - message, - }; - const jsonData = JSON.stringify(data); - localStorage.setItem('data', jsonData); -}; -const localData = JSON.parse(localStorage.getItem('data')); -document.querySelector('.name-input').value = localData.name; -document.querySelector('.email-input').value = localData.email; -document.querySelector('textarea').value = localData.message; - -const sendBtn = document.querySelector('.sec-btn'); -sendBtn.addEventListener('change', changeEvent); \ No newline at end of file + +closeModalButtons.forEach((button) => { + button.addEventListener('click', () => { + const modal = button.closest('#modal'); + closeModal(modal); + }); +}); \ No newline at end of file diff --git a/index.txt b/index.txt new file mode 100644 index 0000000..141de08 --- /dev/null +++ b/index.txt @@ -0,0 +1,270 @@ + + + + + + + + + + + + + Toyyib + + + + +
+ +
+ + +
+ + My Logo + + + + + +
+ +
+
+ +

I'm Toyyib. Glad to see you!

+ +

+ I’m a software developer! I can help you build a product , feature or + website Look through some of my work and
experience! If you like what + you see and have a project you need coded, don’t hestiate to contact + me. +

+ +
+ + LET'S CONNECT + +
+ +
    + +
  • twitter icon
    • +
    • +
    • +
    • +
    • + +
+ + + +
+ + +
+ +
+ + +
+ + + +
+ +
+ +
+ +

About Myself

+ +

+ I’m a software developer! I can help you build a product , feature or
+ website Look through some of my work and experience! If you like what + you see and have a project you need coded, don’t hestiate to contact + me. +

+ +
+ +

LET'S CONNECT

+ +
+ +
    + +
  • twitter icon
    • +
    • +
    • +
    • +
    • + +
+ +
+ +
+ +
+ + + +
    + +
  • + +

    Languages

    + + + +
    • + +
      + + + + + +
    • + + + +
      + + JavaScript + +
      + +
      • + +
    • + + + +
      + HTML +
      +
      • + +
    • + + + +
      + + CSS + +
      + +
      • + +
    + +
      + +
    • + +

      Frameworks

      + + + +
      • + +
      + +
    • + +

      Skills

      + + + +
      • + +
      + + + +
    + + +
+ +
+ +
+ +
+ +
+ +
+

Contact me

+
+ + +
+

+ If you have an application you
are + interested in developing, a feature + that you need built or a project that + needs coding.
I’d love to help with it +

+
+ +
+ + +
+ +
+ + + + + + +
+ + + + + +
+
+
+
+ + + +
+ +
+ +
+ +
+ + + +
+ + + + diff --git a/index2.css b/index2.css new file mode 100644 index 0000000..20760ac --- /dev/null +++ b/index2.css @@ -0,0 +1,829 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +* { + margin: 0; + padding: 0; + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: Poppins; +} + +/* error message */ +.hidden { + display: none; +} + +.wrapper { + width: 375px; + background-color: #e5e5e5; + display: grid; +} + +.top-container { + background-color: white; + border-bottom-left-radius: 10%; +} + +.header { + display: flex; + justify-content: space-between; + margin-bottom: 8%; + margin-left: 5%; + width: 85%; + margin-top: 5%; + text-align: center; +} + +/* desktop nav */ +.nav-li { + position: fixed; + height: 100vh; + z-index: 1; + right: 0; + left: 0; + top: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + overflow-y: scroll; + width: 100%; + text-align: left; + background: #6070ffba; + transform: translateY(100%); + transition: transform 0.5s ease-in; + backdrop-filter: blur(5px); + padding: 1rem; +} + +.nav-li a { + text-align: left; + margin-bottom: 3rem; + color: white; + text-decoration: none; + font-weight: bolder; + font-size: xx-large; +} + +.nav-active { + transform: translateY(0); +} + +.right-hamburger { + cursor: pointer; +} + +.x-men { + display: flex; + margin-bottom: 2rem; + justify-content: flex-end; + width: 90%; + cursor: pointer; + color: white; +} + +.left-text { + font-weight: 700; + font-style: normal; + font-size: 18px; + color: #6070ff; + text-decoration: none; + animation-name: rotation; + animation-duration: 6s; +} + +.top-body-background { + background-image: url("./assets/header-shapes\ mobile.png"); + background-size: contain; + background-position: 1ch -1em; + background-repeat: no-repeat; + display: flex; + flex-direction: column; + justify-content: center; + height: 630px; +} + +@keyframes rotation { + 0% { transform: rotate(0deg); } + 16% { transform: rotate(180deg); } + 50% { transform: rotate(360deg); } + 100% { transform: rotate(360deg); } +} + +.top-image { + /* stylelint-disable-next-line length-zero-no-unit */ + filter: blur(0px); + animation-name: rotation; + animation-duration: 6s; +} + +.top-image:hover { + filter: blur(3px); +} + +.top-body { + justify-content: center; + height: 80vh; + margin-left: 5%; +} + +.top-body h1 { + font-size: 40px; + line-height: 52px; + font-style: normal; + display: flex; + align-items: center; + font-weight: 700; + padding: 5px; + width: 70%; + color: #172b4d; +} + +.top-body p { + width: 95%; + margin-bottom: 5%; + color: #344563; +} + +.footer-connect { + margin-bottom: 5%; + color: hsl(234, 100%, 75%); + text-decoration: none; +} + +.footer-connect a { + text-decoration: none; + font-size: large; +} + +.top-footer { + width: 60%; + display: flex; + justify-content: space-between; + list-style: none; +} + +.second-container { + box-sizing: border-box; + margin-top: 5%; + padding-left: 3%; + padding-right: 3%; +} + +.inner-second-container { + padding: 4%; + margin-top: 20%; + box-shadow: rgb(163, 17, 17); + background-color: white; + border-radius: 4%; +} + +.inner-second-containerr { + padding: 4%; + margin-top: 20%; + box-shadow: rgb(163, 17, 17); + background-color: white; + border-radius: 4%; +} + +.inner-second-containerl { + padding: 4%; + box-shadow: rgb(163, 17, 17); + background-color: white; + border-radius: 4%; + margin-top: 20%; + margin-bottom: 100px; +} + +.top-image img { + width: 100%; +} + +.text-inner-container h2 { + font-weight: 800; + color: #344563; + margin-bottom: 2%; +} + +.canopy-inner-container { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +.canopy-inner-container #text1 { + padding-right: 10px; + font-size: 13px; + color: #344563; +} + +.canopy-inner-container #text { + color: #7a869a; +} + +.canopy-inner-container ul { + display: flex; + font-size: 13px; + justify-content: space-around; + width: 70%; +} + +.canopy-daily { + margin-bottom: 20px; +} + +.canopy-list { + display: flex; + justify-content: space-between; + width: 70%; +} + +.canopy-list li { + background-color: #ebebff; + border-radius: 10px; + padding: 3px 3px; + margin: 1px; + color: #6070ff; + list-style: none; +} + +.all-button { + border: 1px solid #396df2; + background-color: white; + width: 50%; + border-radius: 10px; + margin: 20px 0; + padding: 8px; + color: #396df2; + font-size: large; +} + +.all-button:hover { + background-color: rgb(91, 91, 238); + color: white; +} + +.all-button:active { + background-color: hsl(235, 72%, 48%); + color: white; +} + +.third-container { + padding: 3%; + background-color: white; + border-radius: 0 15% 0 0; +} + +.lower-body { + margin-top: 20%; + width: 90%; +} + +.lower-body h2 { + font-weight: 800; + font-size: 42px; + color: #172b4d; + margin-bottom: 15px; +} + +.lower-body p { + color: #344563; + margin-bottom: 20px; +} + +.footer-third-container { + margin-top: 10px; + margin-bottom: 10%; +} + +.footer-third-container a { + text-decoration: none; + color: #7f8cff; +} + +.lower-footer { + display: flex; + justify-content: space-between; + width: 60%; + margin-bottom: 3%; + padding-left: 15px; + list-style: none; +} + +#third-container-button { + border: 1px solid #396df2; + width: 55%; + border-radius: 10px; + margin: 20px 0; + padding: 15px 5px; + color: #396df2; + font-size: large; +} + +#third-container-button:hover { + background-color: rgb(91, 91, 238); + color: white; +} + +#third-container-button:active { + background-color: hsl(235, 72%, 48%); + color: white; +} + +.languages-container { + background-color: white; + margin-top: 0.5%; + padding: 20% 3% 15% 3%; + width: 90%; +} + +.language-container-top { + display: flex; + justify-content: space-between; + margin-bottom: 15%; +} + +#dropdown-img { + height: 8px; +} + +.dropside-img { + height: 8px; + transform: rotate(-90deg); +} + +.language-java-script { + display: flex; + justify-content: space-between; + background-color: #f7f7f9; + border-radius: 5px; + position: relative; + margin-bottom: 20px; + padding-left: 10px; + box-shadow: 10px 10px 50px 0 #d7e7f8; +} + +#javascript { + position: absolute; + top: 15px; + left: 80px; +} + +.language-html { + display: flex; + justify-content: space-between; + background-color: #f7f7f9; + border-radius: 5px; + position: relative; + margin-bottom: 20px; + padding-left: 10px; + box-shadow: 10px 10px 50px 0 #d7e7f8; +} + +#html { + position: absolute; + top: 15px; + left: 80px; +} + +.language-css { + display: flex; + justify-content: space-between; + background-color: #f7f7f9; + border-radius: 5px; + position: relative; + margin-bottom: 20px; + padding-left: 10px; + box-shadow: 10px 10px 50px 0 #d7e7f8; +} + +#css { + position: absolute; + top: 15px; + left: 80px; +} + +.language-footer { + margin-top: 40px; +} + +.language-framwork { + display: flex; + justify-content: space-between; + margin-bottom: 8%; +} + +.language-skill { + display: flex; + justify-content: space-between; + margin-bottom: 8%; +} + +.section-background { + background: white; +} + +.section { + margin-top: 20%; + background-color: #6070ff; + background-image: url("./assets/header-shapes\ mobile.png"); + background-size: contain; + background-repeat: no-repeat; + border-top-left-radius: 15%; + padding: 4% 3% 15% 3%; +} + +.contact-me-section { + margin-top: 80px; + margin-bottom: 40px; + text-align: center; + color: white; + width: 90%; +} + +.contact-me-section #contact-me { + font-weight: bold; + font-size: xx-large; + margin-bottom: 15px; +} + +#contact-me p { + font-weight: bold; + font-size: xx-large; + margin-bottom: 1px; +} + +form .text { + width: 90%; + font-size: 1.2rem; + display: flex; + padding: 3px; + border-radius: 10px; + margin-bottom: 3%; + border: none; +} + +form #type-msg { + width: 90%; + height: 20vh; + padding-left: 15px; + padding-bottom: 50%; + border-radius: 10px; + margin-bottom: 5%; + border: none; +} + +.btn-sec { + position: relative; +} + +.sec-btn { + padding: 10px 20px; + border-radius: 10px; + border: none; + color: #6070ff; + cursor: pointer; + transition: all 0.5s; +} + +.sec-btn span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +/* stylelint-disable-next-line selector-pseudo-element-colon-notation */ +.sec-btn span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +/* stylelint-disable-next-line selector-pseudo-element-colon-notation */ +.sec-btn:hover span:after { + opacity: 1; + right: 0; +} + +.sec-btn:hover span { + padding-right: 25px; +} + +.sec-btn:hover { + background-color: rgb(91, 91, 238); + color: white; +} + +.sec-btn:active { + background-color: #5a38f6; + box-shadow: 0 2px rgb(127, 160, 251); + transform: translateY(4px); +} + +.dot { + height: 30px; + width: 30px; + background-color: white; + border-radius: 50%; + display: inline-block; + position: absolute; + left: 75%; + top: 8px; +} + +.black-linen { + margin-top: 15px; + text-align: center; +} + +.bold-text { + font-weight: bold; +} + +#hr { + margin-bottom: 20px; +} + +/* Pop windows for card */ + +.pop-up { + width: 343px; + height: auto; + position: fixed; + top: 60px; + right: 5%; + bottom: 0; + left: calc(50% - 343px / 2); + overflow: scroll; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + border-radius: 10px; + background-color: #1e0404; +} + +.top { + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + margin-top: 30px; +} + +.top-1 { + width: 10px; + height: 20px; + position: relative; +} + +.overlay { + filter: blur(10px); + mix-blend-mode: multiply; + background: #c1c7d0; +} + +.error { + width: auto; + height: auto; + background-color: #fff; + color: red; + font-family: 'poppins', sans-serif; + text-align: center; + border-radius: 8px; + margin-top: 10px; +} + +@media only screen and (min-width: 768px) { + .wrapper { + width: auto; + overflow: hidden; + } + + .header { + margin-top: 1rem; + } + + .right-hamburger { + display: none; + } + + .nav-li { + display: flex; + justify-content: space-between; + } + + .nav-li > a { + text-decoration: none; + margin: 0 1rem; + } + + .top-body-background { + background-size: cover; + background-position: 2ch em; + background-repeat: no-repeat; + margin-top: 1rem; + } + + .top-body { + height: 30vh; + width: 90vw; + margin-left: 20%; + margin-bottom: 10rem; + } + + .top-body h1 { + width: 40%; + margin-top: 2rem; + } + + .top-body p { + width: 60%; + margin-bottom: 2rem; + } + + .footer-connect { + margin-bottom: 1%; + } + + .top-footer { + width: 15%; + } + + .mobile-first-card { + display: none; + } + + .inner-second-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 3.5rem; + width: 90%; + margin: 0 auto; + } + + .inner-second-containerr { + display: flex; + flex-direction: row-reverse; + width: 90%; + margin: 0 auto; + } + + .inner-second-containerl { + display: flex; + flex-direction: row-reverse; + width: 90%; + margin: 0 auto; + margin-bottom: 5%; + } + + .same { + flex: 0 0 calc(50% - 2rem); + } + + .top-image img { + width: 100%; + } + + @keyframes rotation { + 0% { transform: rotate(0deg); } + 16% { transform: rotate(180deg); } + 50% { transform: rotate(360deg); } + 100% { transform: rotate(360deg); } + } + + .top-image { + /* stylelint-disable-next-line length-zero-no-unit */ + filter: blur(0px); + animation-name: rotation; + animation-duration: 6s; + } + + .top-image:hover { + filter: blur(3px); + } + + .text-inner-container { + width: 90%; + margin-right: 5%; + } + + .canopy-inner-container { + width: 50%; + } + + .canopy-inner-container ul { + gap: 1rem; + width: 60%; + margin-left: 5%; + } + + .canopy-list { + display: flex; + justify-content: space-between; + gap: 0.2rem; + width: 45%; + } + + .canopy-list li { + padding: 8px; + } + + .all-button { + margin: 40px 0; + width: 30%; + } + + .third-container { + display: flex; + width: 95%; + margin: 0 auto; + border-radius: 0 15% 0 0; + } + + .lower-body { + width: 50%; + } + + .lower-footer { + width: 40%; + } + + .languages-container { + width: 80%; + margin-top: 1rem; + } + + .languages-tools { + margin-top: 2px; + } + + .language-li { + display: none; + } + + .section { + background-size: cover; + background-position: 2ch -8em; + background-repeat: no-repeat; + margin-top: 2rem; + } + + .contact-me-section { + margin-top: 80px; + margin-bottom: 40px; + text-align: center; + width: 70%; + } + + .contact-me-section #contact-msg { + margin-bottom: 40px; + margin-left: 50%; + text-align: center; + width: 50%; + } + + .contact-me-section #contact-me { + margin-bottom: 40px; + margin-left: 50%; + text-align: center; + width: 50%; + } + + .form-section { + width: 50%; + margin-left: 30%; + } + + form .text { + border-radius: 0%; + } + + form #type-msg { + border-radius: 0%; + width: 89%; + height: 5vh; + } + + .dot { + display: none; + } + + .sec-btn { + margin-left: 35%; + } + + .black-linen { + display: none; + } + + /* pop up */ + + .overlay { + filter: blur(10px); + mix-blend-mode: multiply; + background: #c1c7d0; + } +} diff --git a/index2.js b/index2.js new file mode 100644 index 0000000..fe52267 --- /dev/null +++ b/index2.js @@ -0,0 +1,285 @@ +const hamburgMenu = document.querySelector('.right-hamburger'); +const menuList = document.querySelector('.nav-li'); +const xMen = document.querySelector('.x-men'); + +hamburgMenu.addEventListener('click', () => { + menuList.classList.toggle('nav-active'); +}); + +xMen.addEventListener('click', () => { + xMen.classList.toggle('nav-active'); +}); + +menuList.addEventListener('click', () => { + menuList.classList.toggle('nav-active'); +}); + +// cards + +const projectDetails = [ + { + id: 1, + name: 'Tonic', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends', + mobileImg: './assets/Snapshoot Portfolio.png', + desktopImg: './assets/first-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript', + }, + }, + + { + id: 2, + name: 'Multi-Post Stories', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', + mobileImg: './assets/Snapshoot Portfolio 2.png', + desktopImg: './assets/second-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript', + }, + }, + + { + id: 3, + name: 'Tonic', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', + mobileImg: './assets/Snapshoot Portfolio 3.png', + desktopImg: './assets/second-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript', + }, + }, + + { + id: 4, + name: 'Multi-Post Stories', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.', + mobileImg: './assets/Snapshoot Portfolio 4.png', + desktopImg: './assets/fourth-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript', + }, + }, + +]; + +projectDetails.forEach((projects, index) => { + const section = document.createElement('div'); + + const isSecond = index === 1; + const isLast = index === 3; + const reverseClass = isSecond ? 'inner-second-containerr' : ''; + const marginB = isLast ? 'inner-second-containerl' : ''; + + section.innerHTML = ` +
+
+
+ + +
+ +
+

${projects.name}

+
+

${projects.title}

+
    +
  • ${projects.stack}
    • +
  • ${projects.year}
    • +
+
+ +
+

${projects.description}

+
+ +
    +
  • ${projects.skills.skill1}
    • +
  • ${projects.skills.skill2}
    • +
  • ${projects.skills.skill3}
    • +
+ +
+ +
+ +
+ +
+ +
+ + `; + + + +const popUpWindow = document.getElementById('modal'); + function popUpDisaplay(card) { + + const popUp = ` +
+
+
+

${projects.title}

+
+

${projects.title}

+
  • ${projects.stack}
+
  • ${projects.year}
+
+
+ +
+ +
+ +
+ + + +
+

${projects.description}

+ +
+
    +
  • ${projects.skills.skill1}
    • +
  • ${projects.skills.skill2}
    • +
  • ${projects.skills.skill3}
    • +
+
+ +
+ + +
+
+
+ `; + popUpWindow.innerHTML = popUp; + } + + // const sections = document.querySelector('.second-container'); + // sections.append(section); + + // const allButton = document.querySelectorAll('.all-button'); + // const pop = document.querySelector('.pop'); + + // allButton.forEach((btn) => { + // btn.addEventListener('click', (e) => { + // let { id } = e.target; + // id = Number(id); + // if (id === projects.id) { + // pop.innerHTML = ` + //
+ //
+ //
+ //

${projects.title}

+ //
+ //

${projects.title}

+ //
  • ${projects.stack}
+ //
  • ${projects.year}
+ //
+ //
+ + //
+ // + //
+ + //
+ + // + + //
+ //

${projects.description}

+ + //
+ //
  • ${projects.skills.skill1}
+ //
  • ${projects.skills.skill2}
+ //
  • ${projects.skills.skill3}
+ //
+ + //
+ // + // + //
+ //
+ //
+ // `; + + // document.querySelector('.top-container').classList.add('overlay'); + // sections.classList.add('overlay'); + + // const closeBtn = document.querySelector('.close-btn'); + + // closeBtn.addEventListener('click', (e) => { + // e.preventDefault(); + + // pop.innerHTML = ''; + + // document.querySelector('.top-container').classList.remove('overlay'); + + // sections.classList.remove('overlay'); + // }); + // } + // }); + // }); +}); + +const form = document.forms[0]; +form.addEventListener('submit', (e) => { + const email = form.elements.email.value; + const errorMsg = document.querySelector('.error'); + if (email === email.toLowerCase()) { + form.onsubmit(); + } else { + errorMsg.innerHTML = 'Email should be lowercase'; + errorMsg.classList.remove('hidden'); + } + e.preventDefault(); +}); +const changeEvent = () => { + const userName = document.querySelector('.name-input').value; + const userEmail = document.querySelector('.email-input').value; + const message = document.querySelector('textarea').value; + const data = { + name: userName, + email: userEmail, + message, + }; + const jsonData = JSON.stringify(data); + localStorage.setItem('data', jsonData); +}; +const localData = JSON.parse(localStorage.getItem('data')); +document.querySelector('.name-input').value = localData.name; +document.querySelector('.email-input').value = localData.email; +document.querySelector('textarea').value = localData.message; + +const sendBtn = document.querySelector('.sec-btn'); +sendBtn.addEventListener('change', changeEvent); \ No newline at end of file From d12c23cf7e2bc55e3b73cf47f88d526206873bd3 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Sat, 22 Apr 2023 10:23:33 +0100 Subject: [PATCH 4/6] linters corrected --- index.js | 162 +++++++++++++++++++++------------------- index2.js => index2.hbs | 0 2 files changed, 86 insertions(+), 76 deletions(-) rename index2.js => index2.hbs (100%) diff --git a/index.js b/index.js index 77fa67c..817c100 100644 --- a/index.js +++ b/index.js @@ -30,9 +30,12 @@ const cards = [ tags: ['HTML', 'Bootstrap', 'Ruby on Rails'], img1: './assets/Snapshoot-Portfolio.png', img2: './assets/Snapshoot-Portfolio1.png', - description1: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent", - description2: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.", - description3: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releax map lapora verita.", + description1: + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent', + description2: + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.', + description3: + 'Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releax map lapora verita.', seelive: 'See live', seesource: 'See source', }, @@ -42,8 +45,10 @@ const cards = [ img1: './assets/pic.png', img2: './assets/gymnst.png', heading: 'Multi-Post Stories', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.", - description2: "A daily selection of privately personalized reads; no accounts or sign-ups required. This has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. has been the industry standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.', + description2: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. This has been the industry standard dummy text ever since the 1500s, when an unknown printer took a standard dummy text.', tags: ['CSS', 'HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -53,7 +58,8 @@ const cards = [ img2: './assets/whitebg.png', title1: 'Profesional Art Printing Data', title3: '', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -64,7 +70,8 @@ const cards = [ title1: 'Profesional Art Printing Data', title3: '', title2: 'Data Dashboard Healthcare', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -75,7 +82,8 @@ const cards = [ title1: 'Profesional Art Printing Data', title2: '', title3: 'Website Portfolio', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -86,7 +94,8 @@ const cards = [ title1: 'Profesional Art Printing Data', title2: 'Profesional Art Printing Data More', title3: '', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -97,7 +106,8 @@ const cards = [ title1: 'Profesional Art Printing Data', title2: 'Data Dashboard Healthcare', title3: '', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, @@ -108,38 +118,38 @@ const cards = [ title1: 'Profesional Art Printing Data', title2: '', title3: 'Website Portfolio', - description1: "A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry's standard.", + description1: + 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry standard.', tags: ['HTML', 'Bootstrap', 'Ruby'], button: 'see project', }, ]; - // function to display cardss function displayCard(card) { const worksElement = document.getElementById('works'); // create the card HTML const cardHTML = ` -
-
+
+

${card.title}

-
+
-
-
+
+
-

${card.heading}

-

${card.description1}

-
-
    - ${card.tags.map((tag) => `
    • `).join('')} +

    ${card.heading}

    +

    ${card.description1}

    +
    +
      + ${card.tags.map((tag) => `
      • `).join('')}
    - +
`; - // add the card HTML to the "works" element + // add the card HTML to the 'works' element worksElement.innerHTML = cardHTML; } displayCard(cards[1]); @@ -148,18 +158,18 @@ const Cards = document.querySelector('.recent'); function display() { const firstCard = ` -
-
-
-

${cards[3].title1}

-

${cards[3].description1}

-
-
    - ${cards[3].tags.map((tag) => `
    • `).join('')} +
    +
    +
    +

    ${cards[3].title1}

    +

    ${cards[3].description1}

    +
    +
      + ${cards[3].tags.map((tag) => `
      • `).join('')}
    -
    - +
    +
`; @@ -167,21 +177,21 @@ function display() { let displayCard = ''; for (let i = 3; i < cards.length; i += 1) { displayCard += ` -
-
-
-

${cards[i].title1}

-

${cards[i].title3}

-

${cards[i].title2}

- -

${cards[i].description1}

-
-
    - ${cards[i].tags.map((tag) => `
    • `).join('')} +
    +
    +
    +

    ${cards[i].title1}

    +

    ${cards[i].title3}

    +

    ${cards[i].title2}

    + +

    ${cards[i].description1}

    +
    +
      + ${cards[i].tags.map((tag) => `
      • `).join('')}
    - +
    `; @@ -199,39 +209,39 @@ const popUpWindow = document.getElementById('modal'); function popUpDisaplay(card) { const popUp = ` -
    -
    -
    -

    ${card.title2}

    -

    ${card.title1}

    -
    -
    - -
    -
    -
    -
      -
      • -
      • -
      • -
    +
    +
    +
    +

    ${card.title2}

    +

    ${card.title1}

    +
    +
    + +
    -
    -
    - IOT-10-image - IOT-10-image2 +
    +
      +
      • +
      • +
      • +
    -

    ${card.description2}

    ${card.description3}

    -

    ${card.description1}

    +
    +
    + IOT-10-image + IOT-10-image2 +
    +

    ${card.description2}

    ${card.description3}

    +

    ${card.description1}

    - -
    -
    -
    + +
    +
    +
    `; popUpWindow.innerHTML = popUp; } @@ -272,4 +282,4 @@ closeModalButtons.forEach((button) => { const modal = button.closest('#modal'); closeModal(modal); }); -}); \ No newline at end of file +}); diff --git a/index2.js b/index2.hbs similarity index 100% rename from index2.js rename to index2.hbs From fb60dff98cea13ec9538395f68fcd4bf5d561fb3 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Sat, 22 Apr 2023 10:27:12 +0100 Subject: [PATCH 5/6] removed meta tag --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index c548b9e..9be0c09 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,6 @@ - Portfolio From d367af9c68bddd4be80dd86fc4579083c66fd2d5 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Sat, 22 Apr 2023 10:35:03 +0100 Subject: [PATCH 6/6] added meta tag --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9be0c09..c548b9e 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Portfolio