troyale/.profile
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

13-04-25

Browse Source 
Estructura de la página inicial
This commit is contained in:
troyale committed 2025-04-13 20:38:21 +02:00
1 parent 33bf832e62
commit aa0d5215ca
12 files changed
+180 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Fonts/AgaveNerdFont/AgaveNerdFont-Bold.ttf
BIN
View File
Binary file not shown.
Fonts/AgaveNerdFont/AgaveNerdFont-Regular.ttf
BIN
View File
Binary file not shown.
Fonts/AgaveNerdFont/AgaveNerdFontMono-Bold.ttf
BIN
View File
Binary file not shown.
Fonts/AgaveNerdFont/AgaveNerdFontMono-Regular.ttf
BIN
View File
Binary file not shown.
Fonts/AgaveNerdFont/AgaveNerdFontPropo-Bold.ttf
BIN
View File
Binary file not shown.
Fonts/AgaveNerdFont/AgaveNerdFontPropo-Regular.ttf
BIN
View File
Binary file not shown.
Images/English.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

Images/Spanish.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

Styles/fonts.css
+12
View File
@@ -0,0 +1,12 @@
@font-face {
font-family: 'AgaveNerdFont';
src: url('/Fonts/AgaveNerdFont/AgaveNerdFont-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AgaveNerdFont';
src: url('/Fonts/AgaveNerdFont/AgaveNerdFont-Bold.ttf') format('truetype');
font-weight: bold;
font-style: bold;
}
Styles/index.css
+65 -18
View File
@@ -1,32 +1,79 @@
body { body {
background-color: #00d9ff52; background-color: #181818;
justify-self: center; justify-self: center;
text-align: center; text-align: center;
font-family: AgaveNerdFont;
} }
.selectLanguage {
.imagen_construccion { position: absolute;
width: 45vw; top: 2vh;
border: 0.45vw solid #00aeff; right: 1vw;
border-radius: 2.5%;
} }
.flag {
#barra { height: 6vh;
background-color: blue; width: 5vw;
}
#textoDePrueba {
color: #ffffff;
font-size: 32px;
text-align: justify;
line-height: 150%;
padding-left: 3vw;
padding-right: 6vw;
}
.bigText {
font-size: 300%;
color: #ffffff;
}
#barraHorizontal {
background-color: gray;
border-radius: 3px; border-radius: 3px;
border-color: blue;
width: 60vw; width: 60vw;
height: 5px; height: 5px;
justify-self: center; justify-self: center;
margin: 25px; margin: 25px;
} }
#source_code_btn { .apartado {
background-color:cornflowerblue; font-family: AgaveNerdFont;
border-width: 5px; font-style: bold;
border-radius: 3px; font-size: 4vh;
color:#ffffff; }
font-size: 1.5vw; .apartado::first-letter{
font-size: 4.2vh;
}
#sobreMi {
color: #0084ff;
}
#stack {
color: yellow
}
#leftBar {
position: fixed;
top: 50%;
right: 1vw;
transform: translateY(-50%);
width: 4vw; /* Ajusta el ancho según necesites */
height: 60vh; /* Ajusta la altura que quieras que tenga la barra */
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: #202020;
border-radius: 10px; /* Bordes redondeados del lado izquierdo */
}
.leftBar_icon {
width: 3vw;
border-width: 3px;
border-radius: 10px;
flex-grow: 1;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
#source_code_btn:hover { #GitHub:hover {
font-size: 1.7vw; box-shadow: 0px 0px 20px rgb(195, 0, 255);
}
#Discord:hover {
box-shadow: 0px 0px 20px rgb(0, 132, 255);
}
#Gmail:hover {
box-shadow: 0px 0px 20px rgb(255, 0, 0);
} }
index.html
+45 -11
View File
@@ -5,20 +5,54 @@
<title>T_Royale</title> <title>T_Royale</title>
<link rel="icon" href="favicon.png" type="image/png"> <link rel="icon" href="favicon.png" type="image/png">
<link rel="stylesheet" href="Styles/index.css"> <link rel="stylesheet" href="Styles/index.css">
<link rel="stylesheet" href="Styles/fonts.css">
</head> </head>
<body> <body>
<div> <div class="selectLanguage">
<h1>¡Hola, mi nombre es Teo!</h1> <a href="/index_en.html">
<h2>Este será mi portfolio</h2> <img src="/Images/Spanish.png" class="flag">
<strong>Aún está en construcción</strong> </a>
</div> </div>
<figure> <div>
<img src="Images/En_construcción.jpg" alt="Descripción de la imagen" class="imagen_construccion"> <h1 class="bigText">¡Hola, mi nombre es Teo!</h1>
</figure> </div>
<div id="barra"></div> <div id="barraHorizontal"></div>
<a href="https://github.com/T-Royale/T-Royale/tree/portfolio"> <!--Texto de prueba-->
<button id="source_code_btn">Código fuente en github</button> <div id="textoDePrueba">
</a> <p class="apartado" id="sobreMi">&nbsp;Sobre mí:</p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper. Nulla facilisi. Vivamus id arcu non arcu luctus facilisis sit amet vel felis. Integer et nulla orci. Nulla posuere orci at risus congue malesuada. Donec sit amet vestibulum ipsum.
</p>
<p class="apartado" id="stack">&nbsp;Tecnologías:</p>
<p>
 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus. Nam auctor lectus ac nulla euismod, a pretium nisi faucibus. Fusce dictum lorem nec mi interdum, vel venenatis urna tristique. Nulla at libero sit amet lorem luctus vestibulum a ac eros. Cras ac posuere ligula. Ut non risus a purus dictum scelerisque sit amet id sapien. Nunc id ante nulla. Nam porttitor libero et risus fermentum, eget varius ante iaculis. Fusce suscipit turpis et lacus dapibus, eget euismod nulla feugiat. Nulla consectetur est in erat vehicula feugiat.
