Make your presence stand out on your path to success!
"Hi there!, I'm Brian. I hope this small template helps you gain visibility while you build great projects. Thank you for using it. I wish you success in everything you set out to do; you will surely achieve great things.
You can help me by following me, giving a Star to the template, and sharing it so others can see and use it.
Have a great day!"
Inside of your Astro project, you'll see the following folders and files:
public/├── files/| └── resume-cv.pdf├── images/| └── profile2.webp├── favicon.icosrc/├── components/│ └── Card.astro├── layouts/│ └── BaseLayout.astro├── pages/│ └── index.astro├── styles/│ ├── global.css│ └── card.css
This guide explains how to customize the template for your personal use. In the src/pages/index.astro
title
: This change will be reflected in the browser tab.description
: This is a metadata tag used to provide a brief description of your page in search engines.name
: Enter your name here.position
: Enter your job position here.about me
: Write a brief description of who you are and what you do. It's recommended to keep it under 540 characters.linkedin
and github
: Enter the URLs to your personal pages here.cvLink
: Provide the URL to your resume in PDF format for download.profileImage
: Upload your professional profile picture here.public/files
folder.public/images
folder. It's recommended to use the .webp format for better web performance.public/favicon.ico
file with your own, preferably keeping the same file name.src/layouts
folder, you will find the BaseLayout.astro
file. This file contains the complete HTML structure. Here, you will see references to the favicon, Google fonts, and Bootstrap icons.src/styles
folder, you will find the styles for the Card. You can make visual changes here, such as modifying colors, fonts, sizes, etc.Easy, Right?
Follow these steps to initialize and deploy your template using Astro and Netlify.
Make sure you have the following installed on your machine:
Clone the Template Repository
https://github.com/alcarazbrian/professional-card-astro.gitcd professional-card-astro
Install Dependencies
npm install
Download the ZIP File
Download the template as a ZIP file from the repository's GitHub page.
Extract the ZIP File
Extract the contents of the ZIP file to your desired location.
Navigate to the Project Directory
Open your terminal and navigate to the extracted directory.
cd path-to-extracted-directory
Install Dependencies
npm install
To start the development server, run:
npm run dev
This command will start the Astro development server. You can view your site at http://localhost:4321. Any changes you make to the project files will be reflected in real time in your browser. To stop the development server, press Ctrl+C in the terminal.
To build the project for production, run:
npm run build
Build the Project
Ensure your project is built by running:
npm run build
Drag and Drop
Go to Netlify Drop. Drag and drop the dist
folder from your project directory into the Netlify Drop area. This will upload and deploy your site.
Your site should now be live on Netlify. You can view the live site URL in the output of the command or from your Netlify dashboard.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:4321 |
npm run build | Build your production site to ./dist/ |
Feel free to check Astro documentation or jump into Astro Discord server.
Make your presence stand out on your path to success!
"Hi there!, I'm Brian. I hope this small template helps you gain visibility while you build great projects. Thank you for using it. I wish you success in everything you set out to do; you will surely achieve great things.
You can help me by following me, giving a Star to the template, and sharing it so others can see and use it.
Have a great day!"
Inside of your Astro project, you'll see the following folders and files:
public/├── files/| └── resume-cv.pdf├── images/| └── profile2.webp├── favicon.icosrc/├── components/│ └── Card.astro├── layouts/│ └── BaseLayout.astro├── pages/│ └── index.astro├── styles/│ ├── global.css│ └── card.css
This guide explains how to customize the template for your personal use. In the src/pages/index.astro
title
: This change will be reflected in the browser tab.description
: This is a metadata tag used to provide a brief description of your page in search engines.name
: Enter your name here.position
: Enter your job position here.about me
: Write a brief description of who you are and what you do. It's recommended to keep it under 540 characters.linkedin
and github
: Enter the URLs to your personal pages here.cvLink
: Provide the URL to your resume in PDF format for download.profileImage
: Upload your professional profile picture here.public/files
folder.public/images
folder. It's recommended to use the .webp format for better web performance.public/favicon.ico
file with your own, preferably keeping the same file name.src/layouts
folder, you will find the BaseLayout.astro
file. This file contains the complete HTML structure. Here, you will see references to the favicon, Google fonts, and Bootstrap icons.src/styles
folder, you will find the styles for the Card. You can make visual changes here, such as modifying colors, fonts, sizes, etc.Easy, Right?
Follow these steps to initialize and deploy your template using Astro and Netlify.
Make sure you have the following installed on your machine:
Clone the Template Repository
https://github.com/alcarazbrian/professional-card-astro.gitcd professional-card-astro
Install Dependencies
npm install
Download the ZIP File
Download the template as a ZIP file from the repository's GitHub page.
Extract the ZIP File
Extract the contents of the ZIP file to your desired location.
Navigate to the Project Directory
Open your terminal and navigate to the extracted directory.
cd path-to-extracted-directory
Install Dependencies
npm install
To start the development server, run:
npm run dev
This command will start the Astro development server. You can view your site at http://localhost:4321. Any changes you make to the project files will be reflected in real time in your browser. To stop the development server, press Ctrl+C in the terminal.
To build the project for production, run:
npm run build
Build the Project
Ensure your project is built by running:
npm run build
Drag and Drop
Go to Netlify Drop. Drag and drop the dist
folder from your project directory into the Netlify Drop area. This will upload and deploy your site.
Your site should now be live on Netlify. You can view the live site URL in the output of the command or from your Netlify dashboard.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:4321 |
npm run build | Build your production site to ./dist/ |
Feel free to check Astro documentation or jump into Astro Discord server.