├── .gitignore ├── .vscode └── settings.json ├── images ├── me.jpeg ├── Ellipse1.png ├── Ellipse2.png ├── Ellipse3.png ├── contactbg.png ├── desktop │ ├── c.png │ ├── herobg.png │ ├── contactbg.png │ └── todolists.jpg ├── icon_head.jpg ├── icons │ ├── Icon.png │ └── Vector.png ├── real_todo.png ├── header-shapes.png ├── Snapshoot-Portfolio.png ├── Snapshoot-Portfolio2.png ├── Snapshoot-Portfolio3.png └── Snapshoot-Portfolio4.png ├── murple_logo.png ├── app_screenshot.png ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── licence ├── MIT.md ├── .github └── workflows │ └── linters.yml ├── README.md ├── index.js ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | node_modules 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /images/me.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/me.jpeg -------------------------------------------------------------------------------- /murple_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/murple_logo.png -------------------------------------------------------------------------------- /app_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/app_screenshot.png -------------------------------------------------------------------------------- /images/Ellipse1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Ellipse1.png -------------------------------------------------------------------------------- /images/Ellipse2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Ellipse2.png -------------------------------------------------------------------------------- /images/Ellipse3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Ellipse3.png -------------------------------------------------------------------------------- /images/contactbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/contactbg.png -------------------------------------------------------------------------------- /images/desktop/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/desktop/c.png -------------------------------------------------------------------------------- /images/icon_head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/icon_head.jpg -------------------------------------------------------------------------------- /images/icons/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/icons/Icon.png -------------------------------------------------------------------------------- /images/real_todo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/real_todo.png -------------------------------------------------------------------------------- /images/icons/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/icons/Vector.png -------------------------------------------------------------------------------- /images/desktop/herobg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/desktop/herobg.png -------------------------------------------------------------------------------- /images/header-shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/header-shapes.png -------------------------------------------------------------------------------- /images/desktop/contactbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/desktop/contactbg.png -------------------------------------------------------------------------------- /images/desktop/todolists.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/desktop/todolists.jpg -------------------------------------------------------------------------------- /images/Snapshoot-Portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Snapshoot-Portfolio.png -------------------------------------------------------------------------------- /images/Snapshoot-Portfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Snapshoot-Portfolio2.png -------------------------------------------------------------------------------- /images/Snapshoot-Portfolio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Snapshoot-Portfolio3.png -------------------------------------------------------------------------------- /images/Snapshoot-Portfolio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KUBAHO3/My-Portfolio/HEAD/images/Snapshoot-Portfolio4.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 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/KUBAHO3/My-Portfolio.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/KUBAHO3/My-Portfolio/issues" 18 | }, 19 | "homepage": "https://github.com/KUBAHO3/My-Portfolio#readme", 20 | "devDependencies": { 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.32.0", 23 | "eslint-config-airbnb-base": "^14.2.1", 24 | "eslint-plugin-import": "^2.27.5", 25 | "hint": "^7.1.3", 26 | "stylelint": "^13.13.1", 27 | "stylelint-config-standard": "^21.0.0", 28 | "stylelint-csstree-validator": "^1.9.0", 29 | "stylelint-scss": "^3.21.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /licence: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 KUBAHO LINNE Heaven 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, [YOUR NAME] 2 | 3 | ###### Please delete this line and the next one 4 | ###### APP TYPE can be a webpage/website, a web app, a software and so on 5 | 6 | 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 [APP TYPE] 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 [APP TYPE] is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [APP TYPE]. 9 | 10 | THE [APP TYPE] 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 [APP TYPE] OR THE USE OR OTHER DEALINGS IN THE [APP TYPE]. 11 | -------------------------------------------------------------------------------- /.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-22.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-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.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-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "18.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-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "18.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 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | 28 |
29 | 30 | 31 |
32 | 33 |

My Portfolio

34 | 35 |
36 | 37 | 38 | 39 | # 📗 Table of Contents 40 | 41 | - [📖 About the Project](#about-project) 42 | - [🛠 Built With](#built-with) 43 | - [Tech Stack](#tech-stack) 44 | - [Key Features](#key-features) 45 | - [🚀 Live Demo](#live-demo) 46 | - [🦻 Walkthrough Video](#walkthrough-demo) 47 | - [💻 Getting Started](#getting-started) 48 | - [Setup](#setup) 49 | - [Prerequisites](#prerequisites) 50 | - [Install](#install) 51 | - [Usage](#usage) 52 | - [Run tests](#run-tests) 53 | - [Deployment](#triangular_flag_on_post-deployment) 54 | - [👥 Authors](#authors) 55 | - [🔭 Future Features](#future-features) 56 | - [🤝 Contributing](#contributing) 57 | - [⭐️ Show your support](#support) 58 | - [🙏 Acknowledgements](#acknowledgements) 59 | - [❓ FAQ (OPTIONAL)](#faq) 60 | - [📝 License](#license) 61 | 62 | 63 | 64 | # 📖 My Portfolio 65 | 66 | This project is about creating a personal portfolio to showcase my activities, background and experience. 67 | 68 | **My Portfolio** is a simple Html&CSS-based portfolio 69 | 70 | ## :hammer_and_wrench: Built With 71 | - HTML 72 | - CSS 73 | ### Tech Stack 74 |
75 | Version Control 76 | 79 |
80 |
81 | Visual Studio Code 82 | 85 |
86 |
87 | Client 88 | 92 |
93 | 94 | 95 | 96 | ### Key Features 97 | 98 | - **Linters SetUp** 99 | - **Follow HTML and CSS best practice** 100 | - **Display Text** 101 | - **Display Cards** 102 | - **Display Text** 103 | - **Hoover Buttons** 104 | - **Desktop Version** 105 | - **Include Animations** 106 | - **Deployed with GithubPages** 107 | - **Mobile Nav** 108 | - **Detail modal** 109 | - **Email validation** 110 | - **store form data in local storage** 111 | 112 |

(back to top)

113 | 114 | 115 | 116 | ## 🚀 Live Demo 117 | 118 | - [Live Demo Link](https://kubaho3.github.io/My-Portfolio/) 119 | 120 |

(back to top)

121 | 122 | 123 | 124 | ## 🦻 WalkThrough Video 125 | 126 | - [WalkThrough Video Link](https://www.loom.com/share/1f95cd1e242946fe80a7c0cb469aeb48) 127 | 128 |

(back to top)

129 | 130 | 131 | 132 | ## 💻 Getting Started 133 | 134 | To get a local copy up and running, follow these steps. 135 | 136 | ### Prerequisites 137 | 138 | In order to run this project you need: 139 | - Visual Studio Code. 140 | - Node JS. 141 | - Git bash. 142 | - GitHub Account. 143 | 144 | 150 | ### Setup 151 | 152 | Clone this repository to your desired folder: 153 | Use git clone command or download ZIP folder 154 | 155 | 163 | ### Install 164 | Install this project with: 165 | npm 166 | Example command: 167 | ```sh 168 | cd my-project 169 | npm init -y 170 | ``` 171 | ### Usage 172 | To run the project, execute the following command: 173 | npm start or live server 174 | Example command: 175 | ```sh 176 | GitHub Pages Server 177 | ``` 178 | ### Run tests 179 | To run tests, run the following command: 180 | npm test 181 | Example command: 182 | ```sh 183 | npx stylelint "**/*.{css,scss}" 184 | ``` 185 | ### Deployment 186 | You can deploy this project using: 187 | GitHub Pages 188 | Example: 189 | ```sh 190 | git@github.com:KUBAHO3/My-Portfolio.git 191 | ``` 192 |

(back to top)

193 | 194 | ## :busts_in_silhouette: Authors 195 | :bust_in_silhouette: **KUBAHO LINNE Heaven** 196 | - GitHub: [@KUBAHO3](https://github.com/KUBAHO3) 197 | - Twitter: [@KubahoH](https://twitter.com/KubahoH) 198 | - LinkedIn: [Kubaho Linne Heaven](https://www.linkedin.com/in/kubaho-linne-heaven-78ab37208/) 199 |

(back to top)

200 | 201 | 202 | ## :telescope: Future Features
203 | - [ ] **Adding BackEnd**
204 | - [ ] **Making it stylish** 205 |

(back to top)

206 | 207 | 208 | ## :handshake: Contributing 209 | Contributions, issues, and feature requests are welcome!
210 | Feel free to check the [git@github.com:KUBAHO3/My-Portfolio.git](../../issues/). 211 |

(back to top)

212 | 213 | 214 | ## :star:️ Show your support 215 | If you like this project please follow me on github & twitter and also connect on Linkedin. 216 |

(back to top)

217 | 218 | 219 | ## :pray: Acknowledgments 220 | I would like to thank Microverse for this exercise. 221 |

(back to top)

222 | 223 | 224 | ## :question: FAQ (OPTIONAL)
225 | - **How long can it take to build that project** 226 | 227 | - 1-2hrs according to personal skills 228 | 229 | - **Where to find figma for that project!** 230 | 231 | - Figma for that project will be available soon! 232 |

(back to top)

233 | 234 | 235 | ## 📝 License 236 | 237 | This project is [MIT](https://github.com/KUBAHO3/My-Portfolio/blob/add-license-1/licence) licensed. 238 | 239 | 240 |

(back to top)

-------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function ReadElement(selector) { 2 | return document.querySelector(selector); 3 | } 4 | 5 | const menu = ReadElement('#menu-icon'); 6 | const nav = ReadElement('.mobile-nav'); 7 | const WorkModal = ReadElement('.modal-section'); 8 | const closeNav = ReadElement('.close-button'); 9 | const viewModal1 = ReadElement('.view-modal1'); 10 | const viewModal2 = ReadElement('.view-modal2'); 11 | const viewModal3 = ReadElement('.view-modal3'); 12 | const viewModal4 = ReadElement('.view-modal4'); 13 | const emailer = ReadElement('#useremail'); 14 | const uname = ReadElement('#username'); 15 | const message = ReadElement('#description'); 16 | const validator = ReadElement('.validator'); 17 | const submitbtn = ReadElement('#submit-form'); 18 | 19 | let myMessage; 20 | let userName; 21 | let email; 22 | 23 | let userData = []; 24 | 25 | function UpdateInput(selected) { 26 | function myFunction() { 27 | email = emailer.value; 28 | userName = uname.value; 29 | myMessage = message.value; 30 | userData = [userName, email, myMessage]; 31 | localStorage.setItem('userData', userData); 32 | } 33 | selected.addEventListener('change', myFunction); 34 | } 35 | 36 | myMessage = UpdateInput(message); 37 | userName = UpdateInput(uname); 38 | email = UpdateInput(emailer); 39 | 40 | if (localStorage.getItem('userData') !== null) { 41 | const myFormData = localStorage.getItem('userData'); 42 | const myFormDataArray = myFormData.split(','); 43 | 44 | if (myFormDataArray.length > 0) { 45 | [uname.value, emailer.value, message.value] = myFormDataArray; 46 | } 47 | } 48 | 49 | function EmailValidation(e) { 50 | const email = emailer.value; 51 | let text; 52 | if (email === email.toLowerCase() && email !== '') { 53 | text = 'Email is inserted in lowercase as required'; 54 | validator.innerHTML = text; 55 | validator.classList.add('validator-green'); 56 | submitbtn.style.marginTop = '20px'; 57 | } else { 58 | text = 'Email is required and has to be in lowercase'; 59 | validator.innerHTML = text; 60 | validator.classList.remove('validator-green'); 61 | validator.classList.add('validator-red'); 62 | submitbtn.style.marginTop = '20px'; 63 | e.preventDefault(); 64 | } 65 | } 66 | submitbtn.addEventListener('submit', (e) => EmailValidation(e)); 67 | 68 | function RemoveMenu(selected, modalPart, remover) { 69 | return selected.addEventListener('click', () => modalPart.classList.remove(remover)); 70 | } 71 | 72 | const details = [ 73 | { 74 | title: 'Todo Lists', 75 | name: 'Tasks Management system', 76 | technology: 'Front End Dev', 77 | year: '2023', 78 | imageUrl: 'images/real_todo.png', 79 | description: "The ToDo List for task management with CRUD operations developed in JavaScript plain with addition of Html&Css technologies", 80 | languages: ['html', 'css', 'javascript', 'github', 'Bootstraps'], 81 | liveLink: 'https://kubaho3.github.io/To-Do-List/dist/', 82 | sourceCode: 'https://github.com/KUBAHO3/To-Do-List/', 83 | }, { 84 | title: 'Multi-Post Stories', 85 | name: 'CANOPY', 86 | technology: 'Back End Dev', 87 | year: '2025', 88 | imageUrl: 'images/Snapshoot-Portfolio4.png', 89 | description: "A daily selection of privately personalized reads; no accounts or sign-ups required. ry'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", 90 | languages: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 91 | liveLink: 'https://www.linkedin.com/in/kubaho-linne-heaven-78ab37208/', 92 | sourceCode: 'https://github.com/KUBAHO3', 93 | }, { 94 | title: 'Tonic', 95 | name: 'CANOPY', 96 | technology: 'Back End Dev', 97 | year: '2025', 98 | imageUrl: 'images/Snapshoot-Portfolio2.png', 99 | 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 to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent", 100 | languages: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 101 | liveLink: 'https://www.linkedin.com/in/kubaho-linne-heaven-78ab37208/', 102 | sourceCode: 'https://github.com/KUBAHO3', 103 | }, { 104 | title: 'Multi-Post Stories', 105 | name: 'CANOPY', 106 | technology: 'Back End Dev', 107 | year: '2025', 108 | imageUrl: 'images/Snapshoot-Portfolio3.png', 109 | 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 to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent", 110 | languages: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 111 | liveLink: 'https://www.linkedin.com/in/kubaho-linne-heaven-78ab37208/', 112 | sourceCode: 'https://github.com/KUBAHO3', 113 | }, 114 | ]; 115 | 116 | function renderModal(number) { 117 | const work = details[number]; 118 | const modalInstance = `
119 |
120 |

${work.title}

121 | x 122 |
123 |
124 |

${work.name}

125 |
● ${work.technology}
126 |
● ${work.year}
127 |
128 | The Snapshoot-Portfolio image 129 |
130 |

131 | ${work.description} 132 |

133 |
134 |
135 | ${work.languages.map((lang) => `
${lang}
`).join('')} 136 | 137 |
138 |
139 |
140 | 141 | See Source icon img 142 |
143 |
144 |
145 |
`; 146 | 147 | WorkModal.innerHTML = modalInstance; 148 | } 149 | 150 | function AddMenu(selected, modalPart, opener, number) { 151 | return selected.addEventListener('click', () => { 152 | modalPart.classList.add(opener); 153 | modalPart.style.top = '0px'; 154 | 155 | if (number) { 156 | renderModal(number - 1); 157 | } 158 | }); 159 | } 160 | 161 | AddMenu(menu, nav, 'nav-toggle'); 162 | AddMenu(viewModal1, WorkModal, 'nav-toggle', 1); 163 | AddMenu(viewModal2, WorkModal, 'nav-toggle', 2); 164 | AddMenu(viewModal3, WorkModal, 'nav-toggle', 3); 165 | AddMenu(viewModal4, WorkModal, 'nav-toggle', 4); 166 | RemoveMenu(WorkModal, WorkModal, 'nav-toggle'); 167 | RemoveMenu(closeNav, nav, 'nav-toggle'); 168 | RemoveMenu(nav, nav, 'nav-toggle'); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Heaven's Portfolio 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 22 | 32 |
33 | 41 |

42 |
43 |
44 |
45 |

46 | I’m Linne,
Glad to see you! 47 |

48 |

49 | 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. 50 |

51 |

52 | LET'S CONNECT 53 |

54 |
    55 |
    • 56 |
    • 57 |
    • 58 |
    • 59 |
    • 60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 |
69 | The Snapshoot-Portfolio image 70 |
71 |

Tonic

72 |
73 |

CANOPY

74 |
● Back End Dev
75 |
● 2015
76 |
77 |

78 | A daily selection of privately personalized reads; no accounts or sign-ups required. 79 |

80 |
81 |
Html
82 |
Css
83 |
JavaScript
84 |
85 | 86 |
87 |
88 |
89 | The Snapshoot-Portfolio image 90 |
91 |

Multi-Post Stories

92 |
93 |

CANOPY

94 |
● Back End Dev
95 |
● 2015
96 |
97 |

98 | A daily selection of privately personalized reads; no accounts or sign-ups required. 99 |

100 |
101 |
Html
102 |
Css
103 |
JavaScript
104 |
105 | 106 |
107 |
108 |
109 | The Snapshoot-Portfolio image 110 |
111 |

Tonic

112 |
113 |

CANOPY

114 |
● Back End Dev
115 |
● 2015
116 |
117 |

118 | A daily selection of privately personalized reads; no accounts or sign-ups required. 119 |

120 |
121 |
Html
122 |
Css
123 |
JavaScript
124 |
125 | 126 |
127 |
128 |
129 | The Snapshoot-Portfolio image 130 |
131 |

Multi-Post Stories

132 |
133 |

CANOPY

134 |
● Back End Dev
135 |
● 2015
136 |
137 |

138 | A daily selection of privately personalized reads; no accounts or sign-ups required. 139 |

140 |
141 |
Html
142 |
Css
143 |
JavaScript
144 |
145 | 146 |
147 |
148 | 149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |

157 | About
Myself 158 |

159 |

160 | 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. 161 |

162 |

163 | LET'S CONNECT 164 |

165 |
    166 |
    • 167 |
    • 168 |
    • 169 |
    • 170 |
    • 171 |
172 | 173 |
174 |
175 |
176 |
177 |
178 |

Languages

179 | 180 |
181 |
182 | 183 |
184 | js-logo-img 185 |

JavaScript

186 |
187 |
188 | html-logo-img 189 |

HTML

