Skip to content

Commit 49048eb

Browse files
20ns20ns
committed
fixed the top issues with the navbar overlapping and more visual changes
1 parent af1af1e commit 49048eb

File tree

3 files changed

+128
-147
lines changed

3 files changed

+128
-147
lines changed

‎src/App.jsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,21 @@ function App() {
1313
};
1414

1515
return (
16-
<>
17-
<Navbar onToggle={handleNavbarToggle} />
18-
{/* Wrap only the main content, NOT the Navbar */}
19-
<div className={`${isNavbarOpen ? 'content-shifted-open' : 'content-shifted'}`}>
16+
<div id="app">
17+
<Navbar onToggle={handleNavbarToggle} isOpen={isNavbarOpen} />
18+
<main className={`${isNavbarOpen ? 'content-shifted-open' : 'content-shifted'} pt-8`}>
2019
<div className="two-column-container">
2120
<Hero />
2221
<Intro />
2322
</div>
24-
<main>
25-
<section id="portfolio">
26-
<Projects />
27-
</section>
28-
<section id="contact">
29-
<Contact />
30-
</section>
31-
</main>
32-
</div>
33-
</>
23+
<section id="portfolio">
24+
<Projects />
25+
</section>
26+
<section id="contact">
27+
<Contact />
28+
</section>
29+
</main>
30+
</div>
3431
);
3532
}
3633

‎src/components/Hero.jsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,18 @@ const Hero = () => {
2020
}, []);
2121

2222
return (
23-
<div id="hero" className="hero"> {/* Add id="hero" here */}
24-
<h1 className="text-4xl font-bold text-white">{text}</h1>
25-
<h2 className="text-2xl font-bold text-white">Full Stack Developer</h2>
26-
<div className="h-1 bg-cyan-500 w-1/4 my-4"></div>
27-
<p className="mt-4 text-lg text-gray-300">
28-
Passionate developer with a knack for creating efficient and scalable
29-
web applications.
30-
</p>
31-
</div>
23+
<main className="pt-20"> {/* Add pt-16 to push content down */}
24+
<div id="hero" className="hero">
25+
<h1 className="text-4xl font-bold text-white">{text}</h1>
26+
<h2 className="text-2xl font-bold text-white">Full Stack Developer</h2>
27+
<div className="h-1 bg-cyan-500 w-1/4 my-4"></div>
28+
<p className="mt-4 text-lg text-gray-300">
29+
Passionate developer with a knack for creating efficient and
30+
scalable web applications.
31+
</p>
32+
</div>
33+
{/* Other sections like About, Portfolio, Skills, Contact would go here */}
34+
</main>
3235
);
3336
};
3437

‎src/styles.css

Lines changed: 105 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,39 @@
1111
}
1212

1313
body {
14-
background-color: var(--dark-gray);
14+
/* Remove background-color from body */
1515
color: var(--light-gray);
1616
font-family: 'Arial', sans-serif;
1717
margin: 0;
1818
padding: 0;
19-
transition: margin-right 0.3s ease;
2019
}
2120

22-
h1, h2, h3 {
23-
color: var(--white);
24-
font-family: 'Poppins', sans-serif;
21+
#app {
22+
background-color: var(--dark-gray);
23+
min-height: 100vh;
24+
display: flex; /* Use flexbox for layout */
2525
}
2626

27+
/* Navbar styles (restored) */
2728
nav {
2829
background-color: rgba(44, 44, 44, 0.85);
2930
position: fixed;
30-
top: 50%; /* Move the top edge to the middle of the screen */
31+
top: 50%; /* Original vertical centering */
3132
right: 0;
32-
transform: translateY(-50%); /* Shift the navbar up by half its height to center it */
33-
border-radius: 9999px;
34-
height: 300px;
35-
width: 100%;
33+
transform: translateY(-50%); /* Original vertical centering */
34+
border-radius: 9999px; /* Original rounded corners */
35+
height: 300px; /* Original height */
36+
width: 60px; /* Closed state width */
3637
z-index: 100;
3738
transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
38-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Add drop shadow */
39-
border: 2px solid white; /* Add white stroke */
39+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
40+
border: 2px solid white;
4041
}
4142

