From 1d6de0d6b89612745fb04501f62810b01b1de298 Mon Sep 17 00:00:00 2001 From: Tutur33 Date: Fri, 27 Oct 2023 16:42:34 +0200 Subject: [PATCH] lang fr, en et zh --- img/other.png | Bin 0 -> 10843 bytes index.html | 106 ++++++++++++++++++++++++++++++++++++++++++-------- script.js | 18 ++++++--- styles.css | 55 +++++++++++++++++++++----- 4 files changed, 148 insertions(+), 31 deletions(-) create mode 100644 img/other.png diff --git a/img/other.png b/img/other.png new file mode 100644 index 0000000000000000000000000000000000000000..921cf52971fb5e0304649071b71b8994778a484b GIT binary patch literal 10843 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 - Portfolio - Arthur + Portfolio - Arthur
-

Portfolio

+

Portfolio

+

Portfolio

+

文件夹

Salut ! 👋🏻
Je m'appelle Arthur.

-

Hay there! 👋🏻
I'm Arthur.

+

Hi! 👋🏻
I'm Arthur.

+

干草那里!👋🏻
我是亚瑟。

Fondateur

Founder

+

创始人

Je suis un jeune français passionné de développement, je suis un autodidacte et ma créativité ne connaît pas de limites. Chaque pixel que je modifie raconte une histoire. Passionné par la transformation d'idées en expériences visuellement captivantes, je crée des projets qui repoussent les limites de l'innovation en matière de design.

I am a young Frenchman with a passion for development, I am a self-taught learner and my creativity knows no limits. Every pixel I edit tells a story. Passionate about transforming ideas into visually captivating experiences, I create projects that push the boundaries of design innovation.

+

我是一名年轻的法国人,对发展充满热情,我是一名自学成才的学习者,我的创造力是无限的。我编辑的每个像素都讲述一个故事。我热衷于将想法转化为视觉上令人着迷的体验,我创建的项目突破了设计创新的界限。

"Au milieu de chaque difficulté se trouve une opportunité."

"In the middle of every difficulty lies opportunity."

+

"每一个困难之中都蕴藏着机遇。"

Albert Einstein

Photo de profil Profile picture + 个人资料图片
+
+

À propos

+

About

+

关于

+

Bonjour ! Je suis Arthur, un développeur passionné basé en France. Mon parcours dans le monde du développement est une aventure inspirante. Chaque ligne de code que j'écris est une étape vers la création d'expériences uniques et captivantes. Je suis animé par la volonté de donner vie à des idées et de les modeler en designs innovants.

+

Good morning ! I'm Arthur, a passionate developer based in France. My journey in the world of development is an inspiring adventure. Every line of code I write is a step toward creating unique and engaging experiences. I am driven by the desire to bring ideas to life and shape them into innovative designs.

+

早上好 !我是 Arthur,一位来自法国的充满热情的开发人员。我在发展世界中的旅程是一次鼓舞人心的冒险。我编写的每一行代码都是朝着创造独特且引人入胜的体验迈出的一步。我的动力来自于将想法变为现实并将其转化为创新设计的愿望。

+ +

Mon parcours

+

My background

+

我的背景

+

J'ai acquis de l'expérience dans le développement web en travaillant sur divers projets, allant du front-end au back-end. J'ai une maîtrise approfondie des langages tels que HTML, CSS, JavaScript, et j'ai travaillé avec des frameworks modernes comme React et Node.js.

+

I gained experience in web development working on various projects, ranging from front-end to back-end. I have a deep command of languages like HTML, CSS, JavaScript, and have worked with modern frameworks like React and Node.js.

+

我在从前端到后端的各种项目中获得了 Web 开发经验。我对 HTML、CSS、JavaScript 等语言有深入的了解,并且使用过 React 和 Node.js 等现代框架。

+ +

Ma philosophie

+

My philosophy

+

我的理念

+

Je crois fermement que chaque difficulté est une opportunité de créer quelque chose de nouveau et de passionnant. Mon approche consiste à allier fonctionnalité et esthétique pour offrir des expériences utilisateur exceptionnelles.

+

I firmly believe that every difficulty is an opportunity to create something new and exciting. My approach is to combine functionality and aesthetics to deliver exceptional user experiences.

+

我坚信,每一次困难都是创造新的、令人兴奋的事物的机会。我的方法是将功能和美学结合起来,提供卓越的用户体验。

+ +

Mes compétences

+

