Ahora voy a reescribir el Hero con un layout mas creativo y divertido, con la foto y elementos decorativos posicionados de forma mas interesante:
Ahora voy a actualizar el Navbar para que no se superponga:
El Navbar se ve bien. Ahora voy a verificar y actualizar las secciones About, Stack, Projects y Contact para que tambien sean mas compactas y sin superposiciones:
La seccion About se ve bien. Voy a revisar y mejorar el resto de componentes:
Los componentes Stack y Projects se ven bien estructurados. Voy a revisar Contact y luego verificar si hay problemas de superposicion en el layout general:
Todo se ve bien estructurado. Veo que el Hero actual tiene un layout creativo con la foto a la derecha, badges flotantes y elementos decorativos animados. Voy a agregar un par de mejoras finales para que los elementos decorativos no se superpongan y asegurar el z-index correcto:
Ahora voy a ajustar el tamano de la foto principal para que sea mas armoniosa:
Listo. He mejorado significativamente el Hero para que sea mas creativo y divertido con Framer Motion:
Antes de empezar, necesitás tener instalado:
Terminal > New Terminal (o Ctrl + Ñ en Windows/Linux, Cmd + Ñ en Mac)Navegá a la carpeta donde querés crear el proyecto:
cd DocumentosCreá el proyecto con este comando:
npx create-next-app@latest mi-portfolioRespondé las preguntas así:
✔ Would you like to use TypeScript? → Yes
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes
✔ Would you like your code inside a `src/` directory? → No
✔ Would you like to use App Router? → Yes
✔ Would you like to use Turbopack for next dev? → Yes
✔ Would you like to customize the import alias? → NoEntrá a la carpeta del proyecto:
cd mi-portfolioAbrí el proyecto en VS Code:
code .En la terminal de VS Code, ejecutá:
# Instalar shadcn/ui (sistema de componentes)
npx shadcn@latest initRespondé las preguntas:
✔ Which style would you like to use? → New York
✔ Which color would you like to use as base color? → Neutral
✔ Would you like to use CSS variables for colors? → YesLuego instalá los componentes que necesitamos:
npx shadcn@latest add button card badge input textareaInstalá Framer Motion para las animaciones:
npm install framer-motionInstalá Lucide React para los iconos:
npm install lucide-reactAbrí app/layout.tsx y reemplazá todo el contenido por:
import type { Metadata } from 'next'
import { Inter, Space_Grotesk } from 'next/font/google'
import './globals.css'
const inter = Inter({
subsets: ["latin"],
variable: '--font-inter'
})
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
variable: '--font-space-grotesk'
})
export const metadata: Metadata = {
title: 'Tu Nombre | Desarrolladora Web',
description: 'Portfolio de desarrolladora web full stack. Graduada de la Universidad Nacional del Comahue.',
keywords: ['desarrolladora web', 'frontend', 'React', 'TypeScript', 'portfolio'],
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="es" className="scroll-smooth">
<body className={`${inter.variable} ${spaceGrotesk.variable} font-sans antialiased bg-background`}>
{children}
</body>
</html>
)
}Abrí app/globals.css y reemplazá el contenido. Podés copiar los estilos directamente desde el proyecto de v0 haciendo clic en el archivo en el panel izquierdo.
Importante: Asegurate de incluir:
@keyframes).animate-float, .gradient-text, .glass)Creá la carpeta components en la raíz del proyecto si no existe, y dentro creá estos archivos:
components/navbar.tsxcomponents/hero.tsxcomponents/about.tsxcomponents/stack.tsxcomponents/projects.tsxcomponents/contact.tsxcomponents/footer.tsxCopiá el contenido de cada componente desde el proyecto de v0 (podés ver el código haciendo clic en cada archivo).
Abrí app/page.tsx y reemplazá el contenido por:
import { Navbar } from "@/components/navbar"
import { Hero } from "@/components/hero"
import { About } from "@/components/about"
import { Stack } from "@/components/stack"
import { Projects } from "@/components/projects"
import { Contact } from "@/components/contact"
import { Footer } from "@/components/footer"
export default function Home() {
return (
<main className="min-h-screen">
<Navbar />
<Hero />
<About />
<Stack />
<Projects />
<Contact />
<Footer />
</main>
)
}public si no existepublic/profile-photo.jpgpublic/about-photo.jpgTip: Usá fotos cuadradas o casi cuadradas para mejores resultados.
Buscá y reemplazá en todos los archivos:
"Tu Nombre" → Tu nombre real"tunombre@email.com" → Tu email real"https://github.com/tunombre" → Tu GitHub real"https://linkedin.com/in/tunombre" → Tu LinkedIn realEn la terminal, ejecutá:
npm run devAbrí tu navegador en http://localhost:3000 para ver tu portfolio.
File > Add Local Repositorymi-portfolioCreate a RepositoryCompletá:
mi-portfolioMi portfolio personal como desarrolladora webCreate RepositoryPublish RepositoryPublish Repository# Inicializar Git
git init
# Agregar todos los archivos
git add .
# Crear el primer commit
git commit -m "Initial commit: Mi portfolio"
# Crear el repositorio en GitHub (necesitás GitHub CLI instalado)
gh repo create mi-portfolio --public --source=. --pushAdd New... > Projectmi-portfolio y hacé clic en ImportDeploymi-portfolio.vercel.appSettings > Domainstunombre.com)Cada vez que quieras hacer cambios:
npm run devGuardá los cambios en GitHub Desktop:
Commit to mainPush originmi-portfolio/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── ui/ (componentes de shadcn)
│ ├── navbar.tsx
│ ├── hero.tsx
│ ├── about.tsx
│ ├── stack.tsx
│ ├── projects.tsx
│ ├── contact.tsx
│ └── footer.tsx
├── public/
│ ├── profile-photo.jpg
│ └── about-photo.jpg
├── package.json
└── ...otros archivos de configSi tenes alguna duda en algun paso, no dudes en preguntarme.