aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Contact.jsx8
-rw-r--r--src/components/Hero.jsx44
-rw-r--r--src/components/Projects.jsx71
3 files changed, 66 insertions, 57 deletions
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
index af982e1..4012f18 100644
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -8,14 +8,6 @@ const fadeInUp = {
transition: { duration: 0.6 },
};
-const staggerContainer = {
- animate: {
- transition: {
- staggerChildren: 0.1,
- },
- },
-};
-
export const Contact = () => {
const [formData, setFormData] = useState({
name: "",
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index d3a3b71..586e5be 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -33,23 +33,22 @@ export const Hero = () => {
animate="animate"
>
<motion.div className="hero-badge">
- <span> πŸ‘‹ Hello, I'm </span>
+ <span> πŸ‘‹ Hello, I&apos;m </span>
</motion.div>
<motion.h1
className="glitch"
variants={fadeInUp}
whileHover={{ scale: 1.02 }}
>
- PedroTech
+ MillyZ
</motion.h1>
<motion.h2 className="hero-subtitle" variants={fadeInUp}>
{" "}
- Creative Developer & Designer
+ Data Analyst & App Developer
</motion.h2>
<motion.p className="hero-description" variants={fadeInUp}>
- I craft beautiful digital experiences that combine stunning design
- with powerful functionality. Specializing in modern web applications
- and interactive user interfaces.
+ I analyze data to extract meaningful insights and drive business
+ decisions. Proficient in Python and data visualization tools like PowerBI.
</motion.p>
<motion.div className="cta-buttons" variants={staggerContainer}>
@@ -72,14 +71,11 @@ export const Hero = () => {
</motion.a>
</motion.div>
<motion.div className="social-links" variants={staggerContainer}>
- <motion.a href="https://github.com" target="_blank">
- <i className="fab fa-github"> </i>
- </motion.a>
- <motion.a href="https://linkedin.com" target="_blank">
+ <motion.a href="https://www.linkedin.com/in/meiling-zhao-29b554247/" target="_blank">
<i className="fab fa-linkedin"> </i>
</motion.a>
- <motion.a href="https://twitter.com" target="_blank">
- <i className="fab fa-twitter"> </i>
+ <motion.a href="https://github.com/millyz2023" target="_blank">
+ <i className="fab fa-github"> </i>
</motion.a>
</motion.div>
</motion.div>
@@ -104,23 +100,23 @@ export const Hero = () => {
}}
style={vscDarkPlus}
>
- {`const aboutMe: DeveloperProfile = {
- codename: "PedroTech",
- origin: "🌍 Somewhere between a coffee shop and a terminal",
- role: "Fullstack Web Sorcerer",
+ {`const aboutMe: Profile = {
+ username: "MillicentZhao",
+ location: "Beijing, CN πŸ‡¨πŸ‡³ -> Providence, RI πŸ‡ΊπŸ‡Έ",
+ role: "Data Explorer and Flutter Developer",
stack: {
- languages: ["JavaScript", "TypeScript", "SQL"],
- frameworks: ["React", "Next.js", "TailwindCSS", "Supabase"],
+ languages: ["SQL", "Python", "Dart"],
+ frameworks: ["PowerBI", "Flutter"],
},
traits: [
- "pixel-perfectionist",
- "API whisperer",
- "dark mode advocate",
- "terminal aesthetic enthusiast",
+ "enthusiastically curious",
+ "critical thinker",
+ "energentically outgoing",
+ "creative sketcher",
],
missionStatement:
- "Turning ideas into interfaces and bugs into feature",
- availability: "Available for hire",
+ "Learn from data. Always keep creating!"
+
};`}
</SyntaxHighlighter>
</div>
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 2696c48..36cdf47 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -42,72 +42,93 @@ export const Projects = () => {
<motion.div
className="project-card"
variants={fadeInUp}
- whileHover={{ y: -10, transition: { duration: 0.2 } }}
+ whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
+ onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiZWVlNmI0MzUtMmVlOC00OTY4LWExODAtYzljYThjNjU5M2JkIiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9", "_blank")}
+
>
<motion.div
className="project-image"
- style={{ backgroundImage: "url('/projects/ai-saas.png')" }}
- whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+ style={{ backgroundImage: "url('/projects/robert-de-niro-project.jpg')" }}
+ whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
/>
- <h3> AI SaaS Platform</h3>
+ <h3>Robert De Niro: A Data-Driven Filmography</h3>
<p>
- A modern SaaS platform built with Next.js and OpenAI integration,
- featuring real-time AI-powered content generation and analytics.
+ An interactive deep dive into Robert De Niro&apos;s film career through a crunching the data from Movie Database APIs.
</p>
<div className="project-tech">
- <span>Next.js</span>
- <span>OpenAI</span>
- <span>TailwindCSS</span>
+ <span>SQL</span>
+ <span>Python</span>
+ <span>PowerBI</span>
</div>
</motion.div>
<motion.div
className="project-card"
variants={fadeInUp}
- whileHover={{ y: -10, transition: { duration: 0.2 } }}
+ whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
+ onClick={() => window.open("https://github.com/millyz2023/Brown-Housing-Notification/", "_blank")}
>
<motion.div
className="project-image"
style={{
- backgroundImage: "url('/projects/social-media.png')",
+ backgroundImage: "url('/projects/brown-housing-notifications.jpg')",
}}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
/>
- <h3>Social Media Dashboard</h3>
+ <h3>Brown Housing Notifications</h3>
+ <p>
+ A python script that scrapes Brown University&apos;s off-campus housing website and sends notifications via email when new housing options become available.
+ </p>
+ <div className="project-tech">
+ <span>Python</span>
+ <span>RESTful APIs</span>
+ <span>SMTP</span>
+ </div>
+ </motion.div>
+
+ <motion.div
+ className="project-card"
+ variants={fadeInUp}
+ whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
+ onClick={() => window.open("https://github.com/millyz2023/Find-your-flight", "_blank")}
+ >
+ <motion.div
+ className="project-image"
+ style={{ backgroundImage: "url('/projects/find-your-flight.jpg')" }}
+ whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
+ />
+ <h3>Find Your Flight</h3>
<p>
- A comprehensive social media management dashboard with analytics,
- scheduling, and engagement tracking features.
+ Uses the Flight Search APIs to ease the process of making a perfect travel plan.
</p>
<div className="project-tech">
- <span>React</span>
- <span>Node.js</span>
- <span>MongoDB</span>
+ <span>Python</span>
+ <span>RESTful APIs</span>
</div>
</motion.div>
<motion.div
className="project-card"
variants={fadeInUp}
- whileHover={{ y: -10, transition: { duration: 0.2 } }}
+ whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
+ onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiMTdmMzVlNGMtYzhkMS00OTFkLWIwYzEtZmY2ODIyYjJkOGY1IiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9&pageName=b178d00c0c03a7a3409e", "_blank")}
>
<motion.div
className="project-image"
style={{
- backgroundImage: "url('/projects/stopwatch.png')",
+ backgroundImage: "url('/projects/little-dictionary-of-fashion.jpg')",
}}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}
/>
- <h3>Productivity Timer</h3>
+ <h3>Little Dictionary of Fashion by Christian Dior</h3>
<p>
- A sleek productivity timer application with customizable work
- sessions, statistics tracking, and dark mode support.
+ An interactive Power BI applet allowing for exploration of Christian Dior&apos;s fashion from the 50s.
</p>
<div className="project-tech">
- <span>React</span>
- <span>TypeScript</span>
- <span>TailwindCSS</span>
+ <span>Python</span>
+ <span>PowerBI</span>
</div>
</motion.div>
</motion.div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 02:43:49 +0000