Skip to content

Commit 2956884

Browse files
kenny516kenny516
authored
Merge pull request #18 from kenny516/dev
Dev
2 parents bedf8bf + e66dc1e commit 2956884

File tree

2 files changed

+258
-23
lines changed

2 files changed

+258
-23
lines changed

‎src/assets/css/styles.css

+182-1
Original file line numberDiff line numberDiff line change
@@ -2246,4 +2246,185 @@ li {
22462246
to { opacity: 1; }
22472247
}
22482248

2249-
/* ...existing code... */
2249+
/* ...existing code... */
2250+
2251+
/* ...existing code... */
2252+
2253+
.projects-grid {
2254+
display: grid;
2255+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
2256+
gap: 2rem;
2257+
padding: 2rem;
2258+
}
2259+
2260+
.project-card {
2261+
background: var(--glass-bg);
2262+
backdrop-filter: blur(10px);
2263+
border: 1px solid rgba(0, 247, 255, 0.1);
2264+
border-radius: 12px;
2265+
padding: 2rem;
2266+
transition: all 0.3s ease;
2267+
position: relative;
2268+
}
2269+
2270+
.project-card::before {
2271+
content: '<Project/>';
2272+
position: absolute;
2273+
top: -12px;
2274+
left: 20px;
2275+
background: var(--dark-bg);
2276+
padding: 0 15px;
2277+
color: var(--neon-blue);
2278+
font-size: 0.9rem;
2279+
font-family: 'JetBrains Mono', monospace;
2280+
}
2281+
2282+
.git-clone-container {
2283+
position: relative;
2284+
background: rgba(0, 0, 0, 0.3);
2285+
padding: 1rem;
2286+
border-radius: 8px;
2287+
font-family: 'JetBrains Mono', monospace;
2288+
margin: 1.5rem 0;
2289+
}
2290+
2291+
.git-clone-command {
2292+
padding-right: 40px;
2293+
word-break: break-all;
2294+
color: var(--neon-purple);
2295+
}
2296+
2297+
.copy-button {
2298+
position: absolute;
2299+
top: 50%;
2300+
right: 10px;
2301+
transform: translateY(-50%);
2302+
background: none;
2303+
border: none;
2304+
color: var(--neon-blue);
2305+
cursor: pointer;
2306+
padding: 5px;
2307+
transition: all 0.3s ease;
2308+
}
2309+
2310+
.copy-button:hover {
2311+
color: var(--neon-purple);
2312+
transform: translateY(-50%) scale(1.1);
2313+
}
2314+
2315+
.tooltip {
2316+
position: absolute;
2317+
background: var(--neon-blue);
2318+
color: var(--dark-bg);
2319+
padding: 5px 10px;
2320+
border-radius: 4px;
2321+
font-size: 0.8rem;
2322+
bottom: 100%;
2323+
right: 0;
2324+
transform: translateY(-5px);
2325+
opacity: 0;
2326+
visibility: hidden;
2327+
transition: all 0.3s ease;
2328+
}
2329+
2330+
.copy-button:hover .tooltip {
2331+
opacity: 1;
2332+
visibility: visible;
2333+
transform: translateY(-10px);
2334+
}
2335+
2336+
.project-card:hover {
2337+
transform: translateY(-5px);
2338+
box-shadow: 0 5px 20px rgba(0, 247, 255, 0.2);
2339+
}
2340+
2341+
.project-header {
2342+
display: flex;
2343+
justify-content: space-between;
2344+
align-items: center;
2345+
margin-bottom: 1rem;
2346+
}
2347+
2348+
.project-title {
2349+
font-size: 1.4rem;
2350+
color: var(--neon-blue);
2351+
margin: 0;
2352+
}
2353+
2354+
.project-description {
2355+
color: var(--light-text);
2356+
margin-bottom: 1.5rem;
2357+
line-height: 1.6;
2358+
opacity: 0.8;
2359+
}
2360+
2361+
.project-meta {
2362+
display: flex;
2363+
gap: 1rem;
2364+
margin-bottom: 1.5rem;
2365+
}
2366+
2367+
.project-stat {
2368+
display: flex;
2369+
align-items: center;
2370+
gap: 0.5rem;
2371+
color: var(--light-text);
2372+
font-size: 0.9rem;
2373+
}
2374+
2375+
.project-stat i {
2376+
color: var(--neon-purple);
2377+
}
2378+
2379+
.project-language {
2380+
display: inline-flex;
2381+
align-items: center;
2382+
gap: 0.5rem;
2383+
padding: 0.4rem 1rem;
2384+
background: rgba(0, 247, 255, 0.1);
2385+
border-radius: 20px;
2386+
color: var(--neon-blue);
2387+
font-size: 0.9rem;
2388+
}
2389+
2390+
.git-clone {
2391+
background: rgba(0, 0, 0, 0.3);
2392+
padding: 1rem;
2393+
border-radius: 8px;
2394+
font-family: 'JetBrains Mono', monospace;
2395+
margin-bottom: 1.5rem;
2396+
position: relative;
2397+
overflow: hidden;
2398+
}
2399+
2400+
.git-clone::before {
2401+
content: '$ git clone';
2402+
color: var(--neon-purple);
2403+
margin-right: 0.5rem;
2404+
}
2405+
2406+
.project-links {
2407+
display: flex;
2408+
gap: 1rem;
2409+
}
2410+
2411+
.project-link {
2412+
flex: 1;
2413+
display: inline-flex;
2414+
align-items: center;
2415+
justify-content: center;
2416+
gap: 0.5rem;
2417+
padding: 0.8rem;
2418+
background: var(--glass-bg);
2419+
border: 1px solid var(--neon-blue);
2420+
border-radius: 8px;
2421+
color: var(--light-text);
2422+
text-decoration: none;
2423+
transition: all 0.3s ease;
2424+
}
2425+
2426+
.project-link:hover {
2427+
background: var(--neon-blue);
2428+
color: var(--bg-color);
2429+
transform: translateY(-2px);
2430+
}

‎src/assets/js/github.js

+76-22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// Remplacez cette ligne par votre nom d'utilisateur GitHub
21
const GITHUB_USERNAME = 'kenny516';
32

43
async function fetchGithubRepos() {
@@ -10,6 +9,8 @@ async function fetchGithubRepos() {
109
const repos = await response.json();
1110

1211
const projectsContainer = document.querySelector('#projects-container');
12+
projectsContainer.className = 'projects-grid';
13+
1314
if (repos.length === 0) {
1415
projectsContainer.innerHTML = `
1516
<div class="terminal-style">
@@ -18,12 +19,14 @@ async function fetchGithubRepos() {
1819
return;
1920
}
2021

21-
repos.forEach(repo => {
22-
if (!repo.fork && !repo.private) {
23-
const projectCard = createProjectCard(repo);
24-
projectsContainer.appendChild(projectCard);
25-
}
26-
});
22+
projectsContainer.innerHTML = repos
23+
.filter(repo => !repo.fork && !repo.private)
24+
.map(repo => createProjectCard(repo))
25+
.join('');
26+
27+
// Ajouter les gestionnaires d'événements pour les boutons de copie
28+
setupCopyButtons();
29+
2730
} catch (error) {
2831
console.error('Erreur lors de la récupération des repos:', error);
2932
const projectsContainer = document.querySelector('#projects-container');
@@ -36,24 +39,75 @@ async function fetchGithubRepos() {
3639
}
3740

3841
function createProjectCard(repo) {
39-
const card = document.createElement('div');
40-
card.className = 'project-card';
41-
42-
card.innerHTML = `
43-
<h3 class="typing-effect">${repo.name}</h3>
44-
<p>${repo.description || 'Aucune description disponible'}</p>
45-
<div class="project-stats">
46-
<span>⭐ ${repo.stargazers_count}</span>
47-
<span>🔄 ${repo.forks_count}</span>
48-
<span class="project-lang">${repo.language || 'N/A'}</span>
42+
return `
43+
<div class="project-card">
44+
<div class="project-header">
45+
<h3 class="project-title">${repo.name}</h3>
46+
</div>
47+
48+
<p class="project-description">
49+
${repo.description || 'Aucune description disponible'}
50+
</p>
51+
52+
<div class="project-meta">
53+
<div class="project-stat">
54+
<i class="fas fa-star"></i>
55+
<span>${repo.stargazers_count}</span>
56+
</div>
57+
<div class="project-stat">
58+
<i class="fas fa-code-branch"></i>
59+
<span>${repo.forks_count}</span>
60+
</div>
61+
${repo.language ? `
62+
<div class="project-language">
63+
<i class="fas fa-code"></i>
64+
${repo.language}
65+
</div>
66+
` : ''}
67+
</div>
68+
69+
<div class="git-clone-container">
70+
<div class="git-clone-command" data-clone-url="${repo.clone_url}">
71+
$ git clone ${repo.clone_url}
72+
</div>
73+
<button class="copy-button" aria-label="Copier la commande clone">
74+
<i class="far fa-copy"></i>
75+
<span class="tooltip">Copier</span>
76+
</button>
77+
</div>
78+
79+
<div class="project-links">
80+
<a href="${repo.html_url}" target="_blank" rel="noopener noreferrer" class="project-link">
81+
<i class="fab fa-github"></i>
82+
<span>Voir sur GitHub</span>
83+
</a>
84+
${repo.homepage ? `
85+
<a href="${repo.homepage}" target="_blank" rel="noopener noreferrer" class="project-link">
86+
<i class="fas fa-external-link-alt"></i>
87+
<span>Demo Live</span>
88+
</a>
89+
` : ''}
90+
</div>
4991
</div>
50-
<div class="terminal-style">
51-
git clone ${repo.clone_url}
52-
</div>
53-
<a href="${repo.html_url}" target="_blank" class="btn">Voir le projet</a>
5492
`;
93+
}
5594

56-
return card;
95+
function setupCopyButtons() {
96+
document.querySelectorAll('.copy-button').forEach(button => {
97+
button.addEventListener('click', async () => {
98+
const cloneCommand = button.previousElementSibling.textContent;
99+
try {
100+
await navigator.clipboard.writeText(cloneCommand);
101+
const tooltip = button.querySelector('.tooltip');
102+
tooltip.textContent = 'Copié !';
103+
setTimeout(() => {
104+
tooltip.textContent = 'Copier';
105+
}, 2000);
106+
} catch (err) {
107+
console.error('Erreur lors de la copie :', err);
108+
}
109+
});
110+
});
57111
}
58112

59113
document.addEventListener('DOMContentLoaded', fetchGithubRepos);

0 commit comments

Comments
 (0)