I’m trying to make a portfolio page but im having trouble with the positions of the elements on my page.
I cannot make my profile image go to the center of the page and under the header.
I dont know if all my css code is wrong or the html.
If anyone can help me, will be much appreciated.
here is my index HTML code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Fira+Mono:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header class="TextGlitch" id="title">
<div class="TextGlitch-clip">
<div class="TextGlitch-word"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
</div>
<div class="TextGlitch-clip">
<div class="TextGlitch-word"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
</div>
<div class="TextGlitch-clip">
<div class="TextGlitch-word"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
<div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
</div>
</header>
<div class="profile-container">
<img src="/assets/eu.png" alt="Minha foto" class="profile-image">
</div>
<div class="SobreMim" id="sobre">
<p>
Teste teste teste teste teste testeteste
teste teste teste teste teste<br />
<h3>Minhas redes sociais!</h3>
</p>
<div id="icones">
<a href="https://www.instagram.com/luan__araujo/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="https://www.linkedin.com/in/luan-arauujo/" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="https://github.com/luanaraujo" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a>
</div>
</div>
<div class="language-selector">
<button id="english-button"><img src="/assets/usa.png" alt="English"></button>
<button id="portuguese-button"><img src="/assets/brazil.png" alt="Português"></button>
</div>
<script src="./script.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
here is my style css:
body {
height: 100%;
margin: 0;
display: flex;
overflow: hidden;
background-color: #222;
}
header {
margin: 20px;
z-index: 2;
}
.TextGlitch {
--TextGlitch-blendSize: .08em;
--TextGlitch-blendColorA: #77f8;
--TextGlitch-blendColorB: #ff68;
align-items: flex-start;
justify-content: flex-start;
position: relative;
max-width: 100%;
color: #fff;
line-height: 1em;
letter-spacing: -.1ch;
font-size: 24px;
font-family: "Fira Code", monospace;
margin: 20px;
overflow-wrap: break-word;
padding-bottom: 20px;
z-index: 1;
}
.TextGlitch::after {
display: none;
content: "";
position: absolute;
left: 100%;
bottom: 0;
width: .7ch;
height: 1em;
margin-left: .35ch;
border-radius: 2px;
background-color: currentColor;
animation: cursorAnim 1s ease infinite;
}
@keyframes cursorAnim {
0% { opacity: .5; }
45% { opacity: .5; }
55% { opacity: 0; }
100% { opacity: 0; }
}
.TextGlitch-clip {
position: relative;
display: flex;
align-items: baseline;
}
.TextGlitch-clip + .TextGlitch-clip {
position: absolute;
top: 0;
}
.TextGlitch:not( .TextGlitch-blended ) .TextGlitch-clip + .TextGlitch-clip {
display: none;
}
.TextGlitch-word {
margin: 5px;
max-width: 100%;
word-wrap: break-word;
display: flex;
flex-wrap: wrap;
padding-bottom: 20px;
}
.TextGlitch-blend {
position: absolute;
top: 0;
opacity: 0;
transition: .5s;
transition-property: opacity;
}
.TextGlitch-blendA {
color: var( --TextGlitch-blendColorA );
margin: calc( var( --TextGlitch-blendSize ) * -1 ) 0 0 var( --TextGlitch-blendSize );
mix-blend-mode: darken;
}
.TextGlitch-blendB {
color: var( --TextGlitch-blendColorB );
margin: var( --TextGlitch-blendSize ) 0 0 calc( var( --TextGlitch-blendSize ) * -1 );
mix-blend-mode: color-burn;
}
.TextGlitch-blended .TextGlitch-blend {
opacity: .4;
}
.profile-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
padding-bottom: 20px;
z-index: 3;
}
.profile-image {
width: 160px;
height: auto;
}
.SobreMim {
background-color: #222;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
max-width: 450px;
text-align: justify;
position: fixed;
z-index: 0;
top: 100px;
}
#sobre p {
font-size: 18px;
font-family: "Fira Code", monospace;
overflow-wrap: break-word;
color: #fff;
font-weight: 400;
max-width: 450px;
text-align: justify;
}
#sobre h3{
font-size: 18px;
font-family: "Fira Code", monospace;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
#icones {
display: flex;
gap: 16px;
padding: 24px;
font-size: 30px;
justify-content: center;
}
#icones a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
color: #fff;
transition: background 0.2s;
border-radius: 50%;
}
#icones a:hover {
background: rgba(255, 255, 255, 0.2);
padding: 16px;
}
.language-selector {
position: absolute;
display: flex;
flex-wrap: wrap;
top: 20px;
right: 20px;
}
.language-selector button {
background: transparent;
border: none;
cursor: pointer;
}
.language-selector button img {
width: 32px;
height: 32px;
color: currentColor;
}
.language-selector button:hover img {
opacity: 0.8;
}
.language-selector.bottom-right {
position: fixed;
bottom: 20px;
right: 20px;
}
/* Adicione esta regra de mídia para telas pequenas (por exemplo, smartphones) */
@media (max-width: 800px) {
.language-selector {
position: fixed;
bottom: 0;
right: 0;
margin: 10px;
align-items: flex-end;
}
}
the script im using is this, to make a glitch on the text (it’s from codepen):
class TextGlitch {
constructor(root) {
this._root = root;
this._elClips = root.querySelectorAll(".TextGlitch-clip");
this._elWords = root.querySelectorAll(".TextGlitch-word");
this._frame = this._frame.bind(this);
this._unglitch = this._unglitch.bind(this);
this._frameId = null;
this._text = "";
this._textAlt = [];
this._language = "english"; // Adicione uma variável de idioma inicial
Object.seal(this);
this.setTexts([
">hello friend! My name is Luan Araujo and this is my portfolio.",
">HELLO FRIEND? MY NAME IS LUAN ARAUJO AND THIS IS MY PORTFOLIO.",
"#µ37(0 [R132q? µ30) @J19 c1L3t1+ Qn 1z3e +h0$.&",
"¨µ31)* {&13Nb? #y1 n2m4 1a 3ua1 +L0 p0rt1f1o!@",
"§#+:|* {&><@$? {&13Nb?i0it 3n d2@ L5u@ Ar@2jo$*",
]);
// this.setTexts( [
// "hello world !",
// "HELLO WORLD ?",
// "µ3770 3027q ?",
// "µ311p MQ51b ?",
// ] );
}
on() {
if (!this._frameId) {
this._frame();
}
}
off() {
clearTimeout(this._frameId);
this._frameId = null;
this._unglitch();
}
setTexts([text, ...alt]) {
this._text = text;
this._textAlt = alt;
this._updateText(); // Chame a função para atualizar o texto quando os textos são definidos
}
// private:
// .....................................................................
_frame() {
this._glitch();
setTimeout(this._unglitch, 50 + Math.random() * 200);
this._frameId = setTimeout(this._frame, 250 + Math.random() * 500);
}
_glitch() {
this._addClipCSS();
this._textContent(this._randText());
this._root.classList.add("TextGlitch-blended");
}
_unglitch() {
this._removeClipCSS();
this._updateText(); // Chame a função para atualizar o texto quando o efeito é desligado
this._root.classList.remove("TextGlitch-blended");
}
_textContent(txt) {
this._elWords.forEach((el) => (el.textContent = txt));
}
_addClipCSS() {
const clips = this._elClips,
clip1 = this._randDouble(0.1),
clip2 = this._randDouble(0.1);
clips[0].style.transform = `translate(${this._randDouble(0.3)}em, .02em)`;
clips[2].style.transform = `translate(${this._randDouble(0.3)}em, -.02em)`;
clips[0].style.clipPath = `inset( 0 0 ${0.6 + clip1}em 0 )`;
clips[1].style.clipPath = `inset( ${0.4 - clip1}em 0 ${0.3 - clip2}em 0 )`;
clips[2].style.clipPath = `inset( ${0.7 + clip2}em 0 0 0 )`;
}
_removeClipCSS() {
this._elClips.forEach((el) => {
el.style.clipPath = el.style.transform = "";
});
}
_randText() {
const txt = Array.from(this._text);
for (let i = 0; i < 12; ++i) {
const ind = this._randInt(this._text.length);
txt[ind] = this._textAlt[this._randInt(this._textAlt.length)][ind];
}
return txt.join("");
}
_randDouble(d) {
return Math.random() * d - d / 2;
}
_randInt(n) {
return (Math.random() * n) | 0;
}
_updateText() {
// Função para atualizar o texto com base no idioma selecionado
if (this._language === "english") {
this._text = ">hello friend! My name is Luan Araujo and this is my portfolio.";
} else if (this._language === "portuguese") {
this._text = ">Olá amigo(a)! Meu nome é Luan Araujo e este é o meu portfólio.";
}
this._textContent(this._text); // Atualize o texto
}
}
const englishButton = document.getElementById("english-button");
const portugueseButton = document.getElementById("portuguese-button");
const elTitle = document.querySelector("#title");
const glitch = new TextGlitch(elTitle);
glitch.on();
// Adicione eventos de clique para os botões de idioma
englishButton.addEventListener("click", function () {
glitch._language = "english"; // Defina o idioma como inglês
glitch._updateText(); // Atualize o texto
});
portugueseButton.addEventListener("click", function () {
glitch._language = "portuguese"; // Defina o idioma como português
glitch._updateText(); // Atualize o texto
});
here’s how the page is now:
enter image description here
i’ve tried putting different position atributtes on css but nothing worked.
the profile image only goes under the header when i put the “position: fixed”.