Crear un sitio de demostración

Crea un sitio web de portafolio usando NextJS.

June 22, 2024

nextjs

Cómo crear y desplegar un portafolio de artista de efectos visuales $0

Esta guía te ayudará a crear un sitio web de portafolio profesional con Next.js, con estilos de Tailwind CSS, y a implementarlo en Vercel. No te preocupes si no tienes mucha experiencia en tecnología; ¡solo sigue estos pasos!

Paso 1: Configura tu entorno de desarrollo

Instalar Node.js:
- Ir a nodejs.orgDescarga la versión LTS e instálala. Node.js te permite ejecutar los comandos necesarios en tu ordenador.
Instalar Visual Studio Code (VS Code):
- Descargar e instalarVS Code, un editor de código que facilita la edición de tu sitio web.

Paso 2: Crear un nuevo proyecto Next.js

Abrir VS Code:
- Abre VS Code y luego abre una nueva ventana de terminal yendo aVer > Terminal.
Iniciar un nuevo proyecto:
- En la terminal, escribe:
  npx create-next-app@latest my-portfolio --typescript --tailwind
- Sigue las instrucciones:
- - Nombra tu proyecto:mi portafolio.
  - Seleccione "Sí" para TypeScript y "Sí" para Tailwind CSS.
- Esto configurará un nuevo proyecto Next.js con TypeScript y Tailwind CSS.
Navega hasta tu proyecto:
- En la terminal, escribe:
  cd mi-portafolio

Paso 3: Gestiona tu sitio web localmente.

Iniciar el servidor de desarrollo:
- En la terminal, escribe:
  npm run dev
- Abre tu navegador web y ve ahttp://localhost:3000para ver tu sitio.

Paso 4: Crea una página de inicio básica con estilo Tailwind-CSS.

Abrir el archivo de la página de inicio:
- En VS Code, busque y abra el archivo.app/page.tsx.
Añade tu contenido:
- Sustituya el contenido existente por la siguiente estructura básica:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My VFX Portfolio</title>
        <meta name="description" content="Showcasing my VFX work" />
      </Head>
      <main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
        <h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
        <p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
          <img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
        </div>
      </main>
    </>
  );
}

Paso 5: Implementa tu sitio web en Vercel.

Crea una cuenta de Vercel.:
- Ir a vercel.comy regístrate para obtener una cuenta gratuita.
Despliega tu proyecto:
- Si aún no lo has hecho, conecta tu cuenta de GitHub a Vercel.
- Haga clic en el botón "Nuevo proyecto" e importe sumi portafoliorepositorio.
- Sigue las instrucciones y Vercel creará e implementará tu sitio web automáticamente.
Acceda a su sitio web en directo:
- Una vez desplegado, Vercel le proporcionará una URL (por ejemplo,https://my-portfolio.vercel.app). Puedes compartir este enlace con clientes o empleadores potenciales.

Retoques finales

Optimización SEO: El Cabezacomponente enpágina.tsxAquí puedes añadir metaetiquetas, descripciones y palabras clave para mejorar el SEO de tu sitio web.
PersonalizaciónTailwind CSS facilita la modificación del diseño. Por ejemplo, puedes cambiar colores, fuentes y diseños ajustando las clases de Tailwind.
Sigue actualizandoActualiza tu portafolio periódicamente añadiendo nuevos trabajos y mejorando el diseño.

¡Tu sitio web de portafolio ya está en línea! Siguiendo estos pasos, has creado un sitio web sencillo pero elegante para mostrar tu trabajo de efectos visuales. ¡Disfrútalo!

CompStart