Skip to content

Commit 7caecce

Browse files
yimingpengyimingpeng
committed
Update the pages to be more mobile responsive
1 parent e161481 commit 7caecce

File tree

5 files changed

+257
-29
lines changed

5 files changed

+257
-29
lines changed

‎src/components/Contact.astro‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,31 @@
1111
or just connecting with fellow professionals in the field.
1212
</p>
1313
<div class="contact-links">
14-
<a href="mailto:yimingpengjojo@gmail.com" title="Direct email for opportunities & collaborations">
15-
<span>✉</span> Email Me
16-
</a>
17-
<a href="tel:+64220619380" title="Call for immediate consultation">
18-
<span>📞</span> Call Now
19-
</a>
20-
<a href="https://www.linkedin.com/in/yiming-nz/" target="_blank" title="Professional network & career history">
21-
<span>💼</span> LinkedIn Profile
22-
</a>
23-
<a href="https://github.com/yimingpeng" target="_blank" title="Open source projects & code samples">
24-
<span>💻</span> GitHub Repos
25-
</a>
26-
<a href="/yiming_cv.pdf" target="_blank" title="Complete resume with technical details">
27-
<span>📄</span> Download Resume
28-
</a>
14+
<div class="tooltip tooltip-top">
15+
<a href="mailto:yimingpengjojo@gmail.com">
16+
<span>✉</span> Email Me
17+
</a>
18+
<span class="tooltip-text">Direct email for opportunities & collaborations</span>
19+
</div>
20+
21+
<div class="tooltip tooltip-top">
22+
<a href="https://www.linkedin.com/in/yiming-nz/" target="_blank">
23+
<span>💼</span> LinkedIn Profile
24+
</a>
25+
<span class="tooltip-text">Professional network & career history</span>
26+
</div>
27+
<div class="tooltip tooltip-top">
28+
<a href="https://github.com/yimingpeng" target="_blank">
29+
<span>💻</span> GitHub Repos
30+
</a>
31+
<span class="tooltip-text">Open source projects & code samples</span>
32+
</div>
33+
<div class="tooltip tooltip-top">
34+
<a href="/yiming_cv.pdf" target="_blank">
35+
<span>📄</span> Download Resume
36+
</a>
37+
<span class="tooltip-text">Complete resume with technical details</span>
38+
</div>
2939
</div>
3040
</div>
3141
</div>

‎src/components/Hero.astro‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,34 @@
1919
skills and deep technical expertise to solve complex data challenges.
2020
</p>
2121
<div class="social-links">
22-
<a href="mailto:yimingpengjojo@gmail.com" title="Send me an email - Let's discuss opportunities">✉</a>
23-
<a href="tel:+64220619380" title="Call me directly - Available for consultations">📞</a>
24-
<a href="https://twitter.com/yimingpeng1982" target="_blank" title="Follow me on Twitter - Latest updates & insights">🐦</a>
25-
<a href="https://scholar.google.co.uk/citations?user=bJBbv0EAAAAJ" target="_blank" title="Google Scholar - My research publications">🎓</a>
26-
<a href="https://github.com/yimingpeng" target="_blank" title="GitHub - Check out my code repositories">💻</a>
27-
<a href="https://www.linkedin.com/in/yiming-nz/" target="_blank" title="LinkedIn - Professional network & experience">💼</a>
28-
<a href="/yiming_cv.pdf" target="_blank" title="Download CV - Complete professional resume">📄</a>
22+
<div class="tooltip">
23+
<a href="mailto:yimingpengjojo@gmail.com">✉</a>
24+
<span class="tooltip-text">Send me an email - Let's discuss opportunities</span>
25+
</div>
26+
<div class="tooltip">
27+
<a href="tel:+64220619380">📞</a>
28+
<span class="tooltip-text">Call me directly - Available for consultations</span>
29+
</div>
30+
<div class="tooltip">
31+
<a href="https://twitter.com/yimingpeng1982" target="_blank">🐦</a>
32+
<span class="tooltip-text">Follow me on Twitter - Latest updates & insights</span>
33+
</div>
34+
<div class="tooltip">
35+
<a href="https://scholar.google.co.uk/citations?user=bJBbv0EAAAAJ" target="_blank">🎓</a>
36+
<span class="tooltip-text">Google Scholar - My research publications</span>
37+
</div>
38+
<div class="tooltip">
39+
<a href="https://github.com/yimingpeng" target="_blank">💻</a>
40+
<span class="tooltip-text">GitHub - Check out my code repositories</span>
41+
</div>
42+
<div class="tooltip">
43+
<a href="https://www.linkedin.com/in/yiming-nz/" target="_blank">💼</a>
44+
<span class="tooltip-text">LinkedIn - Professional network & experience</span>
45+
</div>
46+
<div class="tooltip">
47+
<a href="/yiming_cv.pdf" target="_blank">📄</a>
48+
<span class="tooltip-text">Download CV - Complete professional resume</span>
49+
</div>
2950
</div>
3051
</div>
3152
<div class="hero-image">

