diff --git a/assets/js/project.js b/assets/js/project.js new file mode 100644 index 000000000..10136062a --- /dev/null +++ b/assets/js/project.js @@ -0,0 +1,22 @@ +document.title = project.title; +document.getElementById('project-image').src = project.image_src; +document.getElementById('project-title').innerText = project.title; +document.getElementById('project-summary').innerText = project.summary; +document.getElementById('project-details').innerHTML = project.details; +document.getElementById('code_link').href = project.code_link; + + +var tools_parent_div = document.getElementById('tools'); +if (tools_parent_div) { + project.tools.forEach(skill => { + var el = document.createElement('div'); + el.classList.add("skills__skill"); + el.innerText = skill; + tools_parent_div.appendChild(el); + }); +} + +const elements = document.getElementsByClassName('live_link'); +for (const element of elements) { + element.href = project.live_link; +} \ No newline at end of file diff --git a/data/home.js b/data/home.js new file mode 100644 index 000000000..8e017fa50 --- /dev/null +++ b/data/home.js @@ -0,0 +1,48 @@ +var data = { + site_logo: "./assets/png/john-doe.png", + name: "John Doe", + heading: "Hey, My name is John Doe", + summary: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + + about_me: { + short: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + detailed: `Hey! It's John Doe and I'm a Frontend Web Developer located in Los Angeles. I've done + remote projects for agencies, consulted for startups, and collaborated with talented people to create" + digital products for both business and consumer use.`, + skills: ['HTML', 'CSS3', 'PHP', 'JavaScript', 'React', 'SASS', 'GIT', 'Shopify', 'Wordpress', 'Google ADS', 'Facebook Ads', 'Android', 'IOS'] + }, + + projects_subheading: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + + projects: [ + { + title: "Project 1", + href: './project-1.html', + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora, explicabo quae quod deserunt eius sapiente praesentium.", + }, + { + title: "Project 2", + href: './project-2.html', + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + }, + { + title: "Project 3", + href: './project-3.html', + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + } + ], + + contacts_subheading: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facilis tempora explicabo quae quod deserunt eius sapiente", + + footer_summary: "Lorem ipsum dolor sit amet consectetur adipisicing elit facilis tempora explicabo quae quod deserunt", + + instagram: '/instagram.com', + linkedin: '/linkedin.com', + github: '/github.com', + twitter: '/twitter.com', + youtube: '/youtube.com', + +} \ No newline at end of file diff --git a/data/project1.js b/data/project1.js new file mode 100644 index 000000000..acfc26853 --- /dev/null +++ b/data/project1.js @@ -0,0 +1,18 @@ +// Enter Details for Project +var project = { + title: "Project 1", + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos + in numquam incidunt earum quaerat cum fuga, atque similique natus + nobis sit.`, + details: `Lorem ipsum dolor sit amet consectetur adipisicing elit.Neque alias tenetur minus quaerat aliquid, + aut provident blanditiis, deleniti aspernatur ipsam eaque veniam voluptatem corporis vitae + mollitia laborum corrupti ullam rem.Lorem ipsum dolor sit amet + consectetur adipisicing elit.Neque alias tenetur minus quaerat + aliquid, aut provident blanditiis, deleniti aspernatur ipsam + eaque veniam voluptatem corporis vitae mollitia laborum corrupti + ullam rem?`, + tools: ['HTML', 'CSS3', 'PHP', 'JavaScript', 'React', 'SASS', 'GIT', 'Shopify'], + live_link: "/live", + code_link: "/code" +} \ No newline at end of file diff --git a/data/project2.js b/data/project2.js new file mode 100644 index 000000000..28cf3fa8d --- /dev/null +++ b/data/project2.js @@ -0,0 +1,18 @@ +// Enter Details for Project +var project = { + title: "Project 2", + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos + in numquam incidunt earum quaerat cum fuga, atque similique natus + nobis sit.`, + details: `Lorem ipsum dolor sit amet consectetur adipisicing elit.Neque alias tenetur minus quaerat aliquid, + aut provident blanditiis, deleniti aspernatur ipsam eaque veniam voluptatem corporis vitae + mollitia laborum corrupti ullam rem.Lorem ipsum dolor sit amet + consectetur adipisicing elit.Neque alias tenetur minus quaerat + aliquid, aut provident blanditiis, deleniti aspernatur ipsam + eaque veniam voluptatem corporis vitae mollitia laborum corrupti + ullam rem?`, + tools: ['HTML', 'CSS3', 'PHP', 'JavaScript', 'React', 'SASS', 'GIT', 'Shopify'], + live_link: "/live", + code_link: "/code" +} \ No newline at end of file diff --git a/data/project3.js b/data/project3.js new file mode 100644 index 000000000..aa337db0f --- /dev/null +++ b/data/project3.js @@ -0,0 +1,18 @@ +// Enter Details for Project +var project = { + title: "Project 3", + image_src: "./assets/jpeg/project-mockup-example.jpeg", + summary: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos + in numquam incidunt earum quaerat cum fuga, atque similique natus + nobis sit.`, + details: `Lorem ipsum dolor sit amet consectetur adipisicing elit.Neque alias tenetur minus quaerat aliquid, + aut provident blanditiis, deleniti aspernatur ipsam eaque veniam voluptatem corporis vitae + mollitia laborum corrupti ullam rem.Lorem ipsum dolor sit amet + consectetur adipisicing elit.Neque alias tenetur minus quaerat + aliquid, aut provident blanditiis, deleniti aspernatur ipsam + eaque veniam voluptatem corporis vitae mollitia laborum corrupti + ullam rem?`, + tools: ['HTML', 'CSS3', 'PHP', 'JavaScript', 'React', 'SASS', 'GIT', 'Shopify'], + live_link: "/live", + code_link: "/code" +} \ No newline at end of file diff --git a/index.html b/index.html index 7e0665111..9ee407ea8 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,13 @@
- John Doe +
+ diff --git a/index.js b/index.js index da58bb24b..216ea1c0e 100644 --- a/index.js +++ b/index.js @@ -15,4 +15,95 @@ const headerLogoConatiner = document.querySelector('.header__logo-container') headerLogoConatiner.addEventListener('click', () => { location.href = 'index.html' -}) \ No newline at end of file +}) + + +// Insert user data to home page +// header +document.getElementById('logo-name').innerText = data.name; +document.getElementById('site_logo').src = data.site_logo; + +// Hero section +if (document.getElementById('heading-primary')) { + document.getElementById('heading-primary').innerText = data.heading; +} + +if (document.getElementById('short-summary')) { + document.getElementById('short-summary').innerText = data.summary; +} + +// About Me Section +if (document.getElementById('about-me')) { + document.getElementById('about-me').innerText = data.about_me.short; +} + +if (document.getElementById('about-me-detailed')) { + document.getElementById('about-me-detailed').innerHTML = data.about_me.detailed; +} + +var skills_parent = document.getElementById('skills'); + +if (skills_parent) { + data.about_me.skills.forEach(skill => { + var el = document.createElement('div'); + el.classList.add("skills__skill"); + el.innerText = skill; + skills_parent.appendChild(el); + }); + +} + + + +// Projects Section +if (document.getElementById('projects-subheading')) { + document.getElementById('projects-subheading').innerText = data.projects_subheading; +} +if (document.getElementById('project-list')) { + data.projects.forEach(project => { + var el = `
+
+ Software Screenshot +
+
+

${project.title}

+

+ ${project.summary} +

+ Case Study +
+
`; + document.getElementById('project-list').innerHTML += el; + }); +} + + +// Contact section +if (document.getElementById('contact-subheading')) { + document.getElementById('contact-subheading').innerText = data.contacts_subheading; +} + + + +// Social Links +['github', 'linkedin', 'twitter', 'instagram', 'youtube'].forEach(name => { + const elements = document.getElementsByClassName(name); + for (const element of elements) { + element.href = data[name]; + } +}) + +// Footer +document.getElementById('footer-summary').innerText = data.footer_summary; +document.getElementById('footer-fullname').innerText = data.name; + diff --git a/project-1.html b/project-1.html index b33cb3699..8f4bc4add 100644 --- a/project-1.html +++ b/project-1.html @@ -4,7 +4,7 @@ - Case Study of Project 1 + Title @@ -22,12 +22,13 @@
- John Doe +