42-
/* Apply frosted glass effect when the navbar is minimized */
43-
nav.backdrop-filter-blur {
44-
backdrop-filter: blur(5px); /* Adjust the blur value as needed */
45-
-webkit-backdrop-filter: blur(5px); /* For Safari */
43+
/* Apply frosted glass effect when the navbar is open */
44+
nav.nav-open { /* Use the correct class for open state */
45+
backdrop-filter: blur(5px);
46+
-webkit-backdrop-filter: blur(5px);
4647
background-color: rgba(44, 44, 44, 0.5); /* Adjust background opacity */
4748
}
4849

@@ -51,164 +52,144 @@ nav ul {
5152
padding: 0;
5253
margin: 0;
5354
display: flex;
55+
flex-direction: column; /* Vertical menu */
56+
align-items: center;
57+
height: 100%;
5458
justify-content: space-around;
5559
}
5660

57-
/* Text depth */
58-
nav ul li a.text-shadow-lg {
59-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
61+
nav li {
62+
width: 100%;
63+
text-align: center;
6064
}
6165

6266
nav li a {
6367
color: var(--light-gray);
6468
text-decoration: none;
65-
padding: 1rem;
69+
padding: 10px;
6670
display: block;
67-
transition: color 0.3s ease;
68-
transition: transform 0.2s ease;
69-
font-family: 'Poppins', sans-serif; /* Apply Poppins font */
71+
transition: color 0.3s ease, transform 0.2s ease;
72+
font-family: 'Poppins', sans-serif;
7073
font-weight: 700;
74+
white-space: nowrap; /* Prevent text wrapping */
7175
}
7276

7377
nav li a:hover {
7478
color: var(--electric-cyan);
75-
transform: scale(1.20);
79+
transform: scale(1.1);
7680
text-decoration: none;
7781
}
7882

79-
#about {
80-
padding: 4rem;
83+
/* Navbar open state */
84+
nav.nav-open {
85+
width: 200px; /* Open state width */
86+
background-color: rgba(44, 44, 44, 0.95); /* Slightly more opaque when open */
8187
}
8288

83-
#portfolio {
84-
padding: 4rem;
85-
background-color: var(--charcoal);
89+
/* Text depth */
90+
nav ul li a.text-shadow-lg {
91+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
8692
}
8793

88-
.project-card {
89-
background-color: var(--dark-gray);
90-
padding: 2rem;
91-
margin-bottom: 2rem;
92-
border-radius: 5px;
93-
transition: transform 0.3s ease, box-shadow 0.3s ease;
94+
/* Main content shifting */
95+
.content-shifted {
96+
margin-right: 60px; /* Match closed navbar width */
97+
transition: margin-right 0.3s ease;
98+
flex-grow: 1; /* Allow main content to fill available space */
9499
}
95100

96-
.project-card:hover {
97-
transform: translateY(-5px);
98-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
101+
.content-shifted-open {
102+
margin-right: 200px; /* Match open navbar width */
103+
transition: margin-right 0.3s ease;
104+
flex-grow: 1;
99105
}
100106

101-
.project-card h3 {
102-
margin-bottom: 1rem;
107+
/* Two-column layout */
108+
.two-column-container {
109+
display: flex;
110+
gap: 20px;
111+
padding: 20px;
112+
align-items: flex-start;
103113
}
104114

105-
.project-card button {
106-
background-color: var(--electric-cyan);
107-
color: var(--white);
108-
border: none;
109-
padding: 0.5rem 1rem;
110-
margin-right: 1rem;
111-
font-size: 1rem;
112-
cursor: pointer;
113-
transition: background-color 0.3s ease
114-
}
115+
/* ... other section styles (Projects, Contact, etc.) ... */
115116

116-
.project-card button:nth-child(3) {
117-
background-color: var(--lime-green);
118-
}
117+
/* Responsive adjustments */
118+
@media (max-width: 768px) { /* Adjust breakpoint as needed */
119+
.content-shifted {
120+
margin-right: 0; /* No margin when navbar is hidden */
121+
}
119122

120-
.project-card button:hover {
121-
background-color: var(--lime-green);
122-
}
123+
.content-shifted-open {
124+
margin-right: 0; /* No margin when navbar is hidden */
125+
}
123126

124-
#skills {
125-
padding: 4rem;
126-
}
127+
.two-column-container {
128+
flex-direction: column;
129+
}
127130

128-
.skill-category {
129-
margin-bottom: 2rem;
130-
}
131+
nav {
132+
width: 100%; /* Full width when closed on mobile */
133+
height: auto; /* Auto height when closed */
134+
bottom: 0; /* Position at the bottom on mobile */
135+
top: auto; /* Reset top positioning */
136+
transform: none;
137+
border-radius: 0;
138+
}
131139

132-
#contact {
133-
padding: 4rem;
134-
background-color: var(--charcoal);
135-
text-align: center;
136-
}
140+
nav ul {
141+
flex-direction: row; /* Horizontal menu on mobile */
142+
justify-content: space-around;
143+
}
137144

138-
#contact form {
139-
max-width: 500px;
140-
margin: 0 auto;
141-
}
145+
nav li {
146+
margin-bottom: 0; /* Reset margin for horizontal layout */
147+
}
142148

143-
#contact input,
144-
#contact textarea {
145-
background-color: var(--dark-gray);
146-
color: var(--light-gray);
147-
border: none;
148-
padding: 1rem;
149-
margin-bottom: 1rem;
150-
width: 100%;
151-
border-radius: 5px;
149+
nav.nav-open {
150+
width: 100%; /* Full width when open on mobile */
151+
height: auto;
152+
bottom: auto;
153+
top: 0; /* Position at top when open */
154+
}
152155
}
153156

154-
#contact button {
155-
background-color: var(--electric-cyan);
156-
color: var(--white);
157-
border: none;
158-
padding: 1rem 2rem;
159-
font-size: 1.2rem;
160-
cursor: pointer;
161-
transition: background-color 0.3s ease;
157+
/* Hero Section Styles */
158+
.hero {
159+
text-align: left;
160+
margin-bottom: 2rem;
162161
}
163162

164-
#contact button:hover {
165-
background-color: var(--lime-green);
163+
.hero h1 {
164+
font-size: 3rem; /* Adjust as needed */
165+
font-weight: bold;
166+
color: var(--white);
167+
margin-bottom: 0.5rem;
166168
}
167169

168-
footer {
169-
background-color: var(--dark-gray);
170-
padding: 1rem;
171-
text-align: center;
170+
.hero h2 {
171+
font-size: 1.5rem; /* Adjust as needed */
172+
font-weight: bold;
173+
color: var(--white);
174+
margin-bottom: 1rem;
172175
}
173176

174-
.two-column-container {
175-
display: grid;
176-
grid-template-columns: 1fr 1fr;
177-
gap: 20px;
178-
padding: 20px;
179-
align-items: flex-start;
180-
min-height: auto;
181-
margin-top: 100px;
177+
.hero .h-1 { /* Target the specific line */
178+
height: 2px; /* Adjust as needed */
179+
background-color: var(--electric-cyan);
180+
width: 25%;
181+
margin-bottom: 1rem;
182182
}
183183

184-
.hero {
185-
text-align: left;
186-
margin-bottom: 2rem;
187-
}
188184
.hero p {
189185
margin-top: 1rem;
190186
font-size: 1.125rem;
191-
color: #d1d5db;
192-
/* Add your custom styles */
193-
font-family: 'Arial', sans-serif; /* Change font family */
187+
color: var(--light-gray);
188+
font-family: 'Arial', sans-serif;
194189
}
195190

191+
/* Intro Section Styles */
196192
.intro {
197193
text-align: left;
198194
margin-top: 40px;
199-
}
200-
201-
@media (max-width: 600px) {
202-
.content-shifted {
203-
margin-right: 40px; /* Adjust based on closed navbar width on small screens */
204-
}
205-
.content-shifted-open {
206-
margin-right: 90px;
207-
}
208-
}
209-
.content-shifted {
210-
margin-right: 100px;
211-
}
212-
.content-shifted-open {
213-
margin-right: 100px;
214195
}

0 commit comments

Comments
 (0)