</p>
<p>
 Integer vel ante a urna pharetra dignissim vel ac lacus. Aliquam feugiat massa non feugiat vulputate. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean at tincidunt erat. Morbi auctor turpis felis, non aliquet tortor euismod sed. Phasellus ultricies auctor erat, sed vestibulum ante volutpat ut. Curabitur in magna vitae nisi convallis hendrerit. Donec dictum velit vel mi interdum maximus. Etiam lacinia ligula sapien, ac rutrum leo lobortis id. Ut ut lectus ut libero maximus egestas.
</p>
<p>
 Quisque non bibendum augue. Donec ullamcorper lectus neque, a ultricies lectus iaculis ac. Sed pretium leo non libero tincidunt, at maximus odio congue. Nunc gravida, enim id varius vulputate, arcu dui tincidunt risus, et iaculis nulla velit a velit. Aenean in neque quis neque dapibus elementum. Curabitur non sem felis. Vivamus ornare, neque in rutrum viverra, magna urna rutrum odio, id placerat justo lorem nec libero. Donec nec sem eget dui lacinia hendrerit sit amet at nunc. Integer sit amet augue eu purus facilisis maximus. In a gravida mi.
</p>
<p>
 Nam lacinia nunc ac nisi pharetra, vel dictum mi egestas. Nulla fermentum felis et arcu hendrerit, sed condimentum libero facilisis. Vivamus malesuada tincidunt ipsum, in volutpat leo ultricies sit amet. Aliquam lobortis tristique quam, sit amet dapibus sapien tempus eu. Suspendisse eu metus sit amet dui lobortis posuere vel a nulla. Cras mollis, libero ac malesuada convallis, purus eros posuere magna, sed pharetra odio augue eu risus. Integer condimentum, justo ac venenatis feugiat, odio risus ultricies augue, nec auctor sapien dui vel ligula.
