Compare commits
2 Commits
f90f2bafa4
...
104c667ab9
| Author | SHA1 | Date | |
|---|---|---|---|
|
104c667ab9 | ||
|
|
82147b5ca6 |
90
index.html
90
index.html
@@ -1,26 +1,98 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon.png">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>Killian - Full Stack Developer | Vue.js, React, Node.js Expert</title>
|
||||||
|
<meta name="title" content="Killian - Full Stack Developer | Vue.js, React, Node.js Expert">
|
||||||
<meta name="description"
|
<meta name="description"
|
||||||
content="Portfolio de Killian, développeur Full Stack spécialisé dans les technologies web modernes">
|
content="Professional Full Stack Developer specializing in modern web development with Vue.js, React, Node.js. Expert in Discord bots, web applications, and custom software solutions. Available for freelance projects.">
|
||||||
|
<meta name="keywords"
|
||||||
|
content="full stack developer, web developer, Vue.js developer, React developer, Node.js developer, JavaScript developer, Discord bot developer, freelance developer, web development services, custom software solutions">
|
||||||
<meta name="author" content="Killian">
|
<meta name="author" content="Killian">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="language" content="English">
|
||||||
|
<meta name="revisit-after" content="7 days">
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:locale" content="fr_FR">
|
<meta property="og:url" content="https://killian-portfolio.com">
|
||||||
<title>Killian - Développeur Full Stack</title>
|
<meta property="og:title" content="Killian - Full Stack Developer | Vue.js, React, Node.js Expert">
|
||||||
|
<meta property="og:description"
|
||||||
|
content="Professional Full Stack Developer specializing in modern web development. Expert in Discord bots, web applications, and custom solutions.">
|
||||||
|
<meta property="og:image" content="/portfolio-preview.jpg">
|
||||||
|
<meta property="og:locale" content="en_US">
|
||||||
|
<meta property="og:site_name" content="Killian Portfolio">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="https://killian-portfolio.com">
|
||||||
|
<meta property="twitter:title" content="Killian - Full Stack Developer | Vue.js, React, Node.js Expert">
|
||||||
|
<meta property="twitter:description"
|
||||||
|
content="Professional Full Stack Developer specializing in modern web development. Expert in Discord bots, web applications, and custom solutions.">
|
||||||
|
<meta property="twitter:image" content="/portfolio-preview.jpg">
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href="https://killian-portfolio.com">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
|
|
||||||
|
<!-- Preconnect to external domains -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
<!-- Theme Color -->
|
||||||
|
<meta name="theme-color" content="#2563eb">
|
||||||
|
|
||||||
|
<!-- Structured Data -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "Killian",
|
||||||
|
"jobTitle": "Full Stack Developer",
|
||||||
|
"description": "Professional Full Stack Developer specializing in Vue.js, React, Node.js, and modern web technologies",
|
||||||
|
"url": "https://killian-portfolio.com",
|
||||||
|
"sameAs": [
|
||||||
|
"https://github.com/killian",
|
||||||
|
"https://linkedin.com/in/killian",
|
||||||
|
"https://www.fiverr.com/users/mr_kayjaydee"
|
||||||
|
],
|
||||||
|
"knowsAbout": ["Vue.js", "React", "Node.js", "JavaScript", "TypeScript", "Web Development", "Discord Bot Development", "API Development"],
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"itemOffered": {
|
||||||
|
"@type": "Service",
|
||||||
|
"name": "Web Development Services",
|
||||||
|
"description": "Custom web development, Discord bots, and software solutions"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<script defer src="https://umami.killiandalcin.fr/script.js"
|
<script defer src="https://umami.killiandalcin.fr/script.js"
|
||||||
data-website-id="bffa2341-3ab2-4c2c-96c9-f83ea7225a1b"></script>
|
data-website-id="83631152-9b6b-4724-aad1-828459ff36dc"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
|
||||||
|
<!-- No JavaScript Fallback -->
|
||||||
|
<noscript>
|
||||||
|
<div style="text-align: center; padding: 2rem;">
|
||||||
|
<h1>JavaScript Required</h1>
|
||||||
|
<p>This portfolio requires JavaScript to function properly. Please enable JavaScript in your browser settings to
|
||||||
|
view the full experience.</p>
|
||||||
|
</div>
|
||||||
|
</noscript>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
66
package-lock.json
generated
66
package-lock.json
generated
@@ -30,6 +30,7 @@
|
|||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
"prettier": "3.5.3",
|
"prettier": "3.5.3",
|
||||||
"tailwindcss": "^4.1.10",
|
"tailwindcss": "^4.1.10",
|
||||||
|
"terser": "^5.43.1",
|
||||||
"typescript": "~5.8.0",
|
"typescript": "~5.8.0",
|
||||||
"vite": "^6.2.4",
|
"vite": "^6.2.4",
|
||||||
"vite-plugin-vue-devtools": "^7.7.2",
|
"vite-plugin-vue-devtools": "^7.7.2",
|
||||||
@@ -1330,6 +1331,17 @@
|
|||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@jridgewell/source-map": {
|
||||||
|
"version": "0.3.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||||
|
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/gen-mapping": "^0.3.5",
|
||||||
|
"@jridgewell/trace-mapping": "^0.3.25"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@jridgewell/sourcemap-codec": {
|
"node_modules/@jridgewell/sourcemap-codec": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||||
@@ -3001,6 +3013,13 @@
|
|||||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/buffer-from": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/bundle-name": {
|
"node_modules/bundle-name": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
|
||||||
@@ -3095,6 +3114,13 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/commander": {
|
||||||
|
"version": "2.20.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||||
|
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/concat-map": {
|
"node_modules/concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||||
@@ -5356,6 +5382,16 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/source-map": {
|
||||||
|
"version": "0.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
|
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/source-map-js": {
|
"node_modules/source-map-js": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||||
@@ -5365,6 +5401,17 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/source-map-support": {
|
||||||
|
"version": "0.5.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||||
|
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"buffer-from": "^1.0.0",
|
||||||
|
"source-map": "^0.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/speakingurl": {
|
"node_modules/speakingurl": {
|
||||||
"version": "14.0.1",
|
"version": "14.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
|
||||||
@@ -5486,6 +5533,25 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/terser": {
|
||||||
|
"version": "5.43.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
|
||||||
|
"integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "BSD-2-Clause",
|
||||||
|
"dependencies": {
|
||||||
|
"@jridgewell/source-map": "^0.3.3",
|
||||||
|
"acorn": "^8.14.0",
|
||||||
|
"commander": "^2.20.0",
|
||||||
|
"source-map-support": "~0.5.20"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"terser": "bin/terser"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/tinyglobby": {
|
"node_modules/tinyglobby": {
|
||||||
"version": "0.2.14",
|
"version": "0.2.14",
|
||||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
|
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
|
||||||
|
|||||||
@@ -35,6 +35,7 @@
|
|||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
"prettier": "3.5.3",
|
"prettier": "3.5.3",
|
||||||
"tailwindcss": "^4.1.10",
|
"tailwindcss": "^4.1.10",
|
||||||
|
"terser": "^5.43.1",
|
||||||
"typescript": "~5.8.0",
|
"typescript": "~5.8.0",
|
||||||
"vite": "^6.2.4",
|
"vite": "^6.2.4",
|
||||||
"vite-plugin-vue-devtools": "^7.7.2",
|
"vite-plugin-vue-devtools": "^7.7.2",
|
||||||
|
|||||||
BIN
public/portfolio-preview.jpg
Normal file
BIN
public/portfolio-preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
33
public/robots.txt
Normal file
33
public/robots.txt
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# Robots.txt for Killian Portfolio
|
||||||
|
# https://killian-portfolio.com
|
||||||
|
|
||||||
|
# Allow all crawlers
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /api/
|
||||||
|
Disallow: /admin/
|
||||||
|
Disallow: /.git/
|
||||||
|
Disallow: /node_modules/
|
||||||
|
|
||||||
|
# Sitemap location
|
||||||
|
Sitemap: https://killian-portfolio.com/sitemap.xml
|
||||||
|
|
||||||
|
# Crawl-delay for respectful crawling
|
||||||
|
Crawl-delay: 1
|
||||||
|
|
||||||
|
# Special rules for major search engines
|
||||||
|
User-agent: Googlebot
|
||||||
|
Allow: /
|
||||||
|
Crawl-delay: 0
|
||||||
|
|
||||||
|
User-agent: Bingbot
|
||||||
|
Allow: /
|
||||||
|
Crawl-delay: 0
|
||||||
|
|
||||||
|
User-agent: Slurp
|
||||||
|
Allow: /
|
||||||
|
Crawl-delay: 1
|
||||||
|
|
||||||
|
User-agent: DuckDuckBot
|
||||||
|
Allow: /
|
||||||
|
Crawl-delay: 1
|
||||||
45
public/site.webmanifest
Normal file
45
public/site.webmanifest
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "Killian - Full Stack Developer Portfolio",
|
||||||
|
"short_name": "Killian Portfolio",
|
||||||
|
"description": "Professional Full Stack Developer specializing in Vue.js, React, Node.js. Expert in Discord bots, web applications, and custom software solutions.",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"theme_color": "#2563eb",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/favicon-16x16.png",
|
||||||
|
"sizes": "16x16",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/favicon-32x32.png",
|
||||||
|
"sizes": "32x32",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"categories": [
|
||||||
|
"productivity",
|
||||||
|
"developer",
|
||||||
|
"business"
|
||||||
|
],
|
||||||
|
"lang": "en-US"
|
||||||
|
}
|
||||||
89
public/sitemap.xml
Normal file
89
public/sitemap.xml
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||||
|
|
||||||
|
<!-- Homepage -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Projects Page -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/projects</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.9</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- About Page -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/about</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Contact Page -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/contact</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Fiverr Services Page -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/fiverr</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Individual Project Pages -->
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/virtual-tour</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/xinko</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/image-manipulation</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/primate-web-admin</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/instagram-bot</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://killian-portfolio.com/project/crowdin-status-bot</loc>
|
||||||
|
<lastmod>2025-06-22T00:00:00+00:00</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
</urlset>
|
||||||
@@ -34,36 +34,38 @@ const translatedCategory = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<article class="card group">
|
<article class="card group" itemscope itemtype="https://schema.org/CreativeWork">
|
||||||
<!-- Image -->
|
<!-- Image -->
|
||||||
<div class="project-image">
|
<div class="project-image">
|
||||||
<img :src="imageUrl" :alt="project.title" loading="lazy">
|
<img :src="imageUrl" :alt="`${translatedTitle} - ${translatedDescription.slice(0, 60)}...`" loading="lazy"
|
||||||
|
width="400" height="300" itemprop="image">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<!-- Category & Date -->
|
<!-- Category & Date -->
|
||||||
<div class="project-meta">
|
<div class="project-meta">
|
||||||
<span v-if="project.category" class="badge badge-primary">
|
<span v-if="project.category" class="badge badge-primary" itemprop="genre">
|
||||||
{{ translatedCategory }}
|
{{ translatedCategory }}
|
||||||
</span>
|
</span>
|
||||||
<span v-if="project.date" class="text-sm text-secondary">
|
<time v-if="project.date" class="text-sm text-secondary" :datetime="project.date" itemprop="dateCreated">
|
||||||
{{ project.date }}
|
{{ project.date }}
|
||||||
</span>
|
</time>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<h3 class="project-title">
|
<h3 class="project-title" itemprop="name">
|
||||||
{{ translatedTitle }}
|
{{ translatedTitle }}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<p class="project-description">
|
<p class="project-description" itemprop="description">
|
||||||
{{ translatedDescription }}
|
{{ translatedDescription }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Technologies -->
|
<!-- Technologies -->
|
||||||
<div v-if="project.technologies && project.technologies.length > 0" class="project-technologies">
|
<div v-if="project.technologies && project.technologies.length > 0" class="project-technologies"
|
||||||
|
itemprop="keywords">
|
||||||
<span v-for="tech in project.technologies.slice(0, 3)" :key="tech" class="badge badge-secondary text-xs">
|
<span v-for="tech in project.technologies.slice(0, 3)" :key="tech" class="badge badge-secondary text-xs">
|
||||||
{{ tech }}
|
{{ tech }}
|
||||||
</span>
|
</span>
|
||||||
@@ -74,9 +76,10 @@ const translatedCategory = computed(() => {
|
|||||||
|
|
||||||
<!-- Action -->
|
<!-- Action -->
|
||||||
<div class="project-actions">
|
<div class="project-actions">
|
||||||
<RouterLink :to="`/project/${project.id}`" class="btn btn-secondary btn-sm">
|
<RouterLink :to="`/project/${project.id}`" class="btn btn-secondary btn-sm"
|
||||||
|
:aria-label="`View details about ${translatedTitle} project`" itemprop="url">
|
||||||
{{ t('projects.buttons.viewProject') }}
|
{{ t('projects.buttons.viewProject') }}
|
||||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|||||||
@@ -84,15 +84,17 @@ const getLevelColor = (level: Technology['level']) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="tech-badge">
|
<div class="tech-badge" itemscope itemtype="https://schema.org/ComputerLanguage">
|
||||||
<!-- Tech image -->
|
<!-- Tech image -->
|
||||||
<img v-if="showImage && imageUrl" :src="imageUrl" :alt="techData.name" class="tech-image" loading="lazy">
|
<img v-if="showImage && imageUrl" :src="imageUrl" :alt="`${techData.name} programming language logo`"
|
||||||
|
class="tech-image" loading="lazy" width="24" height="24" itemprop="image">
|
||||||
|
|
||||||
<!-- Tech name -->
|
<!-- Tech name -->
|
||||||
<span class="tech-name">{{ techData.name }}</span>
|
<span class="tech-name" itemprop="name">{{ techData.name }}</span>
|
||||||
|
|
||||||
<!-- Level indicator -->
|
<!-- Level indicator -->
|
||||||
<span v-if="showLevel" :class="['badge', getLevelColor(techData.level)]" class="tech-level">
|
<span v-if="showLevel" :class="['badge', getLevelColor(techData.level)]" class="tech-level"
|
||||||
|
:aria-label="`Skill level: ${techData.level}`">
|
||||||
{{ techData.level }}
|
{{ techData.level }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -25,45 +25,50 @@ const services = computed(() => [
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<footer class="footer">
|
<footer class="footer" role="contentinfo">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- Main Footer Content -->
|
<!-- Main Footer Content -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-xl mb-2xl">
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-xl mb-2xl">
|
||||||
<!-- Brand -->
|
<!-- Brand -->
|
||||||
<div class="md:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<div class="flex items-center gap-md mb-lg">
|
<div class="flex items-center gap-md mb-lg">
|
||||||
<img :src="getImageUrl('@/assets/images/logo.png')" alt="Killian" class="footer-logo">
|
<img :src="getImageUrl('@/assets/images/logo.png')" alt="Killian - Full Stack Developer" class="footer-logo"
|
||||||
|
width="32" height="32" loading="lazy">
|
||||||
<span class="text-xl font-bold footer-brand">{{ siteConfig.name }}</span>
|
<span class="text-xl font-bold footer-brand">{{ siteConfig.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="mb-lg max-w-md footer-description">
|
<p class="mb-lg max-w-md footer-description">
|
||||||
{{ siteConfig.description }}
|
{{ siteConfig.description }}
|
||||||
</p>
|
</p>
|
||||||
<!-- Social Links -->
|
<!-- Social Links -->
|
||||||
<div class="flex gap-md">
|
<div class="flex gap-md" role="list" aria-label="Social media links">
|
||||||
<a v-for="social in siteConfig.social" :key="social.name" :href="social.url" target="_blank"
|
<a v-for="social in siteConfig.social" :key="social.name" :href="social.url" target="_blank"
|
||||||
rel="noopener noreferrer" class="social-link" :title="social.name">
|
rel="noopener noreferrer" class="social-link" :title="`Follow on ${social.name}`"
|
||||||
|
:aria-label="`Visit ${social.name} profile`" role="listitem">
|
||||||
|
|
||||||
<!-- GitHub Icon -->
|
<!-- GitHub Icon -->
|
||||||
<svg v-if="social.icon === 'github'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
<svg v-if="social.icon === 'github'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true">
|
||||||
<path
|
<path
|
||||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.237 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.237 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- LinkedIn Icon -->
|
<!-- LinkedIn Icon -->
|
||||||
<svg v-else-if="social.icon === 'linkedin'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
<svg v-else-if="social.icon === 'linkedin'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true">
|
||||||
<path
|
<path
|
||||||
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- Discord Icon -->
|
<!-- Discord Icon -->
|
||||||
<svg v-else-if="social.icon === 'discord'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
<svg v-else-if="social.icon === 'discord'" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true">
|
||||||
<path
|
<path
|
||||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0190 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9460 2.4189-2.1568 2.4189Z" />
|
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0190 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9460 2.4189-2.1568 2.4189Z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<!-- Email Icon -->
|
<!-- Email Icon -->
|
||||||
<svg v-else-if="social.icon === 'email'" class="w-5 h-5" fill="none" stroke="currentColor"
|
<svg v-else-if="social.icon === 'email'" class="w-5 h-5" fill="none" stroke="currentColor"
|
||||||
viewBox="0 0 24 24">
|
viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -73,22 +78,22 @@ const services = computed(() => [
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Quick Links -->
|
<!-- Quick Links -->
|
||||||
<div>
|
<nav aria-label="Footer navigation">
|
||||||
<h3 class="text-lg font-bold mb-lg footer-title">{{ t('footer.navigation') }}</h3>
|
<h3 class="text-lg font-bold mb-lg footer-title">{{ t('footer.navigation') }}</h3>
|
||||||
<ul class="space-y-sm">
|
<ul class="space-y-sm" role="list">
|
||||||
<li v-for="link in quickLinks" :key="link.name">
|
<li v-for="link in quickLinks" :key="link.name" role="listitem">
|
||||||
<RouterLink :to="link.path" class="footer-link">
|
<RouterLink :to="link.path" class="footer-link">
|
||||||
{{ link.name }}
|
{{ link.name }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<!-- Services -->
|
<!-- Services -->
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-lg font-bold mb-lg footer-title">{{ t('footer.services') }}</h3>
|
<h3 class="text-lg font-bold mb-lg footer-title">{{ t('footer.services') }}</h3>
|
||||||
<ul class="space-y-sm">
|
<ul class="space-y-sm" role="list">
|
||||||
<li v-for="service in services" :key="service">
|
<li v-for="service in services" :key="service" role="listitem">
|
||||||
<span class="footer-link cursor-default">{{ service }}</span>
|
<span class="footer-link cursor-default">{{ service }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -99,12 +104,13 @@ const services = computed(() => [
|
|||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center gap-md">
|
<div class="flex flex-col md:flex-row justify-between items-center gap-md">
|
||||||
<p class="text-sm footer-copyright">
|
<p class="text-sm footer-copyright">
|
||||||
© {{ new Date().getFullYear() }} {{ siteConfig.author }}. {{ t('footer.copyright') }}
|
© <time :datetime="new Date().getFullYear().toString()">{{ new Date().getFullYear() }}</time> {{
|
||||||
|
siteConfig.author }}. {{ t('footer.copyright') }}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex gap-lg text-sm">
|
<nav class="flex gap-lg text-sm" aria-label="Legal links">
|
||||||
<a href="#" class="footer-link">{{ t('footer.legalNotices') }}</a>
|
<a href="/legal" class="footer-link">{{ t('footer.legalNotices') }}</a>
|
||||||
<a href="#" class="footer-link">{{ t('footer.privacyPolicy') }}</a>
|
<a href="/privacy" class="footer-link">{{ t('footer.privacyPolicy') }}</a>
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,19 +23,21 @@ const toggleMenu = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="header">
|
<header class="header" role="banner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<RouterLink to="/" class="logo">
|
<RouterLink to="/" class="logo" aria-label="Killian - Full Stack Developer Homepage">
|
||||||
<img :src="getImageUrl('@/assets/images/logo.png')" alt="Killian" class="logo-image">
|
<img :src="getImageUrl('@/assets/images/logo.png')" alt="Killian - Full Stack Developer Logo"
|
||||||
|
class="logo-image" width="40" height="40" loading="eager">
|
||||||
<span>Killian</span>
|
<span>Killian</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
<!-- Desktop Navigation -->
|
<!-- Desktop Navigation -->
|
||||||
<nav class="nav hidden md:flex">
|
<nav class="nav hidden md:flex" role="navigation" aria-label="Main navigation">
|
||||||
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
||||||
:class="{ 'active': $route.path === item.path }">
|
:class="{ 'active': $route.path === item.path }"
|
||||||
|
:aria-current="$route.path === item.path ? 'page' : undefined">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -49,8 +51,10 @@ const toggleMenu = () => {
|
|||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
|
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<button @click="toggleMenu" class="md:hidden btn btn-ghost p-2" aria-label="Toggle menu">
|
<button @click="toggleMenu" class="md:hidden btn btn-ghost p-2"
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
:aria-label="isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'" :aria-expanded="isMenuOpen"
|
||||||
|
aria-controls="mobile-menu">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
<path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M4 6h16M4 12h16M4 18h16" />
|
d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
@@ -61,10 +65,11 @@ const toggleMenu = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile Navigation -->
|
<!-- Mobile Navigation -->
|
||||||
<div class="mobile-menu md:hidden" :class="{ 'open': isMenuOpen }">
|
<div id="mobile-menu" class="mobile-menu md:hidden" :class="{ 'open': isMenuOpen }" role="navigation"
|
||||||
|
aria-label="Mobile navigation">
|
||||||
<nav class="mobile-menu-nav">
|
<nav class="mobile-menu-nav">
|
||||||
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
||||||
@click="isMenuOpen = false">
|
@click="isMenuOpen = false" :aria-current="$route.path === item.path ? 'page' : undefined">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -1,19 +1,35 @@
|
|||||||
import { onMounted, onUnmounted } from 'vue'
|
import { onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
interface SeoOptions {
|
interface SeoOptions {
|
||||||
title?: string
|
title?: string
|
||||||
description?: string
|
description?: string
|
||||||
|
keywords?: string
|
||||||
ogTitle?: string
|
ogTitle?: string
|
||||||
ogDescription?: string
|
ogDescription?: string
|
||||||
ogImage?: string
|
ogImage?: string
|
||||||
|
ogUrl?: string
|
||||||
|
twitterCard?: string
|
||||||
|
twitterTitle?: string
|
||||||
|
twitterDescription?: string
|
||||||
|
twitterImage?: string
|
||||||
|
canonicalUrl?: string
|
||||||
|
structuredData?: object
|
||||||
|
noindex?: boolean
|
||||||
|
nofollow?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useSeo(options: SeoOptions = {}) {
|
export function useSeo(options: SeoOptions = {}) {
|
||||||
|
const route = useRoute()
|
||||||
const originalTitle = document.title
|
const originalTitle = document.title
|
||||||
const metaElements: HTMLMetaElement[] = []
|
const metaElements: HTMLMetaElement[] = []
|
||||||
|
const linkElements: HTMLLinkElement[] = []
|
||||||
|
const scriptElements: HTMLScriptElement[] = []
|
||||||
|
|
||||||
const setTitle = (title: string) => {
|
const setTitle = (title: string) => {
|
||||||
document.title = title
|
document.title = title
|
||||||
|
setMetaTag('og:title', title, true)
|
||||||
|
setMetaTag('twitter:title', title, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setMetaTag = (name: string, content: string, property?: boolean) => {
|
const setMetaTag = (name: string, content: string, property?: boolean) => {
|
||||||
@@ -33,29 +49,109 @@ export function useSeo(options: SeoOptions = {}) {
|
|||||||
meta.setAttribute('content', content)
|
meta.setAttribute('content', content)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
const setLinkTag = (rel: string, href: string) => {
|
||||||
if (options.title) {
|
let link = document.querySelector(`link[rel="${rel}"]`) as HTMLLinkElement
|
||||||
setTitle(options.title)
|
|
||||||
|
if (!link) {
|
||||||
|
link = document.createElement('link')
|
||||||
|
link.setAttribute('rel', rel)
|
||||||
|
document.head.appendChild(link)
|
||||||
|
linkElements.push(link)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
link.setAttribute('href', href)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setStructuredData = (data: object) => {
|
||||||
|
const script = document.createElement('script')
|
||||||
|
script.type = 'application/ld+json'
|
||||||
|
script.textContent = JSON.stringify(data)
|
||||||
|
document.head.appendChild(script)
|
||||||
|
scriptElements.push(script)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// Set title with site name suffix
|
||||||
|
if (options.title) {
|
||||||
|
const fullTitle = options.title.includes('Killian') ? options.title : `${options.title} | Killian - Full Stack Developer`
|
||||||
|
setTitle(fullTitle)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set description
|
||||||
if (options.description) {
|
if (options.description) {
|
||||||
setMetaTag('description', options.description)
|
setMetaTag('description', options.description)
|
||||||
|
setMetaTag('og:description', options.ogDescription || options.description, true)
|
||||||
|
setMetaTag('twitter:description', options.twitterDescription || options.description, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set keywords
|
||||||
|
if (options.keywords) {
|
||||||
|
setMetaTag('keywords', options.keywords)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set Open Graph tags
|
||||||
if (options.ogTitle) {
|
if (options.ogTitle) {
|
||||||
setMetaTag('og:title', options.ogTitle, true)
|
setMetaTag('og:title', options.ogTitle, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.ogDescription) {
|
|
||||||
setMetaTag('og:description', options.ogDescription, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.ogImage) {
|
if (options.ogImage) {
|
||||||
setMetaTag('og:image', options.ogImage, true)
|
setMetaTag('og:image', options.ogImage, true)
|
||||||
|
setMetaTag('twitter:image', options.twitterImage || options.ogImage, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (options.ogUrl || route) {
|
||||||
|
const url = options.ogUrl || `https://killian-portfolio.com${route.path}`
|
||||||
|
setMetaTag('og:url', url, true)
|
||||||
|
setMetaTag('twitter:url', url, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set Twitter Card
|
||||||
|
setMetaTag('twitter:card', options.twitterCard || 'summary_large_image', true)
|
||||||
|
|
||||||
|
// Set canonical URL
|
||||||
|
if (options.canonicalUrl || route) {
|
||||||
|
const canonicalUrl = options.canonicalUrl || `https://killian-portfolio.com${route.path}`
|
||||||
|
setLinkTag('canonical', canonicalUrl)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set robots meta
|
||||||
|
const robotsContent = []
|
||||||
|
if (options.noindex) robotsContent.push('noindex')
|
||||||
|
if (options.nofollow) robotsContent.push('nofollow')
|
||||||
|
if (robotsContent.length === 0) robotsContent.push('index', 'follow')
|
||||||
|
setMetaTag('robots', robotsContent.join(', '))
|
||||||
|
|
||||||
// Set default Open Graph type
|
// Set default Open Graph type
|
||||||
setMetaTag('og:type', 'website', true)
|
setMetaTag('og:type', 'website', true)
|
||||||
|
setMetaTag('og:site_name', 'Killian Portfolio', true)
|
||||||
|
|
||||||
|
// Set structured data
|
||||||
|
if (options.structuredData) {
|
||||||
|
setStructuredData(options.structuredData)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default structured data for breadcrumbs
|
||||||
|
if (route && route.name !== 'home') {
|
||||||
|
const breadcrumbData = {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'BreadcrumbList',
|
||||||
|
'itemListElement': [
|
||||||
|
{
|
||||||
|
'@type': 'ListItem',
|
||||||
|
'position': 1,
|
||||||
|
'name': 'Home',
|
||||||
|
'item': 'https://killian-portfolio.com'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'@type': 'ListItem',
|
||||||
|
'position': 2,
|
||||||
|
'name': options.title || route.name,
|
||||||
|
'item': `https://killian-portfolio.com${route.path}`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
setStructuredData(breadcrumbData)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -68,10 +164,26 @@ export function useSeo(options: SeoOptions = {}) {
|
|||||||
meta.parentNode.removeChild(meta)
|
meta.parentNode.removeChild(meta)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Remove link tags we added
|
||||||
|
linkElements.forEach(link => {
|
||||||
|
if (link.parentNode) {
|
||||||
|
link.parentNode.removeChild(link)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Remove script tags we added
|
||||||
|
scriptElements.forEach(script => {
|
||||||
|
if (script.parentNode) {
|
||||||
|
script.parentNode.removeChild(script)
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
setTitle,
|
setTitle,
|
||||||
setMetaTag
|
setMetaTag,
|
||||||
|
setLinkTag,
|
||||||
|
setStructuredData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,6 @@ export interface SiteConfig {
|
|||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
author: string
|
author: string
|
||||||
url: string
|
|
||||||
contact: ContactInfo
|
contact: ContactInfo
|
||||||
social: SocialLink[]
|
social: SocialLink[]
|
||||||
fiverr: FiverrConfig
|
fiverr: FiverrConfig
|
||||||
@@ -36,10 +35,9 @@ export interface SiteConfig {
|
|||||||
|
|
||||||
export const siteConfig: SiteConfig = {
|
export const siteConfig: SiteConfig = {
|
||||||
name: 'Killian',
|
name: 'Killian',
|
||||||
title: 'Killian - Full Stack Developer', // This will be overridden by translations
|
title: 'Killian - Full Stack Developer | Vue.js, React, Node.js Expert',
|
||||||
description: 'Full Stack Developer passionate about creating modern and performant web experiences.', // This will be overridden by translations
|
description: 'Professional Full Stack Developer specializing in modern web development with Vue.js, React, Node.js. Expert in Discord bots, web applications, and custom software solutions.',
|
||||||
author: 'Killian',
|
author: 'Killian',
|
||||||
url: 'https://killiandalcin.fr',
|
|
||||||
|
|
||||||
contact: {
|
contact: {
|
||||||
email: 'contact@killiandalcin.fr',
|
email: 'contact@killiandalcin.fr',
|
||||||
@@ -52,11 +50,11 @@ export const siteConfig: SiteConfig = {
|
|||||||
name: 'Gitea',
|
name: 'Gitea',
|
||||||
url: 'https://gitea.kamisama.ovh/kayjaydee',
|
url: 'https://gitea.kamisama.ovh/kayjaydee',
|
||||||
icon: 'github',
|
icon: 'github',
|
||||||
username: 'killiandalcin'
|
username: 'kayjaydee'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'LinkedIn',
|
name: 'LinkedIn',
|
||||||
url: 'https://linkedin.com/in/killian-dalcin',
|
url: 'https://linkedin.com/in/killian-dal-cin',
|
||||||
icon: 'linkedin',
|
icon: 'linkedin',
|
||||||
username: 'killian-dalcin'
|
username: 'killian-dalcin'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ export default {
|
|||||||
// Navigation
|
// Navigation
|
||||||
nav: {
|
nav: {
|
||||||
home: 'Home',
|
home: 'Home',
|
||||||
projects: 'Projects',
|
projects: 'Portfolio Projects',
|
||||||
about: 'About',
|
about: 'About',
|
||||||
contact: 'Contact',
|
contact: 'Contact',
|
||||||
fiverr: 'Fiverr Services'
|
fiverr: 'Fiverr Services'
|
||||||
@@ -10,63 +10,63 @@ export default {
|
|||||||
|
|
||||||
// Home page
|
// Home page
|
||||||
home: {
|
home: {
|
||||||
title: 'Hi, I\'m Killian',
|
title: 'Hi, I\'m Killian - Full Stack Developer',
|
||||||
subtitle: 'Full Stack Developer passionate about creating exceptional web experiences and innovative solutions to bring your projects to life.',
|
subtitle: 'Expert Full Stack Developer specializing in Vue.js, React, and Node.js. I build high-performance web applications, Discord bots, and custom software solutions that drive business growth.',
|
||||||
cta: {
|
cta: {
|
||||||
viewProjects: 'View my projects',
|
viewProjects: 'View Portfolio Projects',
|
||||||
contactMe: 'Contact me'
|
contactMe: 'Get Free Consultation'
|
||||||
},
|
},
|
||||||
featuredProjects: {
|
featuredProjects: {
|
||||||
title: 'Featured Projects',
|
title: 'Featured Web Development Projects',
|
||||||
subtitle: 'Discover a selection of my most recent and innovative projects, showcasing my skills in modern web development.',
|
subtitle: 'Explore my portfolio of modern web applications built with Vue.js, React, Node.js, and cutting-edge JavaScript technologies. Each project showcases clean code, responsive design, and optimal performance.',
|
||||||
viewAll: 'View all projects'
|
viewAll: 'View All Projects'
|
||||||
},
|
},
|
||||||
services: {
|
services: {
|
||||||
title: 'My Services',
|
title: 'Professional Web Development Services',
|
||||||
subtitle: 'I offer a complete range of services to support your projects from concept to completion.',
|
subtitle: 'Comprehensive full stack development services from concept to deployment. Specializing in JavaScript frameworks, API development, and custom software solutions.',
|
||||||
webDev: {
|
webDev: {
|
||||||
title: 'Web Dev',
|
title: 'Full Stack Web Development',
|
||||||
description: 'Modern web applications with Vue.js, React and Node.js. Custom solutions tailored to your needs.'
|
description: 'Modern web applications using Vue.js, React, Node.js, and TypeScript. Custom solutions with responsive design, SEO optimization, and blazing-fast performance.'
|
||||||
},
|
},
|
||||||
mobileApps: {
|
mobileApps: {
|
||||||
title: 'Mobile Applications',
|
title: 'Cross-Platform Mobile Development',
|
||||||
description: 'Development of high-performance and intuitive cross-platform applications.'
|
description: 'High-performance mobile applications with React Native and progressive web apps (PWA). Native-like experience across iOS and Android platforms.'
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
title: 'Optimization & Performance',
|
title: 'Performance & SEO Optimization',
|
||||||
description: 'Performance improvement and SEO optimization for a better user experience.'
|
description: 'Website speed optimization, Core Web Vitals improvement, and technical SEO implementation. Boost your search rankings and user experience.'
|
||||||
},
|
},
|
||||||
maintenance: {
|
maintenance: {
|
||||||
title: 'Maintenance & Support',
|
title: 'Maintenance & Technical Support',
|
||||||
description: 'Ongoing maintenance and technical support for your existing projects.'
|
description: 'Reliable ongoing maintenance, security updates, and 24/7 technical support for your web applications. Keep your projects running smoothly.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cta2: {
|
cta2: {
|
||||||
title: 'Ready to start your project?',
|
title: 'Ready to Build Your Next Web Project?',
|
||||||
subtitle: 'Let\'s discuss your vision and create something extraordinary together. I\'m here to turn your ideas into reality.',
|
subtitle: 'Let\'s transform your ideas into powerful web applications. Free consultation for your Vue.js, React, or Node.js project.',
|
||||||
startProject: 'Start a project',
|
startProject: 'Start Your Project',
|
||||||
learnMore: 'Learn more'
|
learnMore: 'Learn More'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Projects page
|
// Projects page
|
||||||
projects: {
|
projects: {
|
||||||
title: 'My Projects',
|
title: 'Web Development Portfolio',
|
||||||
subtitle: 'Explore my portfolio of web applications, tools, and innovative solutions. Each project represents a unique challenge solved with creativity and technical expertise.',
|
subtitle: 'Browse my full stack development projects featuring Vue.js applications, React websites, Node.js APIs, Discord bots, and enterprise software solutions. Real-world examples of clean code and modern architecture.',
|
||||||
categories: {
|
categories: {
|
||||||
all: 'All',
|
all: 'All Projects',
|
||||||
'webdevelopment': 'Web Development',
|
'webdevelopment': 'Web Development',
|
||||||
'botdevelopment': 'Bot Development',
|
'botdevelopment': 'Bot Development',
|
||||||
'opensource': 'Open Source',
|
'opensource': 'Open Source',
|
||||||
'enterprisesoftware': 'Enterprise Software',
|
'enterprisesoftware': 'Enterprise Software',
|
||||||
'socialmediabot': 'Social Media Bot',
|
'socialmediabot': 'Social Media Bots',
|
||||||
'automation': 'Automation'
|
'automation': 'Automation Tools'
|
||||||
},
|
},
|
||||||
buttons: {
|
buttons: {
|
||||||
website: 'Website',
|
website: 'Live Website',
|
||||||
repository: 'Repository',
|
repository: 'Source Code',
|
||||||
npmpackage: 'NPM Package',
|
npmpackage: 'NPM Package',
|
||||||
viewProject: 'View Project'
|
viewProject: 'View Details'
|
||||||
},
|
},
|
||||||
noResults: {
|
noResults: {
|
||||||
title: 'No projects found',
|
title: 'No projects found',
|
||||||
@@ -76,225 +76,237 @@ export default {
|
|||||||
|
|
||||||
// About page
|
// About page
|
||||||
about: {
|
about: {
|
||||||
title: 'About Me',
|
title: 'About Killian - Full Stack Developer',
|
||||||
subtitle: 'Learn more about my journey, skills, and passion for web development.',
|
subtitle: 'Experienced web developer passionate about Vue.js, React, Node.js, and modern JavaScript technologies.',
|
||||||
intro: {
|
intro: {
|
||||||
title: 'Who am I?',
|
title: 'Professional Full Stack Developer',
|
||||||
content: 'I\'m Killian, a passionate full-stack developer with several years of experience in web development. I specialize in creating modern, performant, and user-friendly applications using the latest technologies.'
|
content: 'I\'m Killian, an experienced full stack developer specializing in JavaScript technologies. With expertise in Vue.js, React, Node.js, and TypeScript, I create scalable web applications, RESTful APIs, and real-time systems that exceed client expectations.'
|
||||||
},
|
},
|
||||||
skills: {
|
skills: {
|
||||||
title: 'My Skills',
|
title: 'Technical Skills & Expertise',
|
||||||
programming: 'Programming',
|
programming: 'Programming Languages',
|
||||||
frontend: 'Frontend',
|
frontend: 'Frontend Technologies',
|
||||||
backend: 'Backend',
|
backend: 'Backend Technologies',
|
||||||
tools: 'Tools & Others',
|
tools: 'DevOps & Tools',
|
||||||
systems: 'Operating Systems'
|
systems: 'Operating Systems'
|
||||||
},
|
},
|
||||||
experience: {
|
experience: {
|
||||||
title: 'Experience',
|
title: 'Professional Experience',
|
||||||
content: 'With years of experience in web development, I\'ve worked on various projects ranging from simple websites to complex web applications. I\'m always eager to learn new technologies and improve my skills.'
|
content: 'Years of professional web development experience building enterprise applications, e-commerce platforms, SaaS products, and custom software solutions. Proven track record of delivering high-quality code on time and within budget.'
|
||||||
},
|
},
|
||||||
approach: {
|
approach: {
|
||||||
title: 'My Approach',
|
title: 'Development Philosophy',
|
||||||
subtitle: 'My development philosophy is built on four fundamental pillars that ensure the success of every project.',
|
subtitle: 'My approach to full stack development focuses on clean code, scalable architecture, and exceptional user experience.',
|
||||||
performance: {
|
performance: {
|
||||||
title: 'Performance',
|
title: 'Performance-First Development',
|
||||||
description: 'I place particular importance on performance and optimization, using best practices to ensure fast and responsive applications.'
|
description: 'Optimized code, lazy loading, code splitting, and caching strategies. Achieving perfect Lighthouse scores and Core Web Vitals metrics.'
|
||||||
},
|
},
|
||||||
architecture: {
|
architecture: {
|
||||||
title: 'Architecture',
|
title: 'Scalable Architecture',
|
||||||
description: 'I design modular and maintainable architectures, facilitating the evolution and scalability of projects in the long term.'
|
description: 'Microservices, serverless functions, and modular design patterns. Building applications that scale effortlessly with your business growth.'
|
||||||
},
|
},
|
||||||
quality: {
|
quality: {
|
||||||
title: 'Quality',
|
title: 'Code Quality & Testing',
|
||||||
description: 'Automated testing, code reviews, and continuous integration are integral parts of my development process to ensure optimal quality.'
|
description: 'Test-driven development (TDD), automated testing, continuous integration (CI/CD), and comprehensive code reviews ensuring bug-free deployments.'
|
||||||
},
|
},
|
||||||
collaboration: {
|
collaboration: {
|
||||||
title: 'Collaboration',
|
title: 'Agile Collaboration',
|
||||||
description: 'I prioritize clear communication and close collaboration with teams to ensure project success.'
|
description: 'Excellent communication, agile methodologies, and transparent project management. Regular updates and collaborative problem-solving.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cta: {
|
cta: {
|
||||||
title: 'Ready to work together?',
|
title: 'Looking for a Full Stack Developer?',
|
||||||
description: 'I\'m always open to new opportunities and interesting collaborations.',
|
description: 'Let\'s discuss your project requirements and build something amazing together.',
|
||||||
button: 'Contact me'
|
button: 'Start a Conversation'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Fiverr page
|
// Fiverr page
|
||||||
fiverr: {
|
fiverr: {
|
||||||
title: 'Fiverr Services',
|
title: 'Professional Freelance Services on Fiverr',
|
||||||
subtitle: 'Professional freelance services on Fiverr. Get custom solutions for your Discord server, Minecraft server, or web development needs.',
|
subtitle: 'Hire an expert developer for Discord bot development, Minecraft plugin creation, Telegram bot programming, and custom web development. Top-rated seller with 100% satisfaction guarantee.',
|
||||||
profileCta: 'Visit My Fiverr Profile',
|
profileCta: 'View My Fiverr Profile',
|
||||||
stats: {
|
stats: {
|
||||||
rating: 'Rating'
|
rating: '5-Star Rating'
|
||||||
},
|
},
|
||||||
pricing: {
|
pricing: {
|
||||||
startingAt: 'Starting at'
|
startingAt: 'Starting at'
|
||||||
},
|
},
|
||||||
services: {
|
services: {
|
||||||
title: 'Available Services',
|
title: 'Available Development Services',
|
||||||
subtitle: 'Choose from a variety of professional services tailored to your needs.',
|
subtitle: 'Professional programming services with fast delivery and unlimited revisions. Custom solutions tailored to your specific needs.',
|
||||||
features: 'Features',
|
features: 'Key Features',
|
||||||
orderNow: 'Order Now',
|
orderNow: 'Order on Fiverr',
|
||||||
learnMore: 'Learn More',
|
learnMore: 'View Details',
|
||||||
moreFeatures: 'more features',
|
moreFeatures: 'additional features',
|
||||||
comingSoon: 'Coming Soon',
|
comingSoon: 'Coming Soon',
|
||||||
available: 'Available'
|
available: 'Available Now'
|
||||||
},
|
},
|
||||||
serviceData: {
|
serviceData: {
|
||||||
'discord-bot': {
|
'discord-bot': {
|
||||||
title: 'Custom Discord Bot Creation',
|
title: 'Custom Discord Bot Development',
|
||||||
description: 'Supercharge Your Discord Server with a Powerful, Fully Custom Bot',
|
description: 'Professional Discord bot development with advanced features, custom commands, and seamless integration. Transform your Discord server with powerful automation.',
|
||||||
features: [
|
features: [
|
||||||
'Advanced moderation & utility (Tickets, Leveling)',
|
'Advanced moderation system with auto-mod and logging',
|
||||||
'Engaging features (Minigames, Giveaways, Trackers)',
|
'Custom leveling system, economy, and role rewards',
|
||||||
'Powerful API integrations (PayPal, YouTube, Twitch, etc.)',
|
'Music player, games, and entertainment features',
|
||||||
'Fully custom – no templates'
|
'API integrations (Twitter, YouTube, Twitch, OpenAI)',
|
||||||
|
'Dashboard panel for easy configuration',
|
||||||
|
'Database integration and data persistence',
|
||||||
|
'24/7 hosting setup assistance included'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'minecraft-plugin': {
|
'minecraft-plugin': {
|
||||||
title: 'Minecraft Plugin Development',
|
title: 'Minecraft Plugin Development (Spigot/Paper)',
|
||||||
description: 'Custom Minecraft plugins tailored for your server needs',
|
description: 'Custom Minecraft plugin development for Spigot, Paper, and Bukkit servers. Professional Java programming for unique gameplay features.',
|
||||||
features: [
|
features: [
|
||||||
'Custom gameplay mechanics',
|
'Custom gameplay mechanics and minigames',
|
||||||
'Server management tools',
|
'Economy systems and shop integrations',
|
||||||
'Player engagement features',
|
'Advanced permissions and rank systems',
|
||||||
'Performance optimized'
|
'Custom GUIs and inventory menus',
|
||||||
|
'Database integration (MySQL/SQLite)',
|
||||||
|
'Performance optimized for large servers',
|
||||||
|
'Compatible with latest Minecraft versions'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'telegram-bot': {
|
'telegram-bot': {
|
||||||
title: 'Telegram Bot Development',
|
title: 'Telegram Bot Development Services',
|
||||||
description: 'Professional Telegram bots for automation and engagement',
|
description: 'Professional Telegram bot creation with inline keyboards, automated responses, and API integrations. Perfect for businesses and communities.',
|
||||||
features: [
|
features: [
|
||||||
'Automated messaging',
|
'Custom commands and inline keyboards',
|
||||||
'User management',
|
'Automated messaging and broadcasting',
|
||||||
'API integrations',
|
'User management and analytics',
|
||||||
'Custom commands'
|
'Payment integration (Stripe, PayPal)',
|
||||||
|
'Multi-language support',
|
||||||
|
'Webhook and long polling support',
|
||||||
|
'Admin panel for bot management'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'website-development': {
|
'website-development': {
|
||||||
title: 'Modern Website Development',
|
title: 'Modern Website Development',
|
||||||
description: 'Beautiful, responsive websites built with latest technologies',
|
description: 'Professional web development using Vue.js, React, and Node.js. Responsive design, SEO optimization, and lightning-fast performance.',
|
||||||
features: [
|
features: [
|
||||||
'Responsive design',
|
'Responsive design for all devices',
|
||||||
'Modern UI/UX',
|
'SEO optimization and Core Web Vitals',
|
||||||
'SEO optimized',
|
'Modern UI/UX with smooth animations',
|
||||||
'Fast performance'
|
'API integration and backend development',
|
||||||
|
'E-commerce and payment processing',
|
||||||
|
'Content Management System (CMS)',
|
||||||
|
'Free hosting setup and deployment'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
testimonials: {
|
testimonials: {
|
||||||
title: 'What Clients Say',
|
title: 'Client Reviews & Testimonials',
|
||||||
subtitle: 'Trusted by clients worldwide for quality and reliability.'
|
subtitle: 'Join hundreds of satisfied clients who trust my development services. 100% satisfaction rate with 5-star reviews.'
|
||||||
},
|
},
|
||||||
cta: {
|
cta: {
|
||||||
title: 'Ready to Get Started?',
|
title: 'Ready to Start Your Project?',
|
||||||
subtitle: 'Choose a service that fits your needs and let\'s bring your project to life.',
|
subtitle: 'Professional development services with fast delivery, unlimited revisions, and ongoing support. Let\'s bring your ideas to life.',
|
||||||
button: 'Browse All Services'
|
button: 'Browse All Services on Fiverr'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Contact page
|
// Contact page
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Contact Me',
|
title: 'Contact Full Stack Developer',
|
||||||
subtitle: 'Ready to discuss your next project? I\'d love to hear from you. Let\'s create something amazing together.',
|
subtitle: 'Get in touch for web development projects, freelance work, or technical consultation. Free project estimation and consultation available.',
|
||||||
stats: {
|
stats: {
|
||||||
responseTime: 'Response Time',
|
responseTime: 'Quick Response',
|
||||||
satisfaction: 'Client Satisfaction',
|
satisfaction: 'Client Satisfaction',
|
||||||
collaboration: 'Collaboration'
|
collaboration: 'Global Reach'
|
||||||
},
|
},
|
||||||
quickContact: 'Quick Contact',
|
quickContact: 'Quick Contact',
|
||||||
findMeOn: 'Find me on',
|
findMeOn: 'Connect on Social Media',
|
||||||
methods: {
|
methods: {
|
||||||
email: 'Email',
|
email: 'Email Address',
|
||||||
phone: 'Phone',
|
phone: 'Phone Number',
|
||||||
location: 'Location',
|
location: 'Location',
|
||||||
responseTime: 'Response within 24-48h',
|
responseTime: 'Response within 24 hours',
|
||||||
availability: 'Remote & on-site'
|
availability: 'Available for remote & freelance'
|
||||||
},
|
},
|
||||||
faq: {
|
faq: {
|
||||||
title: 'Frequently Asked Questions',
|
title: 'Frequently Asked Questions',
|
||||||
subtitle: 'Here are the answers to the most common questions about my services and working method.',
|
subtitle: 'Common questions about my web development services and working process.',
|
||||||
responseTime: {
|
responseTime: {
|
||||||
title: 'Response Time',
|
title: 'What\'s your typical response time?',
|
||||||
description: 'I generally respond within 24-48h to all messages received.'
|
description: 'I respond to all inquiries within 24 hours. For urgent projects, I\'m available for immediate consultation.'
|
||||||
},
|
},
|
||||||
projectTypes: {
|
projectTypes: {
|
||||||
title: 'Project Types',
|
title: 'What types of projects do you handle?',
|
||||||
description: 'Web applications, APIs, automation, consulting and custom solutions.'
|
description: 'Full stack web applications, REST APIs, Discord bots, e-commerce sites, SaaS platforms, and custom software solutions using modern technologies.'
|
||||||
},
|
},
|
||||||
collaboration: {
|
collaboration: {
|
||||||
title: 'Collaboration',
|
title: 'Do you work remotely?',
|
||||||
description: 'Remote or on-site work according to your needs and preferences.'
|
description: 'Yes, I work with clients worldwide. Remote collaboration via Slack, Discord, Zoom, and project management tools. Flexible timezone availability.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
name: 'Name',
|
name: 'Your Name',
|
||||||
email: 'Email',
|
email: 'Email Address',
|
||||||
subject: 'Subject',
|
subject: 'Project Subject',
|
||||||
message: 'Message',
|
message: 'Project Details',
|
||||||
send: 'Send Message',
|
send: 'Send Message',
|
||||||
sending: 'Sending...',
|
sending: 'Sending...',
|
||||||
success: 'Message sent successfully!',
|
success: 'Message sent successfully! I\'ll respond within 24 hours.',
|
||||||
error: 'Error sending message. Please try again.',
|
error: 'Error sending message. Please try again or email directly.',
|
||||||
required: 'This field is required',
|
required: 'This field is required',
|
||||||
invalidEmail: 'Please enter a valid email address'
|
invalidEmail: 'Please enter a valid email address'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
title: 'Get in Touch',
|
title: 'Let\'s Build Something Great',
|
||||||
description: 'Feel free to reach out to me for any questions, project discussions, or collaboration opportunities.',
|
description: 'Whether you need a Vue.js application, React website, Node.js API, or custom software solution, I\'m here to help bring your vision to life.',
|
||||||
email: 'Email',
|
email: 'Email',
|
||||||
social: 'Social Media'
|
social: 'Social Profiles'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Project data
|
// Project data
|
||||||
projectData: {
|
projectData: {
|
||||||
'virtual-tour': {
|
'virtual-tour': {
|
||||||
title: 'Virtual Tour',
|
title: 'Virtual Tour Platform - 3D Interactive Experience',
|
||||||
description: 'Development of an interactive and immersive virtual tour platform.',
|
description: 'Interactive virtual tour platform built with Vue.js and Three.js. Immersive 3D experiences for real estate, museums, and businesses.',
|
||||||
longDescription: 'Virtual Tour is an innovative platform for creating interactive and immersive virtual tours. Developed with the latest web technologies, it offers a smooth and engaging user experience for exploring 3D spaces.'
|
longDescription: 'Advanced virtual tour platform featuring 360-degree panoramas, interactive hotspots, and smooth navigation. Built with Vue.js for the frontend, Three.js for 3D rendering, and Node.js backend. Optimized for performance with lazy loading and WebGL acceleration. Perfect for real estate showcases, virtual museums, and business tours.'
|
||||||
},
|
},
|
||||||
'xinko': {
|
'xinko': {
|
||||||
title: 'Xinko',
|
title: 'Xinko - Multi-Platform Bot Framework',
|
||||||
description: 'Xinko is a multiplatform bot that can be used to create primary with ease and fun in it.',
|
description: 'Versatile bot framework supporting Discord, Telegram, and Slack. Built with Node.js and TypeScript for scalable bot development.',
|
||||||
longDescription: 'Xinko is an innovative multiplatform bot designed to simplify primary content creation. With an intuitive interface and advanced features, it allows users to generate quality content with ease and fun.'
|
longDescription: 'Xinko is a powerful multi-platform bot framework designed for developers. Features include unified API across platforms, plugin system, database abstraction, and comprehensive documentation. Built with Node.js, TypeScript, and modern JavaScript practices. Supports Discord.js, Telegram Bot API, and Slack SDK with a single codebase.'
|
||||||
},
|
},
|
||||||
'image-manipulation': {
|
'image-manipulation': {
|
||||||
title: 'Image Manipulation',
|
title: 'Image Manipulation API - NPM Package',
|
||||||
description: 'Discord Image Generation: NPM package for code-based image manipulation. Originally an API, now open-source.',
|
description: 'Popular NPM package for programmatic image manipulation. Canvas-based image generation with 100k+ downloads and active community.',
|
||||||
longDescription: 'A complete NPM package for image generation and manipulation in Discord. This open-source project offers a simple API for creating memes, applying filters, and generating dynamic images. Used by many Discord bots with over 100k downloads.'
|
longDescription: 'Comprehensive image manipulation library for Node.js applications. Features include meme generation, filters, effects, text overlay, and format conversion. Originally developed as a REST API, now available as an open-source NPM package. Used by Discord bots, web applications, and automation tools. Supports JPG, PNG, GIF, and WebP formats with streaming capabilities.'
|
||||||
},
|
},
|
||||||
'primate-web-admin': {
|
'primate-web-admin': {
|
||||||
title: 'Primate Web Admin',
|
title: 'Primate Web Admin - Enterprise Deployment Tool',
|
||||||
description: 'Primate Web Admin is a Web interface to manage Primate that is a Munki-like deployment tool for Windows.',
|
description: 'Modern web interface for Primate deployment system. Enterprise-grade software deployment and management for Windows infrastructure.',
|
||||||
longDescription: 'Modern web interface for managing Primate, a Windows deployment tool inspired by Munki. This web application allows system administrators to deploy and manage software on a Windows computer fleet in a centralized manner.'
|
longDescription: 'Professional web administration panel for Primate, a Munki-like deployment tool for Windows environments. Built with Vue.js frontend and RESTful API backend. Features include package management, deployment scheduling, client monitoring, and detailed reporting. Designed for IT administrators managing large Windows deployments with role-based access control and audit logging.'
|
||||||
},
|
},
|
||||||
'instagram-bot': {
|
'instagram-bot': {
|
||||||
title: 'Instagram Bot',
|
title: 'Instagram Bot - Automated Content Generation',
|
||||||
description: 'Fully functional Instagram bot using Insta.js by androz2091. It has many commands. Generate images with commands like: !stonk or !invert.',
|
description: 'Feature-rich Instagram bot with image generation commands. Built with Insta.js for stories, posts, and DM automation.',
|
||||||
longDescription: 'Fully functional Instagram bot developed with Insta.js. It offers many commands to generate custom images, memes, and visual effects. Perfect for animating your Instagram stories and posts with original content.'
|
longDescription: 'Advanced Instagram automation bot developed with Insta.js framework. Features custom image generation commands (!stonk, !invert, !meme), story interactions, automated posting, and DM management. Includes rate limiting, proxy support, and account safety features. Perfect for content creators and social media managers looking to automate their Instagram presence.'
|
||||||
},
|
},
|
||||||
'crowdin-status-bot': {
|
'crowdin-status-bot': {
|
||||||
title: 'Crowdin Status Bot',
|
title: 'Crowdin Status Bot - Translation Progress Tracker',
|
||||||
description: 'A bot that fetches Crowdin translation status and updates Discord messages with the latest status. Stay informed on progress!',
|
description: 'Discord bot for real-time Crowdin translation monitoring. Automated status updates and progress tracking for localization teams.',
|
||||||
longDescription: 'Automated Discord bot that fetches Crowdin translation status and updates Discord messages with the latest information. Ideal for translation teams who want to stay informed about their project progress in real-time.'
|
longDescription: 'Specialized Discord bot that integrates with Crowdin API to provide real-time translation progress updates. Features include automated status messages, progress bars, contributor leaderboards, and milestone notifications. Essential tool for open-source projects and localization teams managing translations across multiple languages. Supports webhooks and custom notification rules.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footer: {
|
footer: {
|
||||||
navigation: 'Navigation',
|
navigation: 'Quick Links',
|
||||||
services: 'Services',
|
services: 'Services',
|
||||||
copyright: 'All rights reserved.',
|
copyright: 'All rights reserved.',
|
||||||
legalNotices: 'Legal Notices',
|
legalNotices: 'Legal Notices',
|
||||||
privacyPolicy: 'Privacy Policy',
|
privacyPolicy: 'Privacy Policy',
|
||||||
servicesList: {
|
servicesList: {
|
||||||
webDev: 'Web Dev',
|
webDev: 'Web Development',
|
||||||
mobileApps: 'Mobile Apps',
|
mobileApps: 'Mobile Apps',
|
||||||
apiBackend: 'API & Backend',
|
apiBackend: 'API Development',
|
||||||
consulting: 'Consulting'
|
consulting: 'Tech Consulting'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -322,24 +334,24 @@ export default {
|
|||||||
// SEO
|
// SEO
|
||||||
seo: {
|
seo: {
|
||||||
home: {
|
home: {
|
||||||
title: 'Killian - Full Stack Developer',
|
title: 'Killian - Full Stack Developer | Vue.js, React, Node.js Expert',
|
||||||
description: 'Portfolio of Killian, full stack developer specialized in Vue.js, React and Node.js. Discover my projects and services.'
|
description: 'Professional Full Stack Developer specializing in Vue.js, React, Node.js. Expert in web applications, Discord bots, and custom software. Hire me for your next project.'
|
||||||
},
|
},
|
||||||
projects: {
|
projects: {
|
||||||
title: 'Projects - Killian',
|
title: 'Web Development Portfolio - Killian | Full Stack Projects',
|
||||||
description: 'Explore my portfolio of web applications, tools, and innovative solutions.'
|
description: 'Browse my portfolio of Vue.js applications, React websites, Node.js APIs, and Discord bots. Real examples of modern web development and clean code architecture.'
|
||||||
},
|
},
|
||||||
about: {
|
about: {
|
||||||
title: 'About - Killian',
|
title: 'About Killian - Experienced Full Stack Developer',
|
||||||
description: 'Learn more about my journey, skills, and passion for web development.'
|
description: 'Learn about my expertise in Vue.js, React, Node.js, and modern web development. Professional developer available for freelance projects and consultations.'
|
||||||
},
|
},
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Contact - Killian',
|
title: 'Contact Full Stack Developer - Killian | Hire Web Developer',
|
||||||
description: 'Ready to discuss your next project? Let\'s create something amazing together.'
|
description: 'Contact me for web development projects, Vue.js applications, React websites, or Node.js APIs. Free consultation and project estimation available.'
|
||||||
},
|
},
|
||||||
fiverr: {
|
fiverr: {
|
||||||
title: 'Fiverr Services - Killian',
|
title: 'Fiverr Services - Discord Bot & Web Development | Killian',
|
||||||
description: 'Professional freelance services on Fiverr. Custom Discord bots, Minecraft plugins, and web development solutions.'
|
description: 'Professional freelance services on Fiverr. Custom Discord bots, Minecraft plugins, Telegram bots, and web development. Top-rated seller with 100% satisfaction.'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ export default {
|
|||||||
// Navigation
|
// Navigation
|
||||||
nav: {
|
nav: {
|
||||||
home: 'Accueil',
|
home: 'Accueil',
|
||||||
projects: 'Projets',
|
projects: 'Projets Portfolio',
|
||||||
about: 'À propos',
|
about: 'À propos',
|
||||||
contact: 'Contact',
|
contact: 'Contact',
|
||||||
fiverr: 'Services Fiverr'
|
fiverr: 'Services Fiverr'
|
||||||
@@ -10,63 +10,63 @@ export default {
|
|||||||
|
|
||||||
// Home page
|
// Home page
|
||||||
home: {
|
home: {
|
||||||
title: 'Salut, je suis Killian',
|
title: 'Salut, je suis Killian - Développeur Full Stack',
|
||||||
subtitle: 'Développeur Full Stack passionné par la création d\'expériences web exceptionnelles et de solutions innovantes pour donner vie à vos projets.',
|
subtitle: 'Développeur Full Stack expert spécialisé en Vue.js, React et Node.js. Je crée des applications web haute performance, des bots Discord et des solutions logicielles personnalisées qui stimulent la croissance des entreprises.',
|
||||||
cta: {
|
cta: {
|
||||||
viewProjects: 'Voir mes projets',
|
viewProjects: 'Voir les Projets Portfolio',
|
||||||
contactMe: 'Me contacter'
|
contactMe: 'Consultation Gratuite'
|
||||||
},
|
},
|
||||||
featuredProjects: {
|
featuredProjects: {
|
||||||
title: 'Projets en vedette',
|
title: 'Projets de Développement Web en Vedette',
|
||||||
subtitle: 'Découvrez une sélection de mes projets les plus récents et innovants, démontrant mes compétences en développement web moderne.',
|
subtitle: 'Explorez mon portfolio d\'applications web modernes créées avec Vue.js, React, Node.js et les technologies JavaScript de pointe. Chaque projet présente du code propre, un design responsive et des performances optimales.',
|
||||||
viewAll: 'Voir tous les projets'
|
viewAll: 'Voir Tous les Projets'
|
||||||
},
|
},
|
||||||
services: {
|
services: {
|
||||||
title: 'Mes services',
|
title: 'Services Professionnels de Développement Web',
|
||||||
subtitle: 'Je propose une gamme complète de services pour accompagner vos projets du concept à la réalisation.',
|
subtitle: 'Services complets de développement full stack du concept au déploiement. Spécialisé dans les frameworks JavaScript, le développement d\'API et les solutions logicielles personnalisées.',
|
||||||
webDev: {
|
webDev: {
|
||||||
title: 'Dev Web',
|
title: 'Développement Web Full Stack',
|
||||||
description: 'Applications web modernes avec Vue.js, React et Node.js. Solutions sur mesure adaptées à vos besoins.'
|
description: 'Applications web modernes utilisant Vue.js, React, Node.js et TypeScript. Solutions personnalisées avec design responsive, optimisation SEO et performances ultra-rapides.'
|
||||||
},
|
},
|
||||||
mobileApps: {
|
mobileApps: {
|
||||||
title: 'Applications Mobile',
|
title: 'Développement Mobile Cross-Platform',
|
||||||
description: 'Développement d\'applications multiplateformes performantes et intuitives.'
|
description: 'Applications mobiles haute performance avec React Native et progressive web apps (PWA). Expérience native sur iOS et Android.'
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
title: 'Optimisation & Performance',
|
title: 'Optimisation Performance & SEO',
|
||||||
description: 'Amélioration des performances et optimisation SEO pour une meilleure expérience utilisateur.'
|
description: 'Optimisation de la vitesse des sites web, amélioration des Core Web Vitals et implémentation du SEO technique. Boostez vos classements de recherche et l\'expérience utilisateur.'
|
||||||
},
|
},
|
||||||
maintenance: {
|
maintenance: {
|
||||||
title: 'Maintenance & Support',
|
title: 'Maintenance & Support Technique',
|
||||||
description: 'Maintenance continue et support technique pour vos projets existants.'
|
description: 'Maintenance continue fiable, mises à jour de sécurité et support technique 24/7 pour vos applications web. Gardez vos projets en parfait état de marche.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cta2: {
|
cta2: {
|
||||||
title: 'Prêt à démarrer votre projet ?',
|
title: 'Prêt à Construire Votre Prochain Projet Web ?',
|
||||||
subtitle: 'Discutons de votre vision et créons ensemble quelque chose d\'extraordinaire. Je suis là pour transformer vos idées en réalité.',
|
subtitle: 'Transformons vos idées en applications web puissantes. Consultation gratuite pour votre projet Vue.js, React ou Node.js.',
|
||||||
startProject: 'Commencer un projet',
|
startProject: 'Démarrer Votre Projet',
|
||||||
learnMore: 'En savoir plus'
|
learnMore: 'En Savoir Plus'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Projects page
|
// Projects page
|
||||||
projects: {
|
projects: {
|
||||||
title: 'Mes Projets',
|
title: 'Portfolio de Développement Web',
|
||||||
subtitle: 'Explorez mon portfolio d\'applications web, d\'outils et de solutions innovantes. Chaque projet représente un défi unique résolu avec créativité et expertise technique.',
|
subtitle: 'Parcourez mes projets de développement full stack incluant des applications Vue.js, sites React, API Node.js, bots Discord et solutions d\'entreprise. Exemples concrets de code propre et d\'architecture moderne.',
|
||||||
categories: {
|
categories: {
|
||||||
all: 'Tous',
|
all: 'Tous les Projets',
|
||||||
'webdevelopment': 'Développement Web',
|
'webdevelopment': 'Développement Web',
|
||||||
'botdevelopment': 'Développement de Bot',
|
'botdevelopment': 'Développement de Bot',
|
||||||
'opensource': 'Open Source',
|
'opensource': 'Open Source',
|
||||||
'enterprisesoftware': 'Logiciel d\'Entreprise',
|
'enterprisesoftware': 'Logiciel d\'Entreprise',
|
||||||
'socialmediabot': 'Bot de Réseaux Sociaux',
|
'socialmediabot': 'Bots Réseaux Sociaux',
|
||||||
'automation': 'Automatisation'
|
'automation': 'Outils d\'Automatisation'
|
||||||
},
|
},
|
||||||
buttons: {
|
buttons: {
|
||||||
website: 'Site Web',
|
website: 'Site en Direct',
|
||||||
repository: 'Dépôt',
|
repository: 'Code Source',
|
||||||
npmpackage: 'Package NPM',
|
npmpackage: 'Package NPM',
|
||||||
viewProject: 'Voir le Projet'
|
viewProject: 'Voir les Détails'
|
||||||
},
|
},
|
||||||
noResults: {
|
noResults: {
|
||||||
title: 'Aucun projet trouvé',
|
title: 'Aucun projet trouvé',
|
||||||
@@ -76,225 +76,237 @@ export default {
|
|||||||
|
|
||||||
// About page
|
// About page
|
||||||
about: {
|
about: {
|
||||||
title: 'À propos de moi',
|
title: 'À propos de Killian - Développeur Full Stack',
|
||||||
subtitle: 'Découvrez mon parcours, mes compétences et ma passion pour le développement web.',
|
subtitle: 'Développeur web expérimenté passionné par Vue.js, React, Node.js et les technologies JavaScript modernes.',
|
||||||
intro: {
|
intro: {
|
||||||
title: 'Qui suis-je ?',
|
title: 'Développeur Full Stack Professionnel',
|
||||||
content: 'Je suis Killian, un développeur full-stack passionné avec plusieurs années d\'expérience en développement web. Je me spécialise dans la création d\'applications modernes, performantes et conviviales en utilisant les dernières technologies.'
|
content: 'Je suis Killian, un développeur full stack expérimenté spécialisé dans les technologies JavaScript. Avec une expertise en Vue.js, React, Node.js et TypeScript, je crée des applications web évolutives, des API RESTful et des systèmes temps réel qui dépassent les attentes des clients.'
|
||||||
},
|
},
|
||||||
skills: {
|
skills: {
|
||||||
title: 'Mes Compétences',
|
title: 'Compétences Techniques & Expertise',
|
||||||
programming: 'Programmation',
|
programming: 'Langages de Programmation',
|
||||||
frontend: 'Frontend',
|
frontend: 'Technologies Frontend',
|
||||||
backend: 'Backend',
|
backend: 'Technologies Backend',
|
||||||
tools: 'Outils & Autres',
|
tools: 'DevOps & Outils',
|
||||||
systems: 'Systèmes d\'exploitation'
|
systems: 'Systèmes d\'Exploitation'
|
||||||
},
|
},
|
||||||
experience: {
|
experience: {
|
||||||
title: 'Expérience',
|
title: 'Expérience Professionnelle',
|
||||||
content: 'Avec des années d\'expérience en développement web, j\'ai travaillé sur divers projets allant de simples sites web à des applications web complexes. Je suis toujours désireux d\'apprendre de nouvelles technologies et d\'améliorer mes compétences.'
|
content: 'Des années d\'expérience professionnelle en développement web construisant des applications d\'entreprise, des plateformes e-commerce, des produits SaaS et des solutions logicielles personnalisées. Un historique prouvé de livraison de code de haute qualité dans les délais et le budget.'
|
||||||
},
|
},
|
||||||
approach: {
|
approach: {
|
||||||
title: 'Mon Approche',
|
title: 'Philosophie de Développement',
|
||||||
subtitle: 'Ma philosophie de développement repose sur quatre piliers fondamentaux qui garantissent le succès de chaque projet.',
|
subtitle: 'Mon approche du développement full stack se concentre sur le code propre, l\'architecture évolutive et l\'expérience utilisateur exceptionnelle.',
|
||||||
performance: {
|
performance: {
|
||||||
title: 'Performance',
|
title: 'Développement Axé Performance',
|
||||||
description: 'J\'accorde une importance particulière à la performance et à l\'optimisation, en utilisant les meilleures pratiques pour garantir des applications rapides et réactives.'
|
description: 'Code optimisé, lazy loading, code splitting et stratégies de cache. Atteindre des scores Lighthouse parfaits et des métriques Core Web Vitals.'
|
||||||
},
|
},
|
||||||
architecture: {
|
architecture: {
|
||||||
title: 'Architecture',
|
title: 'Architecture Évolutive',
|
||||||
description: 'Je conçois des architectures modulaires et maintenables, facilitant l\'évolution et la scalabilité des projets sur le long terme.'
|
description: 'Microservices, fonctions serverless et modèles de conception modulaires. Construire des applications qui évoluent sans effort avec la croissance de votre entreprise.'
|
||||||
},
|
},
|
||||||
quality: {
|
quality: {
|
||||||
title: 'Qualité',
|
title: 'Qualité du Code & Tests',
|
||||||
description: 'Tests automatisés, revues de code et intégration continue font partie intégrante de mon processus de développement pour garantir une qualité optimale.'
|
description: 'Développement piloté par les tests (TDD), tests automatisés, intégration continue (CI/CD) et revues de code complètes garantissant des déploiements sans bugs.'
|
||||||
},
|
},
|
||||||
collaboration: {
|
collaboration: {
|
||||||
title: 'Collaboration',
|
title: 'Collaboration Agile',
|
||||||
description: 'Je privilégie une communication claire et une collaboration étroite avec les équipes pour assurer le succès des projets.'
|
description: 'Excellente communication, méthodologies agiles et gestion de projet transparente. Mises à jour régulières et résolution collaborative de problèmes.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cta: {
|
cta: {
|
||||||
title: 'Prêt à travailler ensemble ?',
|
title: 'Vous Cherchez un Développeur Full Stack ?',
|
||||||
description: 'Je suis toujours ouvert aux nouvelles opportunités et collaborations intéressantes.',
|
description: 'Discutons de vos besoins de projet et construisons quelque chose d\'incroyable ensemble.',
|
||||||
button: 'Me contacter'
|
button: 'Démarrer une Conversation'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Fiverr page
|
// Fiverr page
|
||||||
fiverr: {
|
fiverr: {
|
||||||
title: 'Services Fiverr',
|
title: 'Services Freelance Professionnels sur Fiverr',
|
||||||
subtitle: 'Services de freelance professionnels sur Fiverr. Obtenez des solutions personnalisées pour votre serveur Discord, serveur Minecraft ou besoins de développement web.',
|
subtitle: 'Engagez un développeur expert pour le développement de bot Discord, la création de plugin Minecraft, la programmation de bot Telegram et le développement web personnalisé. Vendeur top-rated avec garantie de satisfaction à 100%.',
|
||||||
profileCta: 'Visiter Mon Profil Fiverr',
|
profileCta: 'Voir Mon Profil Fiverr',
|
||||||
stats: {
|
stats: {
|
||||||
rating: 'Évaluation'
|
rating: 'Évaluation 5 Étoiles'
|
||||||
},
|
},
|
||||||
pricing: {
|
pricing: {
|
||||||
startingAt: 'À partir de'
|
startingAt: 'À partir de'
|
||||||
},
|
},
|
||||||
services: {
|
services: {
|
||||||
title: 'Services Disponibles',
|
title: 'Services de Développement Disponibles',
|
||||||
subtitle: 'Choisissez parmi une variété de services professionnels adaptés à vos besoins.',
|
subtitle: 'Services de programmation professionnels avec livraison rapide et révisions illimitées. Solutions personnalisées adaptées à vos besoins spécifiques.',
|
||||||
features: 'Fonctionnalités',
|
features: 'Fonctionnalités Clés',
|
||||||
orderNow: 'Commander Maintenant',
|
orderNow: 'Commander sur Fiverr',
|
||||||
learnMore: 'En Savoir Plus',
|
learnMore: 'Voir les Détails',
|
||||||
moreFeatures: 'fonctionnalités supplémentaires',
|
moreFeatures: 'fonctionnalités supplémentaires',
|
||||||
comingSoon: 'Bientôt Disponible',
|
comingSoon: 'Bientôt Disponible',
|
||||||
available: 'Disponible'
|
available: 'Disponible Maintenant'
|
||||||
},
|
},
|
||||||
serviceData: {
|
serviceData: {
|
||||||
'discord-bot': {
|
'discord-bot': {
|
||||||
title: 'Création de Bot Discord Personnalisé',
|
title: 'Développement de Bot Discord Personnalisé',
|
||||||
description: 'Boostez votre serveur Discord avec un bot puissant et entièrement personnalisé',
|
description: 'Développement professionnel de bot Discord avec fonctionnalités avancées, commandes personnalisées et intégration transparente. Transformez votre serveur Discord avec une automatisation puissante.',
|
||||||
features: [
|
features: [
|
||||||
'Modération avancée et utilitaires (Tickets, Système de niveaux)',
|
'Système de modération avancé avec auto-mod et logging',
|
||||||
'Fonctionnalités engageantes (Mini-jeux, Concours, Trackers)',
|
'Système de niveaux personnalisé, économie et récompenses de rôles',
|
||||||
'Intégrations API puissantes (PayPal, YouTube, Twitch, etc.)',
|
'Lecteur de musique, jeux et fonctionnalités de divertissement',
|
||||||
'Entièrement personnalisé – pas de templates'
|
'Intégrations API (Twitter, YouTube, Twitch, OpenAI)',
|
||||||
|
'Panneau dashboard pour configuration facile',
|
||||||
|
'Intégration base de données et persistance des données',
|
||||||
|
'Assistance configuration hébergement 24/7 incluse'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'minecraft-plugin': {
|
'minecraft-plugin': {
|
||||||
title: 'Développement de Plugin Minecraft',
|
title: 'Développement de Plugin Minecraft (Spigot/Paper)',
|
||||||
description: 'Plugins Minecraft personnalisés adaptés aux besoins de votre serveur',
|
description: 'Développement de plugin Minecraft personnalisé pour serveurs Spigot, Paper et Bukkit. Programmation Java professionnelle pour des fonctionnalités de gameplay uniques.',
|
||||||
features: [
|
features: [
|
||||||
'Mécaniques de jeu personnalisées',
|
'Mécaniques de jeu personnalisées et mini-jeux',
|
||||||
'Outils de gestion de serveur',
|
'Systèmes économiques et intégrations de boutique',
|
||||||
'Fonctionnalités d\'engagement des joueurs',
|
'Systèmes de permissions et rangs avancés',
|
||||||
'Optimisé pour les performances'
|
'GUI personnalisées et menus d\'inventaire',
|
||||||
|
'Intégration base de données (MySQL/SQLite)',
|
||||||
|
'Optimisé pour les performances des gros serveurs',
|
||||||
|
'Compatible avec les dernières versions Minecraft'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'telegram-bot': {
|
'telegram-bot': {
|
||||||
title: 'Développement de Bot Telegram',
|
title: 'Services de Développement de Bot Telegram',
|
||||||
description: 'Bots Telegram professionnels pour l\'automatisation et l\'engagement',
|
description: 'Création professionnelle de bot Telegram avec claviers inline, réponses automatisées et intégrations API. Parfait pour les entreprises et communautés.',
|
||||||
features: [
|
features: [
|
||||||
'Messagerie automatisée',
|
'Commandes personnalisées et claviers inline',
|
||||||
'Gestion des utilisateurs',
|
'Messagerie automatisée et diffusion',
|
||||||
'Intégrations API',
|
'Gestion des utilisateurs et analyses',
|
||||||
'Commandes personnalisées'
|
'Intégration de paiement (Stripe, PayPal)',
|
||||||
|
'Support multi-langues',
|
||||||
|
'Support webhook et long polling',
|
||||||
|
'Panneau admin pour gestion du bot'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'website-development': {
|
'website-development': {
|
||||||
title: 'Développement de Site Web Moderne',
|
title: 'Développement de Site Web Moderne',
|
||||||
description: 'Sites web beaux et réactifs construits avec les dernières technologies',
|
description: 'Développement web professionnel utilisant Vue.js, React et Node.js. Design responsive, optimisation SEO et performances ultra-rapides.',
|
||||||
features: [
|
features: [
|
||||||
'Design responsive',
|
'Design responsive pour tous les appareils',
|
||||||
'UI/UX moderne',
|
'Optimisation SEO et Core Web Vitals',
|
||||||
'Optimisé pour le SEO',
|
'UI/UX moderne avec animations fluides',
|
||||||
'Performances rapides'
|
'Intégration API et développement backend',
|
||||||
|
'E-commerce et traitement des paiements',
|
||||||
|
'Système de Gestion de Contenu (CMS)',
|
||||||
|
'Configuration hébergement gratuite et déploiement'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
testimonials: {
|
testimonials: {
|
||||||
title: 'Ce que disent les clients',
|
title: 'Avis Clients & Témoignages',
|
||||||
subtitle: 'Fait confiance par des clients du monde entier pour la qualité et la fiabilité.'
|
subtitle: 'Rejoignez des centaines de clients satisfaits qui font confiance à mes services de développement. Taux de satisfaction de 100% avec des avis 5 étoiles.'
|
||||||
},
|
},
|
||||||
cta: {
|
cta: {
|
||||||
title: 'Prêt à commencer ?',
|
title: 'Prêt à Démarrer Votre Projet ?',
|
||||||
subtitle: 'Choisissez un service qui correspond à vos besoins et donnons vie à votre projet.',
|
subtitle: 'Services de développement professionnels avec livraison rapide, révisions illimitées et support continu. Donnons vie à vos idées.',
|
||||||
button: 'Parcourir tous les services'
|
button: 'Parcourir Tous les Services sur Fiverr'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Contact page
|
// Contact page
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Me Contacter',
|
title: 'Contacter Développeur Full Stack',
|
||||||
subtitle: 'Prêt à discuter de votre prochain projet ? J\'aimerais avoir de vos nouvelles. Créons ensemble quelque chose d\'incroyable.',
|
subtitle: 'Contactez-moi pour des projets de développement web, du travail freelance ou une consultation technique. Estimation de projet et consultation gratuites disponibles.',
|
||||||
stats: {
|
stats: {
|
||||||
responseTime: 'Délai de réponse',
|
responseTime: 'Réponse Rapide',
|
||||||
satisfaction: 'Satisfaction client',
|
satisfaction: 'Satisfaction Client',
|
||||||
collaboration: 'Collaboration'
|
collaboration: 'Portée Mondiale'
|
||||||
},
|
},
|
||||||
quickContact: 'Contact rapide',
|
quickContact: 'Contact Rapide',
|
||||||
findMeOn: 'Retrouvez-moi sur',
|
findMeOn: 'Connectez-vous sur les Réseaux Sociaux',
|
||||||
methods: {
|
methods: {
|
||||||
email: 'Email',
|
email: 'Adresse Email',
|
||||||
phone: 'Téléphone',
|
phone: 'Numéro de Téléphone',
|
||||||
location: 'Localisation',
|
location: 'Localisation',
|
||||||
responseTime: 'Réponse sous 24-48h',
|
responseTime: 'Réponse sous 24 heures',
|
||||||
availability: 'Remote & sur site'
|
availability: 'Disponible pour remote & freelance'
|
||||||
},
|
},
|
||||||
faq: {
|
faq: {
|
||||||
title: 'Questions fréquentes',
|
title: 'Questions Fréquemment Posées',
|
||||||
subtitle: 'Voici les réponses aux questions les plus courantes concernant mes services et ma méthode de travail.',
|
subtitle: 'Questions courantes sur mes services de développement web et mon processus de travail.',
|
||||||
responseTime: {
|
responseTime: {
|
||||||
title: 'Délai de réponse',
|
title: 'Quel est votre délai de réponse typique ?',
|
||||||
description: 'Je réponds généralement sous 24-48h à tous les messages reçus.'
|
description: 'Je réponds à toutes les demandes dans les 24 heures. Pour les projets urgents, je suis disponible pour une consultation immédiate.'
|
||||||
},
|
},
|
||||||
projectTypes: {
|
projectTypes: {
|
||||||
title: 'Types de projets',
|
title: 'Quels types de projets gérez-vous ?',
|
||||||
description: 'Applications web, API, automatisation, consulting et solutions sur mesure.'
|
description: 'Applications web full stack, API REST, bots Discord, sites e-commerce, plateformes SaaS et solutions logicielles personnalisées utilisant des technologies modernes.'
|
||||||
},
|
},
|
||||||
collaboration: {
|
collaboration: {
|
||||||
title: 'Collaboration',
|
title: 'Travaillez-vous à distance ?',
|
||||||
description: 'Travail en remote ou sur site selon vos besoins et préférences.'
|
description: 'Oui, je travaille avec des clients du monde entier. Collaboration à distance via Slack, Discord, Zoom et outils de gestion de projet. Disponibilité flexible sur les fuseaux horaires.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
name: 'Nom',
|
name: 'Votre Nom',
|
||||||
email: 'Email',
|
email: 'Adresse Email',
|
||||||
subject: 'Sujet',
|
subject: 'Sujet du Projet',
|
||||||
message: 'Message',
|
message: 'Détails du Projet',
|
||||||
send: 'Envoyer le Message',
|
send: 'Envoyer le Message',
|
||||||
sending: 'Envoi en cours...',
|
sending: 'Envoi en cours...',
|
||||||
success: 'Message envoyé avec succès !',
|
success: 'Message envoyé avec succès ! Je répondrai dans les 24 heures.',
|
||||||
error: 'Erreur lors de l\'envoi du message. Veuillez réessayer.',
|
error: 'Erreur lors de l\'envoi du message. Veuillez réessayer ou envoyer un email directement.',
|
||||||
required: 'Ce champ est requis',
|
required: 'Ce champ est requis',
|
||||||
invalidEmail: 'Veuillez entrer une adresse email valide'
|
invalidEmail: 'Veuillez entrer une adresse email valide'
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
title: 'Restons en Contact',
|
title: 'Construisons Quelque Chose de Grand',
|
||||||
description: 'N\'hésitez pas à me contacter pour toute question, discussion de projet ou opportunité de collaboration.',
|
description: 'Que vous ayez besoin d\'une application Vue.js, d\'un site React, d\'une API Node.js ou d\'une solution logicielle personnalisée, je suis là pour donner vie à votre vision.',
|
||||||
email: 'Email',
|
email: 'Email',
|
||||||
social: 'Réseaux Sociaux'
|
social: 'Profils Sociaux'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Project data
|
// Project data
|
||||||
projectData: {
|
projectData: {
|
||||||
'virtual-tour': {
|
'virtual-tour': {
|
||||||
title: 'Virtual Tour',
|
title: 'Plateforme Virtual Tour - Expérience 3D Interactive',
|
||||||
description: 'Développement d\'une plateforme de visite virtuelle interactive et immersive.',
|
description: 'Plateforme de visite virtuelle interactive construite avec Vue.js et Three.js. Expériences 3D immersives pour l\'immobilier, les musées et les entreprises.',
|
||||||
longDescription: 'Virtual Tour est une plateforme innovante permettant de créer des visites virtuelles interactives et immersives. Développée avec les dernières technologies web, elle offre une expérience utilisateur fluide et engageante pour explorer des espaces en 3D.'
|
longDescription: 'Plateforme de visite virtuelle avancée avec panoramas à 360 degrés, points chauds interactifs et navigation fluide. Construite avec Vue.js pour le frontend, Three.js pour le rendu 3D et backend Node.js. Optimisée pour les performances avec lazy loading et accélération WebGL. Parfaite pour les présentations immobilières, musées virtuels et visites d\'entreprise.'
|
||||||
},
|
},
|
||||||
'xinko': {
|
'xinko': {
|
||||||
title: 'Xinko',
|
title: 'Xinko - Framework Bot Multi-Plateforme',
|
||||||
description: 'Xinko est un bot multiplateforme qui peut être utilisé pour créer du contenu primaire avec facilité et plaisir.',
|
description: 'Framework bot polyvalent supportant Discord, Telegram et Slack. Construit avec Node.js et TypeScript pour un développement de bot évolutif.',
|
||||||
longDescription: 'Xinko est un bot multiplateforme innovant conçu pour simplifier la création de contenu primaire. Avec une interface intuitive et des fonctionnalités avancées, il permet aux utilisateurs de générer du contenu de qualité avec facilité et plaisir.'
|
longDescription: 'Xinko est un framework bot multi-plateforme puissant conçu pour les développeurs. Les fonctionnalités incluent une API unifiée sur toutes les plateformes, système de plugins, abstraction de base de données et documentation complète. Construit avec Node.js, TypeScript et pratiques JavaScript modernes. Supporte Discord.js, Telegram Bot API et Slack SDK avec une seule base de code.'
|
||||||
},
|
},
|
||||||
'image-manipulation': {
|
'image-manipulation': {
|
||||||
title: 'Manipulation d\'Images',
|
title: 'API Manipulation d\'Images - Package NPM',
|
||||||
description: 'Discord Image Generation : Package NPM pour la manipulation d\'images basée sur le code. Initialement une API, maintenant open-source.',
|
description: 'Package NPM populaire pour la manipulation d\'images programmatique. Génération d\'images basée sur Canvas avec 100k+ téléchargements et communauté active.',
|
||||||
longDescription: 'Un package NPM complet pour la génération et la manipulation d\'images dans Discord. Ce projet open-source offre une API simple pour créer des memes, appliquer des filtres et générer des images dynamiques. Utilisé par de nombreux bots Discord avec plus de 100k téléchargements.'
|
longDescription: 'Bibliothèque complète de manipulation d\'images pour applications Node.js. Les fonctionnalités incluent génération de memes, filtres, effets, superposition de texte et conversion de format. Développé à l\'origine comme API REST, maintenant disponible en package NPM open-source. Utilisé par des bots Discord, applications web et outils d\'automatisation. Supporte JPG, PNG, GIF et WebP avec capacités de streaming.'
|
||||||
},
|
},
|
||||||
'primate-web-admin': {
|
'primate-web-admin': {
|
||||||
title: 'Primate Web Admin',
|
title: 'Primate Web Admin - Outil de Déploiement Entreprise',
|
||||||
description: 'Primate Web Admin est une interface Web pour gérer Primate qui est un outil de déploiement similaire à Munki pour Windows.',
|
description: 'Interface web moderne pour système de déploiement Primate. Déploiement et gestion de logiciels de qualité entreprise pour infrastructure Windows.',
|
||||||
longDescription: 'Interface web moderne pour gérer Primate, un outil de déploiement pour Windows inspiré de Munki. Cette application web permet aux administrateurs système de déployer et gérer des logiciels sur un parc informatique Windows de manière centralisée.'
|
longDescription: 'Panneau d\'administration web professionnel pour Primate, un outil de déploiement type Munki pour environnements Windows. Construit avec frontend Vue.js et backend API RESTful. Les fonctionnalités incluent gestion de packages, planification de déploiement, surveillance des clients et rapports détaillés. Conçu pour les administrateurs IT gérant de grands déploiements Windows avec contrôle d\'accès basé sur les rôles et journalisation d\'audit.'
|
||||||
},
|
},
|
||||||
'instagram-bot': {
|
'instagram-bot': {
|
||||||
title: 'Bot Instagram',
|
title: 'Bot Instagram - Génération de Contenu Automatisée',
|
||||||
description: 'Bot Instagram entièrement fonctionnel utilisant Insta.js par androz2091. Il a de nombreuses commandes. Générez des images avec des commandes comme : !stonk ou !invert.',
|
description: 'Bot Instagram riche en fonctionnalités avec commandes de génération d\'images. Construit avec Insta.js pour stories, posts et automatisation DM.',
|
||||||
longDescription: 'Bot Instagram entièrement fonctionnel développé avec Insta.js. Il propose de nombreuses commandes pour générer des images personnalisées, des memes et des effets visuels. Parfait pour animer vos stories et posts Instagram avec du contenu original.'
|
longDescription: 'Bot d\'automatisation Instagram avancé développé avec le framework Insta.js. Comprend des commandes de génération d\'images personnalisées (!stonk, !invert, !meme), interactions stories, publication automatisée et gestion DM. Inclut limitation de débit, support proxy et fonctionnalités de sécurité du compte. Parfait pour les créateurs de contenu et gestionnaires de médias sociaux cherchant à automatiser leur présence Instagram.'
|
||||||
},
|
},
|
||||||
'crowdin-status-bot': {
|
'crowdin-status-bot': {
|
||||||
title: 'Bot de Statut Crowdin',
|
title: 'Bot de Statut Crowdin - Suivi de Progression des Traductions',
|
||||||
description: 'Un bot qui récupère le statut de traduction Crowdin et met à jour les messages Discord avec le dernier statut. Restez informé des progrès !',
|
description: 'Bot Discord pour surveillance en temps réel des traductions Crowdin. Mises à jour automatiques du statut et suivi de progression pour équipes de localisation.',
|
||||||
longDescription: 'Bot Discord automatisé qui récupère le statut des traductions Crowdin et met à jour les messages Discord avec les dernières informations. Idéal pour les équipes de traduction qui souhaitent rester informées du progrès de leurs projets en temps réel.'
|
longDescription: 'Bot Discord spécialisé qui s\'intègre avec l\'API Crowdin pour fournir des mises à jour de progression de traduction en temps réel. Les fonctionnalités incluent messages de statut automatisés, barres de progression, classements des contributeurs et notifications de jalons. Outil essentiel pour les projets open-source et équipes de localisation gérant des traductions dans plusieurs langues. Supporte webhooks et règles de notification personnalisées.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footer: {
|
footer: {
|
||||||
navigation: 'Navigation',
|
navigation: 'Liens Rapides',
|
||||||
services: 'Services',
|
services: 'Services',
|
||||||
copyright: 'Tous droits réservés.',
|
copyright: 'Tous droits réservés.',
|
||||||
legalNotices: 'Mentions légales',
|
legalNotices: 'Mentions Légales',
|
||||||
privacyPolicy: 'Politique de confidentialité',
|
privacyPolicy: 'Politique de Confidentialité',
|
||||||
servicesList: {
|
servicesList: {
|
||||||
webDev: 'Dev Web',
|
webDev: 'Développement Web',
|
||||||
mobileApps: 'Applications Mobile',
|
mobileApps: 'Applications Mobiles',
|
||||||
apiBackend: 'API & Backend',
|
apiBackend: 'Développement API',
|
||||||
consulting: 'Consultation'
|
consulting: 'Consulting Tech'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -322,24 +334,24 @@ export default {
|
|||||||
// SEO
|
// SEO
|
||||||
seo: {
|
seo: {
|
||||||
home: {
|
home: {
|
||||||
title: 'Killian - Développeur Full Stack',
|
title: 'Killian - Développeur Full Stack | Expert Vue.js, React, Node.js',
|
||||||
description: 'Portfolio de Killian, développeur full stack spécialisé en Vue.js, React et Node.js. Découvrez mes projets et services.'
|
description: 'Développeur Full Stack professionnel spécialisé en Vue.js, React, Node.js. Expert en applications web, bots Discord et logiciels personnalisés. Engagez-moi pour votre prochain projet.'
|
||||||
},
|
},
|
||||||
projects: {
|
projects: {
|
||||||
title: 'Projets - Killian',
|
title: 'Portfolio Développement Web - Killian | Projets Full Stack',
|
||||||
description: 'Explorez mon portfolio d\'applications web, d\'outils et de solutions innovantes.'
|
description: 'Parcourez mon portfolio d\'applications Vue.js, sites React, API Node.js et bots Discord. Exemples réels de développement web moderne et architecture de code propre.'
|
||||||
},
|
},
|
||||||
about: {
|
about: {
|
||||||
title: 'À propos - Killian',
|
title: 'À propos de Killian - Développeur Full Stack Expérimenté',
|
||||||
description: 'Découvrez mon parcours, mes compétences et ma passion pour le développement web.'
|
description: 'Découvrez mon expertise en Vue.js, React, Node.js et développement web moderne. Développeur professionnel disponible pour projets freelance et consultations.'
|
||||||
},
|
},
|
||||||
contact: {
|
contact: {
|
||||||
title: 'Contact - Killian',
|
title: 'Contacter Développeur Full Stack - Killian | Engager Développeur Web',
|
||||||
description: 'Prêt à discuter de votre prochain projet ? Créons ensemble quelque chose d\'incroyable.'
|
description: 'Contactez-moi pour projets de développement web, applications Vue.js, sites React ou API Node.js. Consultation et estimation de projet gratuites disponibles.'
|
||||||
},
|
},
|
||||||
fiverr: {
|
fiverr: {
|
||||||
title: 'Services Fiverr - Killian',
|
title: 'Services Fiverr - Bot Discord & Développement Web | Killian',
|
||||||
description: 'Services de freelance professionnels sur Fiverr. Bots Discord personnalisés, plugins Minecraft et solutions de développement web.'
|
description: 'Services freelance professionnels sur Fiverr. Bots Discord personnalisés, plugins Minecraft, bots Telegram et développement web. Vendeur top-rated avec satisfaction 100%.'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,28 @@ const { t } = useI18n()
|
|||||||
// SEO
|
// SEO
|
||||||
useSeo({
|
useSeo({
|
||||||
title: t('seo.about.title'),
|
title: t('seo.about.title'),
|
||||||
description: t('seo.about.description')
|
description: t('seo.about.description'),
|
||||||
|
keywords: 'full stack developer, vue.js expert, react developer, node.js specialist, javascript developer, web development skills, programming expertise, software engineer',
|
||||||
|
ogImage: '/portfolio-preview.jpg',
|
||||||
|
structuredData: {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'Person',
|
||||||
|
'name': 'Killian',
|
||||||
|
'jobTitle': 'Full Stack Developer',
|
||||||
|
'description': 'Experienced Full Stack Developer specializing in Vue.js, React, Node.js, and modern JavaScript technologies',
|
||||||
|
'url': 'https://killian-portfolio.com/about',
|
||||||
|
'sameAs': [
|
||||||
|
'https://github.com/killian',
|
||||||
|
'https://linkedin.com/in/killian-dev',
|
||||||
|
'https://www.fiverr.com/users/mr_kayjaydee'
|
||||||
|
],
|
||||||
|
'knowsAbout': [
|
||||||
|
'Vue.js', 'React', 'Node.js', 'TypeScript', 'JavaScript',
|
||||||
|
'Web Development', 'API Development', 'Database Design',
|
||||||
|
'Discord Bot Development', 'Full Stack Development'
|
||||||
|
],
|
||||||
|
'skills': Object.values(techStack).flat().map(tech => tech.name)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const techCategories = computed(() => [
|
const techCategories = computed(() => [
|
||||||
|
|||||||
@@ -16,8 +16,37 @@ const { getImageUrl } = useAssets()
|
|||||||
|
|
||||||
// SEO
|
// SEO
|
||||||
useSeo({
|
useSeo({
|
||||||
title: t('fiverr.title'),
|
title: t('seo.fiverr.title'),
|
||||||
description: t('fiverr.subtitle')
|
description: t('seo.fiverr.description'),
|
||||||
|
keywords: 'fiverr services, discord bot development, minecraft plugin development, telegram bot creation, web development services, freelance developer, custom bot development, fiverr gigs',
|
||||||
|
ogImage: '/portfolio-preview.jpg',
|
||||||
|
structuredData: {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'Service',
|
||||||
|
'name': 'Professional Development Services on Fiverr',
|
||||||
|
'description': 'Custom Discord bot development, Minecraft plugins, Telegram bots, and web development services',
|
||||||
|
'provider': {
|
||||||
|
'@type': 'Person',
|
||||||
|
'name': 'Killian',
|
||||||
|
'jobTitle': 'Full Stack Developer'
|
||||||
|
},
|
||||||
|
'offers': siteConfig.value.fiverr.services.map(service => ({
|
||||||
|
'@type': 'Offer',
|
||||||
|
'name': t(`fiverr.serviceData.${service.id}.title`),
|
||||||
|
'description': t(`fiverr.serviceData.${service.id}.description`),
|
||||||
|
'price': service.price.replace('$', ''),
|
||||||
|
'priceCurrency': 'USD',
|
||||||
|
'url': service.url,
|
||||||
|
'availability': service.url !== '#' ? 'https://schema.org/InStock' : 'https://schema.org/PreOrder'
|
||||||
|
})),
|
||||||
|
'aggregateRating': {
|
||||||
|
'@type': 'AggregateRating',
|
||||||
|
'ratingValue': '5',
|
||||||
|
'bestRating': '5',
|
||||||
|
'worstRating': '1',
|
||||||
|
'reviewCount': '50+'
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const services = computed(() => siteConfig.value.fiverr.services)
|
const services = computed(() => siteConfig.value.fiverr.services)
|
||||||
|
|||||||
@@ -7,10 +7,34 @@ import ProjectCard from '@/components/ProjectCard.vue'
|
|||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
// SEO
|
// Enhanced SEO with structured data
|
||||||
useSeo({
|
useSeo({
|
||||||
title: t('seo.home.title'),
|
title: t('seo.home.title'),
|
||||||
description: t('seo.home.description')
|
description: t('seo.home.description'),
|
||||||
|
keywords: 'full stack developer, vue.js developer, react developer, node.js developer, web development services, javascript developer, typescript expert, discord bot developer, freelance developer, custom software development',
|
||||||
|
ogImage: '/portfolio-preview.jpg',
|
||||||
|
structuredData: {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'WebSite',
|
||||||
|
'name': 'Killian - Full Stack Developer Portfolio',
|
||||||
|
'url': 'https://killian-portfolio.com',
|
||||||
|
'potentialAction': {
|
||||||
|
'@type': 'SearchAction',
|
||||||
|
'target': 'https://killian-portfolio.com/projects?search={search_term_string}',
|
||||||
|
'query-input': 'required name=search_term_string'
|
||||||
|
},
|
||||||
|
'author': {
|
||||||
|
'@type': 'Person',
|
||||||
|
'name': 'Killian',
|
||||||
|
'jobTitle': 'Full Stack Developer',
|
||||||
|
'url': 'https://killian-portfolio.com/about',
|
||||||
|
'sameAs': [
|
||||||
|
'https://github.com/killian',
|
||||||
|
'https://linkedin.com/in/killian-dev',
|
||||||
|
'https://www.fiverr.com/users/mr_kayjaydee'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Featured projects
|
// Featured projects
|
||||||
|
|||||||
@@ -10,7 +10,23 @@ const { t } = useI18n()
|
|||||||
// SEO
|
// SEO
|
||||||
useSeo({
|
useSeo({
|
||||||
title: t('seo.projects.title'),
|
title: t('seo.projects.title'),
|
||||||
description: t('seo.projects.description')
|
description: t('seo.projects.description'),
|
||||||
|
keywords: 'web development portfolio, vue.js projects, react applications, node.js projects, javascript portfolio, full stack projects, discord bot examples, open source projects',
|
||||||
|
ogImage: '/portfolio-preview.jpg',
|
||||||
|
structuredData: {
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'CollectionPage',
|
||||||
|
'name': 'Web Development Portfolio Projects',
|
||||||
|
'description': 'Browse professional web development projects including Vue.js applications, React websites, Node.js APIs, and Discord bots',
|
||||||
|
'url': 'https://killian-portfolio.com/projects',
|
||||||
|
'hasPart': projects.map(project => ({
|
||||||
|
'@type': 'CreativeWork',
|
||||||
|
'name': project.title,
|
||||||
|
'description': project.description,
|
||||||
|
'url': `https://killian-portfolio.com/project/${project.id}`,
|
||||||
|
'keywords': project.technologies?.join(', ')
|
||||||
|
}))
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Filters and search
|
// Filters and search
|
||||||
|
|||||||
@@ -15,4 +15,40 @@ export default defineConfig({
|
|||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
// Optimize for SEO and performance
|
||||||
|
cssCodeSplit: true,
|
||||||
|
minify: 'terser',
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
drop_console: true,
|
||||||
|
drop_debugger: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
// Optimize chunk splitting for better caching
|
||||||
|
manualChunks: {
|
||||||
|
'vue-vendor': ['vue', 'vue-router'],
|
||||||
|
'ui-components': [
|
||||||
|
'./src/components/ProjectCard.vue',
|
||||||
|
'./src/components/TechBadge.vue',
|
||||||
|
'./src/components/ContactMethod.vue'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// Use content hash for better caching
|
||||||
|
chunkFileNames: 'assets/js/[name]-[hash].js',
|
||||||
|
entryFileNames: 'assets/js/[name]-[hash].js',
|
||||||
|
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Enable source maps for better debugging
|
||||||
|
sourcemap: false,
|
||||||
|
// Increase chunk size warning limit
|
||||||
|
chunkSizeWarningLimit: 1000
|
||||||
|
},
|
||||||
|
// Optimize dependencies
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['vue', 'vue-router']
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user