Skip to content

Commit cd2cf94

Browse files
MagicherryMagicherry
committed
Refactor and reorganize the CSS files.
1 parent 3bd2c65 commit cd2cf94

20 files changed

Lines changed: 1013 additions & 854 deletions

File tree

‎src/App.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import {
77
BrowserRouter as Router
88
} from "react-router-dom";
99
import ScrollToTop from "./components/MainFrame/ScrollToTop";
10-
import "./css/style.css";
11-
import "./css/App.css";
1210
import "bootstrap/dist/css/bootstrap.min.css";
13-
import "./css/responsive.css";
11+
import "./css/style.css";
1412

1513
import AnimatedRoutes from "./components/MainFrame/AnimatedRoutes";
1614

‎src/components/About/About.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function About() {
1818
className="about__content-col"
1919
>
2020
<h1 className="about__title">
21-
Know Who <strong className="blue">I'M</strong>
21+
Know Who <strong className="text-accent">I'M</strong>
2222
</h1>
2323
<Aboutcard />
2424
</Col>
@@ -36,13 +36,13 @@ function About() {
3636
</Col>
3737
</Row>
3838
<h1 className="project-heading">
39-
Professional <strong className="blue">Skillset </strong>
39+
Professional <strong className="text-accent">Skillset </strong>
4040
</h1>
4141

4242
<Techstack />
4343

4444
<h1 className="project-heading">
45-
<strong className="blue">Tools</strong> I use
45+
<strong className="text-accent">Tools</strong> I use
4646
</h1>
4747
<Toolstack />
4848

‎src/components/About/AboutCard.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@ const AboutCard = () => {
1616
<blockquote className="blockquote mb-0">
1717
<ul className="about-card__highlights">
1818
<li className="about-card__highlight">
19-
Hello, I am <span className="blue">Yuting Zhou</span>, a Computer Science master’s student at{" "}
20-
<span className="blue">Rutgers University</span>.
19+
Hello, I am <span className="text-accent">Yuting Zhou</span>, a Computer Science master’s student at{" "}
20+
<span className="text-accent">Rutgers University</span>.
2121
</li>
2222
<li className="about-card__highlight">
23-
I currently work as a Research Assistant at the <span className="blue">CAIT Lab</span>, focusing on{" "}
24-
<span className="blue">rail incident modeling</span>, <span className="blue">large-scale data engineering</span>, and{" "}
25-
<span className="blue">NLP/LLM-based automation</span> for transportation systems.
23+
I currently work as a Research Assistant at the <span className="text-accent">CAIT Lab</span>, focusing on{" "}
24+
<span className="text-accent">rail incident modeling</span>, <span className="text-accent">large-scale data engineering</span>, and{" "}
25+
<span className="text-accent">NLP/LLM-based automation</span> for transportation systems.
2626
</li>
2727
<li className="about-card__highlight">
28-
I am actively seeking <span className="blue">Software Engineering</span> opportunities starting{" "}
29-
<span className="blue">Summer 2026</span>, with interests in <span className="blue">ML systems</span>,{" "}
30-
<span className="blue">Frontend &amp; Backend Engineering</span>, and <span className="blue">data-driven products</span>.
28+
I am actively seeking <span className="text-accent">Software Engineering</span> opportunities starting{" "}
29+
<span className="text-accent">Summer 2026</span>, with interests in <span className="text-accent">ML systems</span>,{" "}
30+
<span className="text-accent">Frontend &amp; Backend Engineering</span>, and <span className="text-accent">data-driven products</span>.
3131
</li>
3232
<li className="about-card__highlight">
3333
Apart from coding, here are some activities I enjoy:
@@ -41,7 +41,7 @@ const AboutCard = () => {
4141
))}
4242
</ul>
4343

44-
<p className="blue about-card__quote">
44+
<p className="text-accent about-card__quote">
4545
<em>"No matter what your dream is, you have to dedicate yourself entirely to it."</em>
4646
</p>
4747
<footer className="blockquote-footer">AYRTON SENNA</footer>

‎src/components/About/Github.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function Github() {
66
return (
77
<Row className="github__row">
88
<h1 className="project-heading github__title">
9-
Days I <strong className="blue">Code</strong>
9+
Days I <strong className="text-accent">Code</strong>
1010
</h1>
1111
<GitHubCalendar
1212
username="magicherry"

‎src/components/Experiences/ExperienceCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function ExperienceCard(props) {
77
<Card.Body>
88
<Card.Title>{props.title}</Card.Title>
99
<Card.Subtitle className="mb-2 text-muted">{props.company}</Card.Subtitle>
10-
<Card.Text style={{ textAlign: "justify" }}>
10+
<Card.Text className="text-justify">
1111
{props.description}
1212
</Card.Text>
1313
<Card.Footer>{props.duration}</Card.Footer>

‎src/components/Experiences/Experiences.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ function ExperienceTimeline({ title, subtitle, data, icon: Icon }) {
99
return (
1010
<>
1111
<h1 className="project-heading">
12-
My <strong className="blue">{title} </strong> Experiences
12+
My <strong className="text-accent">{title} </strong> Experiences
1313
</h1>
14-
<p style={{ color: "white" }}>{subtitle}</p>
14+
<p className="section-intro-text">{subtitle}</p>
1515
<VerticalTimeline>
1616
{data.map((experience, index) => (
1717
<VerticalTimelineElement

‎src/components/Home/Home1.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ function Home1() {
2222
</span>
2323
</h1>
2424

25-
<h1 className="heading-name">
25+
<h1 className="home-heading-label">
2626
I'M
27-
<strong className="main-name"> YUTING ZHOU</strong>
27+
<strong className="home-hero-name"> YUTING ZHOU</strong>
2828
.
2929
</h1>
3030

‎src/components/Home/Home2.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,21 +57,21 @@ function Home2() {
5757
<Row className="align-items-center">
5858
<Col md={8} className="home-about-description">
5959
<h1 className="home-about__title">
60-
LET ME <span className="blue">INTRODUCE</span> MYSELF
60+
LET ME <span className="text-accent">INTRODUCE</span> MYSELF
6161
</h1>
6262
<p className="home-about-body">
6363
I fell in love with programming and have stayed curious ever since. 🤷‍♂️
6464
<br /><br />
65-
I am especially interested in <b className="blue">ML systems</b> and <b className="blue">data-driven products</b> that turn insights into reliable, practical software. 🚀
65+
I am especially interested in <b className="text-accent">ML systems</b> and <b className="text-accent">data-driven products</b> that turn insights into reliable, practical software. 🚀
6666
<br /><br />
67-
I work across the stack—from crafting <b className="blue">clean, responsive interfaces </b> to building dependable <b className="blue">back-end services </b>.
68-
I’m comfortable with <b className="blue">databases, API design, and containerized deployments that scale </b>. 💻
67+
I work across the stack—from crafting <b className="text-accent">clean, responsive interfaces </b> to building dependable <b className="text-accent">back-end services </b>.
68+
I’m comfortable with <b className="text-accent">databases, API design, and containerized deployments that scale </b>. 💻
6969
<br /><br />
70-
Whenever possible, I strive to turn ideas into products that are <b className="blue">fast, maintainable, and a joy </b>to use!
70+
Whenever possible, I strive to turn ideas into products that are <b className="text-accent">fast, maintainable, and a joy </b>to use!
7171
</p>
7272
</Col>
73-
<Col md={4} className="myAvtar">
74-
<div className="myAvtar-wrapper">
73+
<Col md={4} className="home-avatar">
74+
<div className="home-avatar-wrapper">
7575
<Tilt>
7676
<img
7777
src={myImg}
@@ -81,7 +81,7 @@ function Home2() {
8181
decoding="async"
8282
/>
8383
</Tilt>
84-
<div className="d-flex justify-content-center w-100" style={{ marginTop: '20px' }}>
84+
<div className="d-flex justify-content-center w-100 home-about-actions">
8585
<Button
8686
className="download-cv-button"
8787
variant="primary"
@@ -99,7 +99,7 @@ function Home2() {
9999
<Col md={12} className="home-about-social">
100100
<h1>FIND ME ON</h1>
101101
<p>
102-
Feel free to <span className="blue">connect</span> with me
102+
Feel free to <span className="text-accent">connect</span> with me
103103
</p>
104104
<ul className="home-about-social-links">
105105
{socialLinks.map((link, idx) => (
@@ -108,7 +108,7 @@ function Home2() {
108108
href={link.href}
109109
target={link.onClick ? "_self" : "_blank"}
110110
rel="noopener noreferrer"
111-
className="icon-colour home-social-icons"
111+
className="social-icon-color home-social-icons"
112112
aria-label={link.ariaLabel}
113113
onClick={link.onClick}
114114
>
@@ -121,11 +121,11 @@ function Home2() {
121121
</Row>
122122
</Container>
123123
<Modal show={showWechatModal} onHide={() => setShowWechatModal(false)} centered>
124-
<Modal.Body style={{ textAlign: "center", cursor: "pointer" }} onClick={() => setShowWechatModal(false)}>
124+
<Modal.Body className="modal-body-center" onClick={() => setShowWechatModal(false)}>
125125
<img
126126
src={wechatQrCode}
127127
alt="WeChat QR Code"
128-
style={{ maxWidth: "100%" }}
128+
className="img-max-full"
129129
loading="lazy"
130130
decoding="async"
131131
/>

‎src/components/MainFrame/FadeInOnScroll.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const FadeInOnScroll = ({ children, delay = 0, eager = false, skipAnimation = fa
4242
<div
4343
ref={domRef}
4444
className={skipAnimation ? '' : `fade-in-section ${isVisible ? 'is-visible' : ''}`}
45-
style={skipAnimation ? {} : { transitionDelay: `${delay}ms` }}
45+
style={skipAnimation ? {} : { '--fade-delay': `${delay}ms` } /* dynamic per instance; see style.css header */}
4646
>
4747
{children}
4848
</div>

‎src/components/MainFrame/Footer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ const Footer = () => {
3838
return (
3939
<Container fluid className="footer">
4040
<Row className="align-items-center justify-content-center">
41-
<Col md={4} className="footer-copywright d-flex align-items-center justify-content-center">
41+
<Col md={4} className="footer-copyright d-flex align-items-center justify-content-center">
4242
<a href="mailto:zyt680129@gmail.com" className="email-link">
4343
<h3>Email: zyt680129@gmail.com</h3>
4444
</a>
4545
</Col>
46-
<Col md={4} className="footer-copywright d-flex align-items-center justify-content-center">
46+
<Col md={4} className="footer-copyright d-flex align-items-center justify-content-center">
4747
<h3>Copyright © Yuting Zhou {year}</h3>
4848
</Col>
4949
<Col md={4} className="footer-body d-flex align-items-center justify-content-center">
@@ -67,13 +67,13 @@ const Footer = () => {
6767
</Row>
6868
<Modal show={showWechatModal} onHide={() => setShowWechatModal(false)} centered>
6969
<Modal.Body
70-
style={{ textAlign: "center", cursor: "pointer" }}
70+
className="modal-body-center"
7171
onClick={() => setShowWechatModal(false)}
7272
>
7373
<img
7474
src={wechatQrCode}
7575
alt="WeChat QR Code"
76-
style={{ maxWidth: "100%" }}
76+
className="img-max-full"
7777
loading="lazy"
7878
decoding="async"
7979
/>

0 commit comments

Comments
 (0)