A terminal-inspired personal portfolio website built with Astro and styled with Tailwind CSS v4. Features a minimalist design with Tokyo Night color scheme.

• Terminal UI Design: Unix-style command prompt interface
• Responsive Layout: Mobile-first design that works on all devices
• SEO Optimized: Complete meta tags for search engines and social media
• Fast Performance: Built with Astro for optimal loading speeds
• Type-Safe: TypeScript support with strict mode
• Icon System: Carbon Design System icons via astro-icon
• Code Formatting: Prettier configured for consistent code style

• Astro 5.16.0 - Static site framework
• Tailwind CSS 4.1.17 - Utility-first CSS framework
• astro-icon - Icon component system
• Carbon Icons - IBM's open-source icon library
• TypeScript - Type safety and better DX

• Node.js 18+
• npm or your preferred package manager

# Clone the repository
git clone https://github.com/yourusername/francescozorzi.me.git
cd francescozorzi.me

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:4321 to see your site.

/
├── public/
│   └── favicon.svg          # Site favicon
├── src/
│   ├── components/
│   │   └── TerminalPrompt.astro  # Reusable terminal prompt component
│   ├── pages/
│   │   └── index.astro      # Main landing page
│   └── styles/
│       └── global.css       # Global styles and Tailwind theme
├── astro.config.mjs         # Astro configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Dependencies and scripts
└── CLAUDE.md               # AI assistant guidance file

Edit src/pages/index.astro and modify the personalInfo object:

const personalInfo = {
  name: "francesco.zorzi",
  host: "me",
  bio: "your bio here",
  links: [
    { name: "resume.pdf", icon: "carbon:document-pdf", url: "your-url" },
    { name: "linkedin", icon: "carbon:logo-linkedin", url: "your-url" },
    // Add more links...
  ],
};

Modify the seo object in src/pages/index.astro:

const seo = {
  title: "Your Name | Your Title",
  description: "Your description",
  canonical: "https://yourdomain.com",
  // ... update og and twitter card info
};

Edit the color variables in src/styles/global.css:

@theme {
  --color-tokyo-bg: #1a1b26;
  --color-tokyo-fg: #c0caf5;
  --color-tokyo-border: #414559;
  --color-tokyo-user: #7aa2f7;
  --color-tokyo-host: #bb9af7;
}

Browse the Carbon Icons library and use any icon by its name:

<Icon name="carbon:icon-name" />

The site can be deployed to any static hosting platform:

• Vercel
• Netlify
• Cloudflare Pages
• GitHub Pages

Build command: npm run build Output directory: dist

MIT License - feel free to use this template for your own portfolio!