Seyed Mostafa portfolio: Getting Started

Seyed Mostafa portfolio is designed to be configurable. This article will cover the basics on configuring the site and make it personal.

First let’s change the url

//astro.config.mjs

export default defineConfig({
  site: "https://mostafa-hashemi.com", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})

Next, Let’s configure the Site

// src/consts.ts

export const SITE: Site = {
  TITLE: "Seyed Mostafa portfolio",
  DESCRIPTION: "Welcome to Seyed Mostafa portfolio, a portfolio and blog for designers and developers.",
  AUTHOR: "Mark Horn",
}

Field	Type	Description
TITLE	String	The title of the website. Displayed in header and footer. Used in SEO.
DESCRIPTION	String	The description of the index page of the website. Used in SEO.
AUTHOR	String	Your name.

Change the branding

The browser icon is located in /public/favicon.svg

The header and footer branding icon is located in /public/brand.svg as a sprite with id=“brand”

The rest of the consts file

Each page has a metadata entry that is useful for SEO.

export const WORK: Page = {
  TITLE: "Work",
  DESCRIPTION: "Places I have worked.",
}

The links that are displayed in the header and drawer

export const LINKS: Links = [
  { HREF: "/", TEXT: "Home" },
  { HREF: "/work", TEXT: "Work" },
  { HREF: "/blog", TEXT: "Blog" },
  { HREF: "/projects", TEXT: "Projects" },
]

The social media links

export const SOCIALS: Socials = [
  { 
    NAME: "Github",
    ICON: "github",
    TEXT: "markhorn-dev",
    HREF: "https://github.com/markhorn-dev/astro-sphere"
  },
]

Field	Type	Required	Description
NAME	string	yes	Accessible name
ICON	string	yes	Refers to the symbol id in `public/social.svg`
TEXT	string	yes	Shorthand profile name
HREF	string	yes	The link to the social media profile