Skip to content

Commit

Permalink
added images, trying .json again
Browse files Browse the repository at this point in the history
  • Loading branch information
@DanielRedacted
DanielRedacted committed Sep 17, 2024
1 parent 8665d47 commit 604a093
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 43 deletions.
85 changes: 47 additions & 38 deletions card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,16 @@
border-radius:8px; margin:0; background-color:#222; width:100%; aspect-ratio: 3.5/2
}
#card #banner {
position:relative; width:100%; height:50%; border:1px solid gray; border-radius:8px; background-color: #444;
background-image: url('cardAssets/banner.jpg');
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
position:relative;
width:100%;
height:50%;
border:1px solid gray;
border-radius:8px;
background-color: #444;
}
#card #banner #picture {
position:absolute;
Expand Down Expand Up @@ -144,7 +153,7 @@
<body>
<div id="card">
<div id="banner">
<div id="picture"></div>
<img id="picture" src="cardAssets/profile.jpg"/>
</div>
<h1 id="name">Daniel ████</h1>
<h2 id="header">Let's connect</h2>
Expand Down Expand Up @@ -173,42 +182,42 @@ <h1>Phone</h1>
// Function to fetch contact data from contacts.json and render it on the webpage
async function fetchAndRenderContacts() {
try {
// const response = await fetch('cardAssets/contacts.json'); // Fetch the JSON file
// const contactData = await response.json(); // Parse the JSON data
const contactData = {
"contacts": [
{
"contactType": "Email",
"display": false,
"value": "[email protected]",
"link": "mailto:[email protected]"
},
{
"contactType": "Phone",
"display": false,
"value": "+1-000-000-0000",
"link": "tel:+10000000000"
},
{
"contactType": "LinkedIn",
"display": false,
"value": "LinkedIn Profile",
"link": "https://www.linkedin.com/in/username"
},
{
"contactType": "X",
"display": false,
"value": "@DanielRedacted",
"link": "https://x.com/DanielRedacted"
},
{
"contactType": "Instagram",
"display": false,
"value": "@DanielRedacted",
"link": "https://www.instagram.com/DanielRedacted"
}
]
}
const response = await fetch('cardAssets/contacts.json'); // Fetch the JSON file
const contactData = await response.json(); // Parse the JSON data
// const contactData = {
// "contacts": [
// {
// "contactType": "Email",
// "display": true,
// "value": "[email protected]",
// "link": "mailto:[email protected]"
// },
// {
// "contactType": "Phone",
// "display": true,
// "value": "+1-000-000-0000",
// "link": "tel:+10000000000"
// },
// {
// "contactType": "LinkedIn",
// "display": true,
// "value": "LinkedIn Profile",
// "link": "https://www.linkedin.com/in/username"
// },
// {
// "contactType": "X",
// "display": true,
// "value": "@DanielRedacted",
// "link": "https://x.com/DanielRedacted"
// },
// {
// "contactType": "Instagram",
// "display": true,
// "value": "@DanielRedacted",
// "link": "https://www.instagram.com/DanielRedacted"
// }
// ]
// }

const contactList = document.querySelector('body'); // Get the HTML element to display contact info

Expand Down
Binary file added cardAssets/banner.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions cardAssets/contacts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,31 @@
"contacts": [
{
"contactType": "Email",
"display": false,
"display": true,
"value": "[email protected]",
"link": "mailto:[email protected]"
},
{
"contactType": "Phone",
"display": false,
"display": true,
"value": "+1-000-000-0000",
"link": "tel:+10000000000"
},
{
"contactType": "LinkedIn",
"display": false,
"display": true,
"value": "LinkedIn Profile",
"link": "https://www.linkedin.com/in/username"
},
{
"contactType": "X",
"display": false,
"display": true,
"value": "@DanielRedacted",
"link": "https://x.com/DanielRedacted"
},
{
"contactType": "Instagram",
"display": false,
"display": true,
"value": "@DanielRedacted",
"link": "https://www.instagram.com/DanielRedacted"
}
Expand Down
Binary file added cardAssets/profile.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 604a093

Please sign in to comment.