https://github.com/gamemann/portfolio

My website portfolio that utilizes Astro, React, TypeScript, and Tailwind CSS.
https://github.com/gamemann/portfolio

animation astro fast homepage javascript open-source portfolio react tailwind tailwind-intersect tailwind-motion tailwindcss typescript

Last synced: about 9 hours ago
JSON representation

My website portfolio that utilizes Astro, React, TypeScript, and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/gamemann/portfolio
• Owner: gamemann
• Created: 2025-01-30T00:30:46.000Z (16 days ago)
• Default Branch: main
• Last Pushed: 2025-02-06T03:00:37.000Z (9 days ago)
• Last Synced: 2025-02-13T19:52:18.526Z (1 day ago)
• Topics: animation, astro, fast, homepage, javascript, open-source, portfolio, react, tailwind, tailwind-intersect, tailwind-motion, tailwindcss, typescript
• Language: Astro
• Homepage: https://cdeacon.net
• Size: 26.1 MB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
My portfolio [website](https://cdeacon.net) that utilizes [Astro](https://astro.build/), [React](https://react.dev/), and [Tailwind CSS](https://tailwindcss.com/).

![Preview](./preview/preview.gif)

## Running

Here are commands you can use to run the web server through Astro (for developer use).

```bash

# Clone repository.

git clone https://github.com/gamemann/portfolio

# Change directory.

cd portfolio

# Install packages.

npm install

# Run Astro's dev server available on port 4321 by default.

# NOTE - You can pass --host 
 to listen on specific IP addresses (or all with 0.0.0.0).

npx astro dev

```


If you want to run this application in production, I recommend looking into [Docker](https://docs.astro.build/en/recipes/docker/).

## Configuration

There are two environmental variables you can configure inside of the `.env` file located in the root of this repository (rename or copy `.env.example` to `.env` if you haven't already).

### `PUBLIC_GOOGLE_ANALYTICS_ID`

If you want Google Analytics support, you will need to set this variable to your property's ID.

### `PUBLIC_EMAIL_ENCODE`

If you want the **Email Me** button included, you will need to set this variable to the Base64-encoded value of your email address. You can generate an encoded value for your email address with the below command on most Linux systems.

```bash

echo -n '' | base64

```

For spam protection, instead of storing the email address inside of the HTML code returned by the server, we decode the value of this environmental variable inside of the client-side JavaScript code after the user clicks the button + confirms they want to email you.

While I'm sure there are more secure solutions available such as advanced CAPTCHAs, etc. I just wanted a quick and easy way to eliminate a majority of spam bots, especially since most spam bots don't utilize JavaScript.

If I do end up still getting spam through my email, I will most likely look into implementing a third-party library.