mirror of
https://codeberg.org/andyscott-pages/andyscott-dot-me.git
synced 2024-12-22 01:33:11 -05:00
updating readme file and some other stufs
This commit is contained in:
Manuel Ernesto Garcia
parent
cd8e8ea6c9
commit
7c8d8752bf
9 changed files with 127 additions and 22 deletions
125
README.md
125
README.md
|
|
@ -1,5 +1,28 @@
|
|||
# astro-personal-website
|
||||
Personal Website template with blog and themes made with Astro
|
||||
# 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
|
||||
|
||||
``` bash
|
||||
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.
|
||||
|
||||
``` bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Tech Stack
|
||||
|
||||
- [Astro](astro.build)
|
||||
- [tailwindcss](https://tailwindcss.com/)
|
||||
- [DaisyUI](https://daisyui.com/)
|
||||
|
||||
|
||||
|
||||
## Project Strucutre
|
||||
|
||||
|
|
@ -12,23 +35,107 @@ Personal Website template with blog and themes made with Astro
|
|||
│ │ ├── Card.astro
|
||||
│ │ ├── Footer.astro
|
||||
│ │ ├── Header.astro
|
||||
│ │ └-─ HorizontalCard.jsx
|
||||
│ │ └-─ SideBar.jsx
|
||||
│ │ └── HorizontalCard.jsx
|
||||
│ │ └── SideBar.jsx
|
||||
│ ├── layouts/
|
||||
│ │ └-─ BaseLayout.astro
|
||||
│ │ └-─ PostLayout.astro
|
||||
│ │ └── BaseLayout.astro
|
||||
│ │ └── PostLayout.astro
|
||||
│ └── pages/
|
||||
│ │ ├── posts/
|
||||
│ │ ├── blog/
|
||||
│ │ │ ├── [page].astro
|
||||
│ │ │ ├── post1.md
|
||||
│ │ │ ├── post2.md
|
||||
│ │ │ └── post3.md
|
||||
│ │ └── cv.astro
|
||||
│ │ └── index.astro
|
||||
│ │ └── projects.astro
|
||||
│ │ └── rss.xml.js
|
||||
│ └── styles/
|
||||
│ └-─ global.css
|
||||
│ └── global.css
|
||||
├── public/
|
||||
│ ├── favicon.svg
|
||||
│ └-─ social-image.png
|
||||
│ └── 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.
|
||||
#### TimeLine
|
||||
|
||||
The timeline components are used to conform the CV.
|
||||
|
||||
``` html
|
||||
<div class="time-line-container">
|
||||
<TimeLineElement
|
||||
title="Element Title"
|
||||
subtitle="Subtitle"
|
||||
desc="Description"
|
||||
/>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Card & HorizontalCard
|
||||
``` html
|
||||
<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](https://daisyui.com/docs/themes/).
|
||||
|
||||
### Deploy
|
||||
|
||||
The configuration for the deployment varies depending on the platform where you are going to do it. See the [official Astro information](https://docs.astro.build/en/guides/deploy/) to deploy your website.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Astro Personal Website Template",
|
||||
"description": "Astro personal website template with Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Visual themes and Responsive Desing.",
|
||||
"name": "Astro Minimalist Personal Website",
|
||||
"description": "Astro Minimalist personal website template with Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Visual themes and Responsive Desing.",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
const { title, img, desc, url, badge, tags } = Astro.props;
|
||||
const { title, img, desc, url, badge, tags, target = '_blank' } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="md:w-1/3 w-full">
|
||||
<a href={url} target="_blank">
|
||||
<a href={url} target={target}>
|
||||
<div class="card bg-base-100 transition ease-in-out hover:shadow-xl mx-6 my-2 hover:scale-[102%]">
|
||||
<figure><img src={img} alt="Shoes" /></figure>
|
||||
<div class="card-body">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
---
|
||||
const { title, img, desc, url, badge, tags, target } = Astro.props;
|
||||
|
||||
let cardTarget = target ? target : "_blank";
|
||||
const { title, img, desc, url, badge, tags, target = '_blank' } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
|
||||
<a href={url} target={cardTarget}>
|
||||
<a href={url} target={target}>
|
||||
<div class="hero-content flex-col md:flex-row">
|
||||
<img src={img} class="max-w-full md:max-w-[13rem] rounded-lg" />
|
||||
<div class="grow w-full">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: "../../layouts/BlogPost.astro"
|
||||
layout: "../../layouts/PostLayout.astro"
|
||||
title: "Demo Post 1"
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
pubDate: "Sep 10 2022"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: "../../layouts/BlogPost.astro"
|
||||
layout: "../../layouts/PostLayout.astro"
|
||||
title: "Demo Post 2"
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
pubDate: "Sep 11 2022"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: "../../layouts/BlogPost.astro"
|
||||
layout: "../../layouts/PostLayout.astro"
|
||||
title: "Demo Post 3"
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
pubDate: "Sep 12 2022"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import TimeLineElement from "../components/cv/TimeLine.astro";
|
|||
<div class="text-3xl w-full font-bold">Experience</div>
|
||||
</div>
|
||||
|
||||
<div class="time-line-container grid gap-4 mb-10">
|
||||
<div class="time-line-container mb-10">
|
||||
<TimeLineElement
|
||||
title="UI Designer and Developer at Integral Access Control System (Thesis)"
|
||||
subtitle="From 2015 at XETID, Habana, Cuba"
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const last_posts = posts.slice(0, 3);
|
|||
/>
|
||||
|
||||
<div>
|
||||
<div class="text-3xl w-full font-bold mb-5 mt-10">Last from blog</div>
|
||||
<div class="text-3xl w-full font-bold mb-5 mt-10">Latest from blog</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue