Skip to content

Commit 6e2ddcc

Browse files
snagnik-abacussnagnik-abacus
committed
Mobile fixes
1 parent a7db035 commit 6e2ddcc

File tree

5 files changed

+467
-253
lines changed

5 files changed

+467
-253
lines changed

‎assets/css/mobile.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* Mobile Navigation Styles */
2+
@media (max-width: 768px) {
3+
.nav {
4+
display: none; /* Hide the navigation bar completely on mobile */
5+
}
6+
7+
/* Add a floating action button for mobile navigation */
8+
.mobile-nav-toggle {
9+
position: fixed;
10+
bottom: 20px;
11+
right: 20px;
12+
width: 50px;
13+
height: 50px;
14+
background: var(--gold-gradient);
15+
border-radius: 50%;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
z-index: 1000;
20+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
21+
cursor: pointer;
22+
}
23+
24+
.mobile-nav {
25+
position: fixed;
26+
bottom: 80px;
27+
right: 20px;
28+
background: var(--glass-bg);
29+
backdrop-filter: blur(20px);
30+
border: 1px solid var(--glass-border);
31+
border-radius: 15px;
32+
padding: 15px;
33+
z-index: 999;
34+
display: none;
35+
flex-direction: column;
36+
gap: 15px;
37+
box-shadow: var(--shadow);
38+
}
39+
40+
.mobile-nav.active {
41+
display: flex;
42+
}
43+
44+
.mobile-nav-link {
45+
color: var(--text-color);
46+
text-decoration: none;
47+
font-weight: 500;
48+
padding: 8px 15px;
49+
border-radius: 8px;
50+
transition: var(--transition);
51+
}
52+
53+
.mobile-nav-link:hover,
54+
.mobile-nav-link.active {
55+
background: rgba(200, 169, 126, 0.2);
56+
}
57+
58+
/* Adjust section padding for mobile */
59+
section {
60+
padding-top: 60px !important;
61+
}
62+
63+
/* Adjust hero section for mobile */
64+
.hero-content {
65+
padding: 2rem !important;
66+
}
67+
68+
.glitch {
69+
font-size: 3rem !important;
70+
}
71+
72+
.typing-text {
73+
font-size: 1.2rem !important;
74+
}
75+
76+
.cta-buttons {
77+
flex-direction: column;
78+
gap: 1rem !important;
79+
}
80+
}

‎assets/css/styles.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1170,6 +1170,42 @@ body {
11701170
}
11711171
}
11721172

1173+
@media (max-width: 480px) {
1174+
.glitch {
1175+
font-size: 2.5rem;
1176+
}
1177+
1178+
.typing-text {
1179+
font-size: 1.1rem;
1180+
}
1181+
1182+
.cta-primary, .cta-secondary {
1183+
padding: 1rem 1.5rem;
1184+
width: 100%;
1185+
justify-content: center;
1186+
}
1187+
1188+
.timeline-item {
1189+
margin-left: 20px;
1190+
}
1191+
1192+
.timeline-item:nth-child(odd) {
1193+
margin-left: 20px;
1194+
}
1195+
1196+
.timeline-dot {
1197+
left: -25px;
1198+
}
1199+
1200+
.timeline-item:nth-child(odd) .timeline-dot {
1201+
left: -25px;
1202+
}
1203+
1204+
.education-card {
1205+
padding: 1.5rem;
1206+
}
1207+
}
1208+
11731209
/* Tooltip */
11741210
[data-tooltip] {
11751211
position: relative;

‎assets/js/main.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ navToggle.addEventListener('click', () => {
122122
isNavOpen = !isNavOpen;
123123
navLinksContainer.style.display = isNavOpen ? 'flex' : 'none';
124124

125+
// Animate hamburger
125126
const spans = navToggle.querySelectorAll('span');
126127
if (isNavOpen) {
127128
spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
@@ -134,6 +135,31 @@ navToggle.addEventListener('click', () => {
134135
}
135136
});
136137

138+
// Close mobile menu when clicking a nav link
139+
document.querySelectorAll('.nav-link').forEach(link => {
140+
link.addEventListener('click', () => {
141+
if (window.innerWidth <= 768) {
142+
isNavOpen = false;
143+
navLinksContainer.style.display = 'none';
144+
145+
// Reset hamburger icon
146+
const spans = navToggle.querySelectorAll('span');
147+
spans[0].style.transform = 'none';
148+
spans[1].style.opacity = '1';
149+
spans[2].style.transform = 'none';
150+
}
151+
});
152+
});
153+
154+
// Adjust mobile menu on window resize
155+
window.addEventListener('resize', () => {
156+
if (window.innerWidth > 768) {
157+
navLinksContainer.style.display = 'flex';
158+
} else if (!isNavOpen) {
159+
navLinksContainer.style.display = 'none';
160+
}
161+
});
162+
137163
// Skills animation
138164
const skillBars = document.querySelectorAll('.skill-progress');
139165

‎assets/js/mobile-nav.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Mobile Navigation
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Create mobile navigation elements
4+
const mobileNavToggle = document.createElement('div');
5+
mobileNavToggle.className = 'mobile-nav-toggle';
6+
mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
7+
8+
const mobileNav = document.createElement('div');
9+
mobileNav.className = 'mobile-nav';
10+
11+
// Get all navigation links and clone them for mobile
12+
const navLinks = document.querySelectorAll('.nav-link');
13+
navLinks.forEach(link => {
14+
const mobileLink = document.createElement('a');
15+
mobileLink.className = 'mobile-nav-link';
16+
mobileLink.href = link.href;
17+
mobileLink.textContent = link.textContent;
18+
mobileNav.appendChild(mobileLink);
19+
});
20+
21+
// Add mobile navigation to the body
22+
document.body.appendChild(mobileNavToggle);
23+
document.body.appendChild(mobileNav);
24+
25+
// Toggle mobile navigation
26+
mobileNavToggle.addEventListener('click', function() {
27+
mobileNav.classList.toggle('active');
28+
mobileNavToggle.innerHTML = mobileNav.classList.contains('active')
29+
? '<i class="fas fa-times"></i>'
30+
: '<i class="fas fa-bars"></i>';
31+
});
32+
33+
// Close mobile navigation when clicking a link
34+
document.querySelectorAll('.mobile-nav-link').forEach(link => {
35+
link.addEventListener('click', function() {
36+
mobileNav.classList.remove('active');
37+
mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
38+
});
39+
});
40+
41+
// Update active link on scroll for mobile
42+
window.addEventListener('scroll', () => {
43+
let current = '';
44+
const scrollPosition = window.scrollY + 300;
45+
46+
document.querySelectorAll('section').forEach(section => {
47+
const sectionTop = section.offsetTop;
48+
const sectionHeight = section.clientHeight;
49+
50+
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
51+
current = section.getAttribute('id');
52+
}
53+
});
54+
55+
document.querySelectorAll('.mobile-nav-link').forEach(link => {
56+
link.classList.remove('active');
57+
if (link.getAttribute('href').slice(1) === current) {
58+
link.classList.add('active');
59+
}
60+
});
61+
});
62+
63+
// Hide mobile navigation on window resize if screen becomes larger
64+
window.addEventListener('resize', function() {
65+
if (window.innerWidth > 768) {
66+
mobileNav.classList.remove('active');
67+
mobileNavToggle.innerHTML = '<i class="fas fa-bars"></i>';
68+
}
69+
});
70+
});

0 commit comments

Comments
 (0)