Black and white

.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}"
+    }]
+}

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*

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;

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;

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;