Add Experience section with dynamic rendering and type-based icons
This commit is contained in:
Space-Banane
275
src/App.tsx
275
src/App.tsx
@@ -13,6 +13,13 @@ interface MiniProject {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface Experience {
|
||||||
|
name: string;
|
||||||
|
type: "language" | "service" | "platform" | "real life experience" | "roles";
|
||||||
|
description: string;
|
||||||
|
image?: string;
|
||||||
|
}
|
||||||
|
|
||||||
function MiniProjectModal({
|
function MiniProjectModal({
|
||||||
project,
|
project,
|
||||||
onClose,
|
onClose,
|
||||||
@@ -131,6 +138,40 @@ function MiniProjectModal({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTypeIcon(type: Experience["type"]) {
|
||||||
|
switch (type) {
|
||||||
|
case "language":
|
||||||
|
return "💻";
|
||||||
|
case "service":
|
||||||
|
return "☁️";
|
||||||
|
case "platform":
|
||||||
|
return "🚀";
|
||||||
|
case "real life experience":
|
||||||
|
return "🌍";
|
||||||
|
case "roles":
|
||||||
|
return "👔";
|
||||||
|
default:
|
||||||
|
return "📦";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTypeColor(type: Experience["type"]) {
|
||||||
|
switch (type) {
|
||||||
|
case "language":
|
||||||
|
return "bg-blue-500/20";
|
||||||
|
case "service":
|
||||||
|
return "bg-purple-500/20";
|
||||||
|
case "platform":
|
||||||
|
return "bg-green-500/20";
|
||||||
|
case "real life experience":
|
||||||
|
return "bg-orange-500/20";
|
||||||
|
case "roles":
|
||||||
|
return "bg-pink-500/20";
|
||||||
|
default:
|
||||||
|
return "bg-gray-500/20";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function MiniProjectCard({
|
function MiniProjectCard({
|
||||||
project,
|
project,
|
||||||
onClick,
|
onClick,
|
||||||
@@ -737,7 +778,73 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Experience Section */}
|
||||||
|
<section className="w-full space-y-8">
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
|
||||||
|
Experience
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||||
|
Technologies, platforms, and roles I've worked with
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto space-y-6">
|
||||||
|
{Object.entries(
|
||||||
|
experiences.reduce((acc, exp) => {
|
||||||
|
if (!acc[exp.type]) acc[exp.type] = [];
|
||||||
|
acc[exp.type].push(exp);
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, Experience[]>)
|
||||||
|
).map(([type, items]) => (
|
||||||
|
<div key={type} className="space-y-3">
|
||||||
|
<h3 className={`text-lg font-semibold flex items-center gap-2 ${
|
||||||
|
type === 'language' ? 'text-blue-400' :
|
||||||
|
type === 'service' ? 'text-purple-400' :
|
||||||
|
type === 'platform' ? 'text-green-400' :
|
||||||
|
type === 'real life experience' ? 'text-orange-400' :
|
||||||
|
type === 'roles' ? 'text-pink-400' : 'text-gray-400'
|
||||||
|
}`}>
|
||||||
|
{getTypeIcon(type as Experience["type"])} {type.charAt(0).toUpperCase() + type.slice(1)}
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{items.map((exp, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 hover:border-purple-500/50 transition-all duration-200 hover:bg-white/10"
|
||||||
|
>
|
||||||
|
<div className={`text-2xl p-2 rounded-lg ${getTypeColor(exp.type)} flex items-center justify-center shrink-0 ${exp.image ? 'w-10 h-10' : ''}`}>
|
||||||
|
{exp.image ? (
|
||||||
|
<img
|
||||||
|
src={exp.image}
|
||||||
|
alt={exp.name}
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
getTypeIcon(exp.type)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-base font-semibold text-white group-hover:text-purple-400 transition-colors">
|
||||||
|
{exp.name}
|
||||||
|
</h4>
|
||||||
|
{exp.description && (
|
||||||
|
<p className="text-xs text-gray-400 mt-0.5 line-clamp-1">
|
||||||
|
{exp.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-gray-400 mt-4">
|
||||||
|
And a bunch of stuff i probably also forgot...
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Contact Section */}
|
{/* Contact Section */}
|
||||||
<section className="w-full max-w-2xl text-center space-y-4 pb-8">
|
<section className="w-full max-w-2xl text-center space-y-4 pb-8">
|
||||||
@@ -906,4 +1013,172 @@ const miniProjects: MiniProject[] = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const experiences: Experience[] = [
|
||||||
|
{
|
||||||
|
name: "TypeScript",
|
||||||
|
type: "language",
|
||||||
|
description: "My go-to language for building scalable web applications with type safety.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "JavaScript",
|
||||||
|
type: "language",
|
||||||
|
description: "The foundation of web development.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Python",
|
||||||
|
type: "language",
|
||||||
|
description: "Used for automation scripts, data processing, and backend services.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Go",
|
||||||
|
type: "language",
|
||||||
|
description: "For building fast and efficient backend services.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Lua",
|
||||||
|
type: "language",
|
||||||
|
description: "Scripting and embedded applications.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/lua/lua-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "React",
|
||||||
|
type: "platform",
|
||||||
|
description: "Building interactive user interfaces with modern React patterns and hooks.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vue.js",
|
||||||
|
type: "platform",
|
||||||
|
description: "Creating reactive web applications with Vue's elegant API.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Docker",
|
||||||
|
type: "service",
|
||||||
|
description: "Containerizing applications for consistent deployment across environments.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "PostgreSQL",
|
||||||
|
type: "service",
|
||||||
|
description: "Reliable relational database for complex data storage needs.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Redis",
|
||||||
|
type: "service",
|
||||||
|
description: "High-performance caching and data structure store.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "MariaDB",
|
||||||
|
type: "service",
|
||||||
|
description: "Open-source relational database management system.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Proxy Software",
|
||||||
|
type: "service",
|
||||||
|
description: "Configuring and managing reverse proxies for web applications.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Home Assistant",
|
||||||
|
type: "platform",
|
||||||
|
description: "Building smart home automations and integrating various IoT devices.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/home-assistant.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ESPHome",
|
||||||
|
type: "platform",
|
||||||
|
description: "Programming ESP32 and ESP8266 microcontrollers for custom smart home sensors.",
|
||||||
|
image: "https://esphome.io/_images/logo.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Troubleshooting Hardware",
|
||||||
|
type: "real life experience",
|
||||||
|
description: "Diagnosing and fixing hardware issues, from bricked microcontrollers to server problems.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Node.js",
|
||||||
|
type: "platform",
|
||||||
|
description: "Building backend services and APIs with Express and Fastify.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Immich",
|
||||||
|
type: "platform",
|
||||||
|
description: "Self-hosted photo and video management solution.",
|
||||||
|
image: "https://avatars.githubusercontent.com/u/109746326?v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Pangolin",
|
||||||
|
type: "platform",
|
||||||
|
description: "Proxy solution for network management.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pangolin.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Nginx",
|
||||||
|
type: "platform",
|
||||||
|
description: "Proxy solution for network management.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Minecraft Servers",
|
||||||
|
type: "platform",
|
||||||
|
description: "Hosting and managing multiplayer game servers.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/minecraft.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Gitea",
|
||||||
|
type: "platform",
|
||||||
|
description: "Self-hosted Git service for version control.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/gitea.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Serverless Functions",
|
||||||
|
type: "platform",
|
||||||
|
description: "Building scalable cloud functions and microservices. (SHSF)",
|
||||||
|
image: "https://cdn.reversed.dev/pictures/shsf/SHSF%20SMALL%20TRANSPARENT.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Cloud Infrastructure",
|
||||||
|
type: "platform",
|
||||||
|
description: "Managing and deploying applications on cloud platforms. (GCP, AWS, DigitalOcean)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Git",
|
||||||
|
type: "service",
|
||||||
|
description: "Version control for collaborative development and open-source contributions.",
|
||||||
|
image: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ShareX",
|
||||||
|
type: "platform",
|
||||||
|
description: "Custom uploaders and automation workflows for screenshots and file sharing.",
|
||||||
|
image: "https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Zipline",
|
||||||
|
type: "platform",
|
||||||
|
description: "ShareX companion for self-hosted file uploads.",
|
||||||
|
image: "https://media.sys.truenas.net/apps/zipline/icons/icon.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tailwind CSS",
|
||||||
|
type: "platform",
|
||||||
|
description: "Utility-first CSS framework for rapid UI development.",
|
||||||
|
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/2560px-Tailwind_CSS_Logo.svg.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Proxmox VE",
|
||||||
|
type: "platform",
|
||||||
|
description: "Virtualization management platform for running VMs and containers.",
|
||||||
|
image: "https://media.printables.com/media/prints/543748/images/4374616_04ed4585-3662-4652-a84d-04621cb9f709/thumbs/inside/1280x960/png/proxmox.webp",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
Reference in New Issue
Block a user