${message}
`; 7 | } 8 | 9 | function validateEmail(input) { 10 | const value = input.toLowerCase(); 11 | if (value.localeCompare(input) === 0) { 12 | return true; 13 | } 14 | return false; 15 | } 16 | 17 | form.addEventListener('submit', (event) => { 18 | const msg = document.querySelector('.validation-msg'); 19 | event.preventDefault(); 20 | const input = form.elements[1]; 21 | const emailValid = validateEmail(input.value); 22 | if (emailValid) { 23 | msg.remove(); 24 | form.submit(); 25 | form.reset(); 26 | } else { 27 | showMessage(input, message, false); 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /js/javascript.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('.btn-open'); 2 | const button2 = document.querySelector('.btn-close'); 3 | const menuItems = document.querySelectorAll('.menu-item2'); 4 | 5 | function display() { 6 | const menuContainer = document.querySelector('.mobile-menu-container'); 7 | menuContainer.style.display = 'block'; 8 | const buttonContainer = document.querySelector('.btn-container-open'); 9 | buttonContainer.style.display = 'none'; 10 | } 11 | 12 | function display2() { 13 | const menuContainer = document.querySelector('.mobile-menu-container'); 14 | menuContainer.style.display = 'none'; 15 | const buttonContainer = document.querySelector('.btn-container-open'); 16 | buttonContainer.style.display = 'block'; 17 | } 18 | 19 | button.addEventListener('click', display); 20 | button2.addEventListener('click', display2); 21 | 22 | menuItems.forEach((item) => { 23 | item.addEventListener('click', display2); 24 | }); 25 | -------------------------------------------------------------------------------- /images/linkedin.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /js/localStorage.js: -------------------------------------------------------------------------------- 1 | const name1 = document.querySelector('#name'); 2 | const email1 = document.querySelector('#email'); 3 | const message1 = document.querySelector('#msg'); 4 | 5 | const storeValues = (name1, email1, message1) => { 6 | const dataObject = JSON.stringify({ name1, email1, message1 }); 7 | localStorage.setItem('dataObject', dataObject); 8 | }; 9 | 10 | function populateStorage() { 11 | const formValues = JSON.parse(localStorage.getItem('dataObject')); 12 | if (formValues) { 13 | name1.value = formValues.name1; 14 | email1.value = formValues.email1; 15 | message1.value = formValues.message1; 16 | } 17 | } 18 | 19 | function getValues() { 20 | name1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 21 | email1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 22 | message1.addEventListener('input', () => storeValues(name1.value, email1.value, message1.value)); 23 | } 24 | 25 | populateStorage(); 26 | getValues(); 27 | -------------------------------------------------------------------------------- /images/github.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, [Ranjeet Singh] 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [webpage] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [webpage] is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [webpage]. 6 | 7 | THE [webpage] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [webpage] OR THE USE OR OTHER DEALINGS IN THE [webpage]. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | # Portfolio 4 | 5 | > The portfolio project is my personal portfolio website, Including my details, the previous project works, and a contact form. This website is completely responsive for mobile and desktop. 6 | 7 | ## Screenshots: 8 | 9 | ## Mobile 10 | 11 |  12 | 13 |  14 | 15 | ## Desktop 16 | 17 |  18 | 19 |  20 | 21 | Porject's features are added into seperate branch to keep main branch safe. 22 | 23 | ## Built With 24 | 25 | - HTML 26 | - CSS 27 | 28 | ## Online live link 29 | 30 | [Visit project online](https://thecodechaser.github.io/portfolio/) 31 | 32 | ## Getting Started 33 | 34 | To get a local copy up and running follow these simple example steps. 35 | 36 | ## Visit And Open Files 37 | 38 | [Visit Repo](https://github.com/thecodechaser/portfolio) 39 | 40 | ## Download Repo 41 | 42 | [Download Repo](https://github.com/thecodechaser/portfolio/archive/refs/heads/main.zip) 43 | 44 | ## Authors 45 | 46 | 👤 **Ranjeet Singh** 47 | 48 | - GitHub: [@githubhandle](https://github.com/thecodechaser) 49 | - Twitter: [@twitterhandle](https://twitter.com/thecodechaser) 50 | - LinkedIn: [LinkedIn](https://linkedin.com/in/thecodechaser) 51 | 52 | ## 🤝 Contributing 53 | 54 | Contributions, issues, and feature requests are welcome! 55 | 56 | Feel free to check the [issues page](https://github.com/thecodechaser/portfolio/issues). 57 | 58 | ## Show your support 59 | 60 | Give a ⭐️ if you like this project! 61 | 62 | ## Acknowledgments 63 | 64 | - Inspiration: Microverse 65 | 66 | ## 📝 License 67 | 68 | This project is [MIT](./MIT.md) licensed. 69 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | -------------------------------------------------------------------------------- /images/angellist.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /css/popUp.css: -------------------------------------------------------------------------------- 1 | /* pop-up styles */ 2 | 3 | .popup-container { 4 | display: none; 5 | position: fixed; 6 | z-index: 1; 7 | overflow: auto; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 100%; 12 | background-color: #c1c7d0e5; 13 | backdrop-filter: blur(2px); 14 | } 15 | 16 | .main-pu-container { 17 | margin: 40px 16px; 18 | background-color: white; 19 | border-radius: 16px; 20 | } 21 | 22 | .content-container { 23 | display: flex; 24 | flex-direction: column; 25 | margin: 10px 10px; 26 | } 27 | 28 | .heading-btn { 29 | display: flex; 30 | } 31 | 32 | .project-title-pu { 33 | color: #172b4d; 34 | font-weight: bold; 35 | font-size: 32px; 36 | line-height: 44px; 37 | margin-bottom: 10px; 38 | } 39 | 40 | .close-btn-pu { 41 | position: absolute; 42 | right: 0; 43 | top: 50px; 44 | background: transparent; 45 | cursor: pointer; 46 | width: 40px; 47 | height: 50px; 48 | border: none; 49 | font-weight: lighter; 50 | font-size: 20px; 51 | margin-right: 20px; 52 | } 53 | 54 | .devs-pu { 55 | display: flex; 56 | list-style-type: none; 57 | gap: 10px; 58 | } 59 | 60 | .dev-pu { 61 | font-style: normal; 62 | font-weight: 600; 63 | font-size: 13px; 64 | line-height: 16px; 65 | color: #344563; 66 | } 67 | 68 | .dev-pu2 { 69 | font-style: normal; 70 | font-weight: 600; 71 | font-size: 13px; 72 | line-height: 16px; 73 | color: #7a869a; 74 | } 75 | 76 | .project-img-pu { 77 | width: 100%; 78 | height: 100%; 79 | margin-top: 15px; 80 | } 81 | 82 | .project-info-pu { 83 | font-weight: normal; 84 | font-size: 15px; 85 | line-height: 24px; 86 | color: #344563; 87 | margin-top: 10px; 88 | } 89 | 90 | .tags-pu { 91 | display: flex; 92 | list-style-type: none; 93 | align-items: baseline; 94 | color: #6070ff; 95 | } 96 | 97 | .tag-pu { 98 | font-size: 15px; 99 | background-color: #ebebff; 100 | width: 80px; 101 | } 102 | 103 | .btn-container-pu { 104 | display: flex; 105 | margin-bottom: 20px; 106 | margin-top: 20px; 107 | } 108 | 109 | .btn-pu { 110 | color: #396df2; 111 | font-style: normal; 112 | text-align: center; 113 | font-weight: 500; 114 | font-size: 18px; 115 | text-decoration: none; 116 | border: 1.5px solid #396df2; 117 | width: 140px; 118 | margin-top: 15px; 119 | height: 50px; 120 | border-radius: 12px; 121 | } 122 | 123 | .btn-img-pu { 124 | margin-left: 10px; 125 | } 126 | 127 | .btn-pu.t { 128 | margin-left: 20px; 129 | } 130 | 131 | /* desktop pop-up styles */ 132 | 133 | @media (min-width: 992px) { 134 | .main-pu-container { 135 | margin: 40px 75px 40px 25px; 136 | } 137 | 138 | .project-title-pu { 139 | font-size: 40px; 140 | } 141 | 142 | .close-btn-pu { 143 | right: 60px; 144 | } 145 | 146 | .dev-pu { 147 | font-size: 14px; 148 | } 149 | 150 | .dev-pu2 { 151 | font-size: 14px; 152 | } 153 | 154 | .conatiner-pc-pu { 155 | display: flex; 156 | margin-top: 10px; 157 | justify-content: space-between; 158 | } 159 | 160 | .img-container-pu { 161 | background-color: #e5e5e5; 162 | height: 500px; 163 | margin-top: 25px; 164 | border-radius: 5px; 165 | } 166 | 167 | .project-img-pu { 168 | margin: 0 60px; 169 | width: 90%; 170 | height: 100%; 171 | } 172 | 173 | .content-container { 174 | margin: 1px 60px; 175 | } 176 | 177 | .project-info-pu { 178 | width: 75%; 179 | font-size: 17px; 180 | } 181 | 182 | .project-info-pu2 { 183 | margin-top: 10px; 184 | } 185 | 186 | .tags-pu { 187 | margin-left: 22px; 188 | } 189 | 190 | .tag-pu { 191 | font-size: 17px; 192 | } 193 | 194 | .btn-pu { 195 | margin-left: 20px; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /js/popUp.js: -------------------------------------------------------------------------------- 1 | const projects = [ 2 | { 3 | title: 'Tonic', 4 | devs: ['Ranjeet', ' • backend', ' • 2021'], 5 | description: 6 | "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, 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.", 7 | tags: ['html', 'css', 'javascript'], 8 | image: 'images/project1pu.png', 9 | liveVersion: 'See Live', 10 | sourceLink: 'See Source', 11 | btnImg1: 'images/btn-img-pu1.png', 12 | btnImg2: 'images/btn-img-pu2.png', 13 | }, 14 | 15 | { 16 | title: 'Multi-Post Stories', 17 | devs: ['Ranjeet', ' • backend', ' • 2021'], 18 | description: 19 | "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, 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.", 20 | tags: ['html', 'css', 'javascript'], 21 | image: 'images/project2.png', 22 | liveVersion: 'See Live', 23 | sourceLink: 'See Source', 24 | btnImg1: 'images/btn-img-pu1.png', 25 | btnImg2: 'images/btn-img-pu2.png', 26 | }, 27 | 28 | { 29 | title: 'Facebook 360', 30 | devs: ['Ranjeet', ' • backend', ' • 2021'], 31 | description: 32 | "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, 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.", 33 | tags: ['html', 'css', 'javascript'], 34 | image: 'images/project3.png', 35 | liveVersion: 'See Live', 36 | sourceLink: 'See Source', 37 | btnImg1: 'images/btn-img-pu1.png', 38 | btnImg2: 'images/btn-img-pu2.png', 39 | }, 40 | ]; 41 | 42 | const buttonOne = document.querySelector('.project-button.one'); 43 | const buttonTwo = document.querySelector('.project-button.two'); 44 | const buttonThree = document.querySelector('.project-button.three'); 45 | 46 | function close() { 47 | const container = document.querySelector('.popup-container'); 48 | container.style.display = 'none'; 49 | } 50 | 51 | function open(index) { 52 | const { 53 | title, 54 | devs, 55 | description, 56 | tags, 57 | image, 58 | liveVersion, 59 | sourceLink, 60 | btnImg1, 61 | btnImg2, 62 | } = projects[index]; 63 | const dev1 = devs[0]; 64 | const dev2 = devs[1]; 65 | const dev3 = devs[2]; 66 | const tags1 = tags[0]; 67 | const tags2 = tags[1]; 68 | const tags3 = tags[2]; 69 | const container = document.querySelector('.popup-container'); 70 | container.innerHTML = ` 71 |${description}
87 |
29 |
54 | 62 | I’m a software developer! I can help you build a product , feature 63 | or website Look through some of my work and experience! If you like 64 | what you see and have a project you need coded, don’t hestiate to 65 | contact me. 66 |
67 | 68 |
71 | 
75 | 
78 | 
82 | 
85 | 
96 | RANJEET
101 |• Back End Dev • 2021
102 |104 | A daily selection of privately personalized reads; no accounts or 105 | sign-ups required. 106 |
107 |
119 | RANJEET
124 |• Back End Dev • 2021
125 |127 | Copy Experimental content creation feature that allows users to 128 | add to an existing story over the course. 129 |
130 |
141 | RANJEET
146 |• Back End Dev • 2021
147 |149 | Exploring the future of media in Facebook's first Virtual Reality 150 | app; a place to discover and enjoy 360 photos. 151 |
152 |166 | Hello I’m a software developer! I can help you build a product , 167 | feature or website Look through some of my work and experience! If 168 | you like what you see and have a project you need coded, don’t 169 | hestiate to contact me. 170 |
171 | 172 |
175 |
179 |
182 |
186 |
189 | 
198 | 
202 | 
206 |