Created
March 19, 2024 14:29
-
-
Save ocariocawebdesign/72695ebc046a68718a3914c7d2b8268e to your computer and use it in GitHub Desktop.
Tradução da página de perfil
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from "react"; | |
import { DivProfile } from "./styles/styles"; | |
import "./styles/styles.css"; | |
//import "./styles.css"; | |
export function CarlosAbreu() { | |
const [textCarlos, setTextCarlos] = useState({ | |
pt: "Eu sou um desenvolvedor de frontend e moro no Rio de Janeiro, Brasil. Eu sou um usuário da distribuição linux Ubuntu e sou apaixonado por ela.", | |
en: "I'm a frontend developer and I live in Rio de Janeiro, Brazil. I am a user of the Ubuntu linux distribution that I am passionate about.", | |
}); | |
const [textAboutDescription, setTextAboutDescription] = useState({ | |
pt: "Eu trabalho com a interatividade de websites usando HTML, CSS e JavaScript. Eu utilizo alguns frameworks e bibliotecas como Reactjs, Gatsby e Bootstrap.", | |
en: "I work with the interactivity of websites using HTML, CSS and JavaScript. I use some frameworks and libraries like Reactjs, Gatsby and Bootstrap.", | |
}); | |
const [lang, setLang] = useState("pt"); | |
return ( | |
<> | |
<div className="mt-2" style={{ paddin: "0.5rem" }}> | |
<button | |
style={{ border: "none" }} | |
className="btn btn-ligth btn-sm" | |
onClick={() => setLang("pt")} | |
disabled={lang === "pt"} | |
> | |
PT | |
</button> | |
| | |
<button | |
style={{ border: "none" }} | |
className="btn btn-ligth btn-sm" | |
onClick={() => setLang("en")} | |
disabled={lang === "en"} | |
> | |
EN | |
</button> | |
</div> | |
<div className="container" style={{}}> | |
<div className="row"> | |
<div className="col-md-6 col-lg-6"> | |
<DivProfile> | |
Carlos Abreu | |
<p | |
style={{ | |
fontSize: "1.2rem", | |
color: "#757575", | |
lineHeight: "1.3", | |
}} | |
> | |
{textCarlos[lang]} | |
</p> | |
<div className="" style={{ marginTop: "-1rem" }}> | |
<a | |
alt="Linkedin" | |
href="https://www.linkedin.com/in/ocariocawebdesign/" | |
target="_blank" | |
title="Linkedin" | |
> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
width="22" | |
height="22" | |
fill="#333" | |
className="bi bi-linkedin" | |
viewBox="0 0 16 16" | |
opacity="0.6" | |
> | |
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" /> | |
</svg> | |
</a> | |
<a | |
href="https://github.com/ocariocawebdesign" | |
target="_blank" | |
alt="Github" | |
title="Github" | |
> | |
<svg | |
style={{ marginLeft: "0.8rem" }} | |
xmlns="http://www.w3.org/2000/svg" | |
width="22" | |
height="22" | |
fill="#333" | |
class="bi bi-linkedin" | |
viewBox="0 0 16 16" | |
opacity="0.6" | |
> | |
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" /> | |
</svg> | |
</a> | |
{/*<svg | |
style={{ marginLeft: "4px" }} | |
xmlns="http://www.w3.org/2000/svg" | |
width="28" | |
height="28" | |
fill="#333" | |
class="bi bi-linkedin" | |
viewBox="0 0 16 16" | |
opacity="0.6" | |
> | |
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /> | |
</svg>*/} | |
</div> | |
<p>{textAboutDescription[lang]}</p> | |
<div className=""> | |
<a | |
href="https://api.whatsapp.com/send?phone=5521967530653&text=Ol%C3%A1!%20Quero%20informa%C3%A7%C3%B5es%20sobre%20Desenvolvimento%20de%20sites..." | |
target="_blank" | |
rel="noreferrer" | |
> | |
<button className="btn btn-primary-mod-02 text-button-size swing"> | |
Contact | |
</button> | |
</a> | |
</div> | |
</DivProfile> | |
</div> | |
<div | |
className="col-md-6 col-lg-6 mt-4 mb-4" | |
style={{ marginBottom: "" }} | |
> | |
<DivProfile className="mt-4 mb-4" style={{ marginTop: "0" }}> | |
<video autoPlay muted loop playsInline controls={false}> | |
<source | |
style={{ opacity: "10" }} | |
src="https://threeeyes.online/cami/wp-content/uploads/2023/02/animacao-carlos.mp4" | |
type="video/mp4" | |
/> | |
</video> | |
</DivProfile> | |
</div> | |
</div> | |
</div> | |
<div className="container mb-4"> | |
<div className="row"> | |
<div | |
className="col-xs-12 col-sm-12 col-md-3 col-lg-3 " | |
style={{ | |
display: "flex", | |
justifyContent: "center", | |
alignItems: "center", | |
}} | |
> | |
{/* | |
<img | |
style={{ maxWidth: "60%" }} | |
className="img-fluid " | |
src={SREO} | |
/> | |
</div> | |
<div | |
className="col-xs-12 col-sm-12 col-md-3 col-lg-3" | |
style={{ | |
display: "flex", | |
justifyContent: "center", | |
alignItems: "center", | |
}} | |
> | |
<img style={{ maxWidth: "60%" }} className="img-fluid " src={FAB} /> | |
</div> | |
<div | |
className="col-xs-12 col-sm-12 col-md-3 col-lg-3" | |
style={{ | |
display: "flex", | |
justifyContent: "center", | |
alignItems: "center", | |
}} | |
> | |
<img | |
style={{ maxWidth: "30%" }} | |
className="img-fluid " | |
src={ONDAS} | |
/> | |
</div> | |
<div | |
className="col-xs-12 col-sm-12 col-md-3 col-lg-3" | |
style={{ | |
display: "flex", | |
justifyContent: "center", | |
alignItems: "center", | |
}} | |
> | |
<img | |
style={{ maxWidth: "30%" }} | |
className="img-fluid " | |
src={PRIMO} | |
/>*/} | |
</div> | |
<div className="row"> | |
<div className="col-md-3 col-lg-3"></div> | |
<div className="col-md-3 col-lg-3"></div> | |
<div className="col-md-3 col-lg-3"></div> | |
<div className="col-md-3 col-lg-3"></div> | |
</div> | |
</div> | |
</div> | |
</> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment