-
-
-
-
-
-
-
About
- -
- -
-
-
Projects
- -
- -
-
-
Contact
- -
- - - - - - -
diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..74576b7 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,13 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [{ + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:5500", + "webRoot": "${workspaceFolder}" + }] +} \ No newline at end of file diff --git a/README.md b/README.md index abdc2e0..b2ea52b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ # portfolio -This is my personal portfolio. Made from scratch without any library or framework. Just HTML and CSS + +This is personal portfolio. Made from scratch without any library or framework. Just HTML CSS and vanilla Javascript.This is my personal portfolio. Made from scratch without any library or framework. Just HTML and CS + +`npm start` *to start SASS to CSS converter and watch for changes* diff --git a/classes/work.js b/classes/work.js new file mode 100644 index 0000000..7898e54 --- /dev/null +++ b/classes/work.js @@ -0,0 +1,10 @@ +function Work(params) { + this.image = params.image + this.image.src = `../src/work-card-images/${params.image.src}` + this.title = params.title + this.tags = params.tags + this.description = params.description + +} + +export default Work; \ No newline at end of file diff --git a/database/works_db.js b/database/works_db.js new file mode 100644 index 0000000..94b993c --- /dev/null +++ b/database/works_db.js @@ -0,0 +1,42 @@ +// work cards data +// you can add more objects to add more work cards +// FIXME before production review all works data! +let woksData = [ + { + title: 'Cash register', + tags: ['JavaScipt', 'React'], + description: 'This is card description text. This is card description text. This is card description text.', + image: { + src: 'cash-register.png', + alt: 'Code of cash register', + }, + }, + { + title: 'Doze calculator', + tags: ['JavaScipt'], + description: 'This is card description text. This is card description text. This is card description text.', + image: { + src: 'doze-calculator.png', + alt: 'Code of doze calculator', + }, + }, + { + title: 'INR application', + tags: ['JavaScipt', 'HTML&CSS', 'Quasar'], + description: 'This is card description text. This is card description text. This is card description text.', + image: { + src: 'inr-app.png', + alt: 'image text1', + }, + }, + { + title: 'To-Do app', + tags: ['Python'], + description: 'This is card description text. This is card description text. This is card description text.', + image: { + src: 'to-do.png', + alt: 'image text1', + }, + }, +] +export default woksData; diff --git a/helpers/dom_helpers.js b/helpers/dom_helpers.js new file mode 100644 index 0000000..d49d698 --- /dev/null +++ b/helpers/dom_helpers.js @@ -0,0 +1,11 @@ +// insert html before the first child of the given element +function insertToDom(divClass, htmlTemplate, dataArr) { + dataArr.forEach((item) => { + const html = htmlTemplate(item) + document + .querySelector(divClass) + .insertAdjacentHTML('beforeend', html) + }) +} + +export default insertToDom; \ No newline at end of file diff --git a/index.html b/index.html index 62161da..51bf521 100644 --- a/index.html +++ b/index.html @@ -5,325 +5,145 @@ - - - + + + + -