merge

.github/workflows/deploy.yaml

@@ -0,0 +1,44 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v5
+      - name: Install, build, and upload your site
+        uses: withastro/action@v5
+        with: 
+          package-manager: npm
+        # with:
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 24 # The specific version of Node that should be used to build your site. Defaults to 22. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+          # build-cmd: pnpm run build # The command to run to build your site. Runs the package build script/task by default. (optional)
+        # env:
+          # PUBLIC_POKEAPI: 'https://pokeapi.co/api/v2' # Use single quotation marks for the variable value. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,113 +1,5 @@
-# Accessible Astro Starter
+Simple Portfolio Website
 
-[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)
-
-<img width="1200" height="627" alt="social-preview" src="https://github.com/user-attachments/assets/fa1a8b50-3aab-4bd3-8f50-1d43586fbd84" />
-
-A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards, WCAG 2.2 AA guidelines, and European Accessibility Act (EAA) compliance in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS 4 integration, comprehensive component library with enhanced form validation, color contrast checker, and typography with Atkinson Hyperlegible font for improved readability. Includes dynamic blog/portfolio pages with social sharing, contact forms, and full MDX support.
-
-[![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro-starter.incluud.dev/) &nbsp;
-[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.incluud.dev/) &nbsp;
-[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud) &nbsp;
-
-## Our mission
-
-> Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.
-
-## (Accessibility) Features
-
-- Astro 5.13.0+
-- Tailwind CSS 4.1+ support
-- TypeScript integration with path aliases for easier imports and content collections support
-- Prettier integration with `prettier-plugin-astro` and `prettier-plugin-tailwind`
-- ESLint integration with strict accessibility settings for `eslint-plugin-jsx-a11y`
-- Markdown and MDX support with comprehensive examples and components
-- Modern OKLCH color system with automatic palette generation from primary/secondary colors
-- Atkinson Hyperlegible font for improved readability and accessibility
-- Lucide icon set via `astro-icon` for consistent, friendly icons
-- Semantic HTML structure with `Button`, `Link` and `Heading` components
-- Excellent Lighthouse/PageSpeed scores
-- Accessible landmarks such as `header`, `main`, `footer`, `section` and `nav`
-- Outline focus indicator which works on dark and light backgrounds
-- Several `aria` attributes which provide a better experience for screen reader users
-- `[...page].astro` and `[post].astro` demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination
-- `404.astro` provides a custom 404 error page which you can adjust to your needs
-- `Header.astro` component with optimized accessibility and design
-- `Footer.astro` component with informative content and links
-- `SkipLinks.astro` component to skip to either the main menu or the main content
-- `Navigation.astro` component with keyboard accessible (dropdown) navigation and highlighted menu item option
-- `ResponsiveToggle.astro` component with accessible responsive toggle functionality
-- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme setting
-- `SiteMeta.astro` SEO component for setting custom metadata on different pages
-- `.sr-only` utility class for screen reader only text content (hides text visually)
-- `prefers-reduced-motion` disables animations for users that have this preference turned on
-- Components including `ColorContrast.astro`, `BlockQuote.astro`, `BreakoutImage.astro`, `Logo.astro`, `SocialShares.astro`, `PageHeader.astro`, `FeaturedPosts.astro`, and `FeaturedProjects.astro`
-- Enhanced form components with comprehensive validation: `Form`, `Input`, `Textarea`, `Checkbox`, `Radio`, and `Fieldset` with WCAG 2.2 compliance
-- Automatic form validation with custom patterns, error handling, and screen reader support
-- Blog and portfolio pages with featured images, author details, social sharing, and breakout images
-- Contact page with comprehensive form validation showcase and accessibility demonstrations
-- Thank-you page for form submissions with interactive feedback
-- Accessibility Statement template page
-- Color Contrast Checker interactive page
-- Comprehensive sitemap page with organized navigation and automatic XML sitemap generation via `@astrojs/sitemap`
-- Enhanced accessible-components showcase page with expanded component demonstrations
-- Smooth micro-interactions and animations on hover, open and close states (respecting reduced motion preferences)
-- Comprehensive SCSS utility classes
-- CSS with logical properties and custom properties
-- Accessible button and hyperlink styling with clear focus states
-- Styled `<kbd>` element for keyboard shortcut documentation
-
-## Getting started
-
-Clone this theme locally and run any of the following commands in your terminal:
-
-| Command           | Action                                       |
-| :---------------- | :------------------------------------------- |
-| `npm install`     | Installs dependencies                        |
-| `npm run dev`     | Starts local dev server at `localhost:4321`  |
-| `npm run build`   | Build your production site to `./dist/`      |
-| `npm run preview` | Preview your build locally, before deploying |
-
-## Accessible Astro projects
-
-- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
-- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components built for Astro.
-- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
-- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
-- [Color Contrast Checker](https://github.com/incluud/color-contrast-checker): WCAG-compliant color contrast checker with design system token generation.
-
-Check out our [roadmap](https://github.com/orgs/incluud/projects/4/views/1) to see what's coming next!
-
-## Contributing
-
-We welcome contributions to improve the documentation! You can help by:
-
-1. [Filing an issue](https://github.com/incluud/accessible-astro-starter/issues)
-2. [Submitting a pull request](https://github.com/incluud/accessible-astro-starter/pulls)
-3. [Starting a discussion](https://github.com/incluud/accessible-astro-starter/discussions)
-4. [Supporting on Open Collective](https://opencollective.com/incluud)
-
-## Support this project
-
-Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.
-
-[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud)
-
-## Together we make a difference
-
-We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:
-
-- **The Astro team** for creating an amazing static site generator and the wonderful Starlight theme
-- **Our contributors** who dedicate their time and expertise to improve these tools
-- [**Niek Derksen**](https://niekderksen.nl) for conducting comprehensive accessibility audits to ensure WCAG compliance
-- **Our sponsors** who help make this project sustainable
-- **The web community** for embracing and promoting web accessibility
-- **You, the developer** for choosing to make your projects more accessible
-
-<a href="https://github.com/incluud/accessible-astro-starter/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=incluud/accessible-astro-starter" />
-</a><br /><br />
-
-Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨
-
-Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!
+Used Tools:
+- Vanta.js
+- Astro Template

astro.config.mjs

@@ -8,6 +8,7 @@ import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 import tailwindcss from '@tailwindcss/vite'
 import { watch } from 'fs'
+import { defineConfig } from 'astro/config';
 
 // Check if we're using a symlinked/workspace setup
 const componentsPath = resolve('./node_modules/accessible-astro-components')
@@ -85,9 +86,18 @@ if (isLinked) {
 }
 
 // https://astro.build/config
+// export default defineConfig({
+//   compressHTML: true,
+//   site: 'https://accessible-astro-starter.incluud.dev',
+//   integrations: [compress(), icon(), mdx(), sitemap()],
+//   vite: viteConfig,
+// })
+
+
 export default defineConfig({
   compressHTML: true,
-  site: 'https://accessible-astro-starter.incluud.dev',
+  site: 'https://Shaninhooo.github.io',
+  base: '/Portfolio-Website', 
   integrations: [compress(), icon(), mdx(), sitemap()],
   vite: viteConfig,
-})
+})

package.json

@@ -23,7 +23,7 @@
     "responsive",
     "ui-library",
     "ui-components",
-    "blog",
+    "library",
     "portfolio"
   ],
   "repository": {
@@ -34,15 +34,15 @@
     "url": "https://github.com/incluud/accessible-astro-starter/issues"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.3.5",
+    "@astrojs/mdx": "^4.3.13",
     "@astrojs/partytown": "^2.1.4",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@iconify-json/lucide": "^1.2.66",
     "@types/sanitize-html": "^2.13.0",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "astro": "^5.13.7",
+    "astro": "^5.17.2",
     "astro-compress": "^2.3.8",
     "astro-eslint-parser": "^1.2.2",
     "astro-icon": "^1.1.5",
@@ -60,7 +60,7 @@
     "tailwindcss": "^4.1.13"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.5.1",
+    "@astrojs/sitemap": "^3.7.0",
     "@tailwindcss/vite": "^4.1.13",
     "accessible-astro-components": "^5.1.1"
   }

src/assets/scss/base/_font.scss

@@ -7,7 +7,7 @@
   src:
     local('Atkinson Hyperlegible Regular'),
     local('AtkinsonHyperlegible-Regular'),
-    url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -18,7 +18,7 @@
   src:
     local('Atkinson Hyperlegible Italic'),
     local('AtkinsonHyperlegible-Italic'),
-    url('/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -29,7 +29,7 @@
   src:
     local('Atkinson Hyperlegible Bold'),
     local('AtkinsonHyperlegible-Bold'),
-    url('/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -40,7 +40,7 @@
   src:
     local('Atkinson Hyperlegible Bold Italic'),
     local('AtkinsonHyperlegible-BoldItalic'),
-    url('/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -52,7 +52,7 @@
   src:
     local('Atkinson Hyperlegible Light'),
     local('AtkinsonHyperlegible-Light'),
-    url('/fonts/AtkinsonHyperlegibleNext-Light.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -63,7 +63,7 @@
   src:
     local('Atkinson Hyperlegible Light Italic'),
     local('AtkinsonHyperlegible-LightItalic'),
-    url('/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -74,7 +74,7 @@
   src:
     local('Atkinson Hyperlegible Medium'),
     local('AtkinsonHyperlegible-Medium'),
-    url('/fonts/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -85,7 +85,7 @@
   src:
     local('Atkinson Hyperlegible Medium Italic'),
     local('AtkinsonHyperlegible-MediumItalic'),
-    url('/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }
@@ -96,7 +96,7 @@
   src:
     local('Atkinson Hyperlegible SemiBold'),
     local('AtkinsonHyperlegible-SemiBold'),
-    url('/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
+    url('/Portfolio-Website/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); /* Updated Path */
   font-family: 'Atkinson Hyperlegible';
   font-display: swap;
 }

src/assets/scss/base/_root.scss

@@ -31,7 +31,7 @@
   --color-neutral-900: oklch(from var(--brand-neutral) 15% c h);
 
   // color scheme
-  --foreground-color: light-dark(var(--color-neutral-800), var(--color-neutral-100));
+  --foreground-color: light-dark(var(--color-neutral-100), var(--color-neutral-100));
   --background-color: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --icon-color: light-dark(var(--color-neutral-800), var(--color-neutral-100));
   --link-color: light-dark(var(--color-primary-400), var(--color-secondary-100));
@@ -144,7 +144,4 @@
   --kbd-color-background: light-dark(var(--color-gray-1000), var(--color-gray-200));
 }
 
-// dark color scheme overrides
-.darkmode {
-  color-scheme: dark;
-}
+