‎src/styles/components.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,10 @@
222222
margin-top: 2rem;
223223
}
224224

225+
.contact-links .tooltip {
226+
display: inline-block;
227+
}
228+
225229
.contact-links a {
226230
display: flex;
227231
align-items: center;

‎src/styles/global.css‎

Lines changed: 103 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ body {
2121
}
2222

2323
.terminal-cursor::after {
24-
content: '█';
24+
content: '|';
2525
animation: blink 1s infinite;
2626
color: #89b4fa;
27+
font-weight: 300;
2728
}
2829

2930
.container {
@@ -60,9 +61,110 @@ body {
6061
margin-right: auto;
6162
}
6263

64+
/* Custom Tooltip Styles */
65+
.tooltip {
66+
position: relative;
67+
display: inline-block;
68+
}
69+
70+
.tooltip .tooltip-text {
71+
visibility: hidden;
72+
width: 200px;
73+
background-color: #1e1e2e;
74+
color: #cdd6f4;
75+
text-align: center;
76+
border-radius: 6px;
77+
padding: 8px 12px;
78+
position: absolute;
79+
z-index: 1000;
80+
top: 125%;
81+
left: 50%;
82+
margin-left: -100px;
83+
opacity: 0;
84+
transition: opacity 0.2s ease-in-out;
85+
font-size: 0.85rem;
86+
font-weight: 500;
87+
border: 1px solid #89b4fa;
88+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
89+
pointer-events: none;
90+
}
91+
92+
.tooltip .tooltip-text::after {
93+
content: "";
94+
position: absolute;
95+
bottom: 100%;
96+
left: 50%;
97+
margin-left: -5px;
98+
border-width: 5px;
99+
border-style: solid;
100+
border-color: transparent transparent #89b4fa transparent;
101+
}
102+
103+
.tooltip:hover .tooltip-text {
104+
visibility: visible;
105+
opacity: 1;
106+
}
107+
108+
/* For contact section tooltips (appear above) */
109+
.tooltip.tooltip-top .tooltip-text {
110+
bottom: auto;
111+
top: 125%;
112+
}
113+
114+
.tooltip.tooltip-top .tooltip-text::after {
115+
top: auto;
116+
bottom: 100%;
117+
border-color: transparent transparent #89b4fa transparent;
118+
}
119+
63120
/* Responsive Design */
64121
@media (max-width: 768px) {
65122
.container {
66123
padding: 0 1rem;
67124
}
125+
126+
.section {
127+
padding: 3rem 0;
128+
}
129+
130+
.section-title {
131+
font-size: 2rem;
132+
}
133+
134+
.section-subtitle {
135+
font-size: 1.1rem;
136+
margin-bottom: 3rem;
137+
}
138+
139+
.tooltip .tooltip-text {
140+
width: 160px;
141+
margin-left: -80px;
142+
font-size: 0.8rem;
143+
}
144+
}
145+
146+
@media (max-width: 480px) {
147+
.container {
148+
padding: 0 0.75rem;
149+
}
150+
151+
.section {
152+
padding: 2.5rem 0;
153+
}
154+
155+
.section-title {
156+
font-size: 1.8rem;
157+
}
158+
159+
.section-subtitle {
160+
font-size: 1rem;
161+
margin-bottom: 2.5rem;
162+
}
163+
164+
.tooltip .tooltip-text {
165+
width: 140px;
166+
margin-left: -70px;
167+
font-size: 0.75rem;
168+
padding: 6px 10px;
169+
}
68170
}

‎src/styles/hero.css‎

Lines changed: 97 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,50 @@
2222
line-height: 1.2;
2323
}
2424

25+
/* Terminal command styling */
26+
.hero-text h1 {
27+
color: #a6e3a1; /* Green for whoami command */
28+
}
29+
30+
.hero-text h1 .terminal-cursor {
31+
color: #f9e2af; /* Yellow for name */
32+
font-weight: 600;
33+
display: block;
34+
margin-top: 0.5rem;
35+
}
36+
2537
.hero-text .subtitle {
2638
font-size: 1.5rem;
2739
margin-bottom: 0.5rem;
2840
opacity: 0.9;
2941
}
3042

43+
/* Style the cat role.txt command and role output */
44+
.hero-text .subtitle {
45+
color: #a6e3a1; /* Green for cat role.txt command */
46+
font-weight: 500;
47+
line-height: 1.4;
48+
}
49+
50+
/* Enhanced terminal styling */
51+
.hero-text h1::before {
52+
content: '$ ';
53+
color: #89b4fa; /* Blue prompt symbol */
54+
font-weight: 400;
55+
}
56+
57+
.hero-text .subtitle::before {
58+
content: '$ ';
59+
color: #89b4fa; /* Blue prompt symbol */
60+
font-weight: 400;
61+
}
62+
3163
.hero-text .company {
3264
font-size: 1.2rem;
3365
margin-bottom: 2rem;
34-
opacity: 0.8;
66+
color: #cba6f7; /* Purple for company name */
67+
font-weight: 600;
68+
opacity: 0.9;
3569
}
3670

3771
.hero-text .bio {
@@ -59,6 +93,10 @@
5993
margin-top: 2rem;
6094
}
6195

96+
.social-links .tooltip {
97+
display: inline-block;
98+
}
99+
62100
.social-links a {
63101
display: inline-flex;
64102
align-items: center;
@@ -72,20 +110,22 @@
72110
text-decoration: none;
73111
transition: all 0.3s ease;
74112
font-size: 1.2rem;
113+
position: relative;
114+
overflow: visible;
75115
}
76116

77117
.social-links a:hover {
78118
background: rgba(137, 180, 250, 0.15);
79119
border-color: #89b4fa;
80120
}
81121

82-
.social-links a {
83-
position: relative;
84-
overflow: visible;
85-
}
86-
87122
/* Responsive Design */
88123
@media (max-width: 768px) {
124+
.hero {
125+
padding: 6rem 0 3rem;
126+
margin-top: 60px;
127+
}
128+
89129
.hero-content {
90130
grid-template-columns: 1fr;
91131
text-align: center;
@@ -96,8 +136,59 @@
96136
font-size: 2.5rem;
97137
}
98138

139+
.hero-text .subtitle {
140+
font-size: 1.2rem;
141+
}
142+
143+
.hero-text .company {
144+
font-size: 1.1rem;
145+
}
146+
147+
.hero-text .bio {
148+
font-size: 1rem;
149+
}
150+
99151
.profile-img {
100152
width: 200px;
101153
height: 200px;
102154
}
155+
156+
.social-links {
157+
justify-content: center;
158+
flex-wrap: wrap;
159+
}
160+
}
161+
162+
@media (max-width: 480px) {
163+
.hero {
164+
padding: 5rem 0 2rem;
165+
margin-top: 50px;
166+
}
167+
168+
.hero-text h1 {
169+
font-size: 2rem;
170+
}
171+
172+
.hero-text .subtitle {
173+
font-size: 1.1rem;
174+
}
175+
176+
.hero-text .company {
177+
font-size: 1rem;
178+
}
179+
180+
.hero-text .bio {
181+
font-size: 0.95rem;
182+
}
183+
184+
.profile-img {
185+
width: 180px;
186+
height: 180px;
187+
}
188+
189+
.social-links a {
190+
width: 45px;
191+
height: 45px;
192+
font-size: 1.1rem;
193+
}
103194
}

0 commit comments

Comments
 (0)