├── .gitignore ├── assets ├── icons │ ├── Icon.png │ ├── down-arrow.png │ ├── close-mobile.png │ ├── skills │ │ ├── icon-01.png │ │ ├── icon-02.png │ │ └── icon-03.png │ ├── hamburger-menu-24.png │ ├── social-icons │ │ ├── github.png │ │ ├── medium.png │ │ ├── twitter.png │ │ ├── angellist.png │ │ └── Linkedin-icon.png │ └── modal-icons │ │ └── desktop-icons │ │ ├── gitHub-icon.png │ │ └── view-source.png ├── placeholders │ └── dummy.png └── backgrounds │ ├── footer-bg.png │ ├── about-me-mobile.png │ ├── header-mobile@2x.png │ ├── desktop │ ├── footer-img-1.png │ ├── footer-img-2.png │ ├── footer-img-3.png │ ├── Header-desktop.png │ ├── about-me-left-desktop.png │ ├── about-me-right-desktop.png │ ├── illustration-about-me-2-desktop.svg │ ├── illustration-about me-1-desktop.svg │ └── Header-llustration-desktop.svg │ ├── about-me-mobile-header-bg.png │ └── project-images │ ├── project-img-mobile.png │ └── snapshoot-portfolio.png ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── js ├── storeData.js ├── script.js └── projectObject.js ├── README.md ├── .github └── workflows │ └── linters.yml ├── css └── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /assets/icons/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/Icon.png -------------------------------------------------------------------------------- /assets/icons/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/down-arrow.png -------------------------------------------------------------------------------- /assets/icons/close-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/close-mobile.png -------------------------------------------------------------------------------- /assets/placeholders/dummy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/placeholders/dummy.png -------------------------------------------------------------------------------- /assets/backgrounds/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/footer-bg.png -------------------------------------------------------------------------------- /assets/icons/skills/icon-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/skills/icon-01.png -------------------------------------------------------------------------------- /assets/icons/skills/icon-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/skills/icon-02.png -------------------------------------------------------------------------------- /assets/icons/skills/icon-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/skills/icon-03.png -------------------------------------------------------------------------------- /assets/icons/hamburger-menu-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/hamburger-menu-24.png -------------------------------------------------------------------------------- /assets/icons/social-icons/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/social-icons/github.png -------------------------------------------------------------------------------- /assets/icons/social-icons/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/social-icons/medium.png -------------------------------------------------------------------------------- /assets/icons/social-icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/social-icons/twitter.png -------------------------------------------------------------------------------- /assets/backgrounds/about-me-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/about-me-mobile.png -------------------------------------------------------------------------------- /assets/backgrounds/header-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/header-mobile@2x.png -------------------------------------------------------------------------------- /assets/icons/social-icons/angellist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/social-icons/angellist.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/footer-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/footer-img-1.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/footer-img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/footer-img-2.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/footer-img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/footer-img-3.png -------------------------------------------------------------------------------- /assets/icons/social-icons/Linkedin-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/social-icons/Linkedin-icon.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/Header-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/Header-desktop.png -------------------------------------------------------------------------------- /assets/backgrounds/about-me-mobile-header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/about-me-mobile-header-bg.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/about-me-left-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/about-me-left-desktop.png -------------------------------------------------------------------------------- /assets/backgrounds/desktop/about-me-right-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/desktop/about-me-right-desktop.png -------------------------------------------------------------------------------- /assets/icons/modal-icons/desktop-icons/gitHub-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/modal-icons/desktop-icons/gitHub-icon.png -------------------------------------------------------------------------------- /assets/icons/modal-icons/desktop-icons/view-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/icons/modal-icons/desktop-icons/view-source.png -------------------------------------------------------------------------------- /assets/backgrounds/project-images/project-img-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/project-images/project-img-mobile.png -------------------------------------------------------------------------------- /assets/backgrounds/project-images/snapshoot-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RitobrotoMukherjee/Work-Portfolio/HEAD/assets/backgrounds/project-images/snapshoot-portfolio.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "work-portfolio", 3 | "version": "1.0.0", 4 | "description": "It's a Full Stack Software Developer portfolio.", 5 | "main": "index.js", 6 | "dependencies": { 7 | "hint": "^6.1.11", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | }, 13 | "devDependencies": { 14 | "babel-eslint": "^10.1.0", 15 | "eslint": "^7.32.0", 16 | "eslint-config-airbnb-base": "^14.2.1", 17 | "eslint-plugin-import": "^2.26.0" 18 | }, 19 | "scripts": { 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/RitobrotoMukherjee/Work-Portfolio.git" 25 | }, 26 | "keywords": [], 27 | "author": "", 28 | "license": "ISC", 29 | "bugs": { 30 | "url": "https://github.com/RitobrotoMukherjee/Work-Portfolio/issues" 31 | }, 32 | "homepage": "https://github.com/RitobrotoMukherjee/Work-Portfolio#readme" 33 | } 34 | -------------------------------------------------------------------------------- /js/storeData.js: -------------------------------------------------------------------------------- 1 | const inputFields = document.querySelectorAll('.input-fields'); 2 | 3 | const getLocalDataValue = () => { 4 | if (localStorage.getItem('form-data') !== null) { 5 | return JSON.parse(localStorage.getItem('form-data')); 6 | } 7 | return false; 8 | }; 9 | 10 | const localData = getLocalDataValue(); 11 | 12 | const formDataObj = { 13 | name: localData ? localData.name : '', 14 | email: localData ? localData.email : '', 15 | message: localData ? localData.message : '', 16 | }; 17 | 18 | const dataStoreLocal = (ev) => { 19 | const { target } = ev; 20 | const value = target.value.trim(); 21 | if (target.name === 'name') { 22 | formDataObj.name = value; 23 | } 24 | if (target.name === 'email') { 25 | formDataObj.email = value; 26 | } 27 | if (target.name === 'message') { 28 | formDataObj.message = value; 29 | } 30 | return localStorage.setItem('form-data', JSON.stringify(formDataObj)); 31 | }; 32 | 33 | inputFields.forEach((item) => item.addEventListener('input', dataStoreLocal)); 34 | 35 | document.getElementById('input-name').value = formDataObj.name; 36 | document.getElementById('input-email').value = formDataObj.email; 37 | document.getElementById('input-message').value = formDataObj.message; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | It's a responsive Full Stack Software Developer portfolio. 3 | 4 | ## GitHub Pages Link 5 | 6 | - [@Ritobroto Portfolio](https://ritobrotomukherjee.github.io/Work-Portfolio/) 7 | 8 | ## Built With 9 | 10 | - HTML5 11 | - CSS3 12 | - Linter 13 | 14 | ## Getting Started 15 | 16 | - NodeJs, npm needs to be installed in system 17 | 18 | ## Install 19 | 20 | - Run ``` npm install ``` 21 | 22 | ## Authors 23 | 24 | 👤 **Ritobroto Mukherjee** 25 | 26 | - Portfolio: [@Rito](https://ritobrotomukherjee.github.io/Work-Portfolio/) 27 | - GitHub: [@RitobrotoMukherjee](https://github.com/RitobrotoMukherjee) 28 | - Twitter: [@RitobrotoM3](https://twitter.com/RitobrotoM3) 29 | - LinkedIn: [Ritobroto Mukherjee](https://www.linkedin.com/in/ritobroto-mukherjee-519148ba/) 30 | 31 | 👤 **Mohamed Jadib** 32 | 33 | - Portfolio: [@MJ](https://jadibdev.github.io/) 34 | - GitHub: [@jadibdev](https://github.com/jadibdev) 35 | - Twitter: [@MohamedJadib](https://twitter.com/MohamedJadib) 36 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/mohamed-jadib-942a5041/) 37 | 38 | ## 🤝 Contributing 39 | 40 | Contributions, issues, and feature requests are welcome! 41 | 42 | ## Show your support 43 | 44 | Give a ⭐️ if you like this project! 45 | 46 | ## Acknowledgments 47 | 48 | - Microverse: [View Site](https://www.microverse.org/) 49 | 50 | ## Code Reviewer 51 | 52 | - Eze Promise: [codepantha](https://github.com/codepantha) 53 | - Zain Sadaqat: [zainsadaqat](https://github.com/zainsadaqat) 54 | - Oluwafemi Awoyemi: [phelian23](https://github.com/phelian23) 55 | - George Magdy: [@gemmen29](https://github.com/gemmen29) -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const toggleMenuButton = document.querySelectorAll('.toggle-mobile-menu'); 2 | const seeCloseProjectButton = document.querySelectorAll('.see-close-project'); 3 | const contactForm = document.getElementById('contact-form'); 4 | const formErrorDiv = document.getElementById('error-div'); 5 | const email = document.getElementById('input-email'); 6 | 7 | const toggleDisplay = (section) => { 8 | section.classList.toggle('display-none'); 9 | }; 10 | 11 | function togglePopUp() { 12 | let div = document.querySelector('#mobile-popup'); 13 | if (window.innerWidth >= 768) { 14 | div = document.querySelector('#desktop-pop-up'); 15 | } 16 | toggleDisplay(div); 17 | } 18 | 19 | function toggleMobileMenuView() { 20 | const section = document.querySelector('#mobile-menu'); 21 | toggleDisplay(section); 22 | } 23 | 24 | toggleMenuButton.forEach((item) => { 25 | item.addEventListener('click', toggleMobileMenuView); 26 | }); 27 | 28 | seeCloseProjectButton.forEach((item) => { 29 | item.addEventListener('click', togglePopUp); 30 | }); 31 | 32 | // Form validation 33 | 34 | const validationWithMessage = () => { 35 | const errorP = document.getElementById('error-message'); 36 | if (email.value === email.value.toLowerCase()) { 37 | formErrorDiv.style.width = '0px'; 38 | formErrorDiv.style.visibility = 'hidden'; 39 | return false; 40 | } 41 | formErrorDiv.style.visibility = 'visible'; 42 | formErrorDiv.style.width = '301.865px'; 43 | errorP.textContent = `Email Has to be in lower case, You passed: ${email.value}`; 44 | return true; 45 | }; 46 | 47 | contactForm.addEventListener('submit', (ev) => { 48 | ev.preventDefault(); 49 | const error = validationWithMessage(); 50 | if (!error) { 51 | formErrorDiv.style.visibility = 'hidden'; 52 | contactForm.submit(); 53 | } 54 | }); 55 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /js/projectObject.js: -------------------------------------------------------------------------------- 1 | const getProjectListParentDiv = document.getElementById('project-lists'); 2 | const range = document.createRange(); 3 | const projectList = []; 4 | 5 | for (let i = 1; i <= 6; i += 1) { 6 | const projectObj = { 7 | name: 'Multi-Post Stories Gain+Glory', 8 | description: "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 releaLorem 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 release", 9 | featured_image: './assets/placeholders/dummy.png', 10 | technologies: ['Ruby On Rails', 'CSS', 'JavaScript', 'HTML'], 11 | live: '#', 12 | source: '#', 13 | }; 14 | projectList.push(projectObj); 15 | } 16 | 17 | // Process 1. Time Space Complexity O(log n) - Best Performance 18 | // Can be achieved same with string concatenation if not familiar with template literals. 19 | 20 | const getListHtml = (skillsArr) => skillsArr.map((item) => `
  • ${item}
    • `).join(' '); 21 | 22 | for (let index = 0; index < projectList.length; index += 1) { 23 | const html = `
    24 |
    25 | 26 |
    27 |
    28 |

    ${projectList[index].name}

    29 | 32 | 35 |
    36 |
    `; 37 | const fragment = range.createContextualFragment(html); 38 | getProjectListParentDiv.append(fragment); 39 | } 40 | 41 | // Process 2. Time Space Complexity O(n). - Ok performance 42 | // Even design pattern looks bad cause fucntion will be very big in size in case of huge div 43 | 44 | // const createMainElements = (elem, classes) => { 45 | // const mainElem = document.createElement(elem); 46 | // if (classes !== '') { 47 | // const classesList = classes.split(' '); 48 | // mainElem.classList.add(...classesList); 49 | // } 50 | // return mainElem; 51 | // }; 52 | 53 | // for (let index = 0; index < projectList.length; index += 1) { 54 | // const mainDiv = createMainElements('div', 'portfolio-grid-items card'); 55 | 56 | // const imageContainer = createMainElements('div', 'image-container'); 57 | 58 | // const image = createMainElements('img', ''); 59 | // image.src = projectList[index].featured_image; 60 | // image.alt = `Project ${index + 1} image`; 61 | // imageContainer.appendChild(image); 62 | 63 | // const projectDesc = createMainElements('div', 'project-description text-center'); 64 | 65 | // const title = createMainElements('h3', 'title-header'); 66 | // title.textContent = projectList[index].name; 67 | 68 | // const technologies = createMainElements('ul', 'category-list'); 69 | // for (let i = 0; i < projectList[index].technologies.length; i += 1) { 70 | // const li = createMainElements('li', 'category-items'); 71 | // li.textContent = projectList[index].technologies[i]; 72 | // technologies.appendChild(li); 73 | // } 74 | 75 | // const button = createMainElements('button', 'button text-center see-close-project'); 76 | // button.type = 'button'; 77 | // button.id = `project-${index + 1}`; 78 | // button.dataProjectIndex = index; 79 | // button.textContent = 'See Project'; 80 | 81 | // projectDesc.appendChild(title); 82 | // projectDesc.appendChild(technologies); 83 | // projectDesc.appendChild(button); 84 | 85 | // mainDiv.appendChild(imageContainer); 86 | // mainDiv.appendChild(projectDesc); 87 | 88 | // getProjectListParentDiv.append(mainDiv); 89 | // } -------------------------------------------------------------------------------- /assets/backgrounds/desktop/illustration-about-me-2-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /assets/backgrounds/desktop/illustration-about me-1-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Inter', sans-serif; 7 | } 8 | 9 | .display-none { 10 | display: none; 11 | } 12 | 13 | ul { 14 | list-style: none; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | color: #42526e; 20 | } 21 | 22 | a:hover { 23 | color: #36b37f; 24 | } 25 | 26 | .button { 27 | height: 45px; 28 | width: 120px; 29 | border-radius: 4px; 30 | border-color: #36b37f; 31 | padding: 10px; 32 | color: #fff; 33 | background-color: #008552; 34 | } 35 | 36 | .button-enabled { 37 | background-color: #36b37f; 38 | } 39 | 40 | .button:hover { 41 | background-color: #36b37f; 42 | } 43 | 44 | .button:active { 45 | background-color: #008552; 46 | } 47 | 48 | .long-btn { 49 | width: 150px; 50 | } 51 | 52 | .card:hover { 53 | box-shadow: 1px 5px 10px 5px rgb(225, 220, 220); 54 | } 55 | 56 | #mobile-navbar { 57 | display: flex; 58 | justify-content: space-between; 59 | align-items: center; 60 | flex-wrap: wrap; 61 | padding: 15px 20px; 62 | } 63 | 64 | .mobile-menu-background { 65 | background: #e5e5e5; 66 | height: 100vh; 67 | z-index: 1; 68 | position: fixed; 69 | top: 0; 70 | left: 0; 71 | width: 100%; 72 | } 73 | 74 | .menu-mobile-div { 75 | position: relative; 76 | background: #fff; 77 | height: 100vh; 78 | border-bottom-left-radius: 95px; 79 | border-bottom-right-radius: 95px; 80 | } 81 | 82 | .close-menu { 83 | position: absolute; 84 | right: 29px; 85 | top: 32px; 86 | color: #67798e; 87 | cursor: pointer; 88 | font-size: 14px; 89 | } 90 | 91 | .mobile-menu { 92 | display: flex; 93 | flex-direction: column; 94 | text-align: justify; 95 | padding: 76px 28px; 96 | } 97 | 98 | .mobile-menu-items { 99 | font-weight: 600; 100 | font-size: 32px; 101 | line-height: 44px; 102 | color: #3a4a42; 103 | margin-top: 30px; 104 | } 105 | 106 | .mobile-menu-items:first-child { 107 | margin-top: 10px; 108 | } 109 | 110 | .welcome-logo { 111 | font-style: normal; 112 | font-weight: 600; 113 | font-size: 20px; 114 | line-height: 28px; 115 | color: #28352f; 116 | text-decoration: none; 117 | } 118 | 119 | .menu-link { 120 | color: #505f79; 121 | height: 26px; 122 | display: flex; 123 | justify-content: center; 124 | align-items: center; 125 | list-style-type: none; 126 | } 127 | 128 | .dektop-menu-items { 129 | margin: 0 15px; 130 | transition: margin 0.75s, transform 1s; 131 | } 132 | 133 | .form-errors { 134 | color: rgb(197, 6, 6); 135 | border: 1px solid rgb(201, 35, 35); 136 | padding: 10px; 137 | border-radius: 4px; 138 | overflow: hidden; 139 | font-weight: bold; 140 | margin: 5px 0; 141 | visibility: hidden; 142 | width: 0%; 143 | transition: visibility 1s, width 2s; 144 | } 145 | 146 | .error-paragraph { 147 | font-size: 10px; 148 | line-height: 14px; 149 | padding: 10px 10px; 150 | } 151 | 152 | .main-section { 153 | background-image: url("../assets/backgrounds/header-mobile@2x.png"); 154 | background-repeat: no-repeat; 155 | background-position: center center; 156 | background-size: cover; 157 | display: flex; 158 | justify-content: center; 159 | align-items: center; 160 | flex-direction: column; 161 | min-height: 100px; 162 | top: 92px; 163 | } 164 | 165 | .section-basic { 166 | display: flex; 167 | flex-direction: column; 168 | justify-content: center; 169 | align-items: center; 170 | min-height: 100px; 171 | min-width: auto; 172 | padding: 10px; 173 | } 174 | 175 | .main-content-margin-div { 176 | margin: 40px auto; 177 | } 178 | 179 | .about-me-section-bg { 180 | background-image: url("../assets/backgrounds/about-me-mobile.png"), url("../assets/backgrounds/about-me-mobile-header-bg.png"); 181 | background-repeat: no-repeat no-repeat; 182 | background-position: bottom left, top right; 183 | } 184 | 185 | .text-center { 186 | text-align: center; 187 | } 188 | 189 | .color-deep-blue { 190 | color: #172b4d; 191 | } 192 | 193 | .color-theme-green { 194 | color: #36b37f; 195 | } 196 | 197 | #header-first { 198 | animation: slideInRight 2s; 199 | } 200 | 201 | #header-second { 202 | animation: slideInRight 6s; 203 | } 204 | 205 | @keyframes slideInRight { 206 | 0% { 207 | margin-left: 100%; 208 | width: 200%; 209 | } 210 | 211 | 100% { 212 | margin-left: 0%; 213 | width: 100%; 214 | } 215 | } 216 | 217 | .portfolio-heading::after { 218 | width: 48px; 219 | height: 4px; 220 | margin: 25px auto; 221 | top: 100%; 222 | background-color: #36b37e; 223 | border: 1px solid #36b37f; 224 | border-radius: 24px; 225 | display: block; 226 | content: ''; 227 | } 228 | 229 | .primary-header-text { 230 | font-weight: 700; 231 | font-size: 40px; 232 | line-height: 52px; 233 | margin: 0 25px; 234 | } 235 | 236 | .section-main-content-margin { 237 | margin: 25px 0; 238 | width: 100%; 239 | } 240 | 241 | .heading-supporting-text { 242 | font-weight: 400; 243 | font-size: 20px; 244 | line-height: 28px; 245 | padding: 0 20px; 246 | } 247 | 248 | .social-media { 249 | color: #505f79; 250 | height: 20px; 251 | display: flex; 252 | justify-content: center; 253 | align-items: center; 254 | list-style-type: none; 255 | } 256 | 257 | .social-media-flex-item { 258 | margin: 0 12px; 259 | } 260 | 261 | .social-media-flex-item:hover { 262 | background-color: #46e8aa; 263 | } 264 | 265 | .scroll-btn { 266 | background: #fff; 267 | border: 1px solid #dfe1e6; 268 | border-radius: 32px; 269 | width: 40px; 270 | height: 40px; 271 | padding: 8px; 272 | } 273 | 274 | .scroll-btn > img { 275 | height: 24px; 276 | width: 22px; 277 | } 278 | 279 | .scroll-btn:hover { 280 | color: #36b37f; 281 | } 282 | 283 | .scroll-btn:active { 284 | color: #008552; 285 | } 286 | 287 | .color-success { 288 | color: #36b37e; 289 | } 290 | 291 | .css-grid { 292 | min-height: 100px; 293 | min-width: 75%; 294 | display: grid; 295 | gap: 10px; 296 | grid-template-columns: repeat(auto-fit, 310px); 297 | justify-content: center; 298 | padding: 4px 15px; 299 | } 300 | 301 | .portfolio-grid-items { 302 | display: flex; 303 | flex-direction: column; 304 | align-content: center; 305 | justify-content: center; 306 | align-items: center; 307 | border: 1px solid #d0d9d4; 308 | border-radius: 8px; 309 | background: #ebf0ee; 310 | min-height: 450px; 311 | } 312 | 313 | .skills-grid-items { 314 | display: flex; 315 | flex-direction: column; 316 | align-content: center; 317 | justify-content: center; 318 | align-items: center; 319 | border: 1px solid #d0d9d4; 320 | border-radius: 8px; 321 | background: #ebf0ee; 322 | min-height: 350px; 323 | } 324 | 325 | .image-container { 326 | height: 55%; 327 | width: auto; 328 | } 329 | 330 | .image-container > img { 331 | width: 100%; 332 | border-radius: 7px; 333 | object-fit: cover; 334 | } 335 | 336 | .mobile-popup-close { 337 | position: absolute; 338 | top: 24px; 339 | right: 24px; 340 | cursor: pointer; 341 | } 342 | 343 | .project-description { 344 | background-color: #ffff; 345 | border-top: 1px solid #ffff; 346 | border-radius: 8px; 347 | height: 45%; 348 | width: 100%; 349 | text-align: center; 350 | display: flex; 351 | flex-direction: column; 352 | align-items: center; 353 | justify-content: space-around; 354 | padding: 12px 0; 355 | } 356 | 357 | .category-list { 358 | color: #ebf0ee; 359 | display: flex; 360 | justify-content: space-between; 361 | align-items: center; 362 | flex-wrap: wrap; 363 | list-style-type: none; 364 | } 365 | 366 | .title-header { 367 | font-weight: 600; 368 | font-size: 24px; 369 | line-height: 32px; 370 | color: #3a4a42; 371 | } 372 | 373 | .category-items { 374 | background: #ebf0ee; 375 | border-radius: 4px; 376 | padding: 8px 12px; 377 | font-weight: 600; 378 | font-size: 10px; 379 | letter-spacing: 0.01em; 380 | color: #3a4a42; 381 | margin: 3px; 382 | } 383 | 384 | .image-container-skills { 385 | height: auto; 386 | width: auto; 387 | padding: 20px; 388 | margin-bottom: 30px; 389 | } 390 | 391 | .skill-icons { 392 | height: 62px; 393 | width: 62px; 394 | background: #fff; 395 | box-shadow: 0 16px 24px rgba(37, 47, 137, 0.08); 396 | display: flex; 397 | justify-content: center; 398 | align-items: center; 399 | border: 1px solid #dfe1e6; 400 | border-radius: 40px; 401 | } 402 | 403 | .skill-icons > img { 404 | width: 60%; 405 | } 406 | 407 | .skill-desc { 408 | display: flex; 409 | flex-direction: column; 410 | justify-content: space-around; 411 | align-items: center; 412 | height: 45%; 413 | width: 100%; 414 | text-align: center; 415 | padding: 10px 0; 416 | } 417 | 418 | .skill-list { 419 | color: #36b37e; 420 | display: flex; 421 | justify-content: space-evenly; 422 | align-items: center; 423 | align-content: center; 424 | flex-wrap: wrap; 425 | list-style-type: none; 426 | padding: 1px; 427 | } 428 | 429 | .skill-items { 430 | background: #fff; 431 | border-radius: 4px; 432 | padding: 8px 12px; 433 | font-weight: 600; 434 | font-size: 10px; 435 | letter-spacing: 0.01em; 436 | color: #36b37e; 437 | margin: 3px; 438 | } 439 | 440 | footer { 441 | display: flex; 442 | align-items: center; 443 | justify-content: center; 444 | flex-direction: column; 445 | min-height: 100px; 446 | } 447 | 448 | .footer-main-div { 449 | display: flex; 450 | align-items: center; 451 | justify-content: center; 452 | flex-wrap: wrap; 453 | min-height: 100px; 454 | width: 100%; 455 | background-image: url("../assets/backgrounds/footer-bg.png"); 456 | background-repeat: no-repeat; 457 | background-position: bottom right; 458 | } 459 | 460 | .contact-form-margin { 461 | margin: 10px 0; 462 | width: 100%; 463 | } 464 | 465 | .contact-form { 466 | display: flex; 467 | justify-content: center; 468 | align-items: center; 469 | flex-direction: column; 470 | padding: 30px; 471 | } 472 | 473 | .form-controls { 474 | width: 100%; 475 | margin: 10px auto; 476 | padding: 5px; 477 | } 478 | 479 | input[type=text], 480 | input[type=email] { 481 | background: #fff; 482 | border: 1px solid #d0d9d4; 483 | box-sizing: border-box; 484 | border-radius: 4px; 485 | height: 35px; 486 | } 487 | 488 | textarea { 489 | background: #fff; 490 | border: 1px solid #60c095; 491 | box-sizing: border-box; 492 | border-radius: 4px; 493 | height: 80px; 494 | } 495 | 496 | .social-media-contact { 497 | display: flex; 498 | justify-content: space-between; 499 | align-items: center; 500 | color: #505f79; 501 | width: 80%; 502 | margin: 1px auto; 503 | height: 20px; 504 | list-style-type: none; 505 | } 506 | 507 | .social-media-contact > li { 508 | flex: 1 1 20%; 509 | } 510 | 511 | .footer-email { 512 | font-weight: 400; 513 | font-size: 20px; 514 | line-height: 32px; 515 | width: 75%; 516 | } 517 | 518 | .footer-email:hover { 519 | background-color: #36b37f; 520 | color: #fff; 521 | } 522 | 523 | #dektop-navbar { 524 | display: none; 525 | } 526 | 527 | .dektop-menu-items:hover { 528 | text-decoration-color: #36b37f; 529 | margin: 0 20px; 530 | transform: scale(2); 531 | } 532 | 533 | #desktop-footer-social-links { 534 | display: none; 535 | } 536 | 537 | .footer-image-holder { 538 | display: none; 539 | } 540 | 541 | /* mobile popup css */ 542 | .mobile-popup { 543 | background: #c1c7d0; 544 | position: fixed; 545 | padding: 10px; 546 | top: 0; 547 | left: 0; 548 | right: 0; 549 | bottom: 0; 550 | overflow-y: auto; 551 | } 552 | 553 | .mobile-popup-body { 554 | background: white; 555 | padding: 10px; 556 | border-radius: 8px; 557 | text-align: justify; 558 | position: relative; 559 | } 560 | 561 | .mobile-popup-title { 562 | width: 70%; 563 | } 564 | 565 | .category-list-modal { 566 | display: flex; 567 | flex-direction: row; 568 | } 569 | 570 | .mobile-popup-butttons { 571 | display: flex; 572 | gap: 5%; 573 | width: 100%; 574 | } 575 | 576 | .modal-project-button { 577 | display: flex; 578 | align-items: center; 579 | justify-content: space-around; 580 | width: 160px; 581 | } 582 | 583 | .modal-body-items { 584 | margin: 10px 0; 585 | } 586 | 587 | .image-container-mobile { 588 | height: 55%; 589 | width: auto; 590 | position: relative; 591 | } 592 | 593 | .image-container-mobile .mobile-popup-img { 594 | width: 100%; 595 | border-radius: 7px; 596 | object-fit: cover; 597 | } 598 | 599 | @media screen and (min-width: 768px) { 600 | body { 601 | background-image: url("../assets/backgrounds/desktop/Header-desktop.png"); 602 | background-size: 100%; 603 | background-repeat: no-repeat; 604 | } 605 | 606 | #mobile-menu { 607 | display: none; 608 | } 609 | 610 | .footer-main-div { 611 | flex-wrap: nowrap; 612 | justify-content: center; 613 | background-image: none; 614 | width: 85%; 615 | } 616 | 617 | .footer-image-holder { 618 | position: relative; 619 | display: inline-block; 620 | min-height: 200px; 621 | width: 100%; 622 | } 623 | 624 | .contact-image-one { 625 | position: absolute; 626 | right: 0; 627 | bottom: 0; 628 | } 629 | 630 | .contact-image-two { 631 | position: absolute; 632 | left: 25%; 633 | bottom: 45%; 634 | } 635 | 636 | .contact-image-three { 637 | position: absolute; 638 | left: 0; 639 | bottom: 2%; 640 | } 641 | 642 | .about-me-section-bg { 643 | background-image: url("../assets/backgrounds/desktop/about-me-left-desktop.png"), url("../assets/backgrounds/desktop/about-me-right-desktop.png"); 644 | background-position: bottom left, top right; 645 | } 646 | 647 | .main-section { 648 | background-image: none; 649 | background-size: 99vw; 650 | min-height: 800px; 651 | } 652 | 653 | #mobile-navbar { 654 | display: none; 655 | } 656 | 657 | #mobile-footer-email, 658 | .social-media-contact { 659 | display: none; 660 | } 661 | 662 | #dektop-navbar { 663 | display: flex; 664 | position: absolute; 665 | left: 50%; 666 | padding: 35px 12px; 667 | margin-left: -140px; 668 | font-weight: 600; 669 | font-size: 15px; 670 | animation-name: slideInLeft; 671 | animation-duration: 3s; 672 | } 673 | 674 | @keyframes slideInLeft { 675 | 0% { 676 | left: 0%; 677 | } 678 | 679 | 50% { 680 | font-size: 20px; 681 | } 682 | 683 | 100% { 684 | left: 50%; 685 | font-size: 15px; 686 | } 687 | } 688 | 689 | .main-content-margin-div { 690 | width: 75%; 691 | } 692 | 693 | .heading-supporting-text { 694 | max-width: 90%; 695 | } 696 | 697 | #footer-heading { 698 | flex-grow: 1; 699 | } 700 | 701 | #footer-form { 702 | flex-grow: 2; 703 | } 704 | 705 | #footer-heading > h2 { 706 | font-size: 30px; 707 | text-align: justify; 708 | } 709 | 710 | #footer-heading > h2::after { 711 | display: none; 712 | } 713 | 714 | .contact-form { 715 | align-items: flex-start; 716 | } 717 | 718 | #desktop-footer-social-links { 719 | display: block; 720 | width: 100%; 721 | padding: 25px 0; 722 | border-top: 1px solid #dfe1e6; 723 | } 724 | 725 | .contact-images-desktop { 726 | display: inline-block; 727 | } 728 | 729 | .desktop-pop-up { 730 | position: fixed; 731 | background: #c1c7d0; 732 | z-index: 1; 733 | top: 0; 734 | left: 0; 735 | bottom: 0; 736 | width: 100%; 737 | padding: 30px 0; 738 | overflow-y: auto; 739 | } 740 | 741 | .desktop-modal-body { 742 | position: relative; 743 | background: #fff; 744 | border: 1px solid #ebecf0; 745 | box-shadow: 0 48px 48px rgba(37, 47, 137, 0.08); 746 | border-radius: 8px; 747 | width: 920px; 748 | margin: auto auto; 749 | padding: 40px 20px; 750 | display: flex; 751 | flex-direction: column; 752 | } 753 | 754 | .close-desktop-modal { 755 | position: absolute; 756 | top: 16px; 757 | right: 28px; 758 | cursor: pointer; 759 | } 760 | 761 | .desktop-project-image-holder > img { 762 | width: 100%; 763 | } 764 | 765 | .desktop-project-title { 766 | display: flex; 767 | justify-content: space-between; 768 | } 769 | 770 | .project-description-text { 771 | font-weight: 400; 772 | font-size: 20px; 773 | line-height: 28px; 774 | } 775 | 776 | .desktop-butttons-span { 777 | display: inline-block; 778 | font-weight: 600; 779 | } 780 | 781 | .desktop-title-buttons { 782 | display: flex; 783 | align-items: center; 784 | gap: 5%; 785 | } 786 | } 787 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Portfolio: Software Developer 9 | 10 | 11 | 12 | 13 |
    14 | 22 | 35 | 36 | 54 |
    55 | 56 |
    57 |
    58 |
    59 |

    Hey there. I’m Ritobroto

    60 |

    I’m a software developer

    61 |
    62 |
    63 |

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

    68 |
    69 |
    70 | 97 |
    98 |
    99 | 102 |
    103 |
    104 | 105 |
    106 |
    107 |

    My Recent Works

    108 |
    109 |
    110 | 111 |
    112 |
    113 | 114 |
    115 |
    116 |
    117 |

    About me

    118 |
    119 |
    120 |

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

    124 |
    125 |
    126 | 127 |
    128 |
    129 |
    130 | 131 |
    132 | 185 |
    186 | 187 |
    188 | 189 | 190 | 281 | 282 | 283 | 321 | 322 | 323 | 356 | 357 | 358 | 359 | 360 | 361 | -------------------------------------------------------------------------------- /assets/backgrounds/desktop/Header-llustration-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | --------------------------------------------------------------------------------