</p>
</div>
<!--/Texto de prueba/-->
<!--Barra lateral-->
<div id="leftBar">
<a href="https://discord.bio/T_Royale">
<img src="https://skillicons.dev/icons?i=discord&theme=dark" class="leftBar_icon" id="Discord"/>
</a>
<a href="https://github.com/T-Royale">
<img src="https://skillicons.dev/icons?i=github&theme=dark" class="leftBar_icon" id="GitHub"/>
</a>
<a href="mailto:teomoralesvelasco@icloud.com?subject=Hola, quiero contactarte">
<img src="https://skillicons.dev/icons?i=gmail&theme=dark" class="leftBar_icon" id="Gmail"/>
</a>
</div>
<!--/Barra lateral/-->
<script href="Scripts/index.js"></script> <script href="Scripts/index.js"></script>
</body> </body>
</html> </html>
index_en.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T_Royale</title>
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/Styles/index.css">
<link rel="stylesheet" href="/Styles/fonts.css">
</head>
<body>
<div class="selectLanguage">
<a href="/index.html">
<img src="/Images/English.png" class="flag">
</a>
</div>
<div>
<h1 class="bigText">Hi, I'm Teo!</h1>
</div>
<div id="barraHorizontal"></div>
<!--Texto de prueba-->
<div id="textoDePrueba">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper. Nulla facilisi. Vivamus id arcu non arcu luctus facilisis sit amet vel felis. Integer et nulla orci. Nulla posuere orci at risus congue malesuada. Donec sit amet vestibulum ipsum.
</p>
<p>
Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus. Nam auctor lectus ac nulla euismod, a pretium nisi faucibus. Fusce dictum lorem nec mi interdum, vel venenatis urna tristique. Nulla at libero sit amet lorem luctus vestibulum a ac eros. Cras ac posuere ligula. Ut non risus a purus dictum scelerisque sit amet id sapien. Nunc id ante nulla. Nam porttitor libero et risus fermentum, eget varius ante iaculis. Fusce suscipit turpis et lacus dapibus, eget euismod nulla feugiat. Nulla consectetur est in erat vehicula feugiat.
</p>
<p>
Integer vel ante a urna pharetra dignissim vel ac lacus. Aliquam feugiat massa non feugiat vulputate. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean at tincidunt erat. Morbi auctor turpis felis, non aliquet tortor euismod sed. Phasellus ultricies auctor erat, sed vestibulum ante volutpat ut. Curabitur in magna vitae nisi convallis hendrerit. Donec dictum velit vel mi interdum maximus. Etiam lacinia ligula sapien, ac rutrum leo lobortis id. Ut ut lectus ut libero maximus egestas.
</p>
<p>
Quisque non bibendum augue. Donec ullamcorper lectus neque, a ultricies lectus iaculis ac. Sed pretium leo non libero tincidunt, at maximus odio congue. Nunc gravida, enim id varius vulputate, arcu dui tincidunt risus, et iaculis nulla velit a velit. Aenean in neque quis neque dapibus elementum. Curabitur non sem felis. Vivamus ornare, neque in rutrum viverra, magna urna rutrum odio, id placerat justo lorem nec libero. Donec nec sem eget dui lacinia hendrerit sit amet at nunc. Integer sit amet augue eu purus facilisis maximus. In a gravida mi.
</p>
<p>
Nam lacinia nunc ac nisi pharetra, vel dictum mi egestas. Nulla fermentum felis et arcu hendrerit, sed condimentum libero facilisis. Vivamus malesuada tincidunt ipsum, in volutpat leo ultricies sit amet. Aliquam lobortis tristique quam, sit amet dapibus sapien tempus eu. Suspendisse eu metus sit amet dui lobortis posuere vel a nulla. Cras mollis, libero ac malesuada convallis, purus eros posuere magna, sed pharetra odio augue eu risus. Integer condimentum, justo ac venenatis feugiat, odio risus ultricies augue, nec auctor sapien dui vel ligula.
</p>
</div>
<!--/Texto de prueba/-->
<!--Barra lateral-->
<div id="leftBar">
<a href="https://discord.bio/T_Royale">
<img src="https://skillicons.dev/icons?i=discord&theme=dark" class="leftBar_icon" id="Discord"/>
</a>
<a href="https://github.com/T-Royale">
<img src="https://skillicons.dev/icons?i=github&theme=dark" class="leftBar_icon" id="GitHub"/>
</a>
<a href="mailto:teomoralesvelasco@icloud.com?subject=Hello, I want to contact you">
<img src="https://skillicons.dev/icons?i=gmail&theme=dark" class="leftBar_icon" id="Gmail"/>
</a>
</div>
<!--/Barra lateral/-->
<script href="/Scripts/index.js"></script>
</body>
</html>