├── assets └── css │ ├── style.css │ └── main.css ├── server └── tsconfig.json ├── bun.lockb ├── public └── favicon.ico ├── tsconfig.json ├── image └── add-portfolio │ ├── 1714216300598.png │ └── 1714285840384.png ├── types ├── tags.type.ts ├── card.type.ts ├── categorie.type.ts └── technologies.type.ts ├── .gitignore ├── components ├── MySearchBar.vue ├── EmptyState.vue ├── icons │ ├── socials │ │ ├── Twitter.vue │ │ ├── Linkedin.vue │ │ └── Github.vue │ ├── Top.vue │ ├── Tags.vue │ ├── Link.vue │ └── Empty.vue ├── MyButton.vue ├── TheFooter.vue ├── FilterTags.vue ├── TheNavbar.vue ├── TheHeader.vue └── Cards.vue ├── nuxt.config.ts ├── tailwind.config.js ├── package.json ├── README.md ├── data ├── tags.json └── users.ts ├── add.portfolio-en.md ├── add-portfolio-fr.md └── pages └── index.vue /assets/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Raleway; 3 | } -------------------------------------------------------------------------------- /server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JacobGomez325/benin-portfolio-v2/HEAD/bun.lockb -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JacobGomez325/benin-portfolio-v2/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /image/add-portfolio/1714216300598.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JacobGomez325/benin-portfolio-v2/HEAD/image/add-portfolio/1714216300598.png -------------------------------------------------------------------------------- /image/add-portfolio/1714285840384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JacobGomez325/benin-portfolio-v2/HEAD/image/add-portfolio/1714285840384.png -------------------------------------------------------------------------------- /types/tags.type.ts: -------------------------------------------------------------------------------- 1 | export type Technology = { 2 | name: string; 3 | } 4 | 5 | export type Categories = { 6 | name: string; 7 | isActive: boolean; 8 | technologies: Technology[]; 9 | nbre:number; 10 | } 11 | 12 | export type UserTagCounts = { 13 | [tag: string]: number; 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /types/card.type.ts: -------------------------------------------------------------------------------- 1 | type Tags = { 2 | name:string 3 | } 4 | 5 | type Socials = { 6 | twitter: string, 7 | github: string, 8 | linkedin: string, 9 | } 10 | 11 | export type Card = { 12 | name:string, 13 | link:string, 14 | linkSlug:string, 15 | socials:Socials | undefined | null, 16 | description:string, 17 | technology:string[] 18 | tags: string[] 19 | } 20 | 21 | -------------------------------------------------------------------------------- /components/MySearchBar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 22 | 23 | -------------------------------------------------------------------------------- /types/categorie.type.ts: -------------------------------------------------------------------------------- 1 | export enum Category { 2 | Frontend = "Frontend", 3 | Backend = "Backend", 4 | Design = "Design", 5 | Mobile = "Mobile", 6 | DevOps = "DevOps", 7 | Web3 = "Web3", 8 | Data = "Data", 9 | SWE = "Software Engineer", 10 | Cybersecurity = "Cybersecurity", 11 | DataTechnology = "Data", 12 | Cloud = "Public & Private Cloud", 13 | Systems = "Systems Engineering", 14 | WordPress = "WordPress", 15 | Technical_Writing = "Technical Writing", 16 | } 17 | -------------------------------------------------------------------------------- /components/EmptyState.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 18 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | devtools: { enabled: true }, 4 | css: ['~/assets/css/main.css','~/assets/css/style.css'], 5 | postcss: { 6 | plugins: { 7 | tailwindcss: {}, 8 | autoprefixer: {}, 9 | }, 10 | }, 11 | modules: [ 12 | ['@nuxtjs/google-fonts', { 13 | families: { 14 | Raleway: { 15 | wght: '200..900', 16 | ital: '200..700', 17 | } 18 | } 19 | }], 20 | '@vue-macros/nuxt', 21 | ], 22 | }) 23 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./components/**/*.{js,vue,ts}", 5 | "./layouts/**/*.vue", 6 | "./pages/**/*.vue", 7 | "./plugins/**/*.{js,ts}", 8 | "./app.vue", 9 | "./error.vue", 10 | ], 11 | theme: { 12 | extend: { 13 | colors:{ 14 | primary: "#FBCF16", 15 | secondary: "#142146", 16 | "color-main": "#10172a", 17 | "color-card": "#1e293b" 18 | }, 19 | gridTemplateColumns: { 20 | 'main-grid': '4fr 8fr', 21 | } 22 | }, 23 | }, 24 | plugins: [], 25 | } 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "dev": "nuxt dev", 8 | "generate": "nuxt generate", 9 | "preview": "nuxt preview", 10 | "postinstall": "nuxt prepare" 11 | }, 12 | "devDependencies": { 13 | "@nuxtjs/google-fonts": "^3.1.3", 14 | "@vue-macros/nuxt": "^1.9.21", 15 | "@vue-macros/volar": "^0.18.11", 16 | "autoprefixer": "^10.4.16", 17 | "nuxt": "^3.9.0", 18 | "postcss": "^8.4.33", 19 | "tailwindcss": "^3.4.1", 20 | "unplugin-vue-macros": "^2.7.10", 21 | "vue": "^3.4.5", 22 | "vue-router": "^4.2.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/icons/socials/Twitter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /components/MyButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 38 | 39 | -------------------------------------------------------------------------------- /components/icons/Top.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /components/TheFooter.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /components/icons/Tags.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # npm 11 | npm install 12 | 13 | # pnpm 14 | pnpm install 15 | 16 | # yarn 17 | yarn install 18 | 19 | # bun 20 | bun install 21 | ``` 22 | 23 | ## Development Server 24 | 25 | Start the development server on `http://localhost:3000`: 26 | 27 | ```bash 28 | # npm 29 | npm run dev 30 | 31 | # pnpm 32 | pnpm run dev 33 | 34 | # yarn 35 | yarn dev 36 | 37 | # bun 38 | bun run dev 39 | ``` 40 | 41 | ## Production 42 | 43 | Build the application for production: 44 | 45 | ```bash 46 | # npm 47 | npm run build 48 | 49 | # pnpm 50 | pnpm run build 51 | 52 | # yarn 53 | yarn build 54 | 55 | # bun 56 | bun run build 57 | ``` 58 | 59 | Locally preview production build: 60 | 61 | ```bash 62 | # npm 63 | npm run preview 64 | 65 | # pnpm 66 | pnpm run preview 67 | 68 | # yarn 69 | yarn preview 70 | 71 | # bun 72 | bun run preview 73 | ``` 74 | 75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 76 | -------------------------------------------------------------------------------- /components/icons/socials/Linkedin.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | 22 | -------------------------------------------------------------------------------- /components/FilterTags.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /components/icons/Link.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 26 | 27 | -------------------------------------------------------------------------------- /components/icons/socials/Github.vue: -------------------------------------------------------------------------------- 1 | 18 | 34 | -------------------------------------------------------------------------------- /components/TheNavbar.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 39 | 40 | -------------------------------------------------------------------------------- /components/TheHeader.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 42 | 43 | -------------------------------------------------------------------------------- /components/Cards.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /components/icons/Empty.vue: -------------------------------------------------------------------------------- 1 | 44 | -------------------------------------------------------------------------------- /data/tags.json: -------------------------------------------------------------------------------- 1 | { 2 | "categories": [ 3 | { 4 | "name": "All", 5 | "nbre": 0, 6 | "isActive": true, 7 | "technologies": [] 8 | }, 9 | { 10 | "name": "Frontend", 11 | "nbre": 0, 12 | "isActive": false, 13 | "technologies": [ 14 | {"name": "React.js"}, 15 | {"name": "Next.js"}, 16 | {"name": "Angular"}, 17 | {"name": "Vue.js"}, 18 | {"name": "Nuxt.js"}, 19 | {"name": "CSS"}, 20 | {"name": "SASS/LESS"}, 21 | {"name": "Tailwind CSS"}, 22 | {"name": "HTML"}, 23 | {"name": "HTMX"}, 24 | {"name": "JSX"} 25 | ] 26 | }, 27 | { 28 | "name": "Backend", 29 | "nbre": 0, 30 | "isActive": false, 31 | "technologies": [ 32 | {"name": "Node.js - Express"}, 33 | {"name": "Node.js - NestJS"}, 34 | {"name": "Node.js - AdonisJS"}, 35 | {"name": "Node.js - Koa"}, 36 | {"name": "Node.js - Sails.js"}, 37 | {"name": "Python - Django"}, 38 | {"name": "Python - Flask"}, 39 | {"name": "Java - Spring Boot"}, 40 | {"name": "Java - Play Framework"}, 41 | {"name": "Java - Micronaut"}, 42 | {"name": "Ruby - Ruby on Rails"}, 43 | {"name": "Ruby - Sinatra"}, 44 | {"name": "PHP - Laravel"}, 45 | {"name": "PHP - Symfony"}, 46 | {"name": "PHP - CodeIgniter"}, 47 | {"name": "C# - .NET Core"}, 48 | {"name": "C# - ASP.NET MVC"} 49 | ] 50 | }, 51 | { 52 | "name": "Design", 53 | "nbre": 0, 54 | "isActive": false, 55 | "technologies": [ 56 | {"name": "Adobe Photoshop"}, 57 | {"name": "Adobe Illustrator"}, 58 | {"name": "Sketch"}, 59 | {"name": "Figma"}, 60 | {"name": "Adobe XD"}, 61 | {"name": "InVision"} 62 | ] 63 | }, 64 | { 65 | "name": "Mobile", 66 | "nbre": 0, 67 | "isActive": false, 68 | "technologies": [ 69 | {"name": "Swift - iOS"}, 70 | {"name": "Objective-C - iOS"}, 71 | {"name": "Java - Android"}, 72 | {"name": "Kotlin - Android"}, 73 | {"name": "React Native"}, 74 | {"name": "Flutter"} 75 | ] 76 | }, 77 | { 78 | "name": "DevOps", 79 | "nbre": 0, 80 | "isActive": false, 81 | "technologies": [ 82 | {"name": "Git - versionControl: GitHub, GitLab, Bitbucket"}, 83 | {"name": "Jenkins"}, 84 | {"name": "Travis CI"}, 85 | {"name": "CircleCI"}, 86 | {"name": "Docker"}, 87 | {"name": "Kubernetes"}, 88 | {"name": "Terraform"}, 89 | {"name": "Ansible"}, 90 | {"name": "Puppet"} 91 | ] 92 | }, 93 | { 94 | "name": "Web3", 95 | "nbre": 0, 96 | "isActive": false, 97 | "technologies": [ 98 | {"name": "Ethereum"}, 99 | {"name": "Solidity"}, 100 | {"name": "Web3.js"}, 101 | {"name": "Smart Contracts"}, 102 | {"name": "IPFS"} 103 | ] 104 | }, 105 | { 106 | "name": "Data", 107 | "nbre": 0, 108 | "isActive": false, 109 | "technologies": [ 110 | {"name": "SQL"}, 111 | {"name": "NoSQL"}, 112 | {"name": "Big Data - tools: Hadoop, Spark"}, 113 | {"name": "Apache Kafka"}, 114 | {"name": "Apache Flink"}, 115 | {"name": "Apache Storm"}, 116 | {"name": "NumPy"}, 117 | {"name": "Pandas"}, 118 | {"name": "Scikit-learn"}, 119 | {"name": "R"}, 120 | {"name": "TensorFlow"}, 121 | {"name": "PyTorch"} 122 | ] 123 | }, 124 | { 125 | "name": "Cybersecurity", 126 | "nbre": 0, 127 | "isActive": false, 128 | "technologies": [ 129 | {"name": "Firewalls"}, 130 | {"name": "VPNs"}, 131 | {"name": "IDS/IPS"}, 132 | {"name": "OWASP Top 10"}, 133 | {"name": "Penetration Testing"}, 134 | {"name": "NIST Cybersecurity Framework"}, 135 | {"name": "ISO/IEC 27001"}, 136 | {"name": "SIEM"}, 137 | {"name": "Digital Forensics"} 138 | ] 139 | } 140 | ] 141 | } 142 | -------------------------------------------------------------------------------- /types/technologies.type.ts: -------------------------------------------------------------------------------- 1 | export enum FrontendTechnology { 2 | ReactJS = "React.js", 3 | NextJS = "Next.js", 4 | Angular = "Angular", 5 | VueJS = "Vue.js", 6 | NuxtJS = "Nuxt.js", 7 | CSS = "CSS", 8 | SASS_LESS = "SASS/LESS", 9 | Bootstrap = "Bootstrap", 10 | TailwindCSS = "Tailwind CSS", 11 | HTML = "HTML", 12 | HTMX = "HTMX", 13 | JS = "JS", 14 | JSX = "JSX", 15 | JavaScript = "JavaScript", 16 | Astro = "Astro", 17 | AlpineJS = "Alpine JS", 18 | } 19 | 20 | export enum BackendTechnology { 21 | NodeJS_Express = "Node.js - Express", 22 | NodeJS_NestJS = "Node.js - NestJS", 23 | NodeJS_AdonisJS = "Node.js - AdonisJS", 24 | NodeJS_Koa = "Node.js - Koa", 25 | NodeJS_SailsJS = "Node.js - Sails.js", 26 | Python = "Python", 27 | Python_Django = "Python - Django", 28 | Python_Flask = "Python - Flask", 29 | Python_FastAPI = "Python - FastAPI", 30 | Java_SpringBoot = "Java - Spring Boot", 31 | Java_PlayFramework = "Java - Play Framework", 32 | Java_Micronaut = "Java - Micronaut", 33 | Ruby_RubyOnRails = "Ruby - Ruby on Rails", 34 | Ruby_Sinatra = "Ruby - Sinatra", 35 | PHP = "PHP", 36 | PHP_Laravel = "PHP - Laravel", 37 | PHP_Symfony = "PHP - Symfony", 38 | PHP_CodeIgniter = "PHP - CodeIgniter", 39 | CSharp_DOTNETCore = "C# - .NET Core", 40 | CSharp_ASPNET_MVC = "C# - ASP.NET MVC", 41 | Bun_ElysiaJS = "Bun - Elysia.js", 42 | RustLang = "RustLang", 43 | GoLang = "GoLang", 44 | Laravel_Livewire = "Laravel Livewire", 45 | } 46 | 47 | 48 | export enum DesignTechnology { 49 | AdobePhotoshop = "Adobe Photoshop", 50 | AdobeIllustrator = "Adobe Illustrator", 51 | Sketch = "Sketch", 52 | Figma = "Figma", 53 | AdobeXD = "Adobe XD", 54 | InVision = "InVision" 55 | } 56 | 57 | export enum MobileTechnology { 58 | Swift_iOS = "Swift - iOS", 59 | ObjectiveC_iOS = "Objective-C - iOS", 60 | Java_Android = "Java - Android", 61 | Kotlin_Android = "Kotlin - Android", 62 | ReactNative = "React Native", 63 | Flutter = "Flutter" 64 | } 65 | 66 | export enum DevOpsTechnology { 67 | Git_versionControl = "Git - versionControl: GitHub, GitLab, Bitbucket", 68 | Jenkins = "Jenkins", 69 | TravisCI = "Travis CI", 70 | CircleCI = "CircleCI", 71 | Docker = "Docker", 72 | Kubernetes = "Kubernetes", 73 | Terraform = "Terraform", 74 | Ansible = "Ansible", 75 | Puppet = "Puppet", 76 | Grafana = "Grafana", 77 | PaaS = "PaaS", 78 | IaaS = "IaaS", 79 | Serverless = "Serverless", 80 | Docker_Compose = "Docker Compose", 81 | Docker_Swarm = "Docker Swarm", 82 | AWS = "AWS Cloud", 83 | } 84 | 85 | export enum Web3Technology { 86 | Ethereum = "Ethereum", 87 | Solidity = "Solidity", 88 | Web3JS = "Web3.js", 89 | SmartContracts = "Smart Contracts", 90 | IPFS = "IPFS" 91 | } 92 | 93 | export enum DataTechnology { 94 | SQL = "SQL", 95 | NoSQL = "NoSQL", 96 | MySQL = "MySQL", 97 | PostgreSQL = "PostgreSQL", 98 | SQlite = "SQlite", 99 | MongoDB = "MongoDB", 100 | Redis = 'Redis', 101 | BigData_tools = "Big Data - tools: Hadoop, Spark", 102 | ApacheKafka = "Apache Kafka", 103 | ApacheFlink = "Apache Flink", 104 | ApacheStorm = "Apache Storm", 105 | NumPy = "NumPy", 106 | Pandas = "Pandas", 107 | ScikitLearn = "Scikit-learn", 108 | R = "R", 109 | TensorFlow = "TensorFlow", 110 | PyTorch = "PyTorch" 111 | } 112 | 113 | export enum CybersecurityTechnology { 114 | Firewalls = "Firewalls", 115 | VPNs = "VPNs", 116 | IDS_IPS = "IDS/IPS", 117 | OWASPTop10 = "OWASP Top 10", 118 | PenetrationTesting = "Penetration Testing", 119 | NISTCybersecurityFramework = "NIST Cybersecurity Framework", 120 | ISO_IEC27001 = "ISO/IEC 27001", 121 | SIEM = "SIEM", 122 | DigitalForensics = "Digital Forensics" 123 | } 124 | 125 | export enum CloudTechnology { 126 | Openshift = "Openshift", 127 | AWS = "AWS", 128 | GCP = "GCP", 129 | Azure = "Azure", 130 | BareMetal = "Bare Metal", 131 | OnPremises = "On Premises", 132 | VMWare = "VMWare" 133 | } 134 | 135 | export enum SystemsTechnology { 136 | Linux = "Linux", 137 | Linux_Debian = "Debian", 138 | Linux_Ubuntu = "Ubuntu", 139 | Linux_CentOS = "CentOS", 140 | Linux_RedHat = "RedHat", 141 | UNIX = "UNIX", 142 | UNIX_zOS = "z/OS", 143 | Windows = "Windows", 144 | } 145 | -------------------------------------------------------------------------------- /add.portfolio-en.md: -------------------------------------------------------------------------------- 1 | Welcome to the Benin portfolio! 2 | 3 | To add your profile to our portfolio database, click on the **add your portfolio** button in the navigation bar. 4 | 5 | ![1714216300598](image/add-portfolio/1714216300598.png) 6 | 7 | Once you've clicked the button, you'll be redirected to the project's GitHub page. Once there, click on **Fork** to create a copy of the project on your own account, and don't forget to give it a **Star** to support the project. 8 | 9 | The advantage here is that everyone can contribute to the project. 10 | 11 | 1. **Fork** 12 | 13 | ![1714285840384](image/add-portfolio/1714285840384.png) 14 | 15 | 2. **Create a new copy of the project on your repository** 16 | 3. **Create a new branch (add/your-name)** 17 | 4. **Explore the files and go to data/users.ts** 18 | 19 | You'll find an array of objects there. Here's an example entry: 20 | 21 | ```javascript 22 | { 23 | name: "Gomez Jacob", 24 | link: "https://www.linkedin.com/in/jacob-ambroise-david-gomez-989b151b9/", 25 | linkSlug: "jacobgomez.dev", 26 | tags: [Category.Frontend, Category.Backend, Category.DevOps], 27 | technology: [FrontendTechnology.HTML, FrontendTechnology.CSS, FrontendTechnology.TailwindCSS, FrontendTechnology.VueJS, FrontendTechnology.NuxtJS, BackendTechnology.NodeJS_AdonisJS, DevOpsTechnology.Docker], 28 | description: "FullStack JavaScript web developer, working with #vue, #nuxt #js #ts #adonis", 29 | socials: { 30 | twitter: "gojanda325", 31 | github: "jacobGomez325", 32 | linkedin: "jacob-ambroise-david-gomez-989b151b9", 33 | }, 34 | }, 35 | ``` 36 | 37 | The code is 100% type-safe, so we invite you to sign up while respecting the data format. 38 | 39 | 5. **The name key** 40 | 41 | Simply your name, for example: John Doe. 42 | 43 | 6. **The link key** 44 | 45 | This is the link you want to highlight to promote yourself. In this example, it's a LinkedIn account, but it could be Twitter or your portfolio. 46 | 47 | 7. **The linkSlug key** 48 | 49 | This is the name of the link, similar to an HTML tag: 50 | 51 | ```html 52 | linkSlug 53 | ``` 54 | 55 | 8. **The tags key** 56 | 57 | This is a sensitive part, please pay attention. 58 | 59 | In the code, I imported all tags in the `/data/users.ts` file: 60 | 61 | ```typescript 62 | import { Category } from '~/types/categorie.type' 63 | ``` 64 | 65 | The tags are located in the `/types/categorie.types.ts` file: 66 | 67 | Here's a preview of the file: 68 | 69 | ```javascript 70 | export enum Category { 71 | Frontend = "Frontend", 72 | Backend = "Backend", 73 | Design = "Design", 74 | Mobile = "Mobile", 75 | DevOps = "DevOps", 76 | Web3 = "Web3", 77 | Data = "Data", 78 | SWE = "Software Engineer", 79 | Cybersecurity = "Cybersecurity" 80 | } 81 | ``` 82 | 83 | N.B.: You can also add a category if you feel yours is not in the list, but please respect the defined format. 84 | 85 | 9. **The technology attribute** 86 | 87 | List all the technologies you use. Just follow the example of one of the elements in the array. 88 | 89 | To help you, there's an enumeration listing different technologies you can already use: 90 | 91 | ```javascript 92 | import { 93 | FrontendTechnology, 94 | BackendTechnology, 95 | DesignTechnology, 96 | MobileTechnology, 97 | DevOpsTechnology, 98 | Web3Technology, 99 | DataTechnology, 100 | CybersecurityTechnology 101 | } from '~/types/technologies.type' 102 | ``` 103 | 104 | For more details, see the `types/technologies.type.ts` file. 105 | 106 | ```typescript 107 | export enum FrontendTechnology { 108 | ReactJS = "React.js", 109 | NextJS = "Next.js", 110 | Angular = "Angular", 111 | VueJS = "Vue.js", 112 | NuxtJS = "Nuxt.js", 113 | CSS = "CSS", 114 | SASS_LESS = "SASS/LESS", 115 | TailwindCSS = "Tailwind CSS", 116 | HTML = "HTML", 117 | HTMX = "HTMX", 118 | JSX = "JSX" 119 | } 120 | 121 | // The other enums are similar... 122 | ``` 123 | 124 | N.B.: If the technologies you use are not in the list, add them while respecting the format, and feel free to create an enumeration if necessary. 125 | 126 | 10. **The description attribute** 127 | 128 | Describe yourself in a few lines, it can always be useful. You can copy your LinkedIn, GitHub, etc., description. 129 | 130 | 11. **The socials attribute** 131 | 132 | ```javascript 133 | socials: { 134 | twitter: "gojanda325", 135 | github: "jacobGomez325", 136 | linkedin: "jacob-ambroise-david-gomez-989b151b9", 137 | }, 138 | ``` 139 | 140 | For now, we only have 3 social networks, but everything is optional. If you only have Twitter, just provide your handle. If you don't have LinkedIn, you can remove the key from the object, everything is optional. 141 | 142 | 12. **Submit a pull request** 143 | 144 | Once the data is added, submit a PR for validation. 145 | -------------------------------------------------------------------------------- /add-portfolio-fr.md: -------------------------------------------------------------------------------- 1 | ### **Bienvenue dans le portfolio de Benin.** 2 | 3 | Pour ajouter votre profil à notre base de données de portfolio, cliquez sur le bouton **add your portfolio** dans la barre de navigation. 4 | 5 | ![1714216300598](image/add-portfolio/1714216300598.png) 6 | 7 | Une fois que vous avez cliqué sur le bouton, vous serez redirigé vers le GitHub du projet. Une fois dessus, cliquez sur **Fork** afin de créer une copie du projet chez vous, et surtout n'oubliez pas de mettre une **Star** pour soutenir le projet. 8 | 9 | L'avantage ici, c'est que tout le monde peut être contributeur sur le projet. 10 | 11 | 1. **Fork** 12 | 13 | ![1714285840384](image/add-portfolio/1714285840384.png) 14 | 15 | 2. **Créez une nouvelle copie du projet sur votre dépôt** 16 | 3. **Créez une nouvelle branche (add/your-name)** 17 | 4. **Explorez les fichiers et allez dans data/users.ts** 18 | 19 | Vous y trouverez un tableau d'objets, voici un exemple d'une entrée du tableau : 20 | 21 | ```javascript 22 | { 23 | name: "Gomez Jacob", 24 | link: "https://www.linkedin.com/in/jacob-ambroise-david-gomez-989b151b9/", 25 | linkSlug: "jacobgomez.dev", 26 | tags: [Category.Frontend, Category.Backend, Category.DevOps], 27 | technology: [FrontendTechnology.HTML, FrontendTechnology.CSS, FrontendTechnology.TailwindCSS, FrontendTechnology.VueJS, FrontendTechnology.NuxtJS, BackendTechnology.NodeJS_AdonisJS, DevOpsTechnology.Docker], 28 | description: "FullStack JavaScript web developer, working with #vue, #nuxt #js #ts #adonis", 29 | socials: { 30 | twitter: "gojanda325", 31 | github: "jacobGomez325", 32 | linkedin: "jacob-ambroise-david-gomez-989b151b9", 33 | }, 34 | }, 35 | ``` 36 | 37 | Le code est 100% typé, alors nous vous invitons à vous inscrire tout en respectant le format des données. 38 | 39 | 5. **La clé name** 40 | 41 | C'est simplement votre nom, par exemple : John Doe. 42 | 43 | 6. **La clé link** 44 | 45 | C'est le lien que vous souhaitez mettre en avant pour mieux vous vendre. Dans cet exemple, c'est un compte LinkedIn, mais cela pourrait être Twitter ou votre portfolio. 46 | 47 | 7. **La clé linkSlug** 48 | 49 | C'est le nom du lien, un peu comme une balise HTML : 50 | 51 | ```html 52 | linkSlug 53 | ``` 54 | 55 | 8. **La clé tags** 56 | 57 | C'est une partie sensible, veuillez faire attention. 58 | 59 | Dans le code, j'ai importé toutes les tags dans le fichier `/data/users.ts` : 60 | 61 | ```typescript 62 | import { Category } from '~/types/categorie.type' 63 | ``` 64 | 65 | Les tags se trouvent dans le fichier `/types/categorie.types.ts` : 66 | 67 | Voici un aperçu du fichier : 68 | 69 | ```javascript 70 | export enum Category { 71 | Frontend = "Frontend", 72 | Backend = "Backend", 73 | Design = "Design", 74 | Mobile = "Mobile", 75 | DevOps = "DevOps", 76 | Web3 = "Web3", 77 | Data = "Data", 78 | SWE = "Software Engineer", 79 | Cybersecurity = "Cybersecurity" 80 | } 81 | ``` 82 | 83 | N.B. : Vous pouvez également ajouter une catégorie si vous estimez que la vôtre ne se trouve pas dans la liste, mais en respectant le format défini. 84 | 85 | 9. **L'attribut technology** 86 | 87 | Vous devez faire la liste de toutes les technologies que vous utilisez. Suivez simplement l'exemple d'un des éléments du tableau. 88 | 89 | Pour vous aider, vous disposez d'une énumération qui liste différentes technologies que vous pouvez déjà utiliser : 90 | 91 | ```javascript 92 | import { 93 | FrontendTechnology, 94 | BackendTechnology, 95 | DesignTechnology, 96 | MobileTechnology, 97 | DevOpsTechnology, 98 | Web3Technology, 99 | DataTechnology, 100 | CybersecurityTechnology 101 | } from '~/types/technologies.type' 102 | ``` 103 | 104 | Pour plus de détails, consultez le fichier `types/technologies.type.ts`. 105 | 106 | ```typescript 107 | export enum FrontendTechnology { 108 | ReactJS = "React.js", 109 | NextJS = "Next.js", 110 | Angular = "Angular", 111 | VueJS = "Vue.js", 112 | NuxtJS = "Nuxt.js", 113 | CSS = "CSS", 114 | SASS_LESS = "SASS/LESS", 115 | TailwindCSS = "Tailwind CSS", 116 | HTML = "HTML", 117 | HTMX = "HTMX", 118 | JSX = "JSX" 119 | } 120 | 121 | // Les autres énumérations sont similaires... 122 | ``` 123 | 124 | N.B. : Si les technologies que vous utilisez ne sont pas dans la liste, ajoutez-les en respectant le format et n'hésitez pas à créer une énumération si nécessaire. 125 | 126 | 10. **L'attribut description** 127 | 128 | Décrivez-vous en quelques lignes, cela peut toujours être utile. Vous pouvez copier votre description LinkedIn, GitHub, etc. 129 | 130 | 11. **L'attribut socials** 131 | 132 | ```javascript 133 | socials: { 134 | twitter: "gojanda325", 135 | github: "jacobGomez325", 136 | linkedin: "jacob-ambroise-david-gomez-989b151b9", 137 | }, 138 | ``` 139 | 140 | Pour l'instant, nous avons seulement 3 réseaux sociaux, mais tout est optionnel. Si vous n'avez que Twitter, renseignez simplement votre identifiant. Si vous n'avez pas de LinkedIn, vous pouvez retirer la clé de l'objet, tout est optionnel. 141 | 142 | 12. **Soumettre une pull request** 143 | 144 | Une fois les données ajoutées, soumettez une PR pour validation. 145 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 244 | 245 | 267 | -------------------------------------------------------------------------------- /data/users.ts: -------------------------------------------------------------------------------- 1 | import { Category } from "~/types/categorie.type"; 2 | import type { Card } from "~/types/card.type"; 3 | import { 4 | FrontendTechnology, 5 | BackendTechnology, 6 | DesignTechnology, 7 | MobileTechnology, 8 | DevOpsTechnology, 9 | Web3Technology, 10 | DataTechnology, 11 | CybersecurityTechnology, 12 | CloudTechnology, 13 | SystemsTechnology, 14 | } from "~/types/technologies.type"; 15 | 16 | import Link from "../components/icons/Link.vue"; 17 | 18 | export const usersDev: Card[] = [ 19 | { 20 | name: "Gomez jacob", 21 | link: "https://www.linkedin.com/in/jacob-ambroise-david-gomez-989b151b9/", 22 | linkSlug: "jacobgomez.dev", 23 | tags: [Category.Frontend, Category.Backend, Category.DevOps], 24 | technology: [ 25 | FrontendTechnology.HTML, 26 | FrontendTechnology.CSS, 27 | FrontendTechnology.TailwindCSS, 28 | FrontendTechnology.VueJS, 29 | FrontendTechnology.NuxtJS, 30 | BackendTechnology.NodeJS_AdonisJS, 31 | DevOpsTechnology.Docker, 32 | ], 33 | description: 34 | "FullStack js web developer, working with #vue, #nuxt #js #ts #adonis", 35 | socials: { 36 | twitter: "gojanda325", 37 | github: "jacobGomez325", 38 | linkedin: "jacob-ambroise-david-gomez-989b151b9", 39 | }, 40 | }, 41 | { 42 | name: "Jivaros GBETO", 43 | link: "https://www.linkedin.com/in/jivaros-gbeto/", 44 | linkSlug: "jivaros-gbeto.dev", 45 | tags: [ 46 | Category.Frontend, 47 | Category.Backend, 48 | Category.DevOps, 49 | Category.Mobile, 50 | ], 51 | technology: [ 52 | BackendTechnology.NodeJS_AdonisJS, 53 | BackendTechnology.NodeJS_NestJS, 54 | FrontendTechnology.VueJS, 55 | FrontendTechnology.ReactJS, 56 | DevOpsTechnology.Docker, 57 | MobileTechnology.Flutter, 58 | ], 59 | description: 60 | "Software developer and code lover(Node | Nest | Adonis | React | Vue | SQL | Docker | Flutter )", 61 | socials: { 62 | twitter: "JivarosG", 63 | github: "MrJIvaros", 64 | linkedin: "jjivaros-gbeto", 65 | }, 66 | }, 67 | { 68 | name: "Lionel K.", 69 | link: "open.kattis.com/users/kitihounel", 70 | linkSlug: "kitihounel.dev", 71 | tags: [Category.Backend], 72 | technology: [], 73 | description: "Fullstack dev", 74 | socials: null, 75 | }, 76 | { 77 | name: "Loïc HACHEME", 78 | link: "www.linkedin.com/in/loic-hacheme", 79 | linkSlug: "loic.dev", 80 | tags: [Category.Mobile, Category.Backend], 81 | technology: [ 82 | MobileTechnology.Flutter, 83 | MobileTechnology.Java_Android, 84 | MobileTechnology.Kotlin_Android, 85 | BackendTechnology.Java_SpringBoot, 86 | 87 | ], 88 | description: "Backend and mobile developer, working with #java,#kotlin,#flutter", 89 | socials: { 90 | twitter: "spencer2k21", 91 | github: "spencer2k19", 92 | linkedin: "loic-hacheme", 93 | }, 94 | }, 95 | { 96 | name: "DEGNON Tobi", 97 | link: "https://oluwatobi.dev", 98 | linkSlug: "oluwatobi.dev", 99 | tags: [Category.Backend], 100 | description: "Software engineer working with #python, #django, #htmx and #postgresql", 101 | technology: [BackendTechnology.Python_Django, FrontendTechnology.HTMX, DataTechnology.PostgreSQL, DevOpsTechnology.Docker], 102 | socials: { 103 | twitter: "tobidegnon", 104 | github: "Tobi-De", 105 | linkedin: "", 106 | }, 107 | }, 108 | { 109 | name: "SAGBO Aimé", 110 | link: "https://www.linkedin.com/in/sagbo-aim%C3%A9-b72067171?trk=contact-info", 111 | linkSlug: "sagbo-aime.dev", 112 | tags: [Category.Frontend, Category.Backend, Category.Mobile], 113 | technology: [ 114 | FrontendTechnology.ReactJS, 115 | FrontendTechnology.VueJS, 116 | BackendTechnology.NodeJS_NestJS, 117 | MobileTechnology.Flutter, 118 | ], 119 | description: 120 | "Fullstack Web Developper (Js/Ts/VueJs/Docker/MongoDB) & Mobile Developer (Flutter)", 121 | socials: { 122 | twitter: "", 123 | github: "Goldy98", 124 | linkedin: "sagbo-aimé-b72067171", 125 | }, 126 | }, 127 | { 128 | name: "AINON Rhétice", 129 | link: "https://www.linkedin.com/in/rh%C3%A9tice-ainon-849557196/", 130 | linkSlug: "rheticeainon.dev", 131 | tags: [Category.Frontend, Category.Backend, Category.Mobile], 132 | technology: [ 133 | BackendTechnology.Python_Django, 134 | FrontendTechnology.ReactJS, 135 | BackendTechnology.PHP_Laravel, 136 | MobileTechnology.ReactNative, 137 | ], 138 | description: 139 | "FullStack web and mobile developer, working with #js #python #php, #react #reactnative #django #laravel", 140 | socials: { 141 | twitter: "RheticeAinon", 142 | github: "DRhetice", 143 | linkedin: "rhétice-ainon-849557196", 144 | }, 145 | }, 146 | { 147 | name: "Judicaël AHYI", 148 | link: "https://www.judicael-ahyi.com", 149 | linkSlug: "judicael-ahyi.com", 150 | tags: [ 151 | Category.SWE, 152 | Category.Backend, 153 | Category.DevOps, 154 | Category.Cybersecurity, 155 | ], 156 | technology: [ 157 | BackendTechnology.PHP_Laravel, 158 | BackendTechnology.Python, 159 | BackendTechnology.Python_Flask, 160 | BackendTechnology.NodeJS_Koa, 161 | BackendTechnology.NodeJS_Express, 162 | BackendTechnology.Java_SpringBoot, 163 | FrontendTechnology.HTML, 164 | FrontendTechnology.CSS, 165 | FrontendTechnology.TailwindCSS, 166 | DataTechnology.MySQL, 167 | DataTechnology.PostgreSQL, 168 | DataTechnology.MongoDB, 169 | DataTechnology.Redis, 170 | DevOpsTechnology.Docker, 171 | DevOpsTechnology.Terraform, 172 | ], 173 | description: 174 | "Software Engineer (#PHP #Laravel #Python #Java) & DevSecOps (Junior).", 175 | socials: { 176 | twitter: "JudicaelAhyi", 177 | github: "ludndev", 178 | linkedin: "judicael-ahyi", 179 | }, 180 | }, 181 | { 182 | name: "MEDEHOU Elikem", 183 | link: "https://www.linkedin.com/in/juniormedehou/", 184 | linkSlug: "elikemmedehou.com", 185 | tags: [Category.Mobile, Category.Backend, Category.DevOps], 186 | technology: [ 187 | BackendTechnology.NodeJS_Express, 188 | FrontendTechnology.NextJS, 189 | BackendTechnology.NodeJS_Express, 190 | MobileTechnology.Flutter, 191 | DevOpsTechnology.Docker, 192 | ], 193 | description: "Flutter and Backend Developer", 194 | socials: { 195 | twitter: "elikemmedehou", 196 | github: "NemesisX1", 197 | linkedin: "juniormedehou", 198 | }, 199 | }, 200 | { 201 | name: "AMIDOU Cissé", 202 | link: "https://www.cissedev.com/", 203 | linkSlug: "cissedev.com", 204 | tags: [Category.Frontend], 205 | technology: [FrontendTechnology.ReactJS, FrontendTechnology.NextJS, FrontendTechnology.TailwindCSS], 206 | description: "Frontend Developer", 207 | socials: { 208 | twitter: "TairouT", 209 | github: "tcisse", 210 | linkedin: "taïrou-cissé-a67841281" 211 | } 212 | }, 213 | { 214 | name: "DOSSEH Shalom", 215 | link: "https://www.linkedin.com/in/shalom-dosseh-4a484a262/", 216 | linkSlug: "dossehshalom.dev", 217 | tags: [Category.Data, Category.DevOps, Category.Web3], 218 | technology: [ 219 | DevOpsTechnology.Docker, 220 | DataTechnology.Pandas, 221 | DataTechnology.NumPy, 222 | DataTechnology.ScikitLearn, 223 | DataTechnology.TensorFlow, 224 | DataTechnology.SQL, 225 | DevOpsTechnology.Git_versionControl, 226 | DevOpsTechnology.Jenkins, 227 | DevOpsTechnology.Ansible, 228 | DevOpsTechnology.Kubernetes, 229 | Web3Technology.Solidity, 230 | ], 231 | description: "Problem Solver and Data Driven Innovator", 232 | socials: { 233 | twitter: "", 234 | github: "AnalyticAce", 235 | linkedin: "shalom-dosseh-4a484a262", 236 | }, 237 | }, 238 | 239 | { 240 | name: "Loïc Farel", 241 | link: "http://loicfarel.netlify.app/", 242 | linkSlug: "loicfarel.dev", 243 | tags: [Category.Frontend, Category.Backend], 244 | technology: [ 245 | FrontendTechnology.VueJS, 246 | FrontendTechnology.NuxtJS, 247 | FrontendTechnology.TailwindCSS, 248 | ], 249 | description: 250 | "Web Developer (Js/Ts/VueJs/NuxtJS/MongoDB). I build exceptional and accessible digital solutions for the web.", 251 | socials: { 252 | twitter: "loicfarel", 253 | github: "loicfarel", 254 | linkedin: "loicfarele", 255 | }, 256 | }, 257 | { 258 | name: "Freddy Agbona", 259 | link: "https://fredthedev.com", 260 | linkSlug: "fredthedev.com", 261 | tags: [ 262 | Category.Frontend, 263 | Category.Backend, 264 | Category.DataTechnology, 265 | Category.DevOps, 266 | ], 267 | technology: [ 268 | FrontendTechnology.HTML, 269 | FrontendTechnology.CSS, 270 | FrontendTechnology.Bootstrap, 271 | FrontendTechnology.TailwindCSS, 272 | FrontendTechnology.JavaScript, 273 | FrontendTechnology.VueJS, 274 | FrontendTechnology.NuxtJS, 275 | BackendTechnology.PHP, 276 | BackendTechnology.PHP_Laravel, 277 | BackendTechnology.Java_SpringBoot, 278 | DataTechnology.SQL, 279 | DataTechnology.MySQL, 280 | DataTechnology.PostgreSQL, 281 | DevOpsTechnology.Docker, 282 | DevOpsTechnology.Git_versionControl, 283 | ], 284 | description: 285 | "Software Developer who thrives on tackling stimulating challenges in web application design. My core strength lies in my problem-solving abilities and collaborative teamwork, allowing me to make substantial contributions to high-impact projects.My stacks are : Php, Java, Spring Boot, VueJS, Nuxt, Docker.", 286 | socials: { 287 | twitter: "fredthedev", 288 | github: "fredagbona", 289 | linkedin: "fredthedev", 290 | }, 291 | }, 292 | { 293 | name: "JOSIAS DADY Lauryne", 294 | link: "https://www.linkedin.com/in/lauryne-josias-dady-3a4b051b4/", 295 | linkSlug: "josiaslauryne.dev", 296 | tags: [Category.Frontend], 297 | technology: [ 298 | FrontendTechnology.VueJS, 299 | FrontendTechnology.TailwindCSS, 300 | FrontendTechnology.HTML, 301 | FrontendTechnology.CSS, 302 | ], 303 | description: 304 | "Frontend web developer, working with #vuejs, and learning #react", 305 | socials: { 306 | twitter: "", 307 | github: "lauryne1", 308 | linkedin: "lauryne-josias-dady-3a4b051b4", 309 | }, 310 | }, 311 | { 312 | name: "Arnaud ADJOVI", 313 | link: "https://www.linkedin.com/in/arnaud-adjovi/", 314 | linkSlug: "arnaudadjovi.dev", 315 | tags: [ 316 | Category.Frontend, 317 | Category.Backend, 318 | Category.DevOps, 319 | Category.Design, 320 | ], 321 | technology: [ 322 | FrontendTechnology.HTML, 323 | FrontendTechnology.CSS, 324 | FrontendTechnology.JavaScript, 325 | FrontendTechnology.ReactJS, 326 | FrontendTechnology.JSX, 327 | BackendTechnology.PHP, 328 | BackendTechnology.PHP_Laravel, 329 | BackendTechnology.NodeJS_Express, 330 | 331 | DataTechnology.SQL, 332 | DataTechnology.MySQL, 333 | 334 | DevOpsTechnology.Git_versionControl, 335 | ], 336 | description: "FullStack web developer, working with #react #Laravel #PHP", 337 | socials: { 338 | twitter: "_aploon", 339 | github: "aploon", 340 | linkedin: "arnaud-adjovi", 341 | }, 342 | }, 343 | 344 | { 345 | name: "GAFFAN Renaud", 346 | link: "https://www.renaudhorace.tech", 347 | linkSlug: "renaudhorace.tech", 348 | tags: [Category.Mobile, Category.Frontend, Category.DevOps], 349 | technology: [FrontendTechnology.ReactJS, FrontendTechnology.NextJS, FrontendTechnology.Astro, FrontendTechnology.TailwindCSS, BackendTechnology.PHP_Laravel, BackendTechnology.PHP_Symfony, MobileTechnology.Flutter, DevOpsTechnology.Docker], 350 | description: "Flutter and Frontend Developer", 351 | socials: { 352 | twitter: "renaudhorace", 353 | github: "renaudhorace", 354 | linkedin: "renaud-horacio-gaffan-b73778193/", 355 | }, 356 | }, 357 | { 358 | name: "AHOUANSE Jean-Louis", 359 | link: "https://www.linkedin.com/in/jeanlouis-ahs/", 360 | linkSlug: "jeanlouisahs.dev", 361 | tags: [Category.SWE, Category.Frontend, Category.Backend], 362 | technology: [FrontendTechnology.Angular, FrontendTechnology.VueJS, FrontendTechnology.Astro, BackendTechnology.PHP_Symfony, BackendTechnology.Java_SpringBoot], 363 | description: "Software engineer", 364 | socials: { 365 | twitter: "JeanlouisAhs", 366 | github: "JeanlouisAhs", 367 | linkedin: "jeanlouis-ahs", 368 | }, 369 | }, 370 | { 371 | name: "Thomas BOKO", 372 | link: "https://www.linkedin.com/in/okobsamoht", 373 | linkSlug: "okobsamoht", 374 | tags: [Category.Frontend, Category.Backend, Category.Mobile, Category.Web3], 375 | technology: [ 376 | FrontendTechnology.ReactJS, 377 | FrontendTechnology.Bootstrap, 378 | BackendTechnology.GoLang, 379 | BackendTechnology.NodeJS_Express, 380 | MobileTechnology.ReactNative, 381 | Web3Technology.Web3JS 382 | ], 383 | description: 384 | "", 385 | socials: { 386 | twitter: "okobsamoht", 387 | github: "okobsamoht", 388 | linkedin: "okobsamoht", 389 | }, 390 | }, 391 | { 392 | name: "VEGBA Lux", 393 | link: "https://bento.me/vegbalux", 394 | linkSlug: "vegbalux.dev", 395 | tags: [Category.Frontend, Category.Backend, Category.Mobile], 396 | technology: [ 397 | FrontendTechnology.HTML, 398 | FrontendTechnology.CSS, 399 | FrontendTechnology.Bootstrap, 400 | FrontendTechnology.Javascript, 401 | FrontendTechnology.NextJS, 402 | BackendTechnology.PHP_Symfony, 403 | BackendTechnology.PHP, 404 | DesignTechnology.Figma, 405 | MobileTechnology.Flutter 406 | ], 407 | description: 408 | " I'm a Full Stack Developer based in Paris, France, passionate about crafting digital experiences ", 409 | socials: { 410 | twitter: "LuxVegba", 411 | github: "iimAtomic", 412 | linkedin: "vegbalux", 413 | }, 414 | } 415 | { 416 | 417 | name: "Juliana OTENIA", 418 | link: "https://www.linkedin.com/in/juliana-otenia-7b0140236/", 419 | linkSlug: "dominiatrix.dev", 420 | tags: [Category.Frontend, Category.Design], 421 | technology: [ 422 | FrontendTechnology.ReactJS, 423 | FrontendTechnology.Bootstrap, 424 | DesignTechnology.Figma, 425 | ], 426 | description: 427 | "Frontend web developer and UI/UX Designer, working with #react #js #ts #figma", 428 | socials: { 429 | twitter: "TrixDomini33551", 430 | github: "dominiatrix", 431 | linkedin: "juliana-otenia-7b0140236", 432 | } 433 | }, 434 | { 435 | name: "Edouard HINVI", 436 | link: "https://www.linkedin.com/in/edouardhinvi", 437 | linkSlug: "edouardhinvi", 438 | tags: [Category.Frontend, Category.Backend, Category.DevOps, Category.Cloud], 439 | technology: [ 440 | DevOpsTechnology.Docker, 441 | DevOpsTechnology.Ansible, 442 | DevOpsTechnology.Kubernetes, 443 | CloudTechnology.Openshift, 444 | SystemsTechnology.Linux_RedHat, 445 | DevOpsTechnology.Terraform, 446 | CloudTechnology.GCP, 447 | CloudTechnology.AWS, 448 | CloudTechnology.VMWare, 449 | CloudTechnology.BareMetal, 450 | CloudTechnology.OnPremises, 451 | FrontendTechnology.ReactJS, 452 | FrontendTechnology.Bootstrap, 453 | BackendTechnology.Python, 454 | BackendTechnology.Python_Flask, 455 | BackendTechnology.Python_FastAPI, 456 | MobileTechnology.ReactNative, 457 | BackendTechnology.NodeJS_Express, 458 | ], 459 | description: 460 | "Ingénieur DevOps @ Crédit Agricole Group Infrastructure Platform | Ansible, AAP, RedHat, Docker, Kubernetes, Openshift, AWS, Linux, Python, JS, ReactJS", 461 | socials: { 462 | twitter: "douardoInc", 463 | github: "edouardhinvi", 464 | linkedin: "edouardhinvi", 465 | }, 466 | }, 467 | { 468 | name: "Jonathan KPEYI", 469 | description: "Software Engineer from a perpective of who i want to be | Python, Javascript, Go, Scila", 470 | link: "https://www.linkedin.com/in/jonathan-kpeyi", 471 | linkSlug: "jonathan-kpeyi", 472 | tags: [Category.SWE, Category.Backend, Category.Web3], 473 | technology: [ 474 | BackendTechnology.Python, BackendTechnology.GoLang, FrontendTechnology.JavaScript, "Scila" 475 | ], 476 | socials: { 477 | github: "jkpeyi", 478 | linkedin: "jonathan-kpeyi", 479 | twitter: "jkpeyi" 480 | } 481 | }, 482 | { 483 | name: "Nathan GNANKADJA", 484 | link: "https://www.linkedin.com/in/nathan-gnankadja/", 485 | linkSlug: "Linkedin", 486 | tags: [Category.WordPress], 487 | technology: [FrontendTechnology.HTML, FrontendTechnology.CSS, FrontendTechnology.JS], 488 | description: "Web Developer", 489 | socials: { 490 | github: "nahtandev", 491 | linkedin: "nathan-gnankadja", 492 | }, 493 | }, 494 | { 495 | name: "Orphéric ALLAGBE", 496 | link: "https://orphericallagbe.carrd.co/", 497 | linkSlug: "orpheric_codeur", 498 | tags: [Category.Frontend, Category.Backend, Category.DevOps, Category.Cloud, Category.Data, Category.Technical_Writing], 499 | technology: [ 500 | FrontendTechnology.HTML, 501 | FrontendTechnology.CSS, 502 | FrontendTechnology.TailwindCSS, 503 | FrontendTechnology.AlpineJS, 504 | BackendTechnology.PHP_Laravel, 505 | BackendTechnology.Laravel_Livewire, 506 | DevOpsTechnology.AWS, 507 | DevOpsTechnology.Kubernetes, 508 | DevOpsTechnology.Docker, 509 | DevOpsTechnology.Docker_Swarm, 510 | DevOpsTechnology.Docker_Compose, 511 | DevOpsTechnology.Serverless, 512 | DevOpsTechnology.IaaS, 513 | DevOpsTechnology.PaaS, 514 | DevOpsTechnology.Grafana, 515 | DevOpsTechnology.Ansible, 516 | DevOpsTechnology.Terraform, 517 | ], 518 | description: "FullStack Laravel Software Developer and Data Infrastructure Engineer.", 519 | socials: { 520 | twitter: "Orpheric_Codeur", 521 | github: "OrphericCodeur04", 522 | linkedin: "orpheric-allagbe-1863961b6", 523 | }, 524 | }, 525 | 526 | { 527 | name: "Marie-Christ SAGBO", 528 | link: "https://www.linkedin.com/in/marie-christ-sagbo/", 529 | linkSlug: "mariechrist-sagbo", 530 | tags: [Category.Frontend], 531 | technology: [FrontendTechnology.ReactJS, FrontendTechnology.NextJS, FrontendTechnology.TailwindCSS], 532 | description: "Frontend Developer", 533 | socials: { 534 | github: "mariechristsagbo", 535 | linkedin: "marie-christ-sagbo", 536 | }, 537 | }, 538 | 539 | ]; 540 | --------------------------------------------------------------------------------