<!-- Developer.vue -->
<template>
<div class="developer-card">
<ProfileHeader
:name="profile.name"
:title="profile.title"
:years-of-experience="10+"
/>
<SkillMatrix :skills="profile.skills" />
<CurrentProject
v-for="project in activeProjects"
:key="project.id"
:name="project.name"
:stack="project.stack"
@deploy="handleDeploy"
/>
</div>
</template>
<script setup>
const profile = {
name: 'Nico',
title: 'Automation Wizard',
skills: ['Vue.js', 'C#', 'JavaScript', 'HTML', 'CSS'],
motto: 'If it can be automated, it will be automated'
}
const activeProjects = [
{ id: 1, name: 'OutfitPicker', stack: ['Vue.js', 'Node.js'] },
{ id: 2, name: 'nicoma-therapy', stack: ['JavaScript', 'Vue.js'] },
{ id: 3, name: 'rexx', stack: ['Node.js', 'Puppeteer'] }
]
const handleDeploy = (projectId) => {
console.log('🚀 Deploying project:', projectId)
}
</script>
<style scoped>
.developer-card {
border-radius: 8px;
background: linear-gradient(135deg, #42b883 0%, #34d058 100%);
}
</style>| Project | Status | Tech Stack |
|---|---|---|
| 🎨 OutfitPicker | yarn dev |
Vue.js Node.js |
| 🤖 rexx | docker run |
Node.js Docker |
| 📦 nicoma-node | private |
Node.js |
| 🍎 nicoma-macos | private |
macOS |
<template>
<TechStack>
<StackCategory name="Frontend">
<Skill name="Vue.js" level="Expert" icon="🚀" />
<Skill name="JavaScript" level="Expert" icon="💫" />
<Skill name="HTML/CSS" level="Advanced" icon="🎨" />
</StackCategory>
<StackCategory name="Backend">
<Skill name="C#" level="Expert" icon="⚡️" />
<Skill name="Node.js" level="Advanced" icon="🛠" />
</StackCategory>
<StackCategory name="DevOps">
<Skill name="Docker" level="Advanced" icon="🐳" />
<Skill name="Automation" level="Wizard" icon="🤖" />
</StackCategory>
</TechStack>
</template>| When I'm... | I'm Probably... |
|---|---|
| 🎨 Coding | Building in Vue.js |
| 🤖 Automating | Making life easier |
| 📚 Learning | Exploring new tech |
| 🎮 Gaming | When tests pass ✅ |
const nico = {
favoriteEmoji: "🚀",
dailyMood: "Let's automate it!",
superPower: "Turning coffee into code",
hobbies: [
"Creating helpful tools",
"Learning new tech",
"Solving puzzles"
]
} |
|