mirror of
				https://github.com/xfarrow/blink
				synced 2025-06-27 09:03:02 +02:00 
			
		
		
		
	
		
			
				
	
	
		
			106 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			106 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
| <head>
 | |
|     <meta charset="UTF-8">
 | |
|     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | |
|     <title>Page Title</title>
 | |
|     <link rel="stylesheet" href="../css/profile.css">
 | |
| </head>
 | |
| <body style="display: none;">
 | |
|     <div class="container">
 | |
|         <div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>
 | |
|         <header>
 | |
|             <img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">
 | |
|             <h1 id="displayName">Name Surname</h1>
 | |
|             <p id="profession">Web Developer</p>
 | |
|         </header>
 | |
|         <section>
 | |
|             <h2>About Me</h2>
 | |
|             <p id="aboutMe">I am a passionate web developer with experience in HTML, CSS, and JavaScript. I enjoy creating responsive and user-friendly websites.</p>
 | |
|         </section>
 | |
|         <section>
 | |
|             <h2>Experience</h2>
 | |
|             <div class="job">
 | |
|                 <h3>Web Developer</h3>
 | |
|                 <p>Blink Corporation: 2020-Present</p>
 | |
|                 <ul>
 | |
|                     <li>Developed and maintained company website</li>
 | |
|                     <li>Implemented new features using HTML, CSS, and JavaScript</li>
 | |
|                     <li>Collaborated with designers to ensure UI/UX best practices</li>
 | |
|                 </ul>
 | |
|             </div>
 | |
|         </section>
 | |
|         <section>
 | |
|             <h2>Education</h2>
 | |
|             <div class="education">
 | |
|                 <h3>Bachelor of Science in Computer Science</h3>
 | |
|                 <p>XYZ University: 2016-2020</p>
 | |
|             </div>
 | |
|         </section>
 | |
|         <footer>
 | |
|             <p id="email">Email: john.doe@example.com</p>
 | |
|         </footer>
 | |
|     </div>
 | |
| 
 | |
|     <script src="../js/constants.js"></script>
 | |
|     <script src="../js/utils.js"></script>
 | |
| 
 | |
|     <script>
 | |
|         window.addEventListener("load", async function() {
 | |
|             loadProfile();
 | |
|         });
 | |
| 
 | |
|         async function loadProfile (){
 | |
|             
 | |
|             const idToDisplay = new URLSearchParams(window.location.search).get('id');
 | |
|             let response;
 | |
| 
 | |
|             // Retrieving the logged in user's profile
 | |
|             if(!idToDisplay || idToDisplay === 'myself'){
 | |
|                 document.getElementById('editBadge').style.display = 'block'; // show edit button
 | |
|                 const token = getCookie('token');
 | |
|                 // Check whether the token exists
 | |
|                 if(!token){
 | |
|                     window.location.href = 'login.html';
 | |
|                 }
 | |
|                 response = await fetch(`${API_URL}/person/myself`, {
 | |
|                     headers: {
 | |
|                         "Content-type": "application/json; charset=UTF-8",
 | |
|                         "authorization": token
 | |
|                     }
 | |
|                 });
 | |
|             }
 | |
|             else {
 | |
|                 response = await fetch(`${API_URL}/person/${idToDisplay}/details`, {
 | |
|                     headers: {
 | |
|                         "Content-type": "application/json; charset=UTF-8",
 | |
|                     }
 | |
|                 });
 | |
|             }
 | |
| 
 | |
|             const data = await response.json();
 | |
|             if(response.ok){
 | |
|                 populateFields(data.display_name, data.email);
 | |
|                 document.body.style.display = 'block'; // Show page
 | |
|             }
 | |
|             else{
 | |
|                 alert(data.error);
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         function populateFields (displayName, email) {
 | |
|             document.getElementById('displayName').textContent = displayName;
 | |
|             document.title = `${displayName} - Blink`
 | |
|             document.getElementById('email').textContent = email;
 | |
|         }
 | |
| 
 | |
|         function editProfile () {
 | |
|             alert('Editing');
 | |
|         }
 | |
| 
 | |
|     </script>
 | |
| 
 | |
| </body>
 | |
| </html>
 | |
| 
 |