Spaces:
Running
Running
File size: 7,091 Bytes
375bfce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elegant Profile Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
.divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.profile-shadow {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
</head>
<body class="bg-white font-sans antialiased">
<div class="max-w-4xl mx-auto p-4">
<!-- Logo Section -->
<div class="flex justify-center mb-8">
<img src="https://via.placeholder.com/200x80?text=LOGO" alt="Company Logo" class="h-20">
</div>
<!-- Section 1: Header Bar -->
<div class="bg-gray-800 p-4 rounded-t-lg shadow-md opacity-95">
<div class="flex items-center justify-between">
<div class="text-white text-2xl font-bold tracking-wider">PROFILE</div>
<div class="text-white text-sm">EST. 2023</div>
</div>
</div>
<!-- Section 2: Profile Image -->
<div class="bg-white p-8 flex justify-center items-center">
<div class="w-64 h-80 md:w-72 md:h-96 relative overflow-hidden rounded-lg profile-shadow">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt="Profile Image"
class="w-full h-full object-cover object-center">
<div class="absolute inset-0 bg-black bg-opacity-10"></div>
</div>
</div>
<!-- Section 3: Information Section -->
<div class="bg-white p-6 rounded-lg profile-shadow opacity-95">
<div id="profile-info" class="space-y-6">
<!-- Data will be populated from JSON -->
</div>
</div>
<!-- Section 4: Footer -->
<div class="bg-gray-800 p-6 rounded-b-lg mt-4 profile-shadow opacity-95">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="text-center md:text-left">
<h3 class="font-semibold text-white mb-3">Contact Info</h3>
<p class="text-gray-300"><i class="fas fa-map-marker-alt mr-2"></i> 123 Main St, City</p>
<p class="text-gray-300"><i class="fas fa-phone-alt mr-2"></i> (123) 456-7890</p>
<p class="text-gray-300"><i class="fas fa-envelope mr-2"></i> [email protected]</p>
</div>
<div class="text-center md:text-right">
<h3 class="font-semibold text-white mb-3">Quick Links</h3>
<p class="text-gray-300 hover:text-white cursor-pointer">About Us</p>
<p class="text-gray-300 hover:text-white cursor-pointer">Services</p>
<p class="text-gray-300 hover:text-white cursor-pointer">Contact</p>
</div>
</div>
<div class="mt-6 text-center text-gray-400 text-sm">
© 2023 Your Company. All rights reserved.
</div>
</div>
</div>
<script>
// JSON data for profile information
// Easy-to-edit profile data structure
const profileData = {
"basic": {
"title": "Basic Information",
"items": [
{"label": "Name", "value": "John Doe"},
{"label": "Position", "value": "Senior Developer"},
{"label": "Experience", "value": "8+ Years"},
{"label": "Location", "value": "Bangkok, Thailand"}
]
},
"details": {
"title": "Professional Details",
"items": [
{"label": "Specialization", "value": "Web Development"},
{"label": "Technologies", "value": "JavaScript, React, Node.js"},
{"label": "Education", "value": "MSc Computer Science"},
{"label": "Availability", "value": "Full-time"}
]
}
};
// Function to populate profile information
function populateProfileInfo() {
const container = document.getElementById('profile-info');
for (const [key, section] of Object.entries(profileData)) {
// Create section container
const sectionDiv = document.createElement('div');
sectionDiv.className = 'divider pb-6 last:border-0 last:pb-0';
// Create section title
const title = document.createElement('h2');
title.className = 'text-xl font-bold text-gray-800 mb-4';
title.textContent = section.title;
sectionDiv.appendChild(title);
// Create items grid
const itemsGrid = document.createElement('div');
itemsGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
// Add items
section.items.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.className = 'flex flex-col md:flex-row';
const label = document.createElement('span');
label.className = 'text-gray-600 font-medium md:w-1/3';
label.textContent = item.label;
const value = document.createElement('span');
value.className = 'text-gray-800 md:w-2/3';
value.textContent = item.value;
itemDiv.appendChild(label);
itemDiv.appendChild(value);
itemsGrid.appendChild(itemDiv);
});
sectionDiv.appendChild(itemsGrid);
container.appendChild(sectionDiv);
}
}
// Call the function when the page loads
document.addEventListener('DOMContentLoaded', populateProfileInfo);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=protae5544/tre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |