feat: Add Skills page, BioSection, ProjectCard, and new image assets, while refactoring the deployment workflow to build Docker images directly on my remote server.
This commit is contained in:
170
src/pages/Skills.tsx
Normal file
170
src/pages/Skills.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { motion, Variants } from "framer-motion";
|
||||
|
||||
interface SkillCategory {
|
||||
category: string;
|
||||
skills: string[];
|
||||
}
|
||||
|
||||
interface ProfessionalSkill {
|
||||
skill: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const TECHNICAL_SKILLS: SkillCategory[] = [
|
||||
{
|
||||
category: "Languages",
|
||||
skills: ["JavaScript (ES6+)", "TypeScript", "Python", "Java", "C", "C++", "Lua", "HTML", "CSS", "SQL"]
|
||||
},
|
||||
{
|
||||
category: "Frameworks/Libraries",
|
||||
skills: ["React", "Express.js", "Django REST Framework", "AWS Lambda"]
|
||||
},
|
||||
{
|
||||
category: "Databases",
|
||||
skills: ["PostgreSQL (SQL Based)", "CouchDB (No-SQL Based)"]
|
||||
},
|
||||
{
|
||||
category: "DevOps & Tools",
|
||||
skills: ["Docker", "CircleCI", "Git (CLI)", "Postman", "AWS CDK", "Linux CLI"]
|
||||
},
|
||||
{
|
||||
category: "AWS Technologies",
|
||||
skills: ["S3", "Cloudfront", "Route 53", "API Gateway", "Lambda", "RDS", "VPC", "ECS", "SQS"]
|
||||
},
|
||||
{
|
||||
category: "Concepts",
|
||||
skills: ["RESTful APIs", "Agile/Scrum", "MVC Architecture", "Cloud Deployment", "Responsive Design"]
|
||||
}
|
||||
];
|
||||
|
||||
const PROFESSIONAL_SKILLS: ProfessionalSkill[] = [
|
||||
{
|
||||
skill: "Customer Service & Sales",
|
||||
description: "Clear communication and coordination with customers and clients"
|
||||
},
|
||||
{
|
||||
skill: "Technical Support",
|
||||
description: "Diagnosing and resolving hardware/software issues across all major devices."
|
||||
},
|
||||
{
|
||||
skill: "Web Development",
|
||||
description: "WordPress plugin development, front-end design, and site optimization."
|
||||
},
|
||||
{
|
||||
skill: "Scripting & Programming",
|
||||
description: "JavaScript, Python, HTML/CSS, Git, and NPM package management."
|
||||
},
|
||||
{
|
||||
skill: "Collaboration & Problem-Solving",
|
||||
description: "Working effectively with diverse teams to meet deadlines and ensure quality results."
|
||||
},
|
||||
{
|
||||
skill: "Adaptability",
|
||||
description: "Quickly learning new tools, technologies, and processes in dynamic work environments."
|
||||
}
|
||||
];
|
||||
|
||||
const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants: Variants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: { type: "spring", stiffness: 100 }
|
||||
}
|
||||
};
|
||||
|
||||
export default function Skills() {
|
||||
return (
|
||||
<div className="mainContentBlock" style={{ minWidth: "66vw", alignItems: "center" }}>
|
||||
<div style={{ height: "30px" }}></div>
|
||||
<motion.div
|
||||
className="skills-container"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
style={{ width: "100%", maxWidth: "1000px", padding: "0 20px" }}
|
||||
>
|
||||
<motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
|
||||
<h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
|
||||
Technical Skills
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "25px" }}>
|
||||
{TECHNICAL_SKILLS.map((category) => (
|
||||
<motion.div
|
||||
key={category.category}
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.07)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "12px",
|
||||
padding: "20px",
|
||||
}}
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.12)" }}
|
||||
>
|
||||
<h3 style={{ color: "white", marginTop: 0, marginBottom: "15px", fontSize: "1.2rem" }}>{category.category}</h3>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
|
||||
{category.skills.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.15)",
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
padding: "6px 12px",
|
||||
borderRadius: "20px",
|
||||
fontSize: "0.85rem",
|
||||
fontWeight: 500,
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)"
|
||||
}}
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
|
||||
<h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
|
||||
Professional Skills
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "20px" }}>
|
||||
{PROFESSIONAL_SKILLS.map((skill) => (
|
||||
<motion.div
|
||||
key={skill.skill}
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.05)",
|
||||
backdropFilter: "blur(5px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
borderRadius: "12px",
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px"
|
||||
}}
|
||||
whileHover={{ x: 5, backgroundColor: "rgba(255, 255, 255, 0.08)" }}
|
||||
>
|
||||
<h3 style={{ color: "#fff", margin: 0, fontSize: "1.1rem" }}>{skill.skill}</h3>
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.7)", margin: 0, fontSize: "0.95rem", lineHeight: "1.5" }}>
|
||||
{skill.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user