My personal/portfolio site
Find a file
2022-10-01 09:07:02 -04:00
.vscode initial commit 2022-09-14 10:14:29 -04:00
public improving other stuffs 2022-09-26 15:02:08 -04:00
src updating readme, footer and avatar img 2022-10-01 09:07:02 -04:00
.gitignore initial commit 2022-09-14 10:14:29 -04:00
.npmrc initial commit 2022-09-14 10:14:29 -04:00
astro.config.mjs initial commit 2022-09-14 10:14:29 -04:00
LICENSE Initial commit 2022-09-14 10:08:23 -04:00
package-lock.json improving blog posts and blog page 2022-09-23 22:39:34 -04:00
package.json updating name 2022-10-01 07:28:55 -04:00
README.md updating readme, footer and avatar img 2022-10-01 09:07:02 -04:00
tailwind.config.cjs improving blog posts and blog page 2022-09-23 22:39:34 -04:00
tsconfig.json initial commit 2022-09-14 10:14:29 -04:00

Astro Minimalist Personal Website

Minimalist Personal Website Template with Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Visual themes and Responsive Desing for Astro framework.

Installation

Run the following command in your terminal

npm 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.

npm run dev

Tech Stack

Project Strucutre

├── src/ 
   ├── components/
      ├── cs/
         ├── TimeLine 
      ├── BaseHead.astro
      ├── Card.astro 
      ├── Footer.astro 
      ├── Header.astro 
      └── HorizontalCard.jsx
      └── SideBar.jsx
   ├── layouts/
      └── BaseLayout.astro
      └── PostLayout.astro
   └── pages/
      ├── blog/
         ├── [page].astro
         ├── post1.md
         ├── post2.md
         └── post3.md
      └── cv.astro
      └── index.astro
      └── projects.astro
      └── rss.xml.js
   └── styles/
       └── global.css
├── public/
   ├── favicon.svg
   └── social-image.png
   └── sprofile.jpg
   └── social_img.webp
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json

Components usage

Layout Components

The BaseHead, Footer, Header and SideBar components are already included in the layout sistem. To change the website content you can edit the content of this componenets.

SideBar

In the Sidebar you can change the links to all your website pages.

You can change your avatar shape using mask classes.

The used social-icons are SVG form BoxIcons pack.

TimeLine

The timeline components are used to conform the CV.

 <div class="time-line-container">
    <TimeLineElement
      title="Element Title"
      subtitle="Subtitle"
      desc="Description"
    />
    ...
</div>

Card & HorizontalCard

   <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']}
    />

Layouts

Include BaseLayout in each page you add and PostLayout to your post pages.

Pages

Blog

Add your md blog post in the /pages/blog/ folder.

[page].astro

The [page].astro is the route to work with the paginated post list. You can change there the number of items listed for each page and the pagination button labels.

Post format

Add code with this format in the top of each post file.

---
layout: "../../layouts/PostLayout.astro"
title: "Post Title"
description: "Description"
pubDate: "Post date format(Sep 10 2022)"
heroImage: "Post Hero Image URL"
---

Static pages

The other pages inlcuded in the template are static pages. The index page belong to the root page. You can add your pages directly in the /pages folder and then add a link to that 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.

Theming

For change the template theme change the data-theme atribute of the <html> tag in BaseLayout.astro file.

You can chose among 30 themes available or create your custom theme. See themes available here.

Deploy

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.