This is my personal portfolio using Astro with Astrofy Template and DaisyUI + TailwindCSS.
Run the following command in your terminal
pnpm install
Once the packages are installed you are ready to run astro. Astro comes with a built-in development server that has everything you need for project development. The astro dev command will start the local development server so that you can see your new website in action for the very first time.
pnpm run dev
├── src/
│ ├── components/
│ │ ├── cv/
│ │ │ ├── TimeLine
│ │ ├── BaseHead.astro
│ │ ├── Card.astro
│ │ ├── Footer.astro
│ │ ├── Header.astro
│ │ └── HorizontalCard.astro
│ │ └── SideBar.astro
│ │ └── SideBarMenu.astro
│ │ └── SideBarFooter.astro
│ ├── layouts/
│ │ └── BaseLayout.astro
│ │ └── PostLayout.astro
│ └── pages/
│ │ └── cv.astro
│ │ └── index.astro
│ │ └── projects.astro
│ ├── styles/
│ │ └── global.css
│ └── config.ts
├── public/
│ ├── favicon.svg
│ └── profile.webp
│ └── social_img.webp
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json
You can change global site configuration on '/src/config.ts' file:
- SITE_TITLE: Default pages title.
- SITE_DESCRIPTION: Default pages title.
- GENERATE_SLUG_FROM_TITLE: By default Astrofy will generate the blog slug pages base on the article name. Set this var to false if you want to use the Astro file base (Compatible with Astrofy older versions).
- TRANSITION_API: Enable and disable transition API
The BaseHead
, Footer
, Header
, and SideBar
components are already included in the layout system. To change the website content you can edit the content of these components.
In the Sidebar you can change your profilePicture, links to all your website pages, and your social icons.
You can change your avatar shape using mask classes.
The used social-icons are SVG form BoxIcons pack. You can replace the icons in the SideBarFooter
component
To add a new page in the sidebar go to the SideBarMenu
component.
<li><a class="py-3 text-base" id="home" href="/">Home</a></li>
Note: In order to change the sidebar menu's active item, you need to setup the prop sideBarActiveItemID
in the BaseLayout
component of your new page and add that id to the link in the SideBarMenu
The timeline components are used to confirm the CV.
<div class="time-line-container">
<TimeLineElement title="Element Title" subtitle="Subtitle">
Content that can contain
<div>divs</div>
and <span>anything else you want</span>.
</TimeLineElement>
...
</div>
The cards are primarly used for the Project and the Blog components. They include a picture, a title, and a description.
<HorizontalCard title="Card Title" img="imge_url" desc="Description" url="Link
URL" target="Optional link target (_blank default)" badge="Optional badge"
tags={['Array','of','tags']} />
This component is already included in the Store layout of the template. In case you want to use it in another place these are the props.
<HorizontalShopItem
title="Item Title"
img="imge_url"
desc="Item description"
pricing="current_price"
oldPricing="old_price"
checkoutUrl="external store checkout url"
badge="Optional badge"
url="item details url"
custom_link="Custom link url"
custom_link_label="Cutom link btn label"
target="Optional link target (_self default)"
/>
To add a custom component, you can create a .astro file in the components folder under the source folder.
Components must follow this template. The ---
represents the code fence and uses Javascript and can be used for imports.
The HTML component is the actual style of your new component.
---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->
For more details, see the astro components documentation here.
Include BaseLayout
in each page you add and PostLayout
to your post pages.
The BaseLayout defines a general template for each new webpage you want to add. It imports constants SITE_TITLE and SITE_DESCRIPTION which can be modified in the ../config
folder. Data placed there can be imported anywhere using import.
You can add a content collection in `/content/' folder, you will need add it at config.ts.
Where you need to define your content collections, we define our content schemas too.
Add your md
blog post in the /content/blog/
folder.
Add code with this format in the top of each post file.
---
title: "Post Title"
description: "Description"
pubDate: "Post date format(Sep 10 2022)"
heroImage: "Post Hero Image URL"
---
The other pages included in the template are static pages. The index
page belongs to the root page. You can add your pages directly in the /pages
folder and then add a link to those pages in the sidebar
component.
Feel free to modify the content included in the pages that the template contains or add the ones you need.
To change the template theme change the data-theme
attribute of the <html>
tag in BaseLayout.astro
file.
You can choose among 30 themes available or create your custom theme. See themes available here.
The Sitemap is generated automatically when you build your website in the root of the domain. Please update the robots.txt
file in the public folder with your site name URL for the Sitemap.
You can deploy your site on your favourite static hosting service such as Vercel, Netlify, GitHub Pages, etc.
The configuration for the deployment varies depending on the platform where you are going to do it. See the official Astro information to deploy your website.
⚠️ CAUTION
The Blog pagination of this template is implemented using dynamic route parameters in its filename and for now this format is incompatible with SSR deploy configs, so please use the default static deploy options for your deployments.
Astrofy is licensed under the MIT license — see the LICENSE file for details.