# Astro Modern Personal Website ![Astro Modern Personal Website](public/social_img.png) Modern Personal Website Template with Project Section, CV Section, Paginated Blog, RSS Feed, SEO Friendly, Visual themes and Responsive Desing for Astro framework. ## Demo View a live demo of the [Astro Modern Personal Website](https://astro-modern-personal-website.netlify.app/) ## 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 ``` php ├── 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](https://daisyui.com/components/mask/). The used social-icons are SVG form [BoxIcons](https://boxicons.com/) pack. #### TimeLine The timeline components are used to conform the CV. ``` html