Finalize initial configuration of the site

.github/workflows/nuxtjs.yml

@@ -0,0 +1,41 @@
+# https://github.com/actions/deploy-pages#usage
+name: Deploy to GitHub Pages
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - initial-configuration
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      # Pick your own package manager and build script
+      - run: npm install
+      - run: npx nuxt build --preset github_pages
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

CNAME

@@ -0,0 +1 @@
+mertimran.com

README.md

@@ -1,75 +1,35 @@
-# Nuxt Minimal Starter
+# My Personal Nuxt Website
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Welcome to my personal portfolio website, built with [Nuxt](https://nuxt.com/)! It is a static site designed to highlight my skills, projects and previous work.
 
 ## Setup
 
-Make sure to install dependencies:
+Make sure to install dependencies (I recommend `yarn`):
 
 ```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
 yarn install
-
-# bun
-bun install
 ```
 
 ## Development Server
 
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
 yarn dev
-
-# bun
-bun run dev
 ```
 
 ## Production
 
-Build the application for production:
+Generate static build of the application for production:
 
 ```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
+yarn generate
 ```
 
 Locally preview production build:
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
+npx serve .output/public
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  ui: {
+    colorMode: {
+      preference: "light",
+    },
+    main: {
+      base: "min-h-[calc(100vh-var(--ui-header-height)-6rem)]",
+    },
+    colors: {
+      primary: "blue",
+      secondary: "purple",
+      tertiary: "indigo",
+    },
+  },
+});

app/app.vue

@@ -1,6 +1,104 @@
+<script setup lang="ts">
+import type { DropdownMenuItem, NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+const { locale, locales, setLocale } = useI18n();
+const localePath = useLocalePath();
+
+const navigationItems = computed<NavigationMenuItem[]>(() => [
+  {
+    label: $t("nav.home"),
+    to: localePath("/"),
+    active: route.path === "/" || route.path === "/tr",
+  },
+  {
+    label: $t("nav.experience"),
+    to: localePath("/#experience"),
+    active: false,
+  },
+  {
+    label: $t("nav.projects"),
+    to: localePath("projects"),
+    active: route.path.includes("/projects"),
+  },
+]);
+
+const languageItems: DropdownMenuItem[] = locales.value.map((locale) => ({
+  label: locale.name,
+  icon: "i-circle-flags:lang-" + locale.code,
+  onSelect() {
+    setLocale(locale.code);
+  },
+}));
+</script>
+
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <UApp :locale="locale.code">
+    <!-- Navigation Bar -->
+    <UHeader title="Mert İmran" :to="localePath('/')">
+      <UNavigationMenu :items="navigationItems" />
+
+      <template #right>
+        <UColorModeButton />
+
+        <!-- Language Switcher -->
+        <UDropdownMenu arrow :items="languageItems">
+          <UButton icon="i-lucide-languages" color="neutral" variant="ghost" />
+        </UDropdownMenu>
+      </template>
+
+      <template #body>
+        <UNavigationMenu
+          :items="navigationItems"
+          orientation="vertical"
+          class="-mx-2.5"
+        />
+      </template>
+    </UHeader>
+
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <!-- Footer -->
+    <UFooter>
+      <template #left>
+        <p class="text-muted text-sm">
+          {{ $t("footer.copyright") }} © {{ new Date().getFullYear() }}.
+          {{ $t("footer.reserved") }}
+        </p>
+      </template>
+
+      <UNavigationMenu variant="link" />
+
+      <template #right>
+        <UButton
+          icon="i-simple-icons-gmail"
+          color="neutral"
+          variant="ghost"
+          to="mailto:mert.kasim.imran@gmail.com"
+          target="_blank"
+          aria-label="Mail"
+        />
+        <UButton
+          icon="i-simple-icons-github"
+          color="neutral"
+          variant="ghost"
+          to="https://github.com/mertimran"
+          target="_blank"
+          aria-label="GitHub"
+        />
+        <UButton
+          icon="i-simple-icons-linkedin"
+          color="neutral"
+          variant="ghost"
+          to="https://linkedin.com/in/mertimran"
+          target="_blank"
+          aria-label="LinkedIn"
+        />
+      </template>
+    </UFooter>
+  </UApp>
 </template>

app/assets/styles.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../../content/**/*";

app/error.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+defineProps({
+  error: Object as () => NuxtError,
+});
+const localePath = useLocalePath();
+
+const errorMessages: {
+  [key: number]: { statusMessage: string; message: string };
+} = {
+  404: {
+    statusMessage: $t("errors.404.title"),
+    message: $t("errors.404.subtitle"),
+  },
+  500: {
+    statusMessage: $t("errors.500.title"),
+    message: $t("errors.500.subtitle"),
+  },
+};
+</script>
+
+<template>
+  <UError
+    :error="{
+      statusCode: error?.statusCode,
+      statusMessage: errorMessages[error?.statusCode ?? 404]?.statusMessage,
+      message: errorMessages[error?.statusCode ?? 404]?.message,
+    }"
+  >
+    <template #links>
+      <UButton :to="localePath('/')">{{ $t("errors.goBack") }}</UButton>
+    </template>
+  </UError>
+</template>