Skip to content

Commit eacd606

Browse files
abdonmoralesabdonmorales
committed
major UI changes implemented, some refinements still needed
1 parent 52b7ab5 commit eacd606

5 files changed

Lines changed: 201 additions & 82 deletions

File tree

‎src/components/ThemeToggle.module.css‎

Lines changed: 56 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,95 @@
1-
.themeToggleButton {
1+
.themeToggle {
2+
--size: 2.5rem;
3+
--icon-size: 1.25rem;
4+
--icon-color: var(--gray-400);
5+
--icon-active: var(--gray-100);
6+
--background: var(--gray-800);
7+
--background-hover: var(--gray-700);
8+
--border: var(--gray-700);
9+
--border-hover: var(--gray-600);
10+
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
11+
--accent: var(--accent-regular);
12+
213
display: flex;
314
align-items: center;
415
justify-content: center;
5-
border: 0;
6-
border-radius: 999rem;
7-
padding: 0.5rem;
8-
background-color: var(--gray-900);
9-
box-shadow: inset 0 0 0 1px var(--accent-overlay);
10-
cursor: pointer;
11-
transition: all 0.2s ease;
1216
width: 4rem;
1317
height: 2.5rem;
18+
padding: 0.25rem;
19+
border: 1px solid var(--border);
20+
border-radius: 999px;
21+
background: var(--background);
22+
cursor: pointer;
23+
transition: var(--transition);
1424
position: relative;
1525
overflow: hidden;
1626
}
1727

18-
.themeToggleButton:hover {
28+
.themeToggle:hover {
29+
background: var(--background-hover);
30+
border-color: var(--border-hover);
1931
transform: translateY(-1px);
2032
box-shadow: 0 2px 8px var(--accent-overlay);
2133
}
2234

23-
.themeToggleButton:active {
35+
.themeToggle:active {
2436
transform: translateY(0);
2537
}
2638

39+
.themeToggle:focus-visible {
40+
outline: 2px solid var(--accent-regular);
41+
outline-offset: 2px;
42+
}
43+
2744
.icon {
28-
z-index: 1;
29-
position: relative;
45+
position: absolute;
3046
display: flex;
3147
align-items: center;
3248
justify-content: center;
33-
padding: 0.375rem;
3449
width: 2rem;
3550
height: 2rem;
36-
font-size: 1rem;
37-
color: var(--gray-100);
3851
border-radius: 50%;
39-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52+
transition: var(--transition);
53+
color: var(--icon-color);
4054
}
4155

42-
.icon.light::before {
43-
content: '';
44-
z-index: -1;
45-
position: absolute;
46-
inset: 0;
47-
background-color: var(--accent-regular);
48-
border-radius: 50%;
49-
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
50-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
56+
.sun {
57+
left: 0.25rem;
58+
opacity: 1;
59+
transform: scale(1) rotate(0deg);
5160
}
5261

53-
.dark .icon.light::before,
54-
:global(.theme-dark) .icon.light::before {
55-
transform: translateX(100%);
62+
.moon {
63+
right: 0.25rem;
64+
opacity: 0;
65+
transform: scale(0.8) rotate(-45deg);
66+
color: var(--icon-active);
5667
}
5768

58-
.icon.dark {
59-
transform: translateX(-100%);
69+
[data-theme="dark"] .sun {
6070
opacity: 0;
61-
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
62-
color: var(--gray-900);
71+
transform: scale(0.8) rotate(45deg);
6372
}
6473

65-
.dark .icon.dark,
66-
:global(.theme-dark) .icon.dark {
67-
transform: translateX(0);
74+
[data-theme="dark"] .moon {
6875
opacity: 1;
76+
transform: scale(1) rotate(0deg);
77+
}
78+
79+
.themeToggle:hover .sun {
80+
color: var(--accent);
6981
}
7082

71-
.dark .icon.light,
72-
:global(.theme-dark) .icon.light {
73-
transform: translateX(100%);
83+
.themeToggle:hover .moon {
84+
color: var(--icon-active);
7485
}
7586

7687
/* Dark mode specific styles */
77-
:global(.theme-dark) .themeToggleButton {
78-
background-color: var(--gray-100);
79-
box-shadow: inset 0 0 0 1px var(--accent-overlay);
88+
:global(.theme-dark) .themeToggle {
89+
--background: var(--gray-100);
90+
--background-hover: var(--gray-200);
91+
--border: var(--gray-300);
92+
--border-hover: var(--gray-400);
93+
--icon-color: var(--gray-600);
94+
--icon-active: var(--gray-900);
8095
}

‎src/components/ThemeToggle.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,10 @@ const ThemeToggle = () => {
3131
const updateDocumentTheme = (dark: boolean) => {
3232
if (dark) {
3333
document.documentElement.classList.add('theme-dark');
34+
document.documentElement.setAttribute('data-theme', 'dark');
3435
} else {
3536
document.documentElement.classList.remove('theme-dark');
37+
document.documentElement.setAttribute('data-theme', 'light');
3638
}
3739
};
3840

@@ -49,13 +51,14 @@ const ThemeToggle = () => {
4951
onClick={toggleTheme}
5052
aria-pressed={isDark}
5153
aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
52-
className={`${styles.themeToggleButton} ${isDark ? styles.dark : ''}`}
54+
className={styles.themeToggle}
55+
data-theme={isDark ? 'dark' : 'light'}
5356
>
54-
<span className="sr-only">Dark theme</span>
55-
<span className={`${styles.icon} ${styles.light}`}>
57+
<span className="sr-only">Toggle theme</span>
58+
<span className={`${styles.icon} ${styles.sun} ${!isDark ? styles.active : ''}`}>
5659
<ReactIcon icon="sun" />
5760
</span>
58-
<span className={`${styles.icon} ${styles.dark}`}>
61+
<span className={`${styles.icon} ${styles.moon} ${isDark ? styles.active : ''}`}>
5962
<ReactIcon icon="moon-stars" />
6063
</span>
6164
</button>

‎src/pages/about.astro‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ import Hero from "../components/Hero.astro";
3030
<div class="content">
3131
<p>I'm pursuing a Bachelor of Science in Economics at the University of Texas at Austin, with an anticipated graduation in May 2027. My journey combines a strong academic foundation with hands-on experience in technology.</p>
3232

33-
<p>In the technical realm, I'm proficient in Git, C++, C, Python, and Linux, with intermediate abilities in shell scripting, AI, and ChatGPT. As a native Spanish speaker, I'm fluent in both Mexican and Spanish dialects, enabling me to communicate effectively in international contexts.</p>
33+
<p>In the technical realm, I'm proficient in Git, C++, C, and Linux, with intermediate abilities in shell scripting, AI, and ChatGPT. As a native Spanish speaker, I'm fluent in both Mexican and Spanish dialects, enabling me to communicate effectively in international contexts.</p>
3434

35-
<p>Currently, I'm expanding my knowledge in Java, Assembly language, C, and web development. My academic training includes courses such as Calculus I and II, Matrices and Matrix Calculations, Micro and Macroeconomics, and Engineering Physics, which have strengthened my analytical capabilities.</p>
35+
<p>Currently, I'm expanding my knowledge in Java, Assembly language, C, and web development. My academic training includes courses such as Calculus I and II, Matrices and Matrix Calculations, Micro and Macroeconomics, and Engineering Physics I and II, which have strengthened my analytical capabilities.</p>
3636

3737
<p>Outside the classroom, I actively develop software projects that can be seen on my GitHub profile. I've cultivated leadership skills as a team leader and CEO of my own startup, experiences that have allowed me to grow professionally.</p>
3838

@@ -44,7 +44,7 @@ import Hero from "../components/Hero.astro";
4444
<div class="education-header">
4545
<p class="university">University of Texas at Austin</p>
4646
<p class="degree">Economics, Bachelor of Science</p>
47-
<p class="certificate">Certificate in Computer Science and Engineering</p>
47+
<p class="certificate">Minor in Electrical Engineering and Computer Science (EECS)</p>
4848
<p class="graduation-date">Expected graduation date: May 2027</p>
4949
</div>
5050
</div>
@@ -56,8 +56,8 @@ import Hero from "../components/Hero.astro";
5656
<div class="skill-category">
5757
<h3>Programming Languages</h3>
5858
<ul>
59-
<li><span class="skill-level">Intermediate:</span> Python, BASIC, Shell scripting (Bash)</li>
60-
<li><span class="skill-level">Advanced:</span> Java, LaTeX, R</li>
59+
<li><span class="skill-level">Intermediate:</span> HTML, Shell scripting (Bash), MATLAB</li>
60+
<li><span class="skill-level">Advanced:</span> Java, R</li>
6161
<li><span class="skill-level">Basic:</span> C, C++</li>
6262
</ul>
6363
</div>
@@ -75,23 +75,23 @@ import Hero from "../components/Hero.astro";
7575
<h2 class="section-title">Community Involvement</h2>
7676
<div class="content">
7777
<div class="involvement-item">
78-
<h3>ACM (Association of Computing Machinery)</h3>
78+
<h3>IEEE (Institute of Electronics and Electrical Engineers)-UT</h3>
7979
<p class="involvement-role">Student Member</p>
80-
<p class="involvement-date">September 2023 &ndash; Present</p>
80+
<p class="involvement-date">February 2025 &ndash; Present</p>
8181
<p class="involvement-location">UT @ Austin, Texas</p>
8282
</div>
83-
83+
8484
<div class="involvement-item">
8585
<h3>HACS (Hispanic Association of Computer Science)</h3>
8686
<p class="involvement-role">Student Member</p>
8787
<p class="involvement-date">January 2024 &ndash; Present</p>
8888
<p class="involvement-location">UT @ Austin, Texas</p>
8989
</div>
90-
90+
9191
<div class="involvement-item">
92-
<h3>IEEE (Institute of Electronics and Electrical Engineers)-UT</h3>
92+
<h3>ACM (Association of Computing Machinery)</h3>
9393
<p class="involvement-role">Student Member</p>
94-
<p class="involvement-date">February 2025 &ndash; Present</p>
94+
<p class="involvement-date">September 2023 &ndash; Present</p>
9595
<p class="involvement-location">UT @ Austin, Texas</p>
9696
</div>
9797
</div>

‎src/pages/index.astro‎

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,13 @@ const projects = (await getCollection('work'))
4343

4444
<Image
4545
src="/assets/portrait.jpg"
46-
alt="Abdon Morales"
46+
alt="Portrait of Abdon Morales"
4747
width={480}
4848
height={620}
4949
loading="eager"
5050
fetchpriority="high"
5151
/>
5252
</header>
53-
</header>
5453

5554
<Skills />
5655
</div>
@@ -60,6 +59,7 @@ const projects = (await getCollection('work'))
6059
<header class="section-header stack gap-2 lg:gap-4">
6160
<h3>My Projects</h3>
6261
<p>Take a look below at some of my featured projects from the past few years.</p>
62+
<div class="divider"></div>
6363
</header>
6464

6565
<div class="gallery">
@@ -91,12 +91,21 @@ const projects = (await getCollection('work'))
9191
.hero {
9292
display: flex;
9393
flex-direction: column;
94-
align-items: center;
94+
align-items: flex-start;
9595
gap: 2rem;
96+
padding: 2rem 1.25rem;
97+
border-radius: var(--glass-border-radius);
98+
margin: 1rem 0;
9699
}
97100

98101
.roles {
99102
display: none;
103+
flex-wrap: nowrap;
104+
gap: 0.5rem;
105+
margin-top: 1rem;
106+
overflow-x: auto;
107+
width: 100%;
108+
padding-bottom: 0.5rem;
100109
}
101110

102111
.hero img {
@@ -111,14 +120,16 @@ const projects = (await getCollection('work'))
111120
.hero {
112121
display: grid;
113122
grid-template-columns: 6fr 4fr;
114-
padding-inline: 2.5rem;
123+
padding: 3rem 2.25rem;
115124
gap: 3.75rem;
125+
align-items: center;
116126
}
117127

118128
.roles {
119-
margin-top: 0.5rem;
129+
margin: 1.5rem 0 0.5rem;
120130
display: flex;
121-
gap: 0.5rem;
131+
gap: 0.75rem;
132+
flex-wrap: wrap;
122133
}
123134

124135
.hero img {
@@ -132,13 +143,19 @@ const projects = (await getCollection('work'))
132143

133144
.section {
134145
display: grid;
135-
gap: 2rem;
146+
gap: 2.5rem;
147+
position: relative;
136148
}
137149

138150
.with-background {
139151
position: relative;
140152
}
141153

154+
.with-background {
155+
padding-top: 3rem;
156+
margin-top: 3rem;
157+
}
158+
142159
.with-background::before {
143160
--hero-bg: var(--bg-image-subtle-2);
144161

@@ -164,31 +181,64 @@ const projects = (await getCollection('work'))
164181
}
165182

166183
.section-header {
167-
justify-self: center;
168-
text-align: center;
169184
max-width: 50ch;
170185
font-size: var(--text-md);
171186
color: var(--gray-300);
187+
margin-bottom: 2.5rem;
188+
position: relative;
189+
}
190+
191+
.divider {
192+
height: 1px;
193+
background-color: var(--gray-700);
194+
margin: 1.5rem 0;
195+
width: 100%;
172196
}
173197

174198
.section-header h3 {
175199
font-size: var(--text-2xl);
200+
color: var(--gray-100);
201+
margin: 0;
176202
}
177203

178204
@media (min-width: 50em) {
179205
.section {
180206
grid-template-columns: repeat(4, 1fr);
181207
grid-template-areas: 'header header header header' 'gallery gallery gallery gallery';
182-
gap: 5rem;
208+
gap: 3.5rem;
183209
}
184210

185211
.section.with-cta {
186212
grid-template-areas: 'header header header cta' 'gallery gallery gallery gallery';
213+
row-gap: 2.5rem;
214+
column-gap: 2rem;
215+
align-items: start;
216+
padding-top: 2rem;
217+
margin-top: 2rem;
218+
}
219+
.section-header h3 {
220+
font-size: var(--text-4xl);
221+
}
222+
223+
.with-cta .section-header {
224+
justify-self: flex-start;
225+
text-align: left;
226+
}
227+
228+
.gallery {
229+
grid-area: gallery;
230+
margin-top: 0.5rem;
231+
}
232+
233+
.cta {
234+
grid-area: cta;
235+
margin-top: 0.5rem;
187236
}
188237

189238
.section-header {
190239
grid-area: header;
191240
font-size: var(--text-lg);
241+
margin-bottom: 3rem;
192242
}
193243

194244
.section-header h3 {
@@ -202,10 +252,12 @@ const projects = (await getCollection('work'))
202252

203253
.gallery {
204254
grid-area: gallery;
255+
margin-top: 0.5rem;
205256
}
206257

207258
.cta {
208259
grid-area: cta;
260+
margin-top: 0.5rem;
209261
}
210262
}
211263

0 commit comments

Comments
 (0)