diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dfcf93b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+makefile
+
+Scripts/*
\ No newline at end of file
diff --git a/En_construcción.jpg b/Images/En_construcción.jpg
similarity index 100%
rename from En_construcción.jpg
rename to Images/En_construcción.jpg
diff --git a/Styles/index.css b/Styles/index.css
new file mode 100644
index 0000000..83957cf
--- /dev/null
+++ b/Styles/index.css
@@ -0,0 +1,32 @@
+body {
+	background-color: #00d9ff52;
+	justify-self: center;
+	text-align: center;
+}
+
+.imagen_construccion {
+	width: 45vw;
+	border: 0.45vw solid #00aeff;
+	border-radius: 2.5%;
+}
+
+#barra {
+	background-color: blue;
+	border-radius: 3px;
+	border-color: blue;
+	width: 60vw;
+	height: 5px;
+	justify-self: center;
+	margin: 25px;
+}
+	#source_code_btn {
+	background-color:cornflowerblue;
+	border-width: 5px;
+	border-radius: 3px;
+	color:#ffffff;
+	font-size: 1.5vw;
+	transition: all 0.3s ease-in-out;
+}
+#source_code_btn:hover {
+	font-size: 1.7vw;
+}
diff --git a/TypeScript/index.ts b/TypeScript/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
index 7a58ff1..55b0272 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,24 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-  <meta charset="UTF-8">
-  <title>T_Royale</title>
-  <link rel="icon" href="favicon.png" type="image/png">
-  <link rel="stylesheet" href="style.css">
+	<meta charset="UTF-8">
+	<title>T_Royale</title>
+	<link rel="icon" href="favicon.png" type="image/png">
+	<link rel="stylesheet" href="Styles/index.css">
 </head>
 <body>
-  <h1>¡Hola, mi nombre es Teo!</h1>
-  <h2>Este será mi portfolio</h2>
-  <strong>Aún está en construcción</strong>
-  <figure>
-    <img src="En_construcción.jpg" alt="Descripción de la imagen" class="imagen_construccion">
-  </figure>
-  <a class="source_code" href="https://github.com/T-Royale/T-Royale/tree/portfolio">Código fuente en github</a>
+	<div>
+		<h1>¡Hola, mi nombre es Teo!</h1>
+		<h2>Este será mi portfolio</h2>
+		<strong>Aún está en construcción</strong>
+	</div>
+		<figure>
+		<img src="Images/En_construcción.jpg" alt="Descripción de la imagen" class="imagen_construccion">
+	</figure>
+	<div id="barra"></div>
+	<a href="https://github.com/T-Royale/T-Royale/tree/portfolio">
+		<button id="source_code_btn">Código fuente en github</button>
+	</a>
+	<script href="Scripts/index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index eb8a3c5..0000000
--- a/style.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  background-color: #00d9ff52;
-}
-
-.imagen_construccion {
-  width: 300px;
-  border: 2px solid #00aeff;
-  border-radius: 10px;
-}
-
-.source_code {
-    color:#00aeff;
-    font-size: small;
-}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..080fb1d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "target": "es6",                     // Puedes cambiarlo por otro como "es5", "es2020", etc.
+      "module": "commonjs",                // O "esnext", "amd", etc. según tus necesidades
+      "rootDir": "./TypeScript",           // Carpeta donde están los .ts
+      "outDir": "./Scripts",               // Carpeta donde se guardarán los .js compilados
+      "strict": true,                      // Activa todas las comprobaciones estrictas
+      "esModuleInterop": true,            // Para compatibilidad con módulos CommonJS
+      "forceConsistentCasingInFileNames": true
+    },
+    "include": ["TypeScript/**/*.ts"],     // Incluye todos los archivos .ts en esa carpeta
+    "exclude": ["node_modules"]            // Excluye la carpeta node_modules
+}
+  
\ No newline at end of file