https://github.com/eliancodes/eliancodes-frontend

My personal website sourcecode! Currently written in Astro, a sparkle of Vue & UnoCSS. Deployed to Vercel
https://github.com/eliancodes/eliancodes-frontend

astrobuild firebase functions unocss vercel vue

Last synced: 14 days ago
JSON representation

My personal website sourcecode! Currently written in Astro, a sparkle of Vue & UnoCSS. Deployed to Vercel

• Host: GitHub
• URL: https://github.com/eliancodes/eliancodes-frontend
• Owner: ElianCodes
• Created: 2020-02-13T17:11:11.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-12T19:19:18.000Z (2 months ago)
• Last Synced: 2024-10-03T12:35:07.281Z (about 1 month ago)
• Topics: astrobuild, firebase, functions, unocss, vercel, vue
• Language: Astro
• Homepage: https://www.elian.codes/
• Size: 146 MB
• Stars: 42
• Watchers: 2
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# The ElianCodes site

The full sourcecode for my personal website.

## Current technologies

(currently) written in [Astro](https://astro.build) and [UnoCSS](https://unocss.dev), deployed to [Vercel](https://vercel.com).

### Previous technologies

This website is a representation of technologies I'm playing with. Here is a list of technologies that have powered this site before:

- [Nuxt](https://nuxtjs.org)

- [Vue](https://vuejs.org)

- [TypeScript](https://www.typescript-lang.com)

- [TailwindCSS](https://tailwindcss.com)

- [UnoCSS](https://unocss.dev)

- [Firebase functions](https://firebase.google.com/docs/functions)

## Deployment and Hosting

At the moment, this website is hosted on Vercel. The DNS is controlled by [CloudFlare](https://www.cloudflare.com).

The website was previously hosted on [Google Cloud Storage](https://cloud.google.com/storage) as a static folder in a public bucket. Then I transitioned to Firebase, since it was easier to manage, cheaper and you get some handy features like preview deploys and such.

Currently, it's deployed as a static Vercel website using the [Astro Vercel adapter](https://docs.astro.build/en/guides/integrations-guide/vercel/). Vercel offers some features I love, like analytics, web vitals info, feature and preview deploys.

## Development setup

To install and manage dependencies, I use [PNPM](https://pnpm.io/).

```bash

# for development

pnpm dev

# for local preview

pnpm build && pnpm preview

```

## Technologies and packages

The base of the website uses [Astro](https://astro.build) to generate and build the (static) site.

### Frontend

At the moment, the UI of the website is built and generated using [Astro](https://astro.build). [Astro](https://astro.build) is an amazing technology to generate static sites (but also supports SSR). If you want to know more about it, feel free to read [their documentation](https://docs.astro.build/getting-started).

#### Components

Most of my templates are written in pure Astro, since I don't need to much interactivity. Components that do require interactivity, are written in vanilla JS.

#### UnoCSS

To define the style of the website, [UnoCSS](https://unocss.dev), with some presets are used. [You can read more about my transition and use here.](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro)