refactor(portfolio): update skills data and remove awards/education sections
- Update skills data with additional frameworks and tools - Remove AwardsSection and EducationSection components - Update project documentation to reflect changes
This commit is contained in:
joyzhao
@@ -1,67 +0,0 @@
|
||||
import React from "react";
|
||||
import { awards } from "@/lib/data";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import { Trophy } from "lucide-react";
|
||||
import MotionWrapper from "./MotionWrapper";
|
||||
import { GlassCard } from "./ui/glass-card";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function AwardsSection({ lang }: { lang: "en" | "zh" }) {
|
||||
const t = useTranslations(lang);
|
||||
return (
|
||||
<section
|
||||
id="awards"
|
||||
className="py-12 bg-gradient-to-b from-background to-muted/10"
|
||||
>
|
||||
<div className="container max-w-4xl mx-auto px-6 md:px-4">
|
||||
<MotionWrapper>
|
||||
<h2 className="text-2xl font-bold mb-8 text-center md:text-left">
|
||||
🏆 {t('awards.title')}
|
||||
</h2>
|
||||
</MotionWrapper>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{awards.map((award, index) => (
|
||||
<MotionWrapper key={award.name + award.date} delay={index * 0.1}>
|
||||
<GlassCard className="p-4 dark:border-purple-500/10 hover:border-purple-500/30 transition-all duration-300 flex flex-col h-full">
|
||||
<div className="flex items-center mb-2">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 20 }}
|
||||
transition={{ type: "spring", stiffness: 500 }}
|
||||
className="flex items-center justify-center bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full p-1.5 mr-2"
|
||||
>
|
||||
<Trophy className="h-4 w-4 text-white" />
|
||||
</motion.div>
|
||||
<h3 className="font-medium">{t(award.name as any)}</h3>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-1 pl-8">
|
||||
🏢 {t(award.issuer as any)}
|
||||
</p>
|
||||
<div className="flex flex-col space-y-2 mt-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground bg-background/50 px-2 py-1 rounded-md">
|
||||
📅 {t(award.date as any)}
|
||||
</span>
|
||||
<motion.span
|
||||
className="text-xs px-2 py-1 bg-purple-500/10 rounded-full"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
{t(award.position as any)}
|
||||
</motion.span>
|
||||
</div>
|
||||
<motion.span
|
||||
className="text-xs text-muted-foreground/80 bg-background/50 px-2 py-1 rounded-md w-fit"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
{award.type === "awards.type.international" ? "🌎 " : "🇮🇳 "}
|
||||
{t(award.type as any)}
|
||||
</motion.span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</MotionWrapper>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { education } from "@/lib/data";
|
||||
import TimelineItem from "./TimelineItem";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import { Award } from "lucide-react";
|
||||
import MotionWrapper from "./MotionWrapper";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function EducationSection({ lang }: { lang: "en" | "zh" }) {
|
||||
const t = useTranslations(lang);
|
||||
return (
|
||||
<section
|
||||
id="education"
|
||||
className="py-12 bg-gradient-to-b from-muted/10 to-background"
|
||||
>
|
||||
<div className="container max-w-4xl mx-auto px-6 md:px-4">
|
||||
<MotionWrapper>
|
||||
<h2 className="text-2xl font-bold mb-8 text-center md:text-left">
|
||||
🎓 {t('education.title')}
|
||||
</h2>
|
||||
</MotionWrapper>
|
||||
|
||||
<div className="mb-8">
|
||||
{education.map((edu, index) => {
|
||||
const institutionKey = edu.institution.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return (
|
||||
<TimelineItem
|
||||
key={edu.institution}
|
||||
title={`🎓 ${t(`education.${institutionKey}.degree` as any)}`}
|
||||
subtitle={`🏛️ ${t(`education.${institutionKey}.institution` as any)}`}
|
||||
date={`📅 ${t(`education.${institutionKey}.period` as any)}`}
|
||||
isLast={index === education.length - 1}
|
||||
index={index}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
📍 {t(`education.${institutionKey}.location` as any)}
|
||||
</p>
|
||||
|
||||
{edu.achievements && edu.achievements.length > 0 && (
|
||||
<motion.div
|
||||
className="mt-3 p-4 bg-background/80 backdrop-blur-sm backdrop-filter rounded-lg border border-purple-500/20 dark:bg-card/10 dark:border-purple-500/10 shadow-sm"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="h-6 w-6 flex items-center justify-center rounded-full bg-purple-500/10 mr-2">
|
||||
<Award className="h-4 w-4 text-purple-500" />
|
||||
</div>
|
||||
<h4 className="text-sm font-medium">
|
||||
✨ {t('education.achievementsAndActivities')}
|
||||
</h4>
|
||||
</div>
|
||||
<ul className="list-none ml-4 space-y-2 text-sm">
|
||||
{edu.achievements.map((achievement, i) => (
|
||||
<motion.li
|
||||
key={i}
|
||||
className="text-muted-foreground relative pl-6"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 * i }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
{t(`education.${institutionKey}.achievements.${i}` as any)}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
)}
|
||||
</TimelineItem>
|
||||
)})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -68,25 +68,23 @@ export const skills = {
|
||||
"Solidity",
|
||||
],
|
||||
frontendDevelopment: [
|
||||
"Vue",
|
||||
"Nuxtjs",
|
||||
"React",
|
||||
"Nextjs",
|
||||
"Reactjs",
|
||||
"React Native",
|
||||
"Shadcn UI",
|
||||
"PrimeVue",
|
||||
"Naive-ui",
|
||||
"Tailwind CSS",
|
||||
"HTML",
|
||||
"CSS",
|
||||
],
|
||||
backendDevelopment: ["Nodejs", "Expressjs"],
|
||||
databaseAndStorage: ["PostgreSQL", "Drizzle (ORM)"],
|
||||
cloudAndDevOps: ["AWS"],
|
||||
backendDevelopment: ["Nodejs", "Expressjs", "Nestjs", "Fastify"],
|
||||
databaseAndStorage: ["PostgreSQL", "MongoDB", "Drizzle (ORM)", "Mongoose", "Prisma"],
|
||||
cloudAndDevOps: ["AWS", "Cloudflare", "Vercel"],
|
||||
toolsAndServices: [
|
||||
"Clerk (Auth)",
|
||||
"Sanity (CMS)",
|
||||
"Tinybird (analytics)",
|
||||
"Zod",
|
||||
"Sentry",
|
||||
"Mixpanel",
|
||||
"Trigger.dev",
|
||||
"betterAuth",
|
||||
"Clerk (Auth)",
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
@@ -6,8 +6,6 @@ import HeroSection from "@/components/HeroSection";
|
||||
import ExperienceSection from "@/components/ExperienceSection";
|
||||
import SkillsSection from "@/components/SkillsSection";
|
||||
import ProjectsSection from "@/components/ProjectsSection";
|
||||
import AwardsSection from "@/components/AwardsSection";
|
||||
import EducationSection from "@/components/EducationSection";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
@@ -20,8 +18,6 @@ const lang = getLangFromUrl(Astro.url);
|
||||
<ExperienceSection lang={lang} client:only="react" />
|
||||
<SkillsSection lang={lang} client:only="react" />
|
||||
<ProjectsSection lang={lang} client:only="react" />
|
||||
<AwardsSection lang={lang} client:only="react" />
|
||||
<EducationSection lang={lang} client:only="react" />
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
|
||||
@@ -6,8 +6,6 @@ import HeroSection from "@/components/HeroSection";
|
||||
import ExperienceSection from "@/components/ExperienceSection";
|
||||
import SkillsSection from "@/components/SkillsSection";
|
||||
import ProjectsSection from "@/components/ProjectsSection";
|
||||
import AwardsSection from "@/components/AwardsSection";
|
||||
import EducationSection from "@/components/EducationSection";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
@@ -20,8 +18,6 @@ const lang = getLangFromUrl(Astro.url);
|
||||
<ExperienceSection lang={lang} client:only="react" />
|
||||
<SkillsSection lang={lang} client:only="react" />
|
||||
<ProjectsSection lang={lang} client:only="react" />
|
||||
<AwardsSection lang={lang} client:only="react" />
|
||||
<EducationSection lang={lang} client:only="react" />
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user