+
-
-
- Find out who I am and what I can bring to the world of web development
+ initial={{ opacity: 0, y: 30 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ delay: 0.3, duration: 1 }}
+ className="relative z-10 text-3xl md:text-4xl lg:text-5xl font-bold text-slate-100 max-w-4xl leading-tight tracking-tight"
+ >
+ Desarrollador Full Stack
-
+
+
+ Construyo aplicaciones web completas con React y Node. APIs REST, autenticación, base de datos y despliegue.
+
+
- PROJECTS
+ VER PROYECTOS
-
-
-
-
I'm Lluis Adan
- -Want to know more about me?
-
+
-
- & {
+ variant?: Variant
+}
+
+const base =
+ "select-none inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition-all duration-200"
+
+const variants: Record = {
+ primary:
+ "border border-sky-300/30 bg-slate-900 text-slate-100 hover:bg-sky-300/10 hover:border-sky-300/50 hover:text-white",
+ secondary:
+ "border border-slate-700 bg-slate-800 text-slate-200 hover:border-sky-300/40 hover:text-sky-300",
+}
+
+export default function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
+ return
+}
\ No newline at end of file
diff --git a/web/src/components/ButtonLink.tsx b/web/src/components/ButtonLink.tsx
new file mode 100644
index 0000000..bcf7868
--- /dev/null
+++ b/web/src/components/ButtonLink.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+
+type Variant = "primary" | "secondary"
+
+type ButtonLinkProps = React.AnchorHTMLAttributes & {
+ variant?: Variant
+}
+
+const base =
+ "select-none inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition-all duration-200"
+
+const variants: Record = {
+ primary:
+ "border border-sky-300/40 bg-slate-900/70 text-slate-100 shadow-lg shadow-sky-300/10 hover:bg-sky-300/10 hover:border-sky-300/60 hover:text-white",
+ secondary:
+ "border border-slate-700/80 bg-transparent text-slate-300 hover:border-sky-300/40 hover:text-sky-300",
+}
+
+export default function ButtonLink({
+ variant = "primary",
+ className = "",
+ ...props
+}: ButtonLinkProps) {
+ return
+}
\ No newline at end of file
diff --git a/web/src/components/ContactForm.tsx b/web/src/components/ContactForm.tsx
index 9d48865..3724096 100644
--- a/web/src/components/ContactForm.tsx
+++ b/web/src/components/ContactForm.tsx
@@ -1,104 +1,124 @@
import { useState } from "react"
+import Button from "./Button"
type FormData = {
name: string
- email: string,
+ email: string
message: string
}
export default function ContactForm() {
const [formData, setFormData] = useState({
- name: '',
- email: '',
- message: ''
+ name: "",
+ email: "",
+ message: "",
})
- const [status, setStatus] = useState(null);
+ const [status, setStatus] = useState(null)
const handleChange = (e: React.ChangeEvent) => {
- setFormData({...formData, [e.target.name]: e.target.value})
+ setFormData({ ...formData, [e.target.name]: e.target.value })
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
try {
- const response = await fetch('http://localhost:3000/api/v1/send', {
- method: 'POST',
- headers: {'Content-Type': "application/json"},
- body: JSON.stringify(formData)
+ const response = await fetch("http://localhost:3000/api/v1/send", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(formData),
})
- const result = await response.json()
- setStatus(result.message)
- setFormData({ name: '', email: '', message: '' })
-
+ if (!response.ok) throw new Error("Request failed")
+ setStatus("Mensaje enviado ✅")
+ setFormData({ name: "", email: "", message: "" })
} catch (error) {
- setStatus("Send message error")
+ setStatus("No se pudo enviar. Prueba de nuevo o escríbeme a lluis.adan@gmail.com")
}
-
}
return (
-
From infrastructure to code
-- I'm a Full Stack Developer with experience in JavaScript (ES6) and ReactJS, combined with a solid background as a systems technician. -
-- Thanks to this background, I not only develop efficient applications, but I also understand the infrastructure that supports them, from servers to network configurations. -
-- I am passionate about technology and the challenges it brings. I consider myself a resolute, proactive and constantly learning person, always exploring new tools and trends to improve my skills and provide innovative solutions. -
++ Soy Lluís Adán +
+ +¿Quieres saber más sobre mí?
-
)
}
diff --git "a/web/src/assets/profile/Llu\303\255s_perfil.jpg" "b/web/src/assets/profile/Llu\303\255s_perfil.jpg"
new file mode 100644
index 0000000..a713bcf
Binary files /dev/null and "b/web/src/assets/profile/Llu\303\255s_perfil.jpg" differ
diff --git a/web/src/components/Button.tsx b/web/src/components/Button.tsx
new file mode 100644
index 0000000..711bd10
--- /dev/null
+++ b/web/src/components/Button.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+
+type Variant = "primary" | "secondary"
+
+type ButtonProps = React.ButtonHTMLAttributesMy Skills
-
- {["HTML", "CSS", "JavaScript", "React", "Node", "Express", "MongoDB", "Git", "Github", "Docker", "Tailwind CSS", "Bootstrap", "Responsive"].map((skill, index) => (
-
- {skill}
-
- ))}
+
+
-
-
+
+
+
+
De sistemas a desarrollo
+ ++ Vengo de sistemas e infraestructura y he dado el salto a desarrollo web. Me gusta construir aplicaciones mantenibles, con buen UX y backend sólido: APIs, autenticación, datos y despliegue. +
+ +-
+
- + + + Frontend: React + TypeScript, componentes, formularios y responsive. + + + +
- + + + Backend: Node/Express, APIs REST, CRUD, autenticación y manejo de errores. + + + +
- + + + Despliegue y herramientas: Git, Docker y despliegue de proyectos reales. + + +
+
Tecnologías
+
+ {["HTML", "CSS", "JavaScript", "React", "Node", "Express", "MongoDB", "Git", "Github", "Docker", "Tailwind CSS", "Bootstrap", "Responsive"].map((skill, index) => (
+
+ {skill}
+
+ ))}
-
-
-
- CONTACT
- -Feel free to contact me
-