diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.jsx | 2 | ||||
| -rw-r--r-- | src/components/Contact.jsx | 8 | ||||
| -rw-r--r-- | src/components/Hero.jsx | 44 | ||||
| -rw-r--r-- | src/components/Projects.jsx | 71 |
4 files changed, 67 insertions, 58 deletions
diff --git a/src/App.jsx b/src/App.jsx index 44f7866..c3e9f01 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -30,7 +30,7 @@ function App() { viewport={{ once: true }} transition={{ duration: 0.6 }} > - <p> © 2025 PedroTech. All rights reserved.</p> + <p> © 2025 Meiling Zhao</p> </motion.footer> </div> ); 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'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'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'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'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> |