Enhance About Me page with modern components and animations
- Replaced existing widgets with modern versions for Work Experience, Certifications, Skills, and Education sections to improve visual appeal and interactivity. - Introduced an animated hero background and enhanced call-to-action buttons for better user engagement. - Implemented staggered animations for content sections to create a more dynamic user experience. - Updated styles for a cohesive glassmorphism effect across all sections, enhancing the overall aesthetic of the page.
This commit is contained in:
becarta
278
src/components/widgets/ModernCertifications.astro
Normal file
278
src/components/widgets/ModernCertifications.astro
Normal file
@@ -0,0 +1,278 @@
|
||||
---
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import Button from '~/components/ui/Button.astro';
|
||||
import Image from '~/components/common/Image.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { Testimonials as Props } from '~/types';
|
||||
|
||||
// Import certification images
|
||||
import SN_Logo2 from '~/assets/images/certificates/SN_Logo2.webp';
|
||||
import CertifiedNexthinkProfessionalinApplicationExperienceManagement from '~/assets/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp';
|
||||
import NexthinkAdministrator from '~/assets/images/certificates/NexthinkAdministrator.webp';
|
||||
import NexthinkAssociate from '~/assets/images/certificates/NexthinkAssociate.webp';
|
||||
import CrucialConversations_FMD_logo from '~/assets/images/certificates/CrucialConversations_FMD-logo.webp';
|
||||
import PCEP from '~/assets/images/certificates/PCEP.webp';
|
||||
import MicrosoftCertifiedAssociateBadge from '~/assets/images/certificates/microsoft-certified-associate-badge.webp';
|
||||
import MicrosoftCertifiedFundamentalsBadge from '~/assets/images/certificates/microsoft-certified-fundamentals-badge.webp';
|
||||
|
||||
const {
|
||||
title = '',
|
||||
subtitle = '',
|
||||
tagline = '',
|
||||
testimonials = [],
|
||||
callToAction,
|
||||
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = await Astro.slots.render('bg'),
|
||||
} = Astro.props;
|
||||
|
||||
// Function to get the correct certification icon based on title
|
||||
const getCertificationIcon = (name: string): string => {
|
||||
const nameLower = name.toLowerCase();
|
||||
|
||||
if (nameLower.includes('stakeholder')) return 'tabler:users';
|
||||
if (nameLower.includes('nexthink professional')) return 'tabler:chart-bar';
|
||||
if (nameLower.includes('nexthink administrator')) return 'tabler:settings';
|
||||
if (nameLower.includes('nexthink associate')) return 'tabler:certificate';
|
||||
if (nameLower.includes('crucial conversations')) return 'tabler:message-circle';
|
||||
if (nameLower.includes('python')) return 'tabler:brand-python';
|
||||
if (nameLower.includes('desktop administrator')) return 'tabler:device-desktop';
|
||||
if (nameLower.includes('microsoft 365')) return 'tabler:brand-office';
|
||||
if (nameLower.includes('teams')) return 'tabler:brand-teams';
|
||||
if (nameLower.includes('azure')) return 'tabler:cloud';
|
||||
|
||||
return 'tabler:award';
|
||||
};
|
||||
|
||||
// Function to get the correct gradient colors based on certification
|
||||
const getCertificationGradient = (name: string): string => {
|
||||
const nameLower = name.toLowerCase();
|
||||
|
||||
if (nameLower.includes('stakeholder')) return 'from-blue-500 to-purple-600';
|
||||
if (nameLower.includes('nexthink')) return 'from-green-500 to-teal-600';
|
||||
if (nameLower.includes('crucial')) return 'from-orange-500 to-red-500';
|
||||
if (nameLower.includes('python')) return 'from-yellow-500 to-green-500';
|
||||
if (nameLower.includes('microsoft')) return 'from-blue-600 to-indigo-600';
|
||||
if (nameLower.includes('azure')) return 'from-blue-400 to-cyan-500';
|
||||
|
||||
return 'from-gray-500 to-gray-600';
|
||||
};
|
||||
|
||||
// Function to get the correct image source
|
||||
const getImageSrc = (imagePath: string) => {
|
||||
switch (imagePath) {
|
||||
case '/images/certificates/SN_Logo2.webp':
|
||||
return SN_Logo2;
|
||||
case '/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp':
|
||||
return CertifiedNexthinkProfessionalinApplicationExperienceManagement;
|
||||
case '/images/certificates/NexthinkAdministrator.webp':
|
||||
return NexthinkAdministrator;
|
||||
case '/images/certificates/NexthinkAssociate.webp':
|
||||
return NexthinkAssociate;
|
||||
case '/images/certificates/CrucialConversations_FMD-logo.webp':
|
||||
return CrucialConversations_FMD_logo;
|
||||
case '/images/certificates/PCEP.webp':
|
||||
return PCEP;
|
||||
case '/images/certificates/microsoft-certified-associate-badge.webp':
|
||||
return MicrosoftCertifiedAssociateBadge;
|
||||
case '/images/certificates/microsoft-certified-fundamentals-badge.webp':
|
||||
return MicrosoftCertifiedFundamentalsBadge;
|
||||
default:
|
||||
return imagePath;
|
||||
}
|
||||
};
|
||||
---
|
||||
|
||||
<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 xl:grid-cols-4 gap-4 mt-8">
|
||||
{
|
||||
testimonials &&
|
||||
testimonials.map(({ linkUrl, name, issueDate, description, image }) => {
|
||||
const imageSrc = getImageSrc(image?.src || '');
|
||||
const icon = getCertificationIcon(name || '');
|
||||
const gradient = getCertificationGradient(name || '');
|
||||
|
||||
return (
|
||||
<div
|
||||
class="cert-card bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-5 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-cert-title={name}
|
||||
data-cert-date={issueDate}
|
||||
data-cert-description={description}
|
||||
data-cert-url={linkUrl}
|
||||
>
|
||||
<!-- Top gradient bar -->
|
||||
<div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient}`}></div>
|
||||
|
||||
<!-- Certification Icon -->
|
||||
<div class={`w-12 h-12 rounded-xl bg-gradient-to-r ${gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<Icon name={icon} class="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<!-- Badge Image -->
|
||||
{imageSrc && (
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-800 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={name || "Certification badge"}
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-center">
|
||||
<h3 class="font-semibold text-sm text-gray-900 dark:text-white mb-2 line-clamp-2 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">
|
||||
{name}
|
||||
</h3>
|
||||
<p class={`text-xs font-medium text-transparent bg-clip-text bg-gradient-to-r ${gradient}`}>
|
||||
{issueDate}
|
||||
</p>
|
||||
</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-white/10 to-transparent -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>
|
||||
|
||||
<!-- Certification Details Modal -->
|
||||
<div id="certModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
|
||||
<div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 id="certModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
|
||||
<p id="certModalDate" class="text-sm text-blue-600 dark:text-blue-400 font-medium"></p>
|
||||
</div>
|
||||
<button onclick="closeCertModal()" 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="certModalDescription" class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6"></p>
|
||||
<div class="flex justify-end">
|
||||
<a id="certModalLink" 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 Certification
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cert-card {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.cert-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.cert-card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.cert-card:nth-child(3) { animation-delay: 0.2s; }
|
||||
.cert-card:nth-child(4) { animation-delay: 0.25s; }
|
||||
.cert-card:nth-child(5) { animation-delay: 0.3s; }
|
||||
.cert-card:nth-child(6) { animation-delay: 0.35s; }
|
||||
.cert-card:nth-child(7) { animation-delay: 0.4s; }
|
||||
.cert-card:nth-child(8) { animation-delay: 0.45s; }
|
||||
.cert-card:nth-child(9) { animation-delay: 0.5s; }
|
||||
.cert-card:nth-child(10) { animation-delay: 0.55s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.modal.active .modal-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function showCertModal(element) {
|
||||
const title = element.dataset.certTitle;
|
||||
const date = element.dataset.certDate;
|
||||
const description = element.dataset.certDescription;
|
||||
const url = element.dataset.certUrl;
|
||||
|
||||
document.getElementById('certModalTitle').textContent = title;
|
||||
document.getElementById('certModalDate').textContent = date;
|
||||
document.getElementById('certModalDescription').textContent = description;
|
||||
document.getElementById('certModalLink').href = url;
|
||||
|
||||
const modal = document.getElementById('certModal');
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeCertModal() {
|
||||
const modal = document.getElementById('certModal');
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add click listeners to cert cards
|
||||
const certCards = document.querySelectorAll('.cert-card');
|
||||
certCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
showCertModal(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
const certModal = document.getElementById('certModal');
|
||||
if (certModal) {
|
||||
certModal.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeCertModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal with Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeCertModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
260
src/components/widgets/ModernEducation.astro
Normal file
260
src/components/widgets/ModernEducation.astro
Normal file
@@ -0,0 +1,260 @@
|
||||
---
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { Steps as Props } from '~/types';
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
tagline = await Astro.slots.render('tagline'),
|
||||
items = [],
|
||||
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = await Astro.slots.render('bg'),
|
||||
} = Astro.props;
|
||||
|
||||
// Function to get the appropriate icon and gradient based on education level
|
||||
const getEducationStyle = (title: string) => {
|
||||
const titleLower = title.toLowerCase();
|
||||
|
||||
if (titleLower.includes('bachelor')) {
|
||||
return {
|
||||
icon: 'tabler:school',
|
||||
gradient: 'from-blue-500 to-indigo-600',
|
||||
badgeIcon: 'tabler:book-2',
|
||||
completed: false
|
||||
};
|
||||
} else if (titleLower.includes('associate')) {
|
||||
return {
|
||||
icon: 'tabler:certificate',
|
||||
gradient: 'from-green-500 to-teal-600',
|
||||
badgeIcon: 'tabler:check',
|
||||
completed: true
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
icon: 'tabler:graduation',
|
||||
gradient: 'from-purple-500 to-pink-600',
|
||||
badgeIcon: 'tabler:check',
|
||||
completed: true
|
||||
};
|
||||
}
|
||||
};
|
||||
---
|
||||
|
||||
<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',
|
||||
...((classes?.headline as object) ?? {}),
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
|
||||
{items.map((item, index) => {
|
||||
const educationStyle = getEducationStyle(item.title || '');
|
||||
|
||||
return (
|
||||
<div
|
||||
class="education-card group 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"
|
||||
data-education-title={item.title || ''}
|
||||
data-education-description={item.description || ''}
|
||||
>
|
||||
<!-- Top gradient bar -->
|
||||
<div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${educationStyle.gradient}`}></div>
|
||||
|
||||
<!-- Education Icon -->
|
||||
<div class={`w-12 h-12 rounded-xl bg-gradient-to-r ${educationStyle.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 shadow-lg`}>
|
||||
<Icon name={educationStyle.icon} class="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="education-content">
|
||||
<div
|
||||
class="font-semibold text-sm leading-relaxed text-gray-900 dark:text-white 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"
|
||||
set:html={item.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Achievement Badge (bottom right) -->
|
||||
<div class={`absolute bottom-4 right-4 w-6 h-6 rounded-full bg-gradient-to-r ${educationStyle.gradient} flex items-center justify-center opacity-60 group-hover:opacity-100 transition-opacity duration-300`}>
|
||||
<Icon name={educationStyle.badgeIcon} class="w-3 h-3 text-white" />
|
||||
</div>
|
||||
|
||||
<!-- Shimmer effect -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
|
||||
<!-- Education Details Modal -->
|
||||
<div id="educationModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
|
||||
<div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 id="educationModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
|
||||
<p id="educationModalStatus" class="text-sm font-medium"></p>
|
||||
</div>
|
||||
<button onclick="closeEducationModal()" 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>
|
||||
<div id="educationModalDescription" class="text-gray-700 dark:text-gray-300 leading-relaxed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.education-card {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.education-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.education-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.education-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.education-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.modal.active .modal-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Enhanced styling for education content */
|
||||
.education-content :global(span.font-normal) {
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.education-content :global(span.text-sm) {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
:global(.dark) .education-content :global(span.font-normal) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
.education-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.education-card .flex {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.education-card .w-12.h-12 {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.education-card .w-6.h-6 {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function showEducationModal(element) {
|
||||
const title = element.dataset.educationTitle;
|
||||
const description = element.dataset.educationDescription;
|
||||
|
||||
// Parse the title to extract clean degree name
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = title;
|
||||
const cleanTitle = tempDiv.textContent || tempDiv.innerText || title;
|
||||
|
||||
// Extract degree type for styling
|
||||
const titleLower = cleanTitle.toLowerCase();
|
||||
let statusText = '';
|
||||
let statusClass = '';
|
||||
|
||||
if (titleLower.includes('bachelor')) {
|
||||
statusText = 'Studies Undertaken';
|
||||
statusClass = 'text-blue-600 dark:text-blue-400';
|
||||
} else if (titleLower.includes('associate')) {
|
||||
statusText = 'Completed';
|
||||
statusClass = 'text-green-600 dark:text-green-400';
|
||||
} else {
|
||||
statusText = 'Completed';
|
||||
statusClass = 'text-purple-600 dark:text-purple-400';
|
||||
}
|
||||
|
||||
// Update modal content
|
||||
document.getElementById('educationModalTitle').innerHTML = title;
|
||||
document.getElementById('educationModalDescription').textContent = description || 'No additional information available.';
|
||||
document.getElementById('educationModalStatus').textContent = statusText;
|
||||
document.getElementById('educationModalStatus').className = `text-sm font-medium ${statusClass}`;
|
||||
|
||||
const modal = document.getElementById('educationModal');
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeEducationModal() {
|
||||
const modal = document.getElementById('educationModal');
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add click listeners to education cards
|
||||
const educationCards = document.querySelectorAll('.education-card');
|
||||
educationCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
showEducationModal(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
const educationModal = document.getElementById('educationModal');
|
||||
if (educationModal) {
|
||||
educationModal.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeEducationModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal with Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeEducationModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
235
src/components/widgets/ModernSkills.astro
Normal file
235
src/components/widgets/ModernSkills.astro
Normal file
@@ -0,0 +1,235 @@
|
||||
---
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { Features as Props } from '~/types';
|
||||
|
||||
const {
|
||||
title = await Astro.slots.render('title'),
|
||||
subtitle = await Astro.slots.render('subtitle'),
|
||||
tagline = await Astro.slots.render('tagline'),
|
||||
items = [],
|
||||
categories = [],
|
||||
defaultIcon = 'tabler:code',
|
||||
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = await Astro.slots.render('bg'),
|
||||
} = Astro.props;
|
||||
|
||||
// Group skills by category if categories are provided
|
||||
const skillCategories = categories.length > 0 ? categories : [
|
||||
{
|
||||
title: 'Automation & Integration',
|
||||
icon: 'tabler:settings-automation',
|
||||
color: 'from-blue-500 to-purple-600',
|
||||
skills: items.filter(item => {
|
||||
const title = (item.title || '').toLowerCase();
|
||||
return title.includes('power automate') ||
|
||||
title.includes('copilot studio') ||
|
||||
title.includes('api') ||
|
||||
title.includes('power apps');
|
||||
})
|
||||
},
|
||||
{
|
||||
title: 'Cloud & Infrastructure',
|
||||
icon: 'tabler:cloud',
|
||||
color: 'from-green-500 to-blue-500',
|
||||
skills: items.filter(item => {
|
||||
const title = (item.title || '').toLowerCase();
|
||||
return title.includes('microsoft 365') ||
|
||||
title.includes('sharepoint') ||
|
||||
title.includes('intune') ||
|
||||
title.includes('infrastructure') ||
|
||||
title.includes('infrastructuur') ||
|
||||
(title.includes('beheer') && !title.includes('nexthink'));
|
||||
})
|
||||
},
|
||||
{
|
||||
title: 'Administration & Support',
|
||||
icon: 'tabler:settings',
|
||||
color: 'from-orange-500 to-red-500',
|
||||
skills: items.filter(item => {
|
||||
const title = (item.title || '').toLowerCase();
|
||||
return title.includes('powershell') ||
|
||||
title.includes('nexthink') ||
|
||||
title.includes('itsm') ||
|
||||
title.includes('topdesk') ||
|
||||
title.includes('support') ||
|
||||
title.includes('line');
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
// Fallback for uncategorized skills
|
||||
const uncategorizedSkills = items.filter(item =>
|
||||
!skillCategories.some(category =>
|
||||
category.skills.some(skill => skill.title === item.title)
|
||||
)
|
||||
);
|
||||
|
||||
if (uncategorizedSkills.length > 0) {
|
||||
skillCategories.push({
|
||||
title: 'Other Skills',
|
||||
icon: 'tabler:code',
|
||||
color: 'from-gray-500 to-gray-600',
|
||||
skills: uncategorizedSkills
|
||||
});
|
||||
}
|
||||
---
|
||||
|
||||
<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="mt-8 space-y-8">
|
||||
{
|
||||
skillCategories.map(({ title: categoryTitle, icon, color, skills }) => (
|
||||
<div class="skill-category">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class={`w-8 h-8 rounded-lg bg-gradient-to-r ${color} flex items-center justify-center mr-3`}>
|
||||
<Icon name={icon} class="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">{categoryTitle}</h3>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{skills.map(({ title: skillTitle, description }) => (
|
||||
<div
|
||||
class={`skill-pill bg-gradient-to-r ${color} text-white px-6 py-3 rounded-full font-semibold text-sm cursor-pointer transition-all duration-300 hover:transform hover:scale-105 hover:shadow-lg relative overflow-hidden group`}
|
||||
data-skill-title={skillTitle}
|
||||
data-skill-description={description}
|
||||
>
|
||||
<span class="relative z-10">{skillTitle}</span>
|
||||
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
|
||||
<div class="absolute top-0 left-[-100%] w-full h-full bg-gradient-to-r from-transparent via-white/30 to-transparent group-hover:left-[100%] transition-all duration-500"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
|
||||
<!-- Skill Details Modal -->
|
||||
<div id="skillModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
|
||||
<div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-lg w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 id="skillModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white"></h3>
|
||||
<button onclick="closeSkillModal()" 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="skillModalDescription" class="text-gray-700 dark:text-gray-300 leading-relaxed"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.skill-pill {
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.skill-pill:hover {
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
}
|
||||
|
||||
.skill-pill:active {
|
||||
transform: translateY(-1px) scale(1.02);
|
||||
}
|
||||
|
||||
.modal {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.modal.active .modal-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.skill-category:nth-child(1) { animation-delay: 0.1s; }
|
||||
.skill-category:nth-child(2) { animation-delay: 0.2s; }
|
||||
.skill-category:nth-child(3) { animation-delay: 0.3s; }
|
||||
.skill-category:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.skill-pill {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function showSkillModal(element) {
|
||||
const title = element.dataset.skillTitle;
|
||||
const description = element.dataset.skillDescription;
|
||||
|
||||
document.getElementById('skillModalTitle').textContent = title;
|
||||
document.getElementById('skillModalDescription').textContent = description;
|
||||
|
||||
const modal = document.getElementById('skillModal');
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeSkillModal() {
|
||||
const modal = document.getElementById('skillModal');
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add click listeners to skill pills
|
||||
const skillPills = document.querySelectorAll('.skill-pill');
|
||||
skillPills.forEach(pill => {
|
||||
pill.addEventListener('click', function() {
|
||||
showSkillModal(this);
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
const skillModal = document.getElementById('skillModal');
|
||||
if (skillModal) {
|
||||
skillModal.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeSkillModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal with Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeSkillModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
224
src/components/widgets/ModernWorkExperience.astro
Normal file
224
src/components/widgets/ModernWorkExperience.astro
Normal file
@@ -0,0 +1,224 @@
|
||||
---
|
||||
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
||||
import Headline from '~/components/ui/Headline.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import type { Widget } from '~/types';
|
||||
|
||||
export interface Props extends Widget {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
tagline?: string;
|
||||
compact?: boolean;
|
||||
items?: Array<{
|
||||
title: string;
|
||||
description?: string;
|
||||
company?: string;
|
||||
date?: string;
|
||||
location?: string;
|
||||
icon?: string;
|
||||
classes?: Record<string, string>;
|
||||
}>;
|
||||
}
|
||||
|
||||
const {
|
||||
title = 'Work Experience',
|
||||
subtitle = 'My professional journey',
|
||||
tagline = '',
|
||||
compact = false,
|
||||
items = [],
|
||||
id,
|
||||
isDark = false,
|
||||
classes = {},
|
||||
bg = '',
|
||||
} = Astro.props as Props;
|
||||
|
||||
// Function to get gradient based on company or role
|
||||
const getWorkGradient = (company: string = '', title: string = '') => {
|
||||
const companyLower = company.toLowerCase();
|
||||
const titleLower = title.toLowerCase();
|
||||
|
||||
if (companyLower.includes('cofra')) return 'from-blue-600 to-indigo-700';
|
||||
if (companyLower.includes('hyva')) return 'from-green-600 to-teal-700';
|
||||
if (companyLower.includes('bergsma')) return 'from-purple-600 to-pink-700';
|
||||
if (companyLower.includes('allseas')) return 'from-orange-600 to-red-700';
|
||||
if (companyLower.includes('oz export')) return 'from-cyan-600 to-blue-700';
|
||||
|
||||
// Fallback based on role level
|
||||
if (titleLower.includes('manager')) return 'from-indigo-600 to-purple-700';
|
||||
if (titleLower.includes('professional')) return 'from-blue-600 to-cyan-700';
|
||||
if (titleLower.includes('engineer')) return 'from-green-600 to-blue-700';
|
||||
if (titleLower.includes('consultant')) return 'from-purple-600 to-indigo-700';
|
||||
if (titleLower.includes('administrator')) return 'from-gray-600 to-slate-700';
|
||||
|
||||
return 'from-gray-600 to-gray-700';
|
||||
};
|
||||
|
||||
// Function to get appropriate icon
|
||||
const getWorkIcon = (title: string = '') => {
|
||||
const titleLower = title.toLowerCase();
|
||||
|
||||
if (titleLower.includes('manager')) return 'tabler:user-star';
|
||||
if (titleLower.includes('professional')) return 'tabler:certificate';
|
||||
if (titleLower.includes('engineer')) return 'tabler:code';
|
||||
if (titleLower.includes('consultant')) return 'tabler:user-check';
|
||||
if (titleLower.includes('administrator')) return 'tabler:settings';
|
||||
|
||||
return 'tabler:briefcase';
|
||||
};
|
||||
|
||||
// Function to extract years from date range
|
||||
const getYearRange = (dateStr: string = '') => {
|
||||
if (!dateStr) return '';
|
||||
|
||||
// Handle formats like "02-2025 - Present" or "04-2018 - 09-2018"
|
||||
const match = dateStr.match(/(\d{2})-(\d{4})\s*-\s*(.+)/);
|
||||
if (match) {
|
||||
const startYear = match[2];
|
||||
const endPart = match[3].trim();
|
||||
|
||||
if (endPart.toLowerCase().includes('present') || endPart.toLowerCase().includes('heden')) {
|
||||
return `${startYear} - Present`;
|
||||
} else {
|
||||
const endMatch = endPart.match(/(\d{2})-(\d{4})/);
|
||||
if (endMatch) {
|
||||
return `${startYear} - ${endMatch[2]}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return dateStr;
|
||||
};
|
||||
---
|
||||
|
||||
<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 lg:grid-cols-2 gap-6 mt-8">
|
||||
{items.map((item, index) => {
|
||||
const gradient = getWorkGradient(item.company, item.title);
|
||||
const icon = getWorkIcon(item.title);
|
||||
const yearRange = getYearRange(item.date);
|
||||
|
||||
return (
|
||||
<div
|
||||
class="work-card group bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-default border border-gray-100 dark:border-slate-800 hover:transform hover:scale-[1.02] hover:shadow-xl relative overflow-hidden"
|
||||
>
|
||||
<!-- Top gradient bar -->
|
||||
<div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient}`}></div>
|
||||
|
||||
<!-- Header with Icon, Title & Company -->
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class={`flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-r ${gradient} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg`}>
|
||||
<Icon name={icon} class="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-white mb-1 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-snug">
|
||||
{item.title}
|
||||
</h3>
|
||||
{item.company && (
|
||||
<p class={`font-medium text-transparent bg-clip-text bg-gradient-to-r ${gradient} text-sm mb-1`}>
|
||||
{item.company}
|
||||
</p>
|
||||
)}
|
||||
<div class="flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
{yearRange && (
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="tabler:calendar" class="w-3 h-3" />
|
||||
{yearRange}
|
||||
</span>
|
||||
)}
|
||||
{item.location && (
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="tabler:map-pin" class="w-3 h-3" />
|
||||
{item.location}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
{item.description && (
|
||||
<div class="work-description">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Shimmer effect -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</WidgetWrapper>
|
||||
|
||||
<style>
|
||||
.work-card {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.work-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.work-card:nth-child(2) { animation-delay: 0.15s; }
|
||||
.work-card:nth-child(3) { animation-delay: 0.2s; }
|
||||
.work-card:nth-child(4) { animation-delay: 0.25s; }
|
||||
.work-card:nth-child(5) { animation-delay: 0.3s; }
|
||||
.work-card:nth-child(6) { animation-delay: 0.35s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced description styling */
|
||||
.work-description {
|
||||
max-height: 120px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.work-card:hover .work-description {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.work-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.work-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.work-card .flex {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.work-card .w-12.h-12 {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
}
|
||||
|
||||
.work-card .w-6.h-6 {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,9 +40,22 @@ export interface Translation {
|
||||
about: {
|
||||
title: string;
|
||||
content: string[];
|
||||
actions: {
|
||||
learnMore: string;
|
||||
viewExperience: string;
|
||||
};
|
||||
callToAction: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
actions: {
|
||||
getInTouch: string;
|
||||
viewPortfolio: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
resume: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
experience: {
|
||||
title: string;
|
||||
company: string;
|
||||
@@ -55,6 +68,7 @@ export interface Translation {
|
||||
title: string;
|
||||
items: {
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
};
|
||||
certifications: {
|
||||
@@ -193,6 +207,18 @@ export const translations: Record<string, Translation> = {
|
||||
'Previously, I led Microsoft 365 and SharePoint Online implementations, migrated mail systems, and improved automation with SCCM. Additionally, I founded Bergsma IT, helping small businesses move to the cloud and managing tailored WordPress websites.',
|
||||
'I hold certifications in Microsoft Teams Administration, Azure Fundamentals, and Nexthink Administration. My mission is to drive IT excellence by optimizing cloud solutions, automating processes, and providing outstanding technical support.',
|
||||
],
|
||||
actions: {
|
||||
learnMore: 'Learn More About Me',
|
||||
viewExperience: 'View Experience'
|
||||
},
|
||||
callToAction: {
|
||||
title: 'Ready to Collaborate?',
|
||||
subtitle: "Let's discuss how we can transform your business through innovative automation and technology solutions.",
|
||||
actions: {
|
||||
getInTouch: 'Get In Touch',
|
||||
viewPortfolio: 'View Portfolio'
|
||||
}
|
||||
}
|
||||
},
|
||||
homepage: {
|
||||
actions: {
|
||||
@@ -319,6 +345,7 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
resume: {
|
||||
title: 'Work experience',
|
||||
subtitle: 'My professional journey through innovative technology roles',
|
||||
experience: [
|
||||
{
|
||||
title: 'IT Systems and Automation Manager',
|
||||
@@ -375,12 +402,15 @@ export const translations: Record<string, Translation> = {
|
||||
items: [
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Mechatronics, Robotics, and Automation Engineering<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
description: 'At The Hague University of Applied Sciences, this interdisciplinary program combines mechanical engineering, electrical engineering, and computer science to develop smart, automated systems. Students learn to design, build, and program intelligent machines—like drones, robots, and production systems—by mastering sensors, embedded systems, control theory, and mechanics. The curriculum blends hands-on lab work, real-world projects, and industry internships, preparing graduates for careers in automation, robotics, and high-tech innovation.',
|
||||
},
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Information Technology<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2011</span>`,
|
||||
description: 'This program focuses on the practical and theoretical foundations of Information and Communication Technology. Students learn to design, build, and secure software systems and applications while developing skills in programming, system analysis, AI, and cloud solutions. With specializations such as Software Engineering, Cyber Security, and Data Science, the degree prepares graduates to work on cutting-edge digital solutions in an international and fast-changing tech landscape.'
|
||||
},
|
||||
{
|
||||
title: `Associate's degree, Information Technology<br /> <span class="font-normal">ID College</span> <br /> <span class="text-sm font-normal">2007 - 2011</span>`,
|
||||
description: 'coming soon'
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -618,6 +648,7 @@ export const translations: Record<string, Translation> = {
|
||||
footer: {
|
||||
terms: 'Voorwaarden',
|
||||
privacyPolicy: 'Privacybeleid',
|
||||
uptime: 'Uptime',
|
||||
},
|
||||
hero: {
|
||||
title: 'Ontgrendel uw zakelijk potentieel met expert IT-automatisering',
|
||||
@@ -632,6 +663,18 @@ export const translations: Record<string, Translation> = {
|
||||
'Vroeger leidde ik de implementaties van Microsoft 365 en SharePoint Online, migreerde ik mailsystemen, en verbeterde ik de automatisering met SCCM. Daarnaast richtte ik Bergsma IT op, waarmee ik kleine bedrijven hielp de overstap naar de cloud en beheer ik op maat gemaakte WordPress-websites.',
|
||||
'Ik ben gecertificeerd in Microsoft Teams Administration, Azure Fundamentals en Nexthink Administration. Mijn missie is IT-excellentie te bevorderen door het optimaliseren van cloudoplossingen, het automatiseren van processen en het leveren van uitstekende technische ondersteuning.',
|
||||
],
|
||||
actions: {
|
||||
learnMore: 'Meer over mij',
|
||||
viewExperience: 'Bekijk ervaring'
|
||||
},
|
||||
callToAction: {
|
||||
title: 'Klaar om samen te werken?',
|
||||
subtitle: 'Laten we bespreken hoe we uw bedrijf kunnen transformeren door innovatieve automatisering en technologie oplossingen.',
|
||||
actions: {
|
||||
getInTouch: 'Neem contact op',
|
||||
viewPortfolio: 'Bekijk portfolio'
|
||||
}
|
||||
}
|
||||
},
|
||||
homepage: {
|
||||
actions: {
|
||||
@@ -690,7 +733,7 @@ export const translations: Record<string, Translation> = {
|
||||
'Wij zijn toegewijd aan het stimuleren van IT-excellentie door strategische cloud-optimalisatie, procesautomatisering en technische ondersteuning van enterprise-niveau. We benutten geavanceerde technologie om complexe zakelijke uitdagingen aan te pakken en meetbare waarde te leveren.',
|
||||
'Met diepgaande expertise in Microsoft-technologieën en automatisering stellen we organisaties in staat hun digitale mogelijkheden te transformeren en hun bedrijfsdoelstellingen te bereiken. We ontwerpen oplossingen die de gebruikerservaring verbeteren en productiviteit maximaliseren, zodat technologie uw bedrijf versterkt.',
|
||||
'We blijven voorop lopen door onderzoek en implementatie van opkomende technologieën, en bieden schaalbare oplossingen die zich aanpassen aan uw evoluerende behoeften. We stemmen technische oplossingen af op uw kernbedrijfsdoelstellingen, wat resulteert in meetbare ROI en een concurrentievoordeel.',
|
||||
'Unsere Mission ist es, Technologie zu nutzen, um echte zakelijke Herausforderungen zu lösen und durch Innovation Wert zu schaffen. Mit mehr als 15 Jahren IT-Erfahrung bringen wir eine reiche Schatz an Wissen in Microsoft-Technologieën, automatiseringstools und systeemintegratie um organisaties zu helfen ihre digitalen Fähigkeiten zu transformieren und ihre strategischen Ziele zu erreichen.',
|
||||
'Onze missie is om technologie te benutten om echte zakelijke uitdagingen op te lossen en waarde te creëren door innovatie. Met meer dan 15 jaar IT-ervaring brengen we een rijke schat van kennis in Microsoft-technologieën, automatiseringstools en systeemintegratie om organisaties te helpen hun digitale capaciteiten te transformeren en hun strategische doelen te bereiken.',
|
||||
],
|
||||
items: [
|
||||
{
|
||||
@@ -722,13 +765,13 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
'De SharePoint-implementatie die Richard heeft geleverd, heeft de mogelijkheden van ons team om samen te werken en informatie te delen volledig getransformeerd. We hebben eens dramatische toename in productiviteit gezien en een aanzienlijke vermindering van e-mailverkeer.',
|
||||
'De SharePoint-implementatie die Richard heeft geleverd, heeft de mogelijkheden van ons team om samen te werken en informatie te delen volledig getransformeerd. We hebben een dramatische toename in productiviteit gezien en een aanzienlijke vermindering van e-mailverkeer.',
|
||||
name: 'Jane Doe',
|
||||
description: 'Projectmanager, Beta Industries',
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
'Richard nam de tijd om onze unieke zakelijke uitdagingen echt te begrijpen en ontwikkelde aangepaste IT-Lösungen, die unsere Bedürfnisse perfekt adressierten. Zijn technische kennis en probleemoplossende vaardigheden zijn uitzonderlijk.',
|
||||
'Richard nam de tijd om onze unieke zakelijke uitdagingen echt te begrijpen en ontwikkelde aangepaste IT-oplossingen die onze behoeften perfect adresseerden. Zijn technische kennis en probleemoplossende vaardigheden zijn uitzonderlijk.',
|
||||
name: 'David Lee',
|
||||
description: 'CEO, Gamma Solutions',
|
||||
},
|
||||
@@ -758,6 +801,7 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
resume: {
|
||||
title: 'Werkervaring',
|
||||
subtitle: 'Mijn professionele reis door innovatieve technologie rollen',
|
||||
experience: [
|
||||
{
|
||||
title: 'IT-systemen en automatiseringsmanager',
|
||||
@@ -773,7 +817,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'Amsterdam',
|
||||
period: '08-2020 - 01-2025',
|
||||
description:
|
||||
"Als de Microsoft 365-expert binnen COFRA Holding zorg ik ervoor dat de omgeving wordt beheerd, nieuwe functies worden gecommuniceerd en collega's worden ondersteund bij derde-lijnsaanvragen. Nieuwe Anfragen variëren van nieuwe Power Automate-stromen tot Power Apps. Daarnaast richt ik mij op de opzet en het beheer van onze Nexthink-omgeving, beheer ik TOPdesk en support and other projects as needed. Lately, I've been concentrating on leveraging Power Automate to enhance automation across various areas.",
|
||||
"Als de Microsoft 365-expert binnen COFRA Holding zorg ik ervoor dat de omgeving wordt beheerd, nieuwe functies worden gecommuniceerd en collega's worden ondersteund bij derde-lijnsaanvragen. Nieuwe aanvragen variëren van nieuwe Power Automate-stromen tot Power Apps. Daarnaast richt ik mij op de opzet en het beheer van onze Nexthink-omgeving, beheer ik TOPdesk en ondersteun ik andere projecten waar nodig. Recentelijk heb ik mij geconcentreerd op het benutten van Power Automate om automatisering in verschillende gebieden te verbeteren.",
|
||||
},
|
||||
{
|
||||
title: 'Cloudsystemen- en applicatie-ingenieur',
|
||||
@@ -789,7 +833,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'Zoetermeer',
|
||||
period: '01-2018 - 07-2019',
|
||||
description:
|
||||
"Founded the company to help small businesses modernize their IT infrastructure through cloud-based solutions, focusing on Microsoft technologies to enhance efficiency, scalability, and collaboration. Successfully executed email and file server migrations to Microsoft cloud platforms, provided ongoing technical support, and designed tailored WordPress websites. Streamlined workflows with Microsoft 365 and delivered customized IT solutions aligned with clients' business goals.",
|
||||
"Richtte het bedrijf op om kleine bedrijven te helpen hun IT-infrastructuur te moderniseren via cloud-gebaseerde oplossingen, gericht op Microsoft-technologieën om efficiëntie, schaalbaarheid en samenwerking te verbeteren. Voerde succesvol e-mail- en bestandsservermigraties uit naar Microsoft cloud-platforms, bood voortdurende technische ondersteuning en ontwierp op maat gemaakte WordPress-websites. Stroomlijnde workflows met Microsoft 365 en leverde aangepaste IT-oplossingen afgestemd op de bedrijfsdoelen van klanten.",
|
||||
},
|
||||
{
|
||||
title: 'Technisch applicatie-ingenieur SharePoint',
|
||||
@@ -797,7 +841,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'Delft',
|
||||
period: '04-2018 - 09-2018',
|
||||
description:
|
||||
'Managed and optimized SharePoint 2013 and SharePoint Online environments to support collaboration and productivity. Created and customized SharePoint sites, implemented workflows, and provided expert support for Cadac Organice. Worked closely with stakeholders to deliver tailored solutions, ensuring secure, up-to-date, and high-performing SharePoint systems.',
|
||||
'Beheerde en optimaliseerde SharePoint 2013 en SharePoint Online-omgevingen om samenwerking en productiviteit te ondersteunen. Creëerde en paste SharePoint-sites aan, implementeerde workflows, en bood deskundige ondersteuning voor Cadac Organice. Werkte nauw samen met stakeholders om op maat gemaakte oplossingen te leveren, waarbij veilige, up-to-date en goed presterende SharePoint-systemen werden gewaarborgd.',
|
||||
},
|
||||
{
|
||||
title: 'IT-systeembeheerder',
|
||||
@@ -805,7 +849,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'De Kwakel',
|
||||
period: '10-2015 - 12-2017',
|
||||
description:
|
||||
"Managed and maintained the organization's IT infrastructure to ensure system reliability and seamless operations. Oversaw servers, client PCs, portable scanners, and printers, optimizing performance and minimizing downtime. Configured VoIP systems, managed network switches, and administered Citrix environments for secure remote access. Installed and supported on-premise SharePoint environments to enhance collaboration. Designed and maintained the organization's surveillance system and helpdesk platform, streamlining IT support and strengthening security. Provided hands-on troubleshooting for hardware, software, and network issues to support daily operations.",
|
||||
"Beheerde en onderhield de IT-infrastructuur van de organisatie om systeembetrouwbaarheid en naadloze operaties te waarborgen. Hield toezicht op servers, client-pc's, draagbare scanners en printers, optimaliseerde prestaties en minimaliseerde downtime. Configureerde VoIP-systemen, beheerde netwerkswitches en administreerde Citrix-omgevingen voor veilige externe toegang. Installeerde en ondersteunde on-premise SharePoint-omgevingen om samenwerking te verbeteren. Ontwierp en onderhield het bewakingssysteem en helpdesk-platform van de organisatie, stroomlijnde IT-ondersteuning en versterkte beveiliging. Bood praktische probleemoplossing voor hardware-, software- en netwerkproblemen om dagelijkse operaties te ondersteunen.",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -813,13 +857,16 @@ export const translations: Record<string, Translation> = {
|
||||
title: 'Opleiding',
|
||||
items: [
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Mechatronica, Robotica en Automatisationstechniek<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
title: `Bachelor of Applied Science - BASc, Mechatronica, Robotica en Automatiseringstechniek<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Informatietechnologie<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Associate's degree, Informatietechnologie<br /> <span class="font-normal">ID College</span> <br /> <span class="text-sm font-normal">2007 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1001,22 +1048,22 @@ export const translations: Record<string, Translation> = {
|
||||
{
|
||||
title: 'ITSM (TOPDesk)',
|
||||
description:
|
||||
'Experienced in managing ITSM processes using TOPdesk. Proficient in core functionalities such as Incident Management and Asset Management, while leveraging API usage for seamless integrations with other systems.',
|
||||
'Ervaren in het beheren van ITSM-processen met TOPdesk. Bekwaam in kernfunctionaliteiten zoals Incident Management en Asset Management, terwijl gebruik wordt gemaakt van API-gebruik voor naadloze integraties met andere systemen.',
|
||||
},
|
||||
{
|
||||
title: 'PowerShell',
|
||||
description:
|
||||
'Proficient in utilizing PowerShell for automation, system administration, and configuration management across Microsoft environments. Experienced in creating robust scripts for task automation, system monitoring, and integration with various Microsoft services.',
|
||||
'Bekwaam in het gebruiken van PowerShell voor automatisering, systeembeheer en configuratiebeheer in Microsoft-omgevingen. Ervaren in het creëren van robuuste scripts voor taakautomatisering, systeembewaking en integratie met verschillende Microsoft-services.',
|
||||
},
|
||||
{
|
||||
title: 'Intune Device Management',
|
||||
description:
|
||||
'Skilled in deploying, configuring, and managing Windows 10/11 devices through Microsoft Intune. Experienced in creating and implementing device policies, application deployment, and security configurations for enterprise environments.',
|
||||
'Bekwaam in het implementeren, configureren en beheren van Windows 10/11-apparaten via Microsoft Intune. Ervaren in het creëren en implementeren van apparaatbeleid, applicatie-implementatie en beveiligingsconfiguraties voor bedrijfsomgevingen.',
|
||||
},
|
||||
{
|
||||
title: '3rd Line IT Support',
|
||||
description:
|
||||
'Experienced in providing advanced technical support for complex IT issues that require in-depth knowledge and specialized expertise. Proficient in troubleshooting, diagnosing, and resolving critical system problems across various platforms and applications.',
|
||||
'Ervaren in het bieden van geavanceerde technische ondersteuning voor complexe IT-problemen die diepgaande kennis en gespecialiseerde expertise vereisen. Bekwaam in troubleshooting, diagnose en het oplossen van kritieke systeemproblemen op verschillende platforms en applicaties.',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1058,6 +1105,7 @@ export const translations: Record<string, Translation> = {
|
||||
footer: {
|
||||
terms: 'Nutzungsbedingungen',
|
||||
privacyPolicy: 'Datenschutzrichtlinie',
|
||||
uptime: 'Verfügbarkeit',
|
||||
},
|
||||
hero: {
|
||||
title: 'Erschließen Sie Ihr Geschäftspotenzial mit Expert-IT-Automatisierung',
|
||||
@@ -1072,6 +1120,18 @@ export const translations: Record<string, Translation> = {
|
||||
'Zuvor leitete ich Microsoft 365- und SharePoint Online-Implementierungen, migrierte Mailsysteme und verbesserte die Automatisierung mit SCCM. Zusätzlich gründete ich Bergsma IT, half kleinen Unternehmen bei der Migration in die Cloud und verwaltete maßgeschneiderte WordPress-Websites.',
|
||||
'Ich besitze Zertifizierungen in Microsoft Teams Administration, Azure Fundamentals und Nexthink Administration. Meine Mission ist es, IT-Exzellenz durch die Optimierung von Cloud-Lösungen, die Automatisierung von Prozessen und die Bereitstellung hervorragender technischer Unterstützung voranzutreiben.',
|
||||
],
|
||||
actions: {
|
||||
learnMore: 'Mehr über mich',
|
||||
viewExperience: 'Erfahrung ansehen'
|
||||
},
|
||||
callToAction: {
|
||||
title: 'Bereit zur Zusammenarbeit?',
|
||||
subtitle: 'Lassen Sie uns diskutieren, wie wir Ihr Unternehmen durch innovative Automatisierung und Technologie-Lösungen transformieren können.',
|
||||
actions: {
|
||||
getInTouch: 'Kontakt aufnehmen',
|
||||
viewPortfolio: 'Portfolio ansehen'
|
||||
}
|
||||
}
|
||||
},
|
||||
homepage: {
|
||||
actions: {
|
||||
@@ -1129,8 +1189,8 @@ export const translations: Record<string, Translation> = {
|
||||
missionContent: [
|
||||
'Wir sind bestrebt, IT-Exzellenz durch strategische Cloud-Optimierung, Prozessautomatisierung und technischen Support auf Unternehmensebene voranzutreiben. Wir nutzen modernste Technologie, um komplexe geschäftliche Herausforderungen zu bewältigen und messbaren Mehrwert zu liefern.',
|
||||
'Mit tiefgreifender Expertise in Microsoft-Technologien und Automatisierung befähigen wir Organisationen, ihre digitalen Fähigkeiten zu transformieren und ihre Geschäftsziele zu erreichen. Wir entwickeln Lösungen, die die Benutzererfahrung verbessern und die Produktivität maximieren, damit Technologie Ihr Unternehmen stärkt.',
|
||||
'Wir bleiben an der Spitze durch Erforschung und Implementierung aufkommender Technologien und bieten schaalbare Lösungen, die sich an Ihre sich entwickelnden Anforderungen anpassen. Wir stimmen technische Lösungen auf Ihre Kerngeschäftsziele ab und liefern messbaren ROI und Wettbewerbsvorteile.',
|
||||
'Unsere Mission ist es, Technologie zu nutzen, um echte geschäftliche Herausforderungen zu lösen und durch Innovation Wert zu schaffen. Mit über 15 Jahren IT-Erfahrung bringen wir eine reiche Schatz an Wissen in Microsoft-Technologieën, automatiseringstools und systeemintegratie um organisaties te helpen ihre digitalen Fähigkeiten zu transformieren und ihre strategischen Ziele zu erreichen.',
|
||||
'Wir bleiben an der Spitze durch Erforschung und Implementierung aufkommender Technologien und bieten skalierbare Lösungen, die sich an Ihre sich entwickelnden Anforderungen anpassen. Wir stimmen technische Lösungen auf Ihre Kerngeschäftsziele ab und liefern messbaren ROI und Wettbewerbsvorteile.',
|
||||
'Unsere Mission ist es, Technologie zu nutzen, um echte geschäftliche Herausforderungen zu lösen und durch Innovation Wert zu schaffen. Mit über 15 Jahren IT-Erfahrung bringen wir einen reichen Schatz an Wissen in Microsoft-Technologien, Automatisierungstools und Systemintegration mit, um Organisationen zu helfen, ihre digitalen Fähigkeiten zu transformieren und ihre strategischen Ziele zu erreichen.',
|
||||
],
|
||||
items: [
|
||||
{
|
||||
@@ -1168,7 +1228,7 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
'Richard nahm die Zeit, unsere einzigartigen geschäftlichen Herausforderungen wirklich zu verstehen und entwickelte aangepaste IT-Lösungen, die unsere Bedürfnisse perfekt adressierten. Seine technischen Kenntnisse und Problemlösungsfähigkeiten sind außergewöhnlich.',
|
||||
'Richard nahm die Zeit, unsere einzigartigen geschäftlichen Herausforderungen wirklich zu verstehen und entwickelte maßgeschneiderte IT-Lösungen, die unsere Bedürfnisse perfekt adressierten. Seine technischen Kenntnisse und Problemlösungsfähigkeiten sind außergewöhnlich.',
|
||||
name: 'David Lee',
|
||||
description: 'CEO, Gamma Solutions',
|
||||
},
|
||||
@@ -1198,6 +1258,7 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
resume: {
|
||||
title: 'Berufserfahrung',
|
||||
subtitle: 'Meine berufliche Reise durch innovative Technologie-Rollen',
|
||||
experience: [
|
||||
{
|
||||
title: 'IT-System- und Automatisierungsmanager',
|
||||
@@ -1232,20 +1293,20 @@ export const translations: Record<string, Translation> = {
|
||||
'Gründete das Unternehmen, um kleinen Unternehmen bei der Modernisierung ihrer IT-Infrastruktur durch Cloud-basierte Lösungen zu helfen, mit Fokus auf Microsoft-Technologien zur Verbesserung von Effizienz, Skalierbarkeit und Zusammenarbeit. Führte erfolgreich E-Mail- und Dateiservermigrationen zu Microsoft-Cloud-Plattformen durch, bot laufende technische Unterstützung und entwickelte maßgeschneiderte WordPress-Websites. Optimierte Arbeitsabläufe mit Microsoft 365 und lieferte maßgeschneiderte IT-Lösungen, die auf die Geschäftsziele der Kunden abgestimmt waren.',
|
||||
},
|
||||
{
|
||||
title: "Ingénieur d'application technique SharePoint",
|
||||
title: 'Technischer Anwendungsingenieur SharePoint',
|
||||
company: 'Allseas',
|
||||
location: 'Delft',
|
||||
period: '04-2018 - 09-2018',
|
||||
description:
|
||||
'Géré et optimisé les environnements SharePoint 2013 et SharePoint Online-Umgebungen zur Unterstützung von Zusammenarbeit und Produktivität. Erstellte et passte SharePoint-Sites an, implementierte Workflows et bot Expertenunterstützung pour Cadac Organice. Arbeitete eng mit Stakeholdern zusammen, um maßgeschneiderte Lösungen zu liefern et sichere, aktuelle et leistungsstarke SharePoint-Systeme zu gewährleisten.',
|
||||
'Verwaltete und optimierte SharePoint 2013 und SharePoint Online-Umgebungen zur Unterstützung von Zusammenarbeit und Produktivität. Erstellte und passte SharePoint-Sites an, implementierte Workflows und bot Expertenunterstützung für Cadac Organice. Arbeitete eng mit Stakeholdern zusammen, um maßgeschneiderte Lösungen zu liefern und sichere, aktuelle und leistungsstarke SharePoint-Systeme zu gewährleisten.',
|
||||
},
|
||||
{
|
||||
title: 'Administrateur système IT',
|
||||
title: 'IT-Systemadministrator',
|
||||
company: 'OZ Export',
|
||||
location: 'De Kwakel',
|
||||
period: '10-2015 - 12-2017',
|
||||
description:
|
||||
"Géré et maintenu l'infrastructure IT de l'organisation pour assurer la fiabilité des systèmes et des opérations fluides. Supervisé les serveurs, PC clients, scanners portables et imprimantes, optimisant les performances et minimisant les temps d'arrêt. Configurer les systèmes VoIP, géré les commutateurs réseau et administrer les environnements Citrix pour un accès distant sécurisé. Installé et supporté les environnements SharePoint on-premise pour améliorer la collaboration. Conçu et maintenu le système de surveillance et la plateforme helpdesk de l'organisation, rationalisant le support IT et renforçant la sécurité. Fourni un dépannage pratique pour les problèmes de matériel, logiciel et réseau pour soutenir les opérations quotidiennes.",
|
||||
"Verwaltete und wartete die IT-Infrastruktur der Organisation, um Systemzuverlässigkeit und nahtlose Abläufe zu gewährleisten. Überwachte Server, Client-PCs, tragbare Scanner und Drucker, optimierte die Leistung und minimierte Ausfallzeiten. Konfigurierte VoIP-Systeme, verwaltete Netzwerk-Switches und administrierte Citrix-Umgebungen für sicheren Remote-Zugang. Installierte und unterstützte On-Premise-SharePoint-Umgebungen zur Verbesserung der Zusammenarbeit. Entwarf und wartete das Überwachungssystem und die Helpdesk-Plattform der Organisation, rationalisierte IT-Support und stärkte die Sicherheit. Bot praktische Fehlerbehebung für Hardware-, Software- und Netzwerkprobleme zur Unterstützung des täglichen Betriebs.",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1253,13 +1314,16 @@ export const translations: Record<string, Translation> = {
|
||||
title: 'Ausbildung',
|
||||
items: [
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Mechatronik, Robotik und Automatisationstechnik<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
title: `Bachelor of Applied Science - BASc, Mechatronik, Robotik und Automatisierungstechnik<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Informationstechnologie<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Associate's degree, Informationstechnologie<br /> <span class="font-normal">ID College</span> <br /> <span class="text-sm font-normal">2007 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1283,7 +1347,7 @@ export const translations: Record<string, Translation> = {
|
||||
name: 'Certified Nexthink Professional',
|
||||
issueDate: 'Ausstellungsdatum: 01-2025',
|
||||
description:
|
||||
'Der Erwerb der Nexthink Certified Application Experience Management-Zertifizierung bestätigt die Expertise in der Optimierung der Anwendungsleistung, der Gewährleistung einer nahtlosen Benutzerakzeptanz und der Förderung der Kosteneffizienz. Diese Zertifizierung toont geavanceerde kennis aan in der Messung und Verbesserung der digitalen Mitarbeitererfahrung in Unternehmensumgebungen an.',
|
||||
'Der Erwerb der Nexthink Certified Application Experience Management-Zertifizierung bestätigt die Expertise in der Optimierung der Anwendungsleistung, der Gewährleistung einer nahtlosen Benutzerakzeptanz und der Förderung der Kosteneffizienz. Diese Zertifizierung demonstriert fortgeschrittene Kenntnisse in der Messung und Verbesserung der digitalen Mitarbeitererfahrung in Unternehmensumgebungen.',
|
||||
linkUrl: 'https://certified.nexthink.com/babd1e3a-c593-4a81-90a2-6a002f43e692#acc.fUOog9dj',
|
||||
image: {
|
||||
src: '/images/certificates/CertifiedNexthinkProfessionalinApplicationExperienceManagement.webp',
|
||||
@@ -1414,7 +1478,7 @@ export const translations: Record<string, Translation> = {
|
||||
'Erfahren in der Erstellung benutzerdefinierter Konnektoren und der Integration verschiedener Anwendungen und Dienste über APIs zur Ermöglichung nahtlosen Datenaustauschs und Prozessautomatisierung zwischen Plattformen.',
|
||||
},
|
||||
{
|
||||
title: 'Administration Microsoft 365',
|
||||
title: 'Microsoft 365 Administration',
|
||||
description:
|
||||
'Umfassende Erfahrung in der Verwaltung von Microsoft 365-Umgebungen, einschließlich Benutzerverwaltung, Sicherheitskonfigurationen und Service-Optimierung zur Unterstützung globaler Zusammenarbeit und Produktivität.',
|
||||
},
|
||||
@@ -1424,39 +1488,39 @@ export const translations: Record<string, Translation> = {
|
||||
'Versiert in der Einrichtung, Verwaltung und Optimierung sowohl von SharePoint Online als auch On-Premise-Implementierungen, zur Gewährleistung effektiven Dokumentenmanagements, Zusammenarbeit und Informationsaustausch innerhalb von Organisationen.',
|
||||
},
|
||||
{
|
||||
title: 'Administration Nexthink',
|
||||
title: 'Nexthink Administration',
|
||||
description:
|
||||
"Compétent dans l'administration de la plateforme Nexthink, utilisant ses capacités pour la surveillance de l'infrastructure IT, l'exécution d'actions à distance et le développement de workflows pour améliorer la prestation de services IT et l'expérience utilisateur.",
|
||||
'Kompetent in der Administration der Nexthink-Plattform, unter Nutzung ihrer Fähigkeiten für IT-Infrastrukturüberwachung, Ausführung von Remote-Aktionen und Entwicklung von Workflows zur Verbesserung der IT-Serviceleistung und Benutzererfahrung.',
|
||||
},
|
||||
{
|
||||
title: 'Microsoft Power Apps',
|
||||
description:
|
||||
"Compétent dans l'utilisation de Microsoft Power Apps pour concevoir et développer des applications métier personnalisées avec un minimum de codage. Expérimenté dans la création d'applications canvas et basées sur des modèles qui se connectent à diverses sources de données.",
|
||||
'Kompetent in der Nutzung von Microsoft Power Apps zur Gestaltung und Entwicklung benutzerdefinierter Geschäftsanwendungen mit minimalem Coding. Erfahren in der Erstellung sowohl von Canvas- als auch modellgesteuerten Apps, die sich mit verschiedenen Datenquellen verbinden.',
|
||||
},
|
||||
{
|
||||
title: 'Gestion Infrastructure IT',
|
||||
title: 'IT-Infrastrukturmanagement',
|
||||
description:
|
||||
'Vaste expérience dans la supervision des infrastructures IT mondiales, la gestion des serveurs, réseaux et appareils utilisateurs finaux dans plusieurs pays pour assurer des opérations IT fiables et efficaces.',
|
||||
'Umfassende Erfahrung in der Überwachung globaler IT-Infrastrukturen, der Verwaltung von Servern, Netzwerken und Endbenutzergeräten in mehreren Ländern zur Gewährleistung zuverlässiger und effizienter IT-Operationen.',
|
||||
},
|
||||
{
|
||||
title: 'ITSM (TOPDesk)',
|
||||
description:
|
||||
"Expérimenté dans la gestion des processus ITSM avec TOPdesk. Compétent dans les fonctionnalités principales telles que la gestion des incidents et la gestion des actifs, tout en exploitant l'utilisation des APIs pour des intégrations transparentes avec d'autres systèmes.",
|
||||
'Erfahren in der Verwaltung von ITSM-Prozessen mit TOPdesk. Kompetent in Kernfunktionalitäten wie Incident Management und Asset Management, während API-Nutzung für nahtlose Integrationen mit anderen Systemen genutzt wird.',
|
||||
},
|
||||
{
|
||||
title: 'PowerShell',
|
||||
description:
|
||||
"Compétent dans l'utilisation de PowerShell pour l'automatisation, l'administration système et la gestion de configuration dans les environnements Microsoft. Expérimenté dans la création de scripts robustes pour l'automatisation des tâches, la surveillance des systèmes et l'intégration avec divers services Microsoft.",
|
||||
'Kompetent in der Nutzung von PowerShell für Automatisierung, Systemadministration und Konfigurationsmanagement in Microsoft-Umgebungen. Erfahren in der Erstellung robuster Skripte für Aufgabenautomatisierung, Systemüberwachung und Integration mit verschiedenen Microsoft-Services.',
|
||||
},
|
||||
{
|
||||
title: 'Gestion des Appareils Intune',
|
||||
title: 'Intune Geräteverwaltung',
|
||||
description:
|
||||
"Compétent dans le déploiement, la configuration et la gestion des appareils Windows 10/11 via Microsoft Intune. Expérimenté dans la création et l'implémentation de politiques d'appareils, le déploiement d'applications et les configurations de sécurité pour les environnements d'entreprise.",
|
||||
'Geschickt in der Bereitstellung, Konfiguration und Verwaltung von Windows 10/11-Geräten über Microsoft Intune. Erfahren in der Erstellung und Implementierung von Geräterichtlinien, Anwendungsbereitstellung und Sicherheitskonfigurationen für Unternehmensumgebungen.',
|
||||
},
|
||||
{
|
||||
title: 'Support IT de 3ème Niveau',
|
||||
title: '3rd Line IT Support',
|
||||
description:
|
||||
"Expérimenté dans la fourniture d'un support technique avancé pour des problèmes IT complexes nécessitant une connaissance approfondie et une expertise spécialisée. Compétent dans le dépannage, le diagnostic et la résolution de problèmes système critiques sur diverses plateformes et applications.",
|
||||
'Erfahren in der Bereitstellung von fortgeschrittenem technischen Support für komplexe IT-Probleme, die tiefgreifendes Wissen und spezialisierte Expertise erfordern. Kompetent in Fehlerbehebung, Diagnose und Lösung kritischer Systemprobleme auf verschiedenen Plattformen und Anwendungen.',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1491,13 +1555,14 @@ export const translations: Record<string, Translation> = {
|
||||
menu: 'Développement',
|
||||
pageTitle: 'Écosystème 365DevNet : Aperçu du développement',
|
||||
pageDescription: 'Consultez les dernières activités de développement, contributions de code et historique des commits de tous les dépôts de l\'écosystème 365DevNet.',
|
||||
title: 'Tableau',
|
||||
title: 'Tableau de bord',
|
||||
latestCommits: '10 derniers commits',
|
||||
intro: 'Cette page offre un aperçu transparent de l\'activité de développement en cours dans tous les dépôts de l\'écosystème 365DevNet. Le calendrier des contributions ci-dessous représente visuellement les contributions de code (commits) réalisées au cours de l\'année écoulée, les cases les plus intenses indiquant les jours les plus actifs. Sous le calendrier, vous trouverez une liste des commits les plus récents de tous les dépôts, avec des détails sur chaque modification. Cela aide les utilisateurs, contributeurs et parties prenantes à suivre la progression et à rester informés des dernières mises à jour dans l\'ensemble du code.'
|
||||
},
|
||||
footer: {
|
||||
terms: "Conditions d'utilisation",
|
||||
privacyPolicy: 'Politique de confidentialité',
|
||||
uptime: 'Disponibilité',
|
||||
},
|
||||
hero: {
|
||||
title: "Libérez votre potentiel d'entreprise avec l'automatisation IT experte",
|
||||
@@ -1512,6 +1577,18 @@ export const translations: Record<string, Translation> = {
|
||||
"Auparavant, j'ai dirigé les implémentations de Microsoft 365 et SharePoint Online, migré des systèmes de messagerie et amélioré l'automatisation avec SCCM. De plus, j'ai fondé Bergsma IT, aidant les petites entreprises à migrer vers le cloud et gérant des sites WordPress personnalisés.",
|
||||
"Je possède des certifications en administration Microsoft Teams, Azure Fundamentals et administration Nexthink. Ma mission est de promouvoir l'excellence IT en optimisant les solutions cloud, en automatisant les processus et en fournissant un support technique exceptionnel.",
|
||||
],
|
||||
actions: {
|
||||
learnMore: 'En savoir plus sur moi',
|
||||
viewExperience: 'Voir l\'expérience'
|
||||
},
|
||||
callToAction: {
|
||||
title: 'Prêt à collaborer?',
|
||||
subtitle: 'Discutons de la façon dont nous pouvons transformer votre entreprise grâce à des solutions d\'automatisation et de technologie innovantes.',
|
||||
actions: {
|
||||
getInTouch: 'Entrer en contact',
|
||||
viewPortfolio: 'Voir le portfolio'
|
||||
}
|
||||
}
|
||||
},
|
||||
homepage: {
|
||||
actions: {
|
||||
@@ -1569,7 +1646,7 @@ export const translations: Record<string, Translation> = {
|
||||
missionContent: [
|
||||
"Nous nous engageons à favoriser l'excellence IT grâce à l'optimisation stratégique du cloud, l'automatisation des processus et le support technique de niveau entreprise. Nous exploitons les technologies de pointe pour relever les défis commerciaux complexes et fournir une valeur mesurable.",
|
||||
"Avec une expertise approfondie dans les technologies Microsoft et l'automatisation, nous permettons aux organisations de transformer leurs capacités numériques et d'atteindre leurs objectifs commerciaux. Nous concevons des solutions qui améliorent l'expérience utilisateur et maximisent la productivité, garantissant que la technologie renforce votre entreprise.",
|
||||
"Nous restons à la pointe en recherchant et en implémentant des technologies émergentes, et bieden schaalbare oplossingen die zich aanpassen aan uw evoluerende behoeften. We stemmen technische oplossingen af op uw kernbedrijfsdoelstellingen, wat resulteert in meetbare ROI en een concurrentievoordeel.",
|
||||
"Nous restons à la pointe en recherchant et en implémentant des technologies émergentes, offrant des solutions évolutives qui s'adaptent à vos besoins en constante évolution. Nous alignons les solutions techniques sur vos objectifs commerciaux fondamentaux, offrant un ROI mesurable et un avantage concurrentiel.",
|
||||
"Notre mission est d'exploiter la technologie pour résoudre de véritables défis commerciaux et créer de la valeur par l'innovation. Avec plus de 15 ans d'expérience en IT, nous apportons une richesse de connaissances en technologies Microsoft, outils d'automatisation et intégration de systèmes pour aider les organisations à transformer leurs capacités numériques et atteindre leurs objectifs stratégiques.",
|
||||
],
|
||||
items: [
|
||||
@@ -1638,6 +1715,7 @@ export const translations: Record<string, Translation> = {
|
||||
},
|
||||
resume: {
|
||||
title: 'Expérience professionnelle',
|
||||
subtitle: 'Mon parcours professionnel à travers des rôles technologiques innovants',
|
||||
experience: [
|
||||
{
|
||||
title: "Responsable des systèmes IT et de l'automatisation",
|
||||
@@ -1677,7 +1755,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'Delft',
|
||||
period: '04-2018 - 09-2018',
|
||||
description:
|
||||
'Géré et optimisé les environnements SharePoint 2013 et SharePoint Online-Umgebungen zur Unterstützung von Zusammenarbeit und Produktivität. Erstellte et passte SharePoint-Sites an, implementierte Workflows et bot Expertenunterstützung für Cadac Organice. Arbeitete eng mit Stakeholdern zusammen, um maßgeschneiderte Lösungen zu liefern et sichere, aktuelle et leistungsstarke SharePoint-Systeme zu gewährleisten.',
|
||||
'Géré et optimisé les environnements SharePoint 2013 et SharePoint Online pour soutenir la collaboration et la productivité. Créé et personnalisé des sites SharePoint, implémenté des flux de travail et fourni un support expert pour Cadac Organice. Travaillé en étroite collaboration avec les parties prenantes pour livrer des solutions sur mesure, garantissant des systèmes SharePoint sécurisés, à jour et performants.',
|
||||
},
|
||||
{
|
||||
title: 'Administrateur système IT',
|
||||
@@ -1685,7 +1763,7 @@ export const translations: Record<string, Translation> = {
|
||||
location: 'De Kwakel',
|
||||
period: '10-2015 - 12-2017',
|
||||
description:
|
||||
"Géré et maintenu l'infrastructure IT de l'organisation pour assurer la fiabilité des systèmes et des opérations fluides. Supervisé les serveurs, PC clients, scanners portables et imprimantes, optimisant les performances et minimisant les temps d'arrêt. Configurer les systèmes VoIP, géré les commutateurs réseau et administrer les environnements Citrix pour un accès distant sécurisé. Installé et supporté les environnements SharePoint on-premise pour améliorer la collaboration. Conçu et maintenu le système de surveillance et la plateforme helpdesk de l'organisation, rationalisant le support IT et renforçant la sécurité. Fourni un dépannage pratique pour les problèmes de matériel, logiciel et réseau pour soutenir les opérations quotidiennes.",
|
||||
"Géré et maintenu l'infrastructure IT de l'organisation pour assurer la fiabilité des systèmes et des opérations fluides. Supervisé les serveurs, PC clients, scanners portables et imprimantes, optimisant les performances et minimisant les temps d'arrêt. Configuré les systèmes VoIP, géré les commutateurs réseau et administré les environnements Citrix pour un accès distant sécurisé. Installé et supporté les environnements SharePoint on-premise pour améliorer la collaboration. Conçu et maintenu le système de surveillance et la plateforme helpdesk de l'organisation, rationalisant le support IT et renforçant la sécurité. Fourni un dépannage pratique pour les problèmes de matériel, logiciel et réseau pour soutenir les opérations quotidiennes.",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1694,12 +1772,15 @@ export const translations: Record<string, Translation> = {
|
||||
items: [
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Mécatronique, Robotique et Automatisation<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2013</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Bachelor of Applied Science - BASc, Technologies de l'Information<br /> <span class="font-normal">De Haagse Hogeschool / The Hague University of Applied Sciences</span> <br /> <span class="text-sm font-normal">2011 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
{
|
||||
title: `Associate's degree, Technologies de l'Information<br /> <span class="font-normal">ID College</span> <br /> <span class="text-sm font-normal">2007 - 2011</span>`,
|
||||
description: 'coming soon',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1848,29 +1929,29 @@ export const translations: Record<string, Translation> = {
|
||||
'Compétence dans le développement de chatbots intelligents au sein de Copilot Studio, permettant des interactions utilisateur et un support améliorés grâce au traitement du langage naturel et aux réponses automatisées.',
|
||||
},
|
||||
{
|
||||
title: 'API-Integrationen',
|
||||
title: 'Intégrations API',
|
||||
description:
|
||||
'Erfahren in der Erstellung benutzerdefinierter Konnektoren und der Integration verschiedener Anwendungen und Dienste über APIs zur Ermöglichung nahtlosen Datenaustauschs und Prozessautomatisierung zwischen Plattformen.',
|
||||
'Compétent dans la création de connecteurs personnalisés et l\'intégration de diverses applications et services via des APIs pour faciliter l\'échange de données transparent et l\'automatisation de processus entre plateformes.',
|
||||
},
|
||||
{
|
||||
title: 'Administration Microsoft 365',
|
||||
description:
|
||||
'Umfassende Erfahrung in der Verwaltung von Microsoft 365-Umgebungen, einschließlich Benutzerverwaltung, Sicherheitskonfigurationen und Service-Optimierung zur Unterstützung globaler Zusammenarbeit und Produktivität.',
|
||||
'Expérience complète dans la gestion des environnements Microsoft 365, y compris la gestion des utilisateurs, les configurations de sécurité et l\'optimisation des services pour soutenir la collaboration mondiale et la productivité.',
|
||||
},
|
||||
{
|
||||
title: 'SharePoint Online & On-Premise',
|
||||
description:
|
||||
"Compétent dans la configuration, la gestion et l'optimisation des déploiements SharePoint Online et on-premise, assurant une gestion efficace des documents, la collaboration et le partage d'informations au sein des organisations.",
|
||||
'Compétent dans la configuration, la gestion et l\'optimisation des déploiements SharePoint Online et on-premise, assurant une gestion efficace des documents, la collaboration et le partage d\'informations au sein des organisations.',
|
||||
},
|
||||
{
|
||||
title: 'Administration Nexthink',
|
||||
description:
|
||||
"Compétent dans l'administration de la plateforme Nexthink, utilisant ses capacités pour la surveillance de l'infrastructure IT, l'exécution d'actions à distance et le développement de workflows pour améliorer la prestation de services IT et l'expérience utilisateur.",
|
||||
'Compétent dans l\'administration de la plateforme Nexthink, utilisant ses capacités pour la surveillance de l\'infrastructure IT, l\'exécution d\'actions à distance et le développement de workflows pour améliorer la prestation de services IT et l\'expérience utilisateur.',
|
||||
},
|
||||
{
|
||||
title: 'Microsoft Power Apps',
|
||||
description:
|
||||
"Compétent dans l'utilisation de Microsoft Power Apps pour concevoir et développer des applications métier personnalisées avec un minimum de codage. Expérimenté dans la création d'applications canvas et basées sur des modèles qui se connectent à diverses sources de données.",
|
||||
'Compétent dans l\'utilisation de Microsoft Power Apps pour concevoir et développer des applications métier personnalisées avec un minimum de codage. Expérimenté dans la création d\'applications canvas et basées sur des modèles qui se connectent à diverses sources de données.',
|
||||
},
|
||||
{
|
||||
title: 'Gestion Infrastructure IT',
|
||||
@@ -1880,22 +1961,22 @@ export const translations: Record<string, Translation> = {
|
||||
{
|
||||
title: 'ITSM (TOPDesk)',
|
||||
description:
|
||||
"Expérimenté dans la gestion des processus ITSM avec TOPdesk. Compétent dans les fonctionnalités principales telles que la gestion des incidents et la gestion des actifs, tout en exploitant l'utilisation des APIs pour des intégrations transparentes avec d'autres systèmes.",
|
||||
'Expérimenté dans la gestion des processus ITSM avec TOPdesk. Compétent dans les fonctionnalités principales telles que la gestion des incidents et la gestion des actifs, tout en exploitant l\'utilisation des APIs pour des intégrations transparentes avec d\'autres systèmes.',
|
||||
},
|
||||
{
|
||||
title: 'PowerShell',
|
||||
description:
|
||||
"Compétent dans l'utilisation de PowerShell pour l'automatisation, l'administration système et la gestion de configuration dans les environnements Microsoft. Expérimenté dans la création de scripts robustes pour l'automatisation des tâches, la surveillance des systèmes et l'intégration avec divers services Microsoft.",
|
||||
'Compétent dans l\'utilisation de PowerShell pour l\'automatisation, l\'administration système et la gestion de configuration dans les environnements Microsoft. Expérimenté dans la création de scripts robustes pour l\'automatisation des tâches, la surveillance des systèmes et l\'intégration avec divers services Microsoft.',
|
||||
},
|
||||
{
|
||||
title: 'Gestion des Appareils Intune',
|
||||
description:
|
||||
"Compétent dans le déploiement, la configuration et la gestion des appareils Windows 10/11 via Microsoft Intune. Expérimenté dans la création et l'implémentation de politiques d'appareils, le déploiement d'applications et les configurations de sécurité pour les environnements d'entreprise.",
|
||||
'Compétent dans le déploiement, la configuration et la gestion des appareils Windows 10/11 via Microsoft Intune. Expérimenté dans la création et l\'implémentation de politiques d\'appareils, le déploiement d\'applications et les configurations de sécurité pour les environnements d\'entreprise.',
|
||||
},
|
||||
{
|
||||
title: 'Support IT de 3ème Niveau',
|
||||
description:
|
||||
"Expérimenté dans la fourniture d'un support technique avancé pour des problèmes IT complexes nécessitant une connaissance approfondie et une expertise spécialisée. Compétent dans le dépannage, le diagnostic et la résolution de problèmes système critiques sur diverses plateformes et applications.",
|
||||
'Expérimenté dans la fourniture d\'un support technique avancé pour des problèmes IT complexes nécessitant une connaissance approfondie et une expertise spécialisée. Compétent dans le dépannage, le diagnostic et la résolution de problèmes système critiques sur diverses plateformes et applications.',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1904,4 +1985,4 @@ export const translations: Record<string, Translation> = {
|
||||
subtitle: 'Surveillance en temps réel de nos services et systèmes',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -4,10 +4,11 @@ import Layout from '~/layouts/PageLayout.astro';
|
||||
import StructuredData from '~/components/common/StructuredData.astro';
|
||||
import Hero from '~/components/widgets/Hero.astro';
|
||||
import Content from '~/components/widgets/Content.astro';
|
||||
import CompactSteps from '~/components/widgets/CompactSteps.astro';
|
||||
import WorkExperience from '~/components/widgets/WorkExperience.astro';
|
||||
import CompactCertifications from '~/components/widgets/CompactCertifications.astro';
|
||||
import CompactSkills from '~/components/widgets/CompactSkills.astro';
|
||||
import ModernEducation from '~/components/widgets/ModernEducation.astro';
|
||||
import ModernWorkExperience from '~/components/widgets/ModernWorkExperience.astro';
|
||||
import ModernCertifications from '~/components/widgets/ModernCertifications.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';
|
||||
@@ -31,6 +32,332 @@ const metadata = {
|
||||
};
|
||||
---
|
||||
|
||||
<style>
|
||||
/* Modern animated background with floating elements */
|
||||
.animated-hero-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||||
background-size: 300% 300%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.animated-hero-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: backgroundMove 20s linear infinite;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-shape {
|
||||
position: absolute;
|
||||
opacity: 0.15;
|
||||
animation: float 20s infinite linear;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.03));
|
||||
border-radius: 30px;
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
bottom: 30%;
|
||||
left: 20%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
animation-delay: -14s;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
top: 40%;
|
||||
right: 35%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
@keyframes backgroundMove {
|
||||
0% { transform: translateX(0) translateY(0); }
|
||||
100% { transform: translateX(-50px) translateY(-50px); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg) scale(1);
|
||||
opacity: 0.15;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-30px) rotate(90deg) scale(1.1);
|
||||
opacity: 0.25;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(180deg) scale(1.05);
|
||||
opacity: 0.2;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-25px) rotate(270deg) scale(1.15);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced glassmorphism effects for all sections */
|
||||
:global(.glass-enhanced) {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(20px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
:global(.glass-enhanced:hover) {
|
||||
transform: translateY(-8px) !important;
|
||||
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
|
||||
background: rgba(255, 255, 255, 0.98) !important;
|
||||
}
|
||||
|
||||
/* Dark mode enhancements */
|
||||
:global(.dark .glass-enhanced) {
|
||||
background: rgba(30, 30, 50, 0.95) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
|
||||
}
|
||||
|
||||
:global(.dark .glass-enhanced:hover) {
|
||||
background: rgba(35, 35, 60, 0.98) !important;
|
||||
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
|
||||
}
|
||||
|
||||
/* More compact hero title */
|
||||
.hero-title-enhanced {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg,
|
||||
#667eea 0%,
|
||||
#764ba2 25%,
|
||||
#f093fb 50%,
|
||||
#f5576c 75%,
|
||||
#4facfe 100%);
|
||||
background-size: 300% 300%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: gradientShift 8s ease-in-out infinite;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* Full-width subtitle */
|
||||
.hero-subtitle-enhanced {
|
||||
font-size: 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem 2rem;
|
||||
color: #1a1a1a;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0 0 2rem 0;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.dark) .hero-subtitle-enhanced {
|
||||
background: rgba(30, 30, 50, 0.9);
|
||||
color: #e2e8f0;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Full-width subtitle container */
|
||||
.hero-subtitle-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* More compact CTA buttons */
|
||||
.cta-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-primary-enhanced {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta-primary-enhanced::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.cta-primary-enhanced:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cta-primary-enhanced:hover {
|
||||
transform: translateY(-5px) scale(1.05);
|
||||
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.cta-secondary-enhanced {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(15px);
|
||||
color: white;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Section spacing - key fix for touching sections */
|
||||
.content-section {
|
||||
margin: 4rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-section:first-of-type {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.content-section:last-of-type {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.cta-secondary-enhanced:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Staggered animations for content sections */
|
||||
.stagger-animation {
|
||||
animation: slideUpStagger 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
|
||||
.stagger-animation:nth-child(1) { animation-delay: 0.1s; }
|
||||
.stagger-animation:nth-child(2) { animation-delay: 0.2s; }
|
||||
.stagger-animation:nth-child(3) { animation-delay: 0.3s; }
|
||||
.stagger-animation:nth-child(4) { animation-delay: 0.4s; }
|
||||
.stagger-animation:nth-child(5) { animation-delay: 0.5s; }
|
||||
.stagger-animation:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes slideUpStagger {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-subtitle-enhanced {
|
||||
font-size: 1.1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.cta-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.cta-primary-enhanced,
|
||||
.cta-secondary-enhanced {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
text-align: center;
|
||||
padding: 0.875rem 1.5rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<Fragment slot="announcement"></Fragment>
|
||||
|
||||
@@ -55,89 +382,169 @@ const metadata = {
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- Hero Widget -->
|
||||
<!-- Enhanced Hero Section -->
|
||||
<Hero id="hero" isDark={false}>
|
||||
<Fragment slot="bg">
|
||||
<div class="animated-hero-bg">
|
||||
<div class="floating-elements">
|
||||
<div class="floating-shape shape-1"></div>
|
||||
<div class="floating-shape shape-2"></div>
|
||||
<div class="floating-shape shape-3"></div>
|
||||
<div class="floating-shape shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="title">
|
||||
<span class="hero-title-enhanced">{t.hero.greeting}</span>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
<strong class="text-3xl md:text-4xl">{t.hero.greeting}</strong><br /><br />{t.hero.subtitle}
|
||||
<div class="hero-subtitle-container">
|
||||
<div class="hero-subtitle-enhanced">
|
||||
{t.hero.subtitle}
|
||||
</div>
|
||||
<div class="cta-container">
|
||||
<a href="#about" class="cta-primary-enhanced">
|
||||
{t.about.actions.learnMore}
|
||||
</a>
|
||||
<a href="#resume" class="cta-secondary-enhanced">
|
||||
{t.about.actions.viewExperience}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
|
||||
<!-- Content Widget -->
|
||||
<Content
|
||||
id="about"
|
||||
columns={2}
|
||||
items={[]}
|
||||
image={{
|
||||
src: HomePageImage,
|
||||
alt: 'Richard Bergsma smiling in the mountains of Switzerland holding Revella',
|
||||
loading: 'lazy',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl mb-2">{t.about.title}</h2>
|
||||
{
|
||||
t.about.content.map((paragraph) => (
|
||||
<>
|
||||
<p>{paragraph}</p>
|
||||
<br />
|
||||
</>
|
||||
))
|
||||
}
|
||||
</Fragment>
|
||||
<!-- Enhanced About Section -->
|
||||
<div class="content-section stagger-animation">
|
||||
<Content
|
||||
id="about"
|
||||
columns={2}
|
||||
items={[]}
|
||||
image={{
|
||||
src: HomePageImage,
|
||||
alt: 'Richard Bergsma smiling in the mountains of Switzerland holding Revella',
|
||||
loading: 'lazy',
|
||||
}}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{t.about.title}
|
||||
</h2>
|
||||
{
|
||||
t.about.content.map((paragraph, index) => (
|
||||
<div class="mb-6">
|
||||
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">{paragraph}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="bg">
|
||||
<div class="absolute inset-0 backdrop-blur-sm bg-white/5 dark:bg-gray-900/10"></div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
<Fragment slot="bg">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-gray-900/50 dark:to-gray-800/50"></div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
</div>
|
||||
|
||||
<!-- Work Experience - Modern Timeline Layout -->
|
||||
<WorkExperience
|
||||
id="resume"
|
||||
title={t.resume.title}
|
||||
compact={true}
|
||||
items={t.resume.experience.map((exp) => ({
|
||||
title: exp.title,
|
||||
company: exp.company,
|
||||
date: exp.period,
|
||||
location: exp.location,
|
||||
description: exp.description,
|
||||
icon: 'tabler:briefcase',
|
||||
}))}
|
||||
/>
|
||||
<!-- Enhanced Work Experience -->
|
||||
<div class="content-section stagger-animation">
|
||||
<ModernWorkExperience
|
||||
id="resume"
|
||||
title={t.resume.title}
|
||||
subtitle={t.resume.subtitle}
|
||||
compact={true}
|
||||
items={t.resume.experience.map((exp) => ({
|
||||
title: exp.title,
|
||||
company: exp.company,
|
||||
date: exp.period,
|
||||
location: exp.location,
|
||||
description: exp.description,
|
||||
icon: 'tabler:briefcase',
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Certifications - Compact Layout -->
|
||||
<CompactCertifications
|
||||
id="certifications"
|
||||
title={t.certifications.title}
|
||||
subtitle={t.certifications.subtitle}
|
||||
testimonials={t.certifications.items.map((cert) => ({
|
||||
name: cert.name,
|
||||
issueDate: cert.issueDate,
|
||||
description: cert.description,
|
||||
linkUrl: cert.linkUrl,
|
||||
image: cert.image,
|
||||
}))}
|
||||
/>
|
||||
<!-- Enhanced Skills Section with Modern Interactive Pills -->
|
||||
<div class="content-section stagger-animation">
|
||||
<ModernSkills
|
||||
id="skills"
|
||||
title={t.skills.title}
|
||||
subtitle={t.skills.subtitle}
|
||||
items={t.skills.items.map((item) => ({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
icon: 'tabler:code'
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Skills - Compact Layout -->
|
||||
<CompactSkills
|
||||
id="skills"
|
||||
title={t.skills.title}
|
||||
subtitle={t.skills.subtitle}
|
||||
defaultIcon="tabler:point-filled"
|
||||
items={t.skills.items.map((item) => ({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
}))}
|
||||
/>
|
||||
<!-- Enhanced Certifications with Modern Grid -->
|
||||
<div class="content-section stagger-animation">
|
||||
<ModernCertifications
|
||||
id="certifications"
|
||||
title={t.certifications.title}
|
||||
subtitle={t.certifications.subtitle}
|
||||
testimonials={t.certifications.items.map((cert) => ({
|
||||
name: cert.name,
|
||||
issueDate: cert.issueDate,
|
||||
description: cert.description,
|
||||
linkUrl: cert.linkUrl,
|
||||
image: cert.image,
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Education - Compact Layout -->
|
||||
<CompactSteps
|
||||
id="education"
|
||||
title={t.education.title}
|
||||
items={t.education.items.map((item) => ({
|
||||
title: item.title,
|
||||
icon: item.title.includes("Associate") ? 'tabler:certificate' : 'tabler:school',
|
||||
}))}
|
||||
/>
|
||||
</Layout>
|
||||
<!-- Enhanced Education -->
|
||||
<div class="content-section stagger-animation">
|
||||
<ModernEducation
|
||||
id="education"
|
||||
title={t.education.title}
|
||||
items={t.education.items.map((item) => ({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
icon: item.title.includes("Associate") ? 'tabler:certificate' : 'tabler:school',
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Call to Action -->
|
||||
<div class="content-section stagger-animation">
|
||||
<CallToAction
|
||||
title={t.about.callToAction.title}
|
||||
subtitle={t.about.callToAction.subtitle}
|
||||
actions={[
|
||||
{
|
||||
variant: 'primary',
|
||||
text: t.about.callToAction.actions.getInTouch,
|
||||
href: '/contact',
|
||||
icon: 'tabler:mail'
|
||||
},
|
||||
{
|
||||
variant: 'secondary',
|
||||
text: t.about.callToAction.actions.viewPortfolio,
|
||||
href: '/portfolio',
|
||||
icon: 'tabler:briefcase'
|
||||
}
|
||||
]}
|
||||
classes={{
|
||||
container: 'glass-enhanced'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user