Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@iiiiftekhar
iiiiftekhar committed Jun 30, 2024
1 parent 2399a93 commit 994e5c0
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 58 deletions.
45 changes: 27 additions & 18 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,38 @@
<p id="current-time"></p>
<p id="current-date"></p>
</div>
<div class="content">
<h1>Hey, I'm <span class="highlight emerald">Iftekhar</span></h1>
<h2 class="bio">I am a self-taught developer that is passionate about programming and eager to learn new skills. <br> I'm also a privacy
advocate.</h2>
</div>
<div class="button-container">
<!-- Social buttons -->
<a target="_blank" class="social-button" href="mailto:[email protected]">
<img alt="Email" loading="lazy" width="20" height="20" decoding="async" src="resources/icons/email.svg" />
</a>
<a target="_blank" class="social-button" href="https://www.linkedin.com/in/iiiiftekhar/">
<img alt="LinkedIn" loading="lazy" width="20" height="20" decoding="async"
src="resources/icons/linkedin.svg" />
</a>
<a target="_blank" class="social-button" href="https://github.com/iiiiftekhar">
<img alt="Github" loading="lazy" width="20" height="20" decoding="async" src="resources/icons/github.svg" />
</a>
<div class="profile-section">
<div class="profile">
<img src="resources/profile/2426.png" alt="Profile Picture" class="profile-pic">
<div class="content">
<h1>Hey, I'm <span class="highlight emerald">Iftekhar</span> 👋</h1>
<p class="bio">I am a self-taught developer passionate about programming and eager to learn new skills. I'm
also a privacy advocate.</p>
</div>
</div>
<div class="location">
<img src="resources/icons/location.svg" alt="Location Icon" class="location-icon">
<p><strong>Somewhere / Earth 🌏</strong></p>
</div>
<div class="button-container">
<!-- Social buttons -->
<a target="_blank" class="social-button" href="mailto:[email protected]">
<img alt="Email" loading="lazy" width="30" height="30" decoding="async" src="resources/icons/email.svg" />
</a>
<a target="_blank" class="social-button" href="https://www.linkedin.com/in/iiiiftekhar/">
<img alt="LinkedIn" loading="lazy" width="30" height="30" decoding="async"
src="resources/icons/linkedin.svg" />
</a>
<a target="_blank" class="social-button" href="https://github.com/iiiiftekhar">
<img alt="Github" loading="lazy" width="30" height="30" decoding="async" src="resources/icons/github.svg" />
</a>
</div>
</div>
</div>
</header>
<!-- Fixed position button linking to GitHub repo -->
<a target="_blank" class="repo-source-button" href="https://github.com/iiiiftekhar/XQ7">
<img alt="Repository" loading="lazy" width="20" height="20" decoding="async" src="resources/icons/branch.svg" />
<img alt="Repository" loading="lazy" width="30" height="30" decoding="async" src="resources/icons/branch.svg" />
</a>
<!-- Link to external JavaScript file -->
<script src="script.js"></script>
Expand Down
7 changes: 7 additions & 0 deletions docs/resources/icons/location.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/resources/profile/2426.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 21 additions & 27 deletions docs/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,36 +42,30 @@ document.addEventListener('DOMContentLoaded', function () {
function setupScrollEffect() {
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
} else {
header.style.backgroundColor = 'transparent';
}
header.style.opacity = 1 - window.scrollY / 500;
});
}

// Function to update the current time and date
function updateDateTime() {
const now = new Date();
const time = now.toLocaleTimeString();
const date = now.toLocaleDateString();

document.getElementById('current-time').textContent = time;
document.getElementById('current-date').textContent = date;
// Display current time and date
function displayDateTime() {
const timeElement = document.getElementById('current-time');
const dateElement = document.getElementById('current-date');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const updateTime = () => {
const now = new Date();
timeElement.textContent = now.toLocaleTimeString();
dateElement.textContent = now.toLocaleDateString(undefined, options);
};
updateTime(); // Initial call
setInterval(updateTime, 1000); // Update every second
}

// Initialize all functions
function init() {
animateHeaderText();
setupRepoButton();
addHoverEffectsToSocialButtons();
setupScrollEffect();
updateDateTime();
setInterval(updateDateTime, 1000); // Update the time every second
// Uncomment the line below to dynamically load a font
// loadFont('Ubuntu', 'resources/fonts/Ubuntu-Bold.ttf');
}

// Run the initialization function on DOM content loaded
init();
});
animateHeaderText();
setupRepoButton();
addHoverEffectsToSocialButtons();
setupScrollEffect();
displayDateTime();
// Uncomment the line below to dynamically load the font (optional)
// loadFont('Ubuntu', 'resources/fonts/Ubuntu-Bold.ttf');
});
59 changes: 46 additions & 13 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,32 @@ header {
flex: 1;
}

/* Styles for the header content */
/* Styles for the profile section */
.profile-section {
margin-top: 3rem;
}

.profile {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
}

.profile-pic {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid var(--emerald-color);
}

.content h1 {
font-size: 3rem;
font-size: 2rem;
/* Large font size for header text */
font-weight: 700;
/* Bold text */
line-height: 4rem;
margin-bottom: 1rem;
line-height: 3rem;
margin-bottom: 0.5rem;
}

/* Emerald color class */
Expand All @@ -67,14 +85,25 @@ header {
/* Make bio text bold */
}

/* Styles for the location section */
.location {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}

.location-icon {
width: 20px;
height: 20px;
}

/* Button container styles */
.button-container {
display: flex;
justify-content: center;
/* Center the buttons */
gap: 20px;
/* Space between buttons */
margin-top: 1.5rem;
margin-top: 1rem;
}

/* Social button styles */
Expand All @@ -84,15 +113,17 @@ header {
justify-content: center;
background-color: var(--button-background);
/* Use button background color from variables */
padding: 10px;
padding: 5px;
border-radius: 50%;
transition: background-color 0.3s ease;
/* Smooth transition for background color */
width: 30px;
height: 30px;
}

.social-button img {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}

.social-button:hover {
Expand All @@ -110,15 +141,17 @@ header {
justify-content: center;
background-color: var(--button-background);
/* Use button background color from variables */
padding: 10px;
padding: 5px;
border-radius: 50%;
transition: background-color 0.3s ease;
/* Smooth transition for background color */
width: 30px;
height: 30px;
}

.repo-source-button img {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}

.repo-source-button:hover {
Expand Down

0 comments on commit 994e5c0

Please sign in to comment.