My skills

+

我的技能

+

Développement web, design web, développement d'applications, gestion de projet.

+

Web development, web design, application development, project management.

+

网页开发、网页设计、应用程序开发、项目管理。

+ +

Mes intérêts

+

My interests

+

我的兴趣

+

En dehors du développement, j'adore explorer de nouveaux endroits, la photographie, et lire des livres sur la technologie et la créativité. Et faire de la voile !

+

Outside of development, I love exploring new places, photography, and reading books about technology and creativity. And go sailing!

+

除了开发之外,我喜欢探索新的地方、摄影以及阅读有关技术和创造力的书籍。去航行吧!

+ +

Ma vision

+

My vision

+

我的愿景

+

Mon objectif est de continuer à apprendre, innover et inspirer à travers mes projets. Je souhaite contribuer à la création d'un web meilleur et plus captivant pour tous.

+

My visionMy goal is to continue to learn, innovate and inspire through my projects. I want to help create a better, more engaging web for everyone.

+

我的愿景我的目标是通过我的项目继续学习、创新和启发。我想帮助每个人创建一个更好、更具吸引力的网络。

+ +

N'hésitez pas à me contacter si vous avez des questions ou si vous souhaitez collaborer sur un projet passionnant. Vous pouvez me joindre via [votre adresse e-mail] ou me suivre sur les réseaux sociaux en utilisant les liens ci-dessous.

+

Please feel free to contact me if you have any questions or would like to collaborate on an exciting project. You can reach me via [your email address] or follow me on social media using the links below.

+

如果您有任何疑问或想合作开展一个令人兴奋的项目,请随时与我联系。您可以通过[您的电子邮件地址]联系我,或使用下面的链接在社交媒体上关注我。

+
+
+

Projets

+

Projects

+

项目

+
+
+

Contact

+

Contact

+

接触

+
diff --git a/script.js b/script.js index dcba69af..8050153c 100644 --- a/script.js +++ b/script.js @@ -1,10 +1,16 @@ document.addEventListener("DOMContentLoaded", function() { var userLanguage = navigator.language || navigator.userLanguage; - - // Supposons que vous preniez en charge l'anglais (en) et le français (fr) - if (userLanguage.startsWith("fr")) { - document.body.classList.add("lang-fr"); - } else { - document.body.classList.add("lang-en"); + var userLanguage = userLanguage.substring(0, 2); + + if (userLanguage !== "fr" && userLanguage !== "en" && userLanguage !== "zh") { + var userLanguage = "en"; + } + + var elementsToStyle = document.querySelectorAll("[lang]"); + for (var j = 0; j < elementsToStyle.length; j++) { + var element = elementsToStyle[j]; + if (userLanguage !== element.getAttribute("lang")) { + element.style.display = "none"; + } } }); diff --git a/styles.css b/styles.css index e054c283..1669fe84 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,9 @@ -[lang='en'] { +.lang-fr { display: none; } -[lang='fr'] { - display: block; +.lang-en { + display: none; } * { @@ -12,7 +12,15 @@ font-family: 'Roboto', sans-serif; } -header { +body { + justify-content: space-around; + max-width: 2500px; + margin: auto; +} + +header, +main, +section { margin: 100px 100px 100px; } @@ -51,7 +59,6 @@ h3 { } main { - margin: 100px 100px 100px; display: flex; } @@ -61,6 +68,7 @@ main { .main-right { margin-left: 40px; + min-width: 40%; } nav ul { @@ -90,23 +98,52 @@ nav a:hover { } .div-lien div { + display: flex; + flex-direction: row; + align-items: center; text-align: left; - text-decoration: none; margin: 5px 0 5px; padding: 20px 40px; - color: rgb(83, 83, 83); + background-color: rgb(216, 216, 216); + color: rgb(85, 85, 85); text-decoration: none; - border: 2px solid rgb(83, 83, 83); border-radius: 5px; cursor: pointer; font-weight: bold; } +.div-lien div:hover { + background-color: rgb(177, 177, 177); +} + +.div-lien a { + text-decoration: none; +} + .div-lien img { width: 50px; + padding-right: 15px; +} + +@media (max-width: 800px) { + .main-right { + display: none; + } + + header, + main, + section { + margin: 20px 20px 20px; + } + + nav ul { + margin: 0; + } } .pp { - width: 500px; + margin: auto; + width: 100%; + max-width: 500px; border-radius: 50%; } \ No newline at end of file