diff --git a/.github/actions/build/action.yml b/.github/actions/build/action.yml deleted file mode 100644 index 0789bf3d..00000000 --- a/.github/actions/build/action.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: "Build" -description: "Run build" -inputs: - ENV_VARS: - description: "Environment variables to set up in .env.local" - required: true - GA_ID: - description: "Google Analytics ID" - required: true -runs: - using: composite - steps: - - uses: ./.github/actions/pnpm-install - - uses: ./.github/actions/setup-env - with: - ENV_VARS: ${{ inputs.ENV_VARS }} - GA_ID: ${{ inputs.GA_ID }} - - name: build - shell: bash - run: pnpm build diff --git a/.github/actions/setup-env/action.yml b/.github/actions/setup-env/action.yml index 71f5313c..f68d0644 100644 --- a/.github/actions/setup-env/action.yml +++ b/.github/actions/setup-env/action.yml @@ -1,17 +1,32 @@ -name: 'Setup Environment Variables' -description: 'Sets up env from GitHub Secrets' +name: "Setup Environment Variables" +description: "Sets up env from GitHub Secrets" inputs: - ENV_VARS: - description: 'Environment variables to set up in .env.local' + NODE_ENV: + description: "either 'development', 'preview', or 'production' & defo not 'prod' or 'dev'" required: true - GA_ID: - description: 'Google Analytics ID to add to .env' + NEXT_PUBLIC_WWW_URL: required: true + NEXT_PUBLIC_BLOG_URL: + required: true + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: + required: true + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: + required: true + runs: using: composite steps: - name: Set up .env shell: bash run: | - echo "${{ inputs.ENV_VARS }}" >> .env.local - echo "GA_ID='${{ inputs.GA_ID }}'" >> .env # Store GA_ID in .env + declare -A env_vars=( + ["NODE_ENV"]="${{ inputs.NODE_ENV }}" + ["NEXT_PUBLIC_WWW_URL"]="${{ inputs.NEXT_PUBLIC_WWW_URL }}" + ["NEXT_PUBLIC_BLOG_URL"]="${{ inputs.NEXT_PUBLIC_BLOG_URL }}" + ["NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID"]="${{ inputs.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }}" + ["NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID"]="${{ inputs.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }}" + ) + + for key in "${!env_vars[@]}"; do + echo "${key}='${env_vars[$key]}'" >> .env + done diff --git a/.github/actions/vercel-build/action.yml b/.github/actions/vercel-build/action.yml index fcccda70..5adf66f7 100644 --- a/.github/actions/vercel-build/action.yml +++ b/.github/actions/vercel-build/action.yml @@ -6,6 +6,9 @@ inputs: project_name: description: "The working directory/project name you're trying to build. Example: 'www', 'blog'" required: true + NODE_ENV: + description: "" + required: true VERCEL_TOKEN: description: "Vercel token for authentication" required: true @@ -15,11 +18,17 @@ inputs: VERCEL_PROJECT_ID: description: "Vercel project ID" required: true - ENV_VARS: - description: "env vars" + NEXT_PUBLIC_WWW_URL: + description: "" + required: true + NEXT_PUBLIC_BLOG_URL: + description: "" required: true - GA_ID: - description: "Google Analytics" + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: + description: "" + required: true + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: + description: "" required: true runs: @@ -29,8 +38,12 @@ runs: - uses: ./.github/actions/pnpm-install - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ inputs.ENV_VARS }} - GA_ID: ${{ inputs.GA_ID }} + NODE_ENV: ${{ inputs.NODE_ENV }} + NEXT_PUBLIC_WWW_URL: ${{ inputs.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ inputs.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ inputs.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ inputs.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + - name: Build for Vercel shell: bash env: diff --git a/.github/actions/vercel-deploy/action.yml b/.github/actions/vercel-deploy/action.yml index 2dc78238..1c56ce7f 100644 --- a/.github/actions/vercel-deploy/action.yml +++ b/.github/actions/vercel-deploy/action.yml @@ -6,14 +6,14 @@ inputs: project_name: description: "The working directory/project name you're trying to deploy. Example: 'www', 'blog'" required: true - deployment_type: - description: "Whether it's 'production' or 'preview'" + NODE_ENV: + description: "Vercel takes care of this" required: true VERCEL_TOKEN: description: "Vercel token for authentication" required: true GITHUB_TOKEN: - description: "GitHub token" + description: "GitHub toaken" required: true runs: @@ -22,7 +22,7 @@ runs: - name: Deploy to Vercel shell: bash run: | - if [ "${{ inputs.deployment_type }}" == "preview" ]; then + if [ "${{ inputs.NODE_ENV }}" == "preview" ]; then cd apps/${{ inputs.project_name }} && \ PREVIEW_URL=$(pnpm --filter @ashgw/${{ inputs.project_name }} deploy:vercel-preview --token=${{ inputs.VERCEL_TOKEN }} | grep -Eo 'https?://[^ ]+') echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_ENV @@ -32,7 +32,7 @@ runs: fi - name: Notify about the deployment URL - if: ${{ inputs.deployment_type == 'preview' }} + if: ${{ inputs.NODE_ENV == 'preview' }} uses: actions/github-script@v6 env: GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }} diff --git a/.github/workflows/blog-preview-deployment.yml b/.github/workflows/blog-preview-deployment.yml index 15aaa449..7ed7ac47 100644 --- a/.github/workflows/blog-preview-deployment.yml +++ b/.github/workflows/blog-preview-deployment.yml @@ -10,21 +10,25 @@ permissions: jobs: deploy: - if: github.event_name == 'pull_request' + if: github.event_name == 'pull_request' && contains(github.event.pull_request.labels[*].name, 'ready-for-preview') runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: ./.github/actions/vercel-build with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} project_name: blog + NODE_ENV: preview + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} - VERCEL_PROJECT_ID: ${{ secrets.VERCEL_BLOG_PROJECT_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WWW_PROJECT_ID }} + - uses: ./.github/actions/vercel-deploy with: - deployment_type: preview + NODE_ENV: preview project_name: blog VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/blog-production-deployment.yml b/.github/workflows/blog-production-deployment.yml index eb38347d..52142155 100644 --- a/.github/workflows/blog-production-deployment.yml +++ b/.github/workflows/blog-production-deployment.yml @@ -15,15 +15,19 @@ jobs: - uses: actions/checkout@v3 - uses: ./.github/actions/vercel-build with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} project_name: blog + NODE_ENV: production + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} - VERCEL_PROJECT_ID: ${{ secrets.VERCEL_BLOG_PROJECT_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WWW_PROJECT_ID }} + - uses: ./.github/actions/vercel-deploy with: - deployment_type: production + NODE_ENV: production project_name: blog VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 18ecb4c8..9828e3ca 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,8 +8,16 @@ jobs: build: runs-on: ubuntu-20.04 steps: - - uses: actions/checkout@v4 - - uses: ./.github/actions/build + - uses: actions/checkout@v3 + - uses: ./.github/actions/pnpm-install + - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "production" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + + - name: build + shell: bash + run: pnpm build diff --git a/.github/workflows/container-registry.yml b/.github/workflows/container-registry.yml index a94181f3..d4850439 100644 --- a/.github/workflows/container-registry.yml +++ b/.github/workflows/container-registry.yml @@ -13,8 +13,11 @@ jobs: - uses: ./.github/actions/pnpm-install - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "production" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} - name: Version extraction id: get_version run: echo "::set-output name=version::$(node -p "require('./package.json').version")" diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index b265e99d..4c9731f3 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -12,7 +12,11 @@ jobs: - uses: ./.github/actions/pnpm-install - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "production" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + - name: format run: pnpm format diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 88646761..ba1c3129 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -12,8 +12,12 @@ jobs: - uses: ./.github/actions/pnpm-install - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "production" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + - uses: ./.github/actions/pnpm-install - name: lint run: pnpm lint diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 14aa55fc..788bde9d 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -17,8 +17,12 @@ jobs: node-version: ${{ matrix.node-version }} - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "development" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + - name: Running code tests run: pnpm test:unit-integration @@ -30,8 +34,12 @@ jobs: - uses: ./.github/actions/pnpm-install - uses: ./.github/actions/setup-env with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} + NODE_ENV: "development" + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} + - name: Install dependencies run: npm install -g pnpm && pnpm install --frozen-lockfile - name: Install Playwright Browsers diff --git a/.github/workflows/www-preview-deployment.yml b/.github/workflows/www-preview-deployment.yml index ccfc408a..4f033861 100644 --- a/.github/workflows/www-preview-deployment.yml +++ b/.github/workflows/www-preview-deployment.yml @@ -10,21 +10,25 @@ permissions: jobs: deploy: - if: github.event_name == 'pull_request' + if: github.event_name == 'pull_request' && contains(github.event.pull_request.labels[*].name, 'ready-for-preview') runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: ./.github/actions/vercel-build with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} project_name: www + NODE_ENV: preview + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WWW_PROJECT_ID }} + - uses: ./.github/actions/vercel-deploy with: - deployment_type: preview + NODE_ENV: preview project_name: www VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/www-production-deployment.yml b/.github/workflows/www-production-deployment.yml index 0cb588b4..ef4992f8 100644 --- a/.github/workflows/www-production-deployment.yml +++ b/.github/workflows/www-production-deployment.yml @@ -15,15 +15,19 @@ jobs: - uses: actions/checkout@v4 - uses: ./.github/actions/vercel-build with: - ENV_VARS: ${{ secrets.ENV_VARS }} - GA_ID: ${{ secrets.GA_ID }} project_name: www + NODE_ENV: production # TODO: remove either deployment type or node env + NEXT_PUBLIC_WWW_URL: ${{ secrets.NEXT_PUBLIC_WWW_URL }} + NEXT_PUBLIC_BLOG_URL: ${{ secrets.NEXT_PUBLIC_BLOG_URL }} + NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_WWW_GOOGLE_ANALYTICS_ID }} + NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_BLOG_GOOGLE_ANALYTICS_ID }} VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WWW_PROJECT_ID }} + - uses: ./.github/actions/vercel-deploy with: - deployment_type: production + NODE_ENV: production project_name: www VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.husky/pre-push b/.husky/pre-push index 32f7785e..f275690c 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -2,4 +2,3 @@ . "$(dirname -- "$0")/_/husky.sh" # pnpm lint # pnpm test -# TODO: uncomment this later diff --git a/apps/blog/next.config.js b/apps/blog/next.config.js index 2c56ef94..12157524 100644 --- a/apps/blog/next.config.js +++ b/apps/blog/next.config.js @@ -3,12 +3,8 @@ import { createJiti } from "jiti"; import baseConfig from "@ashgw/next-config/base.js"; -/* - @see https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/next.config.js - for env vars validation -*/ -// Import env files to validate at build time. Use jiti so we can load .ts files in here. -await createJiti(fileURLToPath(import.meta.url)).import("./src/env"); +// Import the env file to validate at build time. Use jiti so we can load .ts files in here. +await createJiti(fileURLToPath(import.meta.url)).import("@ashgw/env"); /** @type {import("next").NextConfig} */ const config = { diff --git a/apps/blog/package.json b/apps/blog/package.json index 3a2f7b9c..e1957643 100644 --- a/apps/blog/package.json +++ b/apps/blog/package.json @@ -4,14 +4,14 @@ "private": true, "type": "module", "scripts": { - "build": "next build", - "build:vercel": "vercel build --yes", - "deploy:vercel-preview": "vercel deploy --prebuilt", - "deploy:vercel-prod": "vercel deploy --prod --prebuilt", + "build": "pnpm next build", + "dev": "pnpm next dev", + "build:vercel": "pnpm vercel build --yes", + "deploy:vercel-preview": "pnpm vercel deploy --prebuilt", + "deploy:vercel-prod": "pnpm vercel deploy --prod --prebuilt", "clean": "git clean -xdf .cache .next .turbo node_modules", "postbuild": "echo 'next-sitemap'", - "dev": "next dev", - "start": "next start", + "start": "pnpm next start", "test": "pnpm test:unit-integration; pnpm test:e2e", "test:unit-integration": "vitest run --config=vitest.config.ts", "test:e2e": "cd test/e2e && npx playwright test", @@ -46,7 +46,7 @@ "vitest": "catalog:", "autoprefixer": "^10.0.1", "eslint": "catalog:", - "jiti": "^2.3.3", + "jiti": "catalog:", "prettier": "catalog:", "tailwind-variants": "^0.1.20", "tailwindcss": "catalog:", @@ -58,6 +58,7 @@ "dependencies": { "@ashgw/ui": "workspace:*", "@ashgw/css": "workspace:*", + "@ashgw/env": "workspace:*", "@gsap/react": "^2.1.0", "@next/third-parties": "^15.0.2", "@nextui-org/react": "^2.2.9", @@ -66,7 +67,6 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "dotenv": "^16.3.1", "framer-motion": "^10.17.4", "front-matter": "^4.0.2", "gsap": "^3.12.5", diff --git a/apps/blog/src/app/components/pages/home/components/BlogPostCards.tsx b/apps/blog/src/app/components/pages/home/components/BlogPostCards.tsx deleted file mode 100644 index 634e31ed..00000000 --- a/apps/blog/src/app/components/pages/home/components/BlogPostCards.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function BlogPostCards() { - return ( -
- WIP -
- ); -} diff --git a/apps/blog/src/app/components/pages/home/components/HeroSection.tsx b/apps/blog/src/app/components/pages/home/components/HeroSection.tsx new file mode 100644 index 00000000..0f8af61a --- /dev/null +++ b/apps/blog/src/app/components/pages/home/components/HeroSection.tsx @@ -0,0 +1,103 @@ +"use client"; + +import { motion } from "framer-motion"; + +import { Button } from "@ashgw/ui"; + +import { Text } from "./Text"; +import { TypingAnimation } from "./TypingAnimation"; + +export function HeroSection() { + const TRANSITION_DURATION = 0.3; + const TRANSITION_DELAY = 0.4; + const transition = { + duration: TRANSITION_DURATION, + delay: TRANSITION_DELAY, + }; + return ( + +
+
+
+ +

+ + Hey, I'm AG + +

+

+ +

+ + + + Welcome to my corner on the internet, where it serves as my + brain dump for a thing or two I learned throughout the years. + Have a look around, if you like what you see + + +
+
+ + + +
+
+
+ + ); +} diff --git a/apps/blog/src/app/components/pages/home/components/Text.tsx b/apps/blog/src/app/components/pages/home/components/Text.tsx new file mode 100644 index 00000000..5832ade0 --- /dev/null +++ b/apps/blog/src/app/components/pages/home/components/Text.tsx @@ -0,0 +1,22 @@ +import type { PropsWithChildren } from "react"; +import { motion } from "framer-motion"; + +export function Text({ children }: PropsWithChildren>) { + return ( + + {children} + + ); +} diff --git a/apps/blog/src/app/components/pages/home/components/TypingAnimation.tsx b/apps/blog/src/app/components/pages/home/components/TypingAnimation.tsx new file mode 100644 index 00000000..035f5d3a --- /dev/null +++ b/apps/blog/src/app/components/pages/home/components/TypingAnimation.tsx @@ -0,0 +1,30 @@ +"use client"; + +import { useEffect, useRef } from "react"; +import Typed from "typed.js"; + +export function TypingAnimation() { + const el = useRef(null); + + useEffect(() => { + const typed = new Typed(el.current, { + strings: [ + 'I design.', + 'I build.', + 'I solve software', + ], + typeSpeed: 50, + loop: true, + }); + + return () => { + typed.destroy(); + }; + }, []); + + return ( +
+ +
+ ); +} diff --git a/apps/blog/src/app/components/pages/home/index.tsx b/apps/blog/src/app/components/pages/home/index.tsx index 32463eb3..4fea7bab 100644 --- a/apps/blog/src/app/components/pages/home/index.tsx +++ b/apps/blog/src/app/components/pages/home/index.tsx @@ -1,10 +1,10 @@ import { Footer } from "./../../shared/footer"; -import { BlogPostCards } from "./components/BlogPostCards"; +import { HeroSection } from "./components/HeroSection"; export function HomePage() { return ( <> - +