Skip to content

Commit f5227fc

Browse files
coundiacoundia
authored
Merge pull request #1 from coundia/dev
feat: add animation component
2 parents 5c0861b + 1b562a1 commit f5227fc

12 files changed

+138
-28
lines changed

‎DOC/HELP.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
1+
# GUIDE
12

23
Ton portfolio doit refléter ton expertise et ton style. Voici un menu optimisé pour ton profil :
34

4-
**Home** – Une page d’accueil impactante avec une animation, ton nom et ton rôle (Frontend Developer | Angular | Web3 | UI/UX).
5+
**Home** – Une page d’accueil impactante avec une animation, ton nom et ton rôle ( Full Stack Developer Angular | PHP/JAVA ).
6+
57
**Projects** – Une galerie de tes meilleurs projets (avec des animations subtiles et des liens vers les démos/GitHub).
8+
69
**Skills** – Une section détaillant tes compétences (Angular, Tailwind, Astro, Docker, Web3, DDD, JHipster…).
10+
711
**About** – Un résumé de ton parcours, ta vision du dev, et pourquoi on devrait bosser avec toi.
12+
813
**Contact** – Un formulaire simple + liens vers ton GitHub, LinkedIn, Twitter/X.
14+
915
**Blog** (optionnel) – Des articles courts sur Angular, Web3 ou tes découvertes techniques.
10-
Tu peux aussi ajouter un switch Dark/Light mode et une animation Parallax subtile sur la Home. Tu veux un design minimaliste ou plus animé ?
16+
17+
Tu peux aussi ajouter un switch Dark/Light mode et une animation Parallax subtile sur la Home.
18+
19+
Choix entre: Un design minimaliste ou animé

‎DOC/INSTALL.md

+18-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
npm create astro@latest -- --template astro-academia
1+
# Installed
2+
3+
`npm create astro@latest -- --template astro-academia`
24

35
or
46

5-
npm create astro@latest -- --template blog
7+
`npm create astro@latest -- --template blog`
8+
9+
`npx astro add @analogjs/astro-angular`
10+
11+
`npx astro add mdx`
12+
13+
`npx astro add tailwind`
14+
15+
`npm install @analogjs/vite-plugin-angular --save-dev`
16+
17+
I remove react deps
618

19+
# Lien utils
720

8-
npx astro add @analogjs/astro-angular
9-
npx astro add mdx
10-
npx astro add tailwind
21+
https://docs.astro.build/en/getting-started/
1122

23+
https://analogjs.org/docs/packages/astro-angular/overview
1224

13-
npm install @analogjs/vite-plugin-angular --save-dev
25+
https://angular.dev/overview

‎README.md

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
11
# Run dev
22

3-
task dev
3+
# Install task go
4+
5+
https://taskfile.dev/installation/
6+
7+
### macos
8+
9+
`brew install go-task`
10+
11+
# Run
12+
13+
`task dev`
414

515
# Build
616

7-
task build
17+
`task build`
818

9-
# Deployé ici via github action
19+
# Déployé via github action sur
1020

1121
https://www.pcoundia.com
22+
23+
# Lien utiles
24+
25+
https://docs.astro.build/en/getting-started/
26+
27+
https://analogjs.org/docs/packages/astro-angular/overview
28+
29+
https://angular.dev/overview

‎src/components/animation/AnimatedTextComponent.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, Input,type OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-animated-text',
5+
templateUrl: './animated-text.component.html',
6+
standalone: true,
7+
8+
})
9+
export class AnimatedTextComponent implements OnInit {
10+
@Input() text: string = '';
11+
@Input() timer: number = 200;
12+
displayedText: string = '';
13+
private words: string[] = [];
14+
private index = 0;
15+
16+
ngOnInit() {
17+
this.words = this.text.split(' '); // Découpe en mots
18+
this.displayNextWord();
19+
}
20+
21+
displayNextWord() {
22+
if (this.index < this.words.length) {
23+
this.displayedText += (this.index > 0 ? ' ' : '') + this.words[this.index];
24+
this.index++;
25+
setTimeout(() => this.displayNextWord(), this.timer);
26+
}
27+
}
28+
}

‎src/components/animation/animated-text.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{ displayedText }}

‎src/components/navbar/NavbarComponent.ts

-2
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@ export class NavbarComponent implements OnInit {
4040

4141
var real_path: string | undefined = window.location.pathname;
4242

43-
console.log(real_path,route)
44-
4543
if (real_path.includes("blog")) {
4644
real_path = "/blog/1"
4745
}

‎src/components/ui/Hero.astro

+45-7
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,66 @@ import SocialIcons from './SocialIcons.astro'
44
55
import { HomeFr } from '@/data/HomeFr'
66
7+
import {AnimatedTextComponent} from '@/components/animation/AnimatedTextComponent'
8+
79
const { fullName, title, institute, profilePicture } = Astro.props
810
911
---
1012

1113
<div class="flex-1">
12-
<h1 class="text-5xl font-bold mb-6">
13-
<span class="text-primary">{fullName}</span>
14+
<h1 class="text-5xl font-bold mb-6 opacity-0 animate-fade-in-up">
15+
<span class="text-primary">
16+
<AnimatedTextComponent text= {fullName} timer=1000 client:visible></AnimatedTextComponent>
17+
</span>
1418
</h1>
15-
<p class="text-2xl text-gray-500 mb-4">
16-
{title} {institute ? `, ${institute}` : ''}
19+
<p class="text-2xl text-gray-500 mb-4 opacity-0 animate-fade-in-up delay-200">
20+
<AnimatedTextComponent text= {title} timer=2000 client:visible></AnimatedTextComponent>
1721
</p>
1822
<p class="text-lg text-gray-700 mb-6">
19-
{HomeFr.presentation}
23+
<AnimatedTextComponent timer=100 text={HomeFr.presentation} client:visible></AnimatedTextComponent>
2024
</p>
21-
<div class="flex gap-4">
25+
26+
<div class="flex gap-4 opacity-0 animate-fade-in-up delay-500">
2227
<SocialIcons />
2328
</div>
2429
</div>
2530
<div class="size-72 hidden lg:block">
2631
<Image
2732
src={profilePicture}
2833
alt={fullName}
29-
class="w-full h-full rounded-full border-4 border-primary shadow-lg"
34+
class="w-full h-full rounded-full border-4 border-primary shadow-lg animate-bounce-in"
3035
/>
3136
</div>
37+
38+
<style>
39+
@keyframes fade-in-up {
40+
from {
41+
opacity: 0;
42+
transform: translateY(20px);
43+
}
44+
to {
45+
opacity: 1;
46+
transform: translateY(0);
47+
}
48+
}
49+
@keyframes bounce-in {
50+
0% {
51+
opacity: 0;
52+
transform: scale(0.8);
53+
}
54+
60% {
55+
opacity: 1;
56+
transform: scale(1.1);
57+
}
58+
100% {
59+
transform: scale(1);
60+
}
61+
}
62+
63+
.animate-fade-in-up {
64+
animation: fade-in-up 0.8s ease-out forwards;
65+
}
66+
.animate-bounce-in {
67+
animation: bounce-in 1s ease-out forwards;
68+
}
69+
</style>

‎src/data/CvFr.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ export const CvFr = {
33
firstName: "Papa",
44
lastName: "Coundia",
55
fullName: "Papa Coundia",
6-
title: "Consultant en informatique",
7-
institute: "Indépendant",
6+
title: "Développeur FullStack, Angular | PHP / JAVA .",
7+
institute: "",
88
research_areas: "Tech",
99
infos: "Diplômé d'un master 2 en informatique avec plus de 5 ans d'expérience je peux intervenir dans ces domaines d'activité: " +
1010
" analyse et Conception," +

‎src/layouts/Layout.astro

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ const {
3636
<main id="wrapper"
3737
class="p-8 pt-20 lg:pt-24 lg:max-w-5xl max-w-full mx-auto min-h-screen flex flex-col justify-between">
3838
<div id="content"
39-
class="overflow-auto max-h-[80vh] pb-20">
39+
class="overflow-auto pb-20">
4040
<slot/>
4141
</div>
4242
<div id="footerWrapper"
43-
class="fixed bottom-0 left-0 w-full z-50 py-4 flex justify-between items-center">
43+
class=" py-4 flex justify-between items-center">
4444
<Footer/>
4545
<div id="mascotWrapper" class="relative flex items-center justify-center">
4646

‎src/pages/about.astro

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { CvFr} from '../data/CvFr'
44
import CvTimeline from '../components/ui/CvTimeline.astro'
55
66
import List from '../components/ui/List.astro'
7+
import {AnimatedTextComponent} from "../components/animation/AnimatedTextComponent";
78
89
const { experiences, formations, certifications,person } = CvFr;
910
@@ -14,7 +15,7 @@ const { experiences, formations, certifications,person } = CvFr;
1415

1516
<section class='mb-12 m-10'>
1617
<h2 class='text-2xl font-bold mb-6 border-b pb-2'>
17-
A propos de {person.fullName}
18+
<AnimatedTextComponent text= `A propos de ${person.fullName}` timer=200 client:visible></AnimatedTextComponent>
1819
</h2>
1920
{person.infos}
2021
</section>

‎src/pages/contact.astro

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import List from "../components/ui/List.astro";
77
import {HelloComponent} from '../components/hello/HelloComponent';
88
import {ContactComponent} from "@/components/contact/ContactComponent";
99
import SocialIconsDetails from "../components/ui/SocialIconsDetails.astro";
10+
import {AnimatedTextComponent} from "../components/animation/AnimatedTextComponent";
1011
const helpText = "Helping binding";
1112
---
1213

1314
<Layout title=`Contact ${CvFr.person.fullName}`>
1415
<div class="flex justify-center items-center flex-col max-w-none">
15-
<h1 class="text-3xl font-bold mb-8">Contactez - moi</h1>
16+
<h1 class="text-3xl font-bold mb-8">
17+
<AnimatedTextComponent text= "Contactez - moi" timer=200 client:visible></AnimatedTextComponent>
18+
</h1>
1619

1720
<div class="flex gap-4">
1821
<SocialIconsDetails />

‎src/pages/projects.astro

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Projects } from "../data/Projects";
44
import {CvFr} from "../data/CvFr";
55
import { highlightAuthor } from "../lib/utils";
66
import {template} from "../data/settings";
7+
import {AnimatedTextComponent} from "../components/animation/AnimatedTextComponent";
78
89
const getValidUrl = (url: string) => {
910
return url.startsWith("http://") || url.startsWith("https://") ? url : `https://${url}`;
@@ -12,8 +13,9 @@ const getValidUrl = (url: string) => {
1213

1314
<Layout title=`Projets ${CvFr.person.fullName}`>
1415
<div class="prose max-w-none">
15-
<h1 class="text-3xl font-bold mb-8">Mes projets</h1>
16-
16+
<h1 class="text-3xl font-bold mb-8">
17+
<AnimatedTextComponent text="Mes projets" timer=500 client:visible></AnimatedTextComponent>
18+
</h1>
1719
<div class="space-y-8">
1820
{
1921
Projects.map((project) => (

0 commit comments

Comments
 (0)