Virtual Business Card

commit b3d945643be129af6d57a115500ba69ffc514931 Author: chris Date: Wed Jun 25 18:34:36 2025 -0400 init commit diff --git a/balloon.jpg b/balloon.jpg new file mode 100644 index 0000000..40ebdd9 Binary files /dev/null and b/balloon.jpg differ diff --git a/chris.jpg b/chris.jpg new file mode 100644 index 0000000..f137fe2 Binary files /dev/null and b/chris.jpg differ diff --git a/data.json b/data.json new file mode 100644 index 0000000..8857e9d --- /dev/null +++ b/data.json @@ -0,0 +1,22 @@ +[ + { + "name": "Chris", + "title": "Owner", + "phone": "203.283.5626", + "email": "chris@beachpartyballoons.com", + "website": "beachpartyballoons.com", + "photo": "photo.png", + "profile": "chris.jpg", + "address": "554 Boston Post Road, Milford, CT 06460", + "balloon": "balloon.jpg" + }, + { + "name": "Bob The Builder", + "title": "Master Builder", + "phone": "+1-555-987-6543", + "email": "bob@example.com", + "website": "https://www.bobbuilds.com", + "photo": "https://example.com/bob.jpg", + "address": "456 Hammer Street, Constructionville" + } + ] \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3562ef3 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + Virtual Business Card + + + + + +

+ + + +

+ + + + \ No newline at end of file diff --git a/photo.png b/photo.png new file mode 100644 index 0000000..bf099c2 Binary files /dev/null and b/photo.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..0b3ae34 --- /dev/null +++ b/script.js @@ -0,0 +1,50 @@ +document.addEventListener('DOMContentLoaded', () => { + const businessCard = document.getElementById('businessCard'); + const nameElement = document.getElementById('name'); + const titleElement = document.getElementById('title'); + const phoneLinkElement = document.getElementById('phone'); + const emailLinkElement = document.getElementById('email'); + const websiteLinkElement = document.getElementById('website'); + const addressElement = document.getElementById('address'); + const photoElement = document.getElementById('photo'); + const profileElement = document.getElementById('profile'); + const balloonElement = document.getElementById('balloon'); + + fetch('data.json') + .then(response => response.json()) + .then(data => { + // If using the multiple employee format, choose the employee to display. + // For example, to display the first employee: + const employee = data[0]; // Or choose by ID or other criteria. + + nameElement.textContent = employee.name; + titleElement.textContent = employee.title; + addressElement.textContent = employee.address; + profileElement.src = employee.profile; + photoElement.src = employee.photo; + balloonElement.src = employee.balloon; + + // Create phone link + const phoneLink = document.createElement('a'); + phoneLink.href = `tel:${employee.phone}`; + phoneLink.textContent = employee.phone; + phoneLinkElement.appendChild(phoneLink); + + // Create email link + const emailLink = document.createElement('a'); + emailLink.href = `mailto:${employee.email}`; + emailLink.textContent = employee.email; + emailLinkElement.appendChild(emailLink); + + // Create website link + const websiteLink = document.createElement('a'); + websiteLink.href = employee.website; + websiteLink.textContent = employee.website; + websiteLinkElement.appendChild(websiteLink); + + }) + .catch(error => { + console.error('Error fetching data:', error); + businessCard.innerHTML = '

Error loading data. Check the console.

'; // Display an error message + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9dc755d --- /dev/null +++ b/style.css @@ -0,0 +1,129 @@ +html { + background-color: #e7e6dd; + font-family: "Autour One", serif; + color: #363636; +} + +body { + margin: 0; + padding: 0; +} +.card a{ + color: white; +} +.card { + width: 90%; + max-width: 500px; + margin: 40px auto; + border: none; + border-radius: 16px; + padding: 20px; + text-align: center; + background-color: #507962; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); + color: white; + overflow: hidden; +} + +.card { + animation: fadeSlideUp 1s ease-out both; +} + +@keyframes fadeSlideUp { + 0% { + opacity: 0; + transform: translateY(40px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.details img#profile { + animation: scaleFadeIn 2s ease-out 0.6s both; +} + +@keyframes scaleFadeIn { + 0% { + opacity: 0; + transform: scale(1); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* .background { + background-color: #d1fff8; + height: 180px; + display: flex; + justify-content: center; + align-items: center; +} */ + +#photo { + width: 140px; + height: auto; + object-fit: cover; + border-radius: 12px; + background-color: white; + +} +.photo{ + box-shadow: 0 25px 35px rgba(0, 0, 0, 0.15); + +} +.details { + margin-top: -60px; /* Pull profile image upward */ + padding: 20px 0; +} + +.details img#profile { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 50%; + border: 4px solid white; + background-color: white; + margin-top: 52px; + margin-bottom: 16px; +} + +.details h2 { + font-size: 24px; + font-weight: bold; + margin: 10px 0 4px; +} + +.details p { + margin: 4px 0; + line-height: 1.6; + font-size: 15px; +} + +#balloon { + border-radius: 20%; + width: 260px; + height: auto; + margin: 20px 0; +} + +.social-media { + display: flex; + justify-content: center; + gap: 18px; + margin-top: 30px; +} + +.social-icon { + color: #fff; + font-size: 28px; + transition: transform 0.3s ease, color 0.3s ease; +} + +.social-icon:hover { + color: #ffdb70; + transform: scale(1.2); +}