190 |
191 |
192 | css-logo-img 193 |

CSS

194 |
195 |
196 |
197 |

Frameworks

198 | 199 |
200 |
201 |
202 |

Skills

203 | 204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |

212 | Contact me 213 |

214 |

215 | 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 216 |

217 | 218 |
219 |
220 | 221 | 222 | 223 |
224 | 229 |
230 | 231 | 232 |
233 |
234 | 235 | 236 |
237 |
238 |
239 |
240 |
241 | 242 | 243 | 244 | 245 | 246 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300&display=swap"); 2 | 3 | * { 4 | font-family: "Poppins", sans-serif; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | overflow-x: hidden; 10 | } 11 | 12 | .container { 13 | padding-left: 5%; 14 | padding-right: 5%; 15 | } 16 | 17 | .fixed-top { 18 | position: fixed; 19 | top: 0; 20 | right: 0; 21 | left: 0; 22 | } 23 | 24 | .navbar { 25 | display: flex; 26 | flex-direction: row; 27 | align-items: center; 28 | justify-content: space-between; 29 | background-color: #fff; 30 | padding-top: 5px; 31 | padding-bottom: 5px; 32 | } 33 | 34 | #logo { 35 | color: #6070ff; 36 | text-decoration: none; 37 | font-size: 18px; 38 | font-weight: 700; 39 | } 40 | 41 | .menu { 42 | color: #6070ff; 43 | font-size: 1.3rem; 44 | } 45 | 46 | .menu-list { 47 | display: none; 48 | } 49 | 50 | .mobile-nav { 51 | position: fixed; 52 | 53 | /* top: 0; */ 54 | width: 100%; 55 | height: 100vh; 56 | transition: 0.2s ease-in-out; 57 | background-color: rgba(41, 58, 208, 0.8); 58 | -webkit-backdrop-filter: blur(5px); 59 | backdrop-filter: blur(5px); 60 | display: none; 61 | } 62 | 63 | .close-button { 64 | color: #fff; 65 | font-size: 34px; 66 | padding: 0 7px; 67 | float: right; 68 | margin-left: 85%; 69 | } 70 | 71 | .menu-list-mobile > li { 72 | list-style-type: none; 73 | } 74 | 75 | .connect-me a { 76 | color: #7f8cff; 77 | text-decoration: none; 78 | font-weight: 500; 79 | font-size: 16px; 80 | line-height: 24px; 81 | } 82 | 83 | .menu-list-mobile > li > a { 84 | color: #fff; 85 | font-weight: 600; 86 | font-size: 32px; 87 | line-height: 44px; 88 | text-decoration: none; 89 | } 90 | 91 | .hero { 92 | display: flex; 93 | flex-direction: column; 94 | align-items: center; 95 | justify-content: center; 96 | height: 80vh; 97 | background-image: url("./images/header-shapes.png"); 98 | background-color: #fff; 99 | background-repeat: no-repeat; 100 | background-size: 100%; 101 | } 102 | 103 | .greetings { 104 | color: #172b4d; 105 | font-size: 40px; 106 | font-weight: 700; 107 | } 108 | 109 | .about-me { 110 | font-weight: 400; 111 | font-size: 16px; 112 | color: #344563; 113 | text-decoration: none; 114 | } 115 | 116 | .icon-group { 117 | display: flex; 118 | flex-direction: row; 119 | list-style-type: none; 120 | padding: 0%; 121 | } 122 | 123 | .icon { 124 | padding: 5px; 125 | margin-left: 0; 126 | color: #505f79; 127 | width: 19.99px; 128 | } 129 | 130 | .fa-brands { 131 | font-size: large; 132 | } 133 | 134 | .works { 135 | background-color: #e5e5e5; 136 | padding-top: 40px; 137 | padding-bottom: 40px; 138 | } 139 | 140 | .cards { 141 | padding: 10px 10px 30px 10px; 142 | border-radius: 16px; 143 | background-color: #fff; 144 | margin-top: 40px; 145 | } 146 | 147 | .cards img { 148 | width: 100%; 149 | } 150 | 151 | h1.title { 152 | font-size: 32px; 153 | font-weight: 700; 154 | color: #172b4d; 155 | margin-top: 20px; 156 | } 157 | 158 | .position { 159 | display: flex; 160 | flex-direction: row; 161 | align-items: center; 162 | } 163 | 164 | .position .place { 165 | font-weight: 600; 166 | font-size: 13px; 167 | color: #344563; 168 | } 169 | 170 | .position .post-name { 171 | font-weight: 600; 172 | font-size: 13px; 173 | color: #7a869a; 174 | padding-left: 20px; 175 | } 176 | 177 | .position .post-year { 178 | font-weight: 600; 179 | font-size: 13px; 180 | color: #7a869a; 181 | padding-left: 20px; 182 | } 183 | 184 | p.description { 185 | font-weight: 400; 186 | font-size: 15px; 187 | color: #344563; 188 | } 189 | 190 | .techs { 191 | display: flex; 192 | flex-direction: row; 193 | margin-bottom: 20px; 194 | } 195 | 196 | .techs .single-tech { 197 | color: #6070ff; 198 | font-weight: 500; 199 | font-size: 12px; 200 | background-color: #ebebff; 201 | border-radius: 8px; 202 | padding: 8px 12px; 203 | margin-right: 10px; 204 | } 205 | 206 | .view-more { 207 | color: #396df2; 208 | font-weight: 600; 209 | font-size: 17px; 210 | background-color: #fff; 211 | border-radius: 8px; 212 | padding: 14px 10px; 213 | border: 2px solid #396df2; 214 | } 215 | 216 | form div .view-more { 217 | width: 142px; 218 | padding: 12px 12px; 219 | } 220 | 221 | .view-more:hover { 222 | background-color: #396df2; 223 | color: #fff; 224 | } 225 | 226 | .about-myself { 227 | background-color: #e5e5e5; 228 | } 229 | 230 | .about-myself-intro { 231 | padding-top: 60px; 232 | padding-bottom: 30px; 233 | background-color: #fff; 234 | border-radius: 0 50px 0 0; 235 | } 236 | 237 | .about-myself-skills { 238 | background-color: #fff; 239 | } 240 | 241 | .skill { 242 | display: flex; 243 | flex-direction: row; 244 | align-items: center; 245 | justify-content: space-between; 246 | padding: 10px 20px; 247 | } 248 | 249 | .skill-name { 250 | font-weight: 600; 251 | font-size: 20px; 252 | color: #000; 253 | } 254 | 255 | .skill-name.fas { 256 | font-weight: 600; 257 | font-size: 20px; 258 | color: #acb7c3; 259 | } 260 | 261 | .dots { 262 | font-size: 20px; 263 | } 264 | 265 | .sub-skills { 266 | display: flex; 267 | flex-direction: column; 268 | } 269 | 270 | .sub-skill { 271 | display: flex; 272 | flex-direction: row; 273 | background-color: #f7f7f9; 274 | border-radius: 8px; 275 | padding: 10px 20px; 276 | margin-bottom: 20px; 277 | margin-left: 30px; 278 | margin-right: 30px; 279 | } 280 | 281 | .sub-skill-img { 282 | width: 50px; 283 | height: 50px; 284 | border-radius: 50%; 285 | margin-right: 10px; 286 | } 287 | 288 | .sub-skill-name { 289 | font-weight: 600; 290 | font-size: 15px; 291 | color: #253858; 292 | } 293 | 294 | .modal-section { 295 | position: fixed; 296 | width: 100%; 297 | min-height: 100vh; 298 | transition: 0.2s ease-in-out; 299 | background-color: rgba(165, 185, 224, 0.5); 300 | -webkit-backdrop-filter: blur(5px); 301 | backdrop-filter: blur(5px); 302 | display: none; 303 | overflow: auto; 304 | } 305 | 306 | .nav-toggle { 307 | display: flex; 308 | flex-direction: column; 309 | } 310 | 311 | .work-modal { 312 | position: absolute; 313 | background-color: #fff; 314 | border-radius: 16px; 315 | margin: 4%; 316 | margin-top: 2.5%; 317 | padding: 20px; 318 | } 319 | 320 | .work-modal-head { 321 | display: flex; 322 | justify-content: space-between; 323 | } 324 | 325 | .work-modal-head > .title { 326 | margin-bottom: 0; 327 | margin-top: 0; 328 | font-size: 40px; 329 | font-weight: 700; 330 | line-height: 52px; 331 | } 332 | 333 | .close-modal { 334 | font-size: 35px; 335 | color: #67798e; 336 | margin-top: -10px; 337 | cursor: pointer; 338 | } 339 | 340 | .work-modal-head-body { 341 | font-size: 15px; 342 | font-weight: 500; 343 | line-height: 20px; 344 | } 345 | 346 | .work-modal-hr { 347 | color: #ebecf0; 348 | } 349 | 350 | .work-modal-img { 351 | width: 100%; 352 | height: auto; 353 | } 354 | 355 | .work-modal-middle > .description { 356 | font-size: 16px; 357 | font-weight: 400; 358 | line-height: 30px; 359 | } 360 | 361 | #techs { 362 | display: grid; 363 | grid-template-columns: auto auto auto; 364 | justify-content: center; 365 | } 366 | 367 | #techs-item { 368 | margin-top: 10px; 369 | } 370 | 371 | #btn-link { 372 | text-decoration: none; 373 | } 374 | 375 | .btn-icon { 376 | margin-left: 7px; 377 | margin-bottom: -8px; 378 | } 379 | 380 | .work-modal-btn { 381 | margin-top: 10px; 382 | margin-left: 2%; 383 | margin-bottom: 20px; 384 | display: inline-flex; 385 | width: 40%; 386 | justify-content: center; 387 | } 388 | 389 | .my-form { 390 | padding-top: 10vh; 391 | padding-bottom: 1px; 392 | background-image: url("./images/contactbg.png"); 393 | background-color: #6070ff; 394 | background-repeat: no-repeat; 395 | background-size: 55%; 396 | background-position: right 21px; 397 | border-radius: 50px 0 0 0; 398 | } 399 | 400 | .contact-title { 401 | font-weight: 700; 402 | font-size: 40px; 403 | line-height: 52px; 404 | text-align: center; 405 | color: #fff; 406 | } 407 | 408 | .contact-explanation { 409 | font-weight: 400; 410 | font-size: 20px; 411 | line-height: 28px; 412 | text-align: center; 413 | color: #fff; 414 | } 415 | 416 | form { 417 | display: flex; 418 | flex-direction: column; 419 | } 420 | 421 | form input { 422 | width: 90%; 423 | 424 | /* margin-bottom: 20px; */ 425 | border: 1px solid #cfd8dc; 426 | border-radius: 8px; 427 | padding: 15px; 428 | } 429 | 430 | form > div { 431 | margin-bottom: 20px; 432 | } 433 | 434 | #useremail { 435 | margin-bottom: 0; 436 | } 437 | 438 | .email-div { 439 | display: flex; 440 | flex-direction: column; 441 | } 442 | 443 | .validator-red { 444 | width: 95%; 445 | background-color: #fff; 446 | color: red; 447 | padding: 2px; 448 | border: 1px solid red; 449 | text-align: center; 450 | border-radius: 5px; 451 | } 452 | 453 | .validator-green { 454 | width: 95%; 455 | background-color: #fff; 456 | color: green; 457 | padding: 2px; 458 | border: 1px solid green; 459 | border-radius: 5px; 460 | text-align: center; 461 | } 462 | 463 | form textarea { 464 | width: 90%; 465 | border-radius: 8px; 466 | border: 1px solid #cfd8dc; 467 | padding: 15px; 468 | margin-bottom: 10px; 469 | } 470 | 471 | .go-home-bar { 472 | border: 5px solid black; 473 | border-radius: 5px; 474 | width: 30%; 475 | align-items: center; 476 | margin-top: 30px; 477 | margin-bottom: 5px; 478 | } 479 | 480 | /* Medium devices (landscape tablets, 768px and up) */ 481 | @media only screen and (min-width: 768px) { 482 | #menu-icon { 483 | display: none; 484 | } 485 | 486 | a { 487 | text-decoration-line: none; 488 | color: #344563; 489 | } 490 | 491 | .container { 492 | padding-right: 10%; 493 | padding-left: 10%; 494 | } 495 | 496 | .navbar { 497 | padding-top: 0; 498 | padding-bottom: 0; 499 | } 500 | 501 | .menu-list { 502 | display: flex; 503 | flex-direction: row; 504 | justify-content: space-between; 505 | } 506 | 507 | .menu-list > li { 508 | margin-left: 30px; 509 | list-style-type: none; 510 | font-weight: 600; 511 | font-size: 15px; 512 | line-height: 20px; 513 | color: #344563; 514 | } 515 | 516 | .menu-list > li > a:hover { 517 | color: #6070ff; 518 | } 519 | 520 | .hero-holder { 521 | background-color: #e5e5e5; 522 | } 523 | 524 | .hero { 525 | display: flex; 526 | flex-direction: column; 527 | align-items: center; 528 | justify-content: center; 529 | height: 100vh; 530 | background-image: url("./images/desktop/herobg.png"); 531 | background-color: #fff; 532 | background-repeat: no-repeat; 533 | background-size: 95%; 534 | border-radius: 0 0 0 50px; 535 | } 536 | 537 | .greetings { 538 | color: #091e42; 539 | font-size: 48px; 540 | font-weight: 700; 541 | animation-duration: 3s; 542 | animation-name: slidein; 543 | } 544 | 545 | @keyframes slidein { 546 | from { 547 | margin-left: 100%; 548 | width: 300%; 549 | } 550 | 551 | to { 552 | margin-left: 0%; 553 | width: 100%; 554 | } 555 | } 556 | 557 | .about-me { 558 | font-weight: 400; 559 | font-size: 20px; 560 | color: #344563; 561 | text-decoration: none; 562 | line-height: 28px; 563 | } 564 | 565 | .hero > .container { 566 | padding-left: 15%; 567 | padding-right: 15%; 568 | } 569 | 570 | .icon-group li a i:hover { 571 | color: #6070ff; 572 | transform: scale(2); 573 | transition: ease 0.6s; 574 | } 575 | 576 | .cards { 577 | display: flex; 578 | flex-direction: row; 579 | padding: 10px; 580 | cursor: pointer; 581 | } 582 | 583 | .cards img { 584 | width: 50%; 585 | transition: width 2s, height 2s; 586 | } 587 | 588 | .cards img:hover { 589 | width: 55%; 590 | height: auto; 591 | } 592 | 593 | .cards img.swap { 594 | order: 1; 595 | } 596 | 597 | .card-data { 598 | padding-left: 20px; 599 | } 600 | 601 | h1.title { 602 | font-size: 40px; 603 | font-weight: 700; 604 | color: #172b4d; 605 | margin-top: 30px; 606 | margin-bottom: 10px; 607 | line-height: 52px; 608 | } 609 | 610 | .position { 611 | display: flex; 612 | flex-direction: row; 613 | align-items: center; 614 | } 615 | 616 | .position .place { 617 | font-weight: 600; 618 | font-size: 13px; 619 | color: #344563; 620 | } 621 | 622 | .position .post-name { 623 | font-weight: 600; 624 | font-size: 13px; 625 | color: #7a869a; 626 | padding-left: 20px; 627 | } 628 | 629 | .position .post-year { 630 | font-weight: 600; 631 | font-size: 13px; 632 | color: #7a869a; 633 | padding-left: 20px; 634 | } 635 | 636 | p.description { 637 | font-weight: 400; 638 | font-size: 16px; 639 | color: #344563; 640 | } 641 | 642 | .about-myself { 643 | display: flex; 644 | } 645 | 646 | .about-myself-intro { 647 | width: 50%; 648 | border-radius: 0 0 0 0; 649 | padding-bottom: 10vh; 650 | padding-left: 5%; 651 | } 652 | 653 | .about-myself-skills { 654 | padding-top: 10vh; 655 | width: 50%; 656 | border-radius: 0 50px 0 0; 657 | padding-bottom: 10vh; 658 | padding-right: 5%; 659 | } 660 | 661 | .sub-skills { 662 | display: flex; 663 | flex-direction: row; 664 | } 665 | 666 | .sub-skill { 667 | display: flex; 668 | flex-direction: column; 669 | margin-bottom: 10px; 670 | margin-left: 0; 671 | margin-right: 10px; 672 | } 673 | 674 | .sub-skill-img { 675 | width: 50px; 676 | height: 50px; 677 | border-radius: 50%; 678 | margin-right: 10px; 679 | } 680 | 681 | .work-modal-middle { 682 | display: flex; 683 | flex-direction: row; 684 | } 685 | 686 | .work-modal-middle > .description { 687 | width: 60%; 688 | } 689 | 690 | .work-modal-middle > .work-modal-middle-group { 691 | width: 40%; 692 | } 693 | 694 | .work-modal-hr { 695 | color: #ebecf0; 696 | } 697 | 698 | .work-modal-img { 699 | width: 100%; 700 | height: 586px; 701 | } 702 | 703 | .sub-skill-name { 704 | font-weight: 600; 705 | font-size: 15px; 706 | color: #253858; 707 | padding-top: 0; 708 | } 709 | 710 | .my-form { 711 | background-image: url("./images/desktop/contactbg.png"); 712 | background-color: #6070ff; 713 | background-repeat: no-repeat; 714 | background-size: 90% 95%; 715 | padding-right: 30%; 716 | padding-left: 30%; 717 | padding-bottom: 10vh; 718 | } 719 | 720 | .contact-title { 721 | animation-duration: 3s; 722 | animation-name: slidein; 723 | } 724 | 725 | #center { 726 | display: flex; 727 | flex-direction: column; 728 | justify-content: center; 729 | align-items: center; 730 | } 731 | 732 | .go-home-bar { 733 | display: none; 734 | } 735 | } 736 | --------------------------------------------------------------------------------