Refactor Logo component and enhance translations for applied skills
- Updated the Logo component to improve accessibility and visual design, replacing SVG elements with structured HTML and CSS for better responsiveness and styling. - Introduced a new translations interface for applied skills, adding detailed descriptions and links for various skills across multiple languages. - Enhanced the about me page to include a new section for applied skills, integrating the updated translations and improving the overall user experience.
This commit is contained in:
@@ -1,13 +1,39 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 900 120"
|
||||
fill="none"
|
||||
---
|
||||
// Logo.astro
|
||||
---
|
||||
|
||||
<div
|
||||
role="img"
|
||||
aria-label="365DevNet logo"
|
||||
class="h-14 w-auto block"
|
||||
class="flex flex-col h-14 justify-center"
|
||||
>
|
||||
<!-- Main Title -->
|
||||
<text x="0" y="65" font-size="80" font-weight="bold" fill="currentColor" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif">365DevNet</text>
|
||||
<!-- Tagline (single line, readable) -->
|
||||
<text x="0" y="110" font-size="25" fill="currentColor" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif">Helping freelancers & small businesses with Microsoft 365</text>
|
||||
</svg>
|
||||
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 bg-clip-text text-transparent leading-tight">
|
||||
365DevNet
|
||||
</h1>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400 font-medium leading-tight -mt-0.5">
|
||||
Helping freelancers & small businesses with Microsoft 365
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Add subtle glow effect */
|
||||
div[role="img"] {
|
||||
filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.1));
|
||||
}
|
||||
|
||||
/* Ensure gradient works in all browsers */
|
||||
h1 {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
:global(.dark) h1 {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 657 B After Width: | Height: | Size: 1.0 KiB |
314
src/components/widgets/ModernAppliedSkills.astro
Normal file
314
src/components/widgets/ModernAppliedSkills.astro
Normal file
@@ -0,0 +1,314 @@
|
||||
---
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { Testimonials as Props } from '~/types';
|
||||
|
||||
const {
|
||||
title = '',
|
||||
subtitle = '',
|
||||
tagline = '',
|
||||
testimonials = [],
|
||||
callToAction,
|
||||
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = await Astro.slots.render('bg'),
|
||||
} = Astro.props;
|
||||
|
||||
// Function to get the correct skill icon based on title
|
||||
const getSkillIcon = (name: string): string => {
|
||||
const nameLower = name.toLowerCase();
|
||||
|
||||
if (nameLower.includes('entra') || nameLower.includes('identity')) return 'tabler:shield-lock';
|
||||
if (nameLower.includes('power automate') || nameLower.includes('automated processes')) return 'tabler:robot';
|
||||
if (nameLower.includes('copilot') || nameLower.includes('agents')) return 'tabler:brain';
|
||||
|
||||
return 'tabler:certificate';
|
||||
};
|
||||
|
||||
// Function to get the correct gradient colors based on skill
|
||||
const getSkillGradient = (name: string): string => {
|
||||
const nameLower = name.toLowerCase();
|
||||
|
||||
if (nameLower.includes('entra') || nameLower.includes('identity')) return 'from-blue-600 to-indigo-700';
|
||||
if (nameLower.includes('power automate') || nameLower.includes('automated processes')) return 'from-purple-600 to-pink-600';
|
||||
if (nameLower.includes('copilot') || nameLower.includes('agents')) return 'from-green-600 to-teal-600';
|
||||
|
||||
return 'from-gray-500 to-gray-600';
|
||||
};
|
||||
---
|
||||
|
||||
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
|
||||
<Headline title={title} subtitle={subtitle} tagline={tagline} classes={{
|
||||
container: 'max-w-3xl',
|
||||
title: 'text-3xl lg:text-4xl',
|
||||
}} />
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
|
||||
{
|
||||
testimonials &&
|
||||
testimonials.map(({ linkUrl, name, issueDate, description }) => {
|
||||
const icon = getSkillIcon(name || '');
|
||||
const gradient = getSkillGradient(name || '');
|
||||
|
||||
return (
|
||||
<div
|
||||
class="applied-skill-card bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-pointer border border-gray-100 dark:border-slate-800 hover:transform hover:scale-105 hover:shadow-xl relative overflow-hidden group"
|
||||
data-applied-skill-title={name}
|
||||
data-applied-skill-date={issueDate}
|
||||
data-applied-skill-description={description}
|
||||
data-applied-skill-url={linkUrl}
|
||||
itemscope
|
||||
itemtype="https://schema.org/EducationalOccupationalCredential"
|
||||
>
|
||||
<!-- Top gradient bar -->
|
||||
<div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient}`}></div>
|
||||
|
||||
<!-- Microsoft Applied Skills Badge -->
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<div class={`px-3 py-1 rounded-full text-xs font-medium text-white bg-gradient-to-r ${gradient} shadow-sm`}>
|
||||
Microsoft Applied Skills
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-center">
|
||||
<h3
|
||||
class="font-semibold text-base text-gray-900 dark:text-white mb-3 line-clamp-3 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 transition-all duration-300 leading-relaxed"
|
||||
itemprop="name"
|
||||
>
|
||||
{name}
|
||||
</h3>
|
||||
<p
|
||||
class={`text-sm font-medium text-transparent bg-clip-text bg-gradient-to-r ${gradient}`}
|
||||
itemprop="validIn"
|
||||
>
|
||||
{issueDate}
|
||||
</p>
|
||||
<meta itemprop="credentialCategory" content="Microsoft Applied Skills" />
|
||||
<meta itemprop="recognizedBy" content="Microsoft" />
|
||||
{linkUrl && <meta itemprop="url" content={linkUrl} />}
|
||||
</div>
|
||||
|
||||
<!-- Hover effect overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
|
||||
|
||||
<!-- Shimmer effect -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 to-transparent dark:via-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
callToAction && (
|
||||
<div class="flex justify-center mx-auto w-fit mt-8 font-medium">
|
||||
<Button {...callToAction} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</WidgetWrapper>
|
||||
|
||||
<!-- Applied Skills Details Modal -->
|
||||
<div id="appliedSkillModal" class="applied-skill-modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
|
||||
<div class="applied-skill-modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 id="appliedSkillModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
|
||||
<p id="appliedSkillModalDate" class="text-sm text-blue-600 dark:text-blue-400 font-medium"></p>
|
||||
</div>
|
||||
<button onclick="closeAppliedSkillModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<Icon name="tabler:x" class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<p id="appliedSkillModalDescription" class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6"></p>
|
||||
<div class="flex justify-end">
|
||||
<a id="appliedSkillModalLink" href="#" target="_blank" rel="noopener noreferrer" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:shadow-lg transition-all duration-300 hover:scale-105">
|
||||
<Icon name="tabler:external-link" class="w-4 h-4 mr-2" />
|
||||
View Applied Skill
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.applied-skill-card {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.applied-skill-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.applied-skill-card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.applied-skill-card:nth-child(3) { animation-delay: 0.2s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.applied-skill-modal {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.applied-skill-modal.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.applied-skill-modal.active .applied-skill-modal-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
// Applied Skills widget touch handling - completely isolated to avoid conflicts
|
||||
(function() {
|
||||
let appliedSkillTouchStart = { x: 0, y: 0, time: 0 };
|
||||
let appliedSkillIsScrolling = false;
|
||||
let appliedSkillOriginalScrollPosition = 0;
|
||||
let appliedSkillClickedElement = null;
|
||||
|
||||
function appliedSkillHandleTouchStart(e) {
|
||||
const touch = e.touches[0];
|
||||
appliedSkillTouchStart = {
|
||||
x: touch.clientX,
|
||||
y: touch.clientY,
|
||||
time: Date.now()
|
||||
};
|
||||
appliedSkillIsScrolling = false;
|
||||
}
|
||||
|
||||
function appliedSkillHandleTouchMove(e) {
|
||||
const touch = e.touches[0];
|
||||
const deltaX = Math.abs(touch.clientX - appliedSkillTouchStart.x);
|
||||
const deltaY = Math.abs(touch.clientY - appliedSkillTouchStart.y);
|
||||
|
||||
if (deltaX > 10 || deltaY > 10) {
|
||||
appliedSkillIsScrolling = true;
|
||||
}
|
||||
}
|
||||
|
||||
function appliedSkillHandleTouchEnd(e, element) {
|
||||
const touch = e.changedTouches[0];
|
||||
const touchEndTime = Date.now();
|
||||
|
||||
if (appliedSkillIsScrolling) return;
|
||||
|
||||
const touchDuration = touchEndTime - appliedSkillTouchStart.time;
|
||||
if (touchDuration > 300) return;
|
||||
|
||||
const deltaX = Math.abs(touch.clientX - appliedSkillTouchStart.x);
|
||||
const deltaY = Math.abs(touch.clientY - appliedSkillTouchStart.y);
|
||||
if (deltaX > 15 || deltaY > 15) return;
|
||||
|
||||
e.preventDefault();
|
||||
showAppliedSkillModal(element);
|
||||
}
|
||||
|
||||
window.showAppliedSkillModal = function(element) {
|
||||
// Store the clicked element and current scroll position
|
||||
appliedSkillClickedElement = element;
|
||||
appliedSkillOriginalScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
const title = element.dataset.appliedSkillTitle;
|
||||
const date = element.dataset.appliedSkillDate;
|
||||
const description = element.dataset.appliedSkillDescription;
|
||||
const url = element.dataset.appliedSkillUrl;
|
||||
|
||||
document.getElementById('appliedSkillModalTitle').textContent = title;
|
||||
document.getElementById('appliedSkillModalDate').textContent = date;
|
||||
document.getElementById('appliedSkillModalDescription').textContent = description;
|
||||
document.getElementById('appliedSkillModalLink').href = url;
|
||||
|
||||
const modal = document.getElementById('appliedSkillModal');
|
||||
modal.classList.add('active');
|
||||
|
||||
setTimeout(() => {
|
||||
const modalContent = modal.querySelector('.applied-skill-modal-content');
|
||||
if (modalContent) {
|
||||
modalContent.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
window.closeAppliedSkillModal = function() {
|
||||
const modal = document.getElementById('appliedSkillModal');
|
||||
modal.classList.remove('active');
|
||||
|
||||
// Restore scroll position to the original card
|
||||
if (appliedSkillClickedElement) {
|
||||
setTimeout(() => {
|
||||
// First, scroll to the original position
|
||||
window.scrollTo({
|
||||
top: appliedSkillOriginalScrollPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Then, ensure the clicked card is visible with a slight offset
|
||||
setTimeout(() => {
|
||||
const elementRect = appliedSkillClickedElement.getBoundingClientRect();
|
||||
const isElementVisible = elementRect.top >= 0 && elementRect.bottom <= window.innerHeight;
|
||||
|
||||
if (!isElementVisible) {
|
||||
appliedSkillClickedElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
}
|
||||
}, 300);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Clear the reference
|
||||
appliedSkillClickedElement = null;
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Select only applied skill cards with the specific class and data attributes
|
||||
const appliedSkillCards = document.querySelectorAll('.applied-skill-card[data-applied-skill-title]');
|
||||
|
||||
appliedSkillCards.forEach(card => {
|
||||
card.addEventListener('click', function(e) {
|
||||
if (!('ontouchstart' in window)) {
|
||||
e.preventDefault();
|
||||
showAppliedSkillModal(this);
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('touchstart', appliedSkillHandleTouchStart, { passive: true });
|
||||
card.addEventListener('touchmove', appliedSkillHandleTouchMove, { passive: true });
|
||||
card.addEventListener('touchend', function(e) {
|
||||
appliedSkillHandleTouchEnd(e, this);
|
||||
}, { passive: false });
|
||||
});
|
||||
|
||||
const appliedSkillModal = document.getElementById('appliedSkillModal');
|
||||
if (appliedSkillModal) {
|
||||
appliedSkillModal.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeAppliedSkillModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeAppliedSkillModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -86,6 +86,16 @@ export interface Translation {
|
||||
};
|
||||
}[];
|
||||
};
|
||||
appliedSkills: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
items: {
|
||||
name: string;
|
||||
issueDate: string;
|
||||
description: string;
|
||||
linkUrl: string;
|
||||
}[];
|
||||
};
|
||||
skills: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
@@ -544,6 +554,33 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
],
|
||||
},
|
||||
appliedSkills: {
|
||||
title: 'Applied Skills',
|
||||
subtitle: 'Practical Expertise in Action',
|
||||
items: [
|
||||
{
|
||||
name: 'Get started with identities and access using Microsoft Entra',
|
||||
issueDate: 'Date Issued: 06-2025',
|
||||
description:
|
||||
'Earning this Microsoft Applied Skill demonstrates proficiency in managing identities and access using Microsoft Entra. This skill validates expertise in implementing identity solutions, managing user access, and securing organizational resources through Microsoft\'s identity and access management platform.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/entra-identities-access/',
|
||||
},
|
||||
{
|
||||
name: 'Create and manage automated processes with Power Automate',
|
||||
issueDate: 'Date Issued: 06-2025',
|
||||
description:
|
||||
'Earning this Microsoft Applied Skill demonstrates expertise in creating and managing automated workflows using Power Automate. This skill validates proficiency in designing business process automation, integrating with various data sources, and implementing efficient workflow solutions to streamline organizational operations.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/power-automate-processes/',
|
||||
},
|
||||
{
|
||||
name: 'Create agents in Microsoft Copilot Studio',
|
||||
issueDate: 'Date Issued: 06-2025',
|
||||
description:
|
||||
'Earning this Microsoft Applied Skill demonstrates proficiency in developing intelligent conversational agents using Microsoft Copilot Studio. This skill validates expertise in creating AI-powered chatbots, implementing natural language processing, and building interactive solutions that enhance user engagement and support.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/copilot-studio-agents/',
|
||||
},
|
||||
],
|
||||
},
|
||||
skills: {
|
||||
title: 'Skills',
|
||||
subtitle: 'Discover the proficiencies that allow me to bring imagination to life through design.',
|
||||
@@ -1000,6 +1037,33 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
],
|
||||
},
|
||||
appliedSkills: {
|
||||
title: 'Toegepaste Vaardigheden',
|
||||
subtitle: 'Praktische Expertise in Actie',
|
||||
items: [
|
||||
{
|
||||
name: 'Aan de slag met identiteiten en toegang met Microsoft Entra',
|
||||
issueDate: 'Datum van afgifte: 06-2025',
|
||||
description:
|
||||
'Het behalen van deze Microsoft Applied Skill toont vaardigheid aan in het beheren van identiteiten en toegang met Microsoft Entra. Deze vaardigheid valideert expertise in het implementeren van identiteitsoplossingen, het beheren van gebruikers toegang en het beveiligen van organisatorische middelen via Microsoft\'s identiteits- en toegangsbeheerplatform.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/entra-identities-access/',
|
||||
},
|
||||
{
|
||||
name: 'Geautomatiseerde processen maken en beheren met Power Automate',
|
||||
issueDate: 'Datum van afgifte: 06-2025',
|
||||
description:
|
||||
'Het behalen van deze Microsoft Applied Skill toont expertise aan in het maken en beheren van geautomatiseerde workflows met Power Automate. Deze vaardigheid valideert bekwaamheid in het ontwerpen van bedrijfsprocesautomatisering, het integreren met verschillende gegevensbronnen en het implementeren van efficiënte workflow-oplossingen om organisatorische operaties te stroomlijnen.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/power-automate-processes/',
|
||||
},
|
||||
{
|
||||
name: 'Agents maken in Microsoft Copilot Studio',
|
||||
issueDate: 'Datum van afgifte: 06-2025',
|
||||
description:
|
||||
'Het behalen van deze Microsoft Applied Skill toont vaardigheid aan in het ontwikkelen van intelligente conversatie-agents met Microsoft Copilot Studio. Deze vaardigheid valideert expertise in het maken van AI-aangedreven chatbots, het implementeren van natuurlijke taalverwerking en het bouwen van interactieve oplossingen die gebruikersbetrokkenheid en ondersteuning verbeteren.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/copilot-studio-agents/',
|
||||
},
|
||||
],
|
||||
},
|
||||
skills: {
|
||||
title: 'Vaardigheden',
|
||||
subtitle:
|
||||
@@ -1457,6 +1521,33 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
],
|
||||
},
|
||||
appliedSkills: {
|
||||
title: 'Angewandte Fähigkeiten',
|
||||
subtitle: 'Praktische Expertise in Aktion',
|
||||
items: [
|
||||
{
|
||||
name: 'Erste Schritte mit Identitäten und Zugriff mit Microsoft Entra',
|
||||
issueDate: 'Ausstellungsdatum: 06-2025',
|
||||
description:
|
||||
'Der Erwerb dieser Microsoft Applied Skill zeigt Kompetenz in der Verwaltung von Identitäten und Zugriff mit Microsoft Entra. Diese Fähigkeit validiert Expertise in der Implementierung von Identitätslösungen, der Verwaltung von Benutzerzugriff und der Sicherung organisatorischer Ressourcen über Microsofts Identitäts- und Zugriffsverwaltungsplattform.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/entra-identities-access/',
|
||||
},
|
||||
{
|
||||
name: 'Automatisierte Prozesse mit Power Automate erstellen und verwalten',
|
||||
issueDate: 'Ausstellungsdatum: 06-2025',
|
||||
description:
|
||||
'Der Erwerb dieser Microsoft Applied Skill zeigt Expertise in der Erstellung und Verwaltung automatisierter Workflows mit Power Automate. Diese Fähigkeit validiert Kompetenz im Design von Geschäftsprozessautomatisierung, der Integration mit verschiedenen Datenquellen und der Implementierung effizienter Workflow-Lösungen zur Optimierung organisatorischer Abläufe.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/power-automate-processes/',
|
||||
},
|
||||
{
|
||||
name: 'Agents in Microsoft Copilot Studio erstellen',
|
||||
issueDate: 'Ausstellungsdatum: 06-2025',
|
||||
description:
|
||||
'Der Erwerb dieser Microsoft Applied Skill zeigt Kompetenz in der Entwicklung intelligenter Konversations-Agents mit Microsoft Copilot Studio. Diese Fähigkeit validiert Expertise in der Erstellung KI-gestützter Chatbots, der Implementierung natürlicher Sprachverarbeitung und dem Aufbau interaktiver Lösungen, die Benutzerengagement und Support verbessern.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/copilot-studio-agents/',
|
||||
},
|
||||
],
|
||||
},
|
||||
skills: {
|
||||
title: 'Fähigkeiten',
|
||||
subtitle:
|
||||
@@ -1914,6 +2005,33 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
],
|
||||
},
|
||||
appliedSkills: {
|
||||
title: 'Compétences Appliquées',
|
||||
subtitle: 'Expertise Pratique en Action',
|
||||
items: [
|
||||
{
|
||||
name: 'Commencer avec les identités et l\'accès avec Microsoft Entra',
|
||||
issueDate: 'Date de délivrance : 06-2025',
|
||||
description:
|
||||
'L\'obtention de cette Microsoft Applied Skill démontre la compétence dans la gestion des identités et de l\'accès avec Microsoft Entra. Cette compétence valide l\'expertise dans l\'implémentation de solutions d\'identité, la gestion de l\'accès utilisateur et la sécurisation des ressources organisationnelles via la plateforme de gestion d\'identité et d\'accès de Microsoft.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/entra-identities-access/',
|
||||
},
|
||||
{
|
||||
name: 'Créer et gérer des processus automatisés avec Power Automate',
|
||||
issueDate: 'Date de délivrance : 06-2025',
|
||||
description:
|
||||
'L\'obtention de cette Microsoft Applied Skill démontre l\'expertise dans la création et la gestion de workflows automatisés avec Power Automate. Cette compétence valide la maîtrise dans la conception de l\'automatisation des processus métier, l\'intégration avec diverses sources de données et l\'implémentation de solutions de workflow efficaces pour rationaliser les opérations organisationnelles.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/power-automate-processes/',
|
||||
},
|
||||
{
|
||||
name: 'Créer des agents dans Microsoft Copilot Studio',
|
||||
issueDate: 'Date de délivrance : 06-2025',
|
||||
description:
|
||||
'L\'obtention de cette Microsoft Applied Skill démontre la compétence dans le développement d\'agents conversationnels intelligents avec Microsoft Copilot Studio. Cette compétence valide l\'expertise dans la création de chatbots alimentés par l\'IA, l\'implémentation du traitement du langage naturel et la construction de solutions interactives qui améliorent l\'engagement et le support des utilisateurs.',
|
||||
linkUrl: 'https://learn.microsoft.com/en-us/credentials/applied-skills/copilot-studio-agents/',
|
||||
},
|
||||
],
|
||||
},
|
||||
skills: {
|
||||
title: 'Compétences',
|
||||
subtitle: "Découvrez les compétences qui me permettent de donner vie à l'imagination par le design.",
|
||||
|
||||
@@ -7,11 +7,12 @@ import Content from '~/components/widgets/Content.astro';
|
||||
import ModernEducation from '~/components/widgets/ModernEducation.astro';
|
||||
import ModernWorkExperience from '~/components/widgets/ModernWorkExperience.astro';
|
||||
import ModernCertifications from '~/components/widgets/ModernCertifications.astro';
|
||||
import ModernAppliedSkills from '~/components/widgets/ModernAppliedSkills.astro';
|
||||
import ModernSkills from '~/components/widgets/ModernSkills.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
import HomePageImage from '~/assets/images/richardbergsma.png';
|
||||
|
||||
import { getTranslation, supportedLanguages } from '~/i18n/translations';
|
||||
import { getTranslation } from '~/i18n/translations';
|
||||
import { getAboutMeTranslation, supportedLanguages } from '~/i18n/translations.aboutme';
|
||||
import { SITE } from 'astrowind:config';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
@@ -25,7 +26,10 @@ if (!supportedLanguages.includes(lang)) {
|
||||
return Astro.redirect('/en/aboutme');
|
||||
}
|
||||
|
||||
const t = getTranslation(lang);
|
||||
// Get main translations for shared components (navigation, footer, etc.)
|
||||
const mainT = getTranslation(lang);
|
||||
// Get about me specific translations
|
||||
const t = getAboutMeTranslation(lang);
|
||||
|
||||
const metadata = {
|
||||
title: 'About Richard Bergsma | IT Systems & Automation Specialist | 365DevNet',
|
||||
@@ -385,11 +389,11 @@ const metadata = {
|
||||
'@type': 'Person',
|
||||
name: 'Richard Bergsma',
|
||||
jobTitle: 'IT Systems and Automation Manager',
|
||||
description: t.hero.subtitle,
|
||||
description: mainT.hero.subtitle,
|
||||
image: SITE.site + '/images/richardbergsma.png',
|
||||
url: SITE.site,
|
||||
sameAs: ['https://www.linkedin.com/in/rrpbergsma', 'https://github.com/rrpbergsma'],
|
||||
knowsAbout: t.skills.items.map((skill) => skill.title),
|
||||
knowsAbout: mainT.skills.items.map((skill) => skill.title),
|
||||
worksFor: {
|
||||
'@type': 'Organization',
|
||||
name: 'COFRA Holding C.V.',
|
||||
@@ -412,13 +416,13 @@ const metadata = {
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="title">
|
||||
<span class="hero-title-enhanced">{t.hero.greeting}</span>
|
||||
<span class="hero-title-enhanced">{mainT.hero.greeting}</span>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
<div class="hero-subtitle-container">
|
||||
<div class="hero-subtitle-enhanced">
|
||||
{t.hero.subtitle}
|
||||
{mainT.hero.subtitle}
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<a href="#about" class="cta-primary-enhanced">
|
||||
@@ -452,7 +456,7 @@ const metadata = {
|
||||
{t.about.title}
|
||||
</h2>
|
||||
{
|
||||
t.about.content.map((paragraph, index) => (
|
||||
t.about.content.map((paragraph) => (
|
||||
<div class="mb-6">
|
||||
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">{paragraph}</p>
|
||||
</div>
|
||||
@@ -523,6 +527,24 @@ const metadata = {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Applied Skills with Modern Grid -->
|
||||
<div id="microsoft-applied-skills" class="content-section stagger-animation">
|
||||
<ModernAppliedSkills
|
||||
id="microsoft-applied-skills"
|
||||
title={t.appliedSkills.title}
|
||||
subtitle={t.appliedSkills.subtitle}
|
||||
testimonials={t.appliedSkills.items.map((skill) => ({
|
||||
name: skill.name,
|
||||
issueDate: skill.issueDate,
|
||||
description: skill.description,
|
||||
linkUrl: skill.linkUrl,
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Education -->
|
||||
<div id="education" class="content-section stagger-animation">
|
||||
<ModernEducation
|
||||
|
||||
Reference in New Issue
Block a user