Gamefolio - Game Developer Portfolio

Get started with Gamefolio, a portfolio template for game developer, with this step-by-step guide to setup and customization.

Setup and Installation

Step 1: Prepare Your Tools

Ensure you have the necessary tools installed on your system before setting up the Gamefolio template.

Node.js and npm: Download and install from nodejs.org.
Code Editor: Use Visual Studio Code, Sublime Text, or any editor of your choice.
Terminal: A command-line interface (Terminal).

Step 2: Open the Project

Download or clone the Gamefolio template and open it in your code editor.

Unzip the template folder
Open the project folder in your code editor (e.g., VS Code).
Navigate to the root directory in your terminal.

Step 3: Install Dependencies and Run the Project

Install dependencies and start the development server using npm.

npm install: Installs all project dependencies.
npm run dev: Starts the development server (usually at http://localhost:4321).
npm run build: Builds the production-ready files.

Step 4: Customize Appearance

Personalize the template by modifying styles, content, and data to match your project.

Edit Astro files src/pages (e.g., index.astro, blogs.astro) to update content.
Replace images in public/img with your project photos.

Customization

1. Customize Style Tailwind

Gamefolio uses Tailwind CSS for styling. You can customize the global styles in src/styles/global.css or apply Tailwind classes directly in HTML files.

Edit src/styles/global.css to modify colors, fonts, or spacing (e.g., change --color-bg).
Add Tailwind classes directly in HTML files for quick styling (e.g., bg-blue-500, text-2xl).

2. Add Custom CSS

For styles beyond Tailwind’s utility classes, add custom CSS directly in src/styles/global.css.

Create custom animations, keyframes, or complex layouts.
Override default styles for specific components (e.g., sidebar, buttons).


@import "tailwindcss";
@theme {
    --font-sans: 'Poppins', monospace;
    --font-game: 'Press Start 2P', monospace;
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  input::placeholder,
  textarea::placeholder {
    color: theme(--color-gray-400);
  }
  button, [role="button"] {
    cursor: pointer;
  }
}
@custom-variant dark (&:where(.dark, .dark *));

Documentation