First commit: build tooling, homepage, challenge 1, comparison

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/github-pages.yml

@@ -0,0 +1,55 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,3 @@
+# Frontend Mentor Challenge Solutions
+
+Frontend Mentor: A showcase of my front-end skills. This collection features my solutions to various Frontend Mentor challenges, each providing a real-life workflow experience. From designs, assets, and style requirements, I have honed my skills in building responsive and visually appealing websites. Explore my solutions and see the live demos.

homepage/App.scss

@@ -0,0 +1,28 @@
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  user-select: none;
+}
+
+body {
+  margin: 0;
+  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-weight: 500;
+  line-height: 1.5;
+  background-color: hsl(242deg 51% 90%);
+  color: hsl(263deg 79% 10%);
+}
+
+.Squiggly {
+  -webkit-text-decoration: underline wavy hsl(0deg 92% 70% / 60%) 1.5px;
+  text-decoration: underline wavy hsl(0deg 92% 70% / 60%) 1.5px;
+}

homepage/App.tsx

@@ -0,0 +1,64 @@
+import Header from './components/Header'
+import ProfilePopover from './components/ProfilePopover'
+import Solutions from './components/Solutions'
+import ProfileImage from './components/ProfileImage'
+import Icon from './components/Icon'
+import AppIcon from './components/AppIcon'
+import './App.scss'
+
+function App() {
+
+  return (
+    <>
+      <Header
+        title={<>
+          <span className="Squiggly">Frontend</span> Mentor Challenge Solutions
+        </>}
+        icon={
+          <AppIcon/>
+        }
+        menu={
+          <ProfilePopover
+            icon={
+              <ProfileImage size={48}/>
+            }
+            name="Avisek Das"
+            hobby="Web Developer"
+            links={[
+              {
+                title: 'GitHub',
+                href: 'https://github.com/avisek',
+                icon: <Icon icon={Icon.GITHUB}/>,
+              },
+              {
+                title: 'Frontend Mentor',
+                href: 'http://',
+                icon: <Icon icon={Icon.FRONTEND_MENTOR}/>,
+              },
+              {
+                title: 'Project Repo',
+                href: 'https://github.com/avisek/frontend-mentor-solutions',
+                icon: <Icon icon={Icon.REPOSITORY}/>,
+              },
+              {
+                title: 'Let\'s Connect',
+                href: 'https://www.linkedin.com/in/avisek-das/',
+                icon: <Icon icon={Icon.LINKEDIN}/>,
+              },
+              {
+                title: 'Hire Me',
+                href: 'mailto:[email protected]',
+                icon: <Icon icon={Icon.HIRE_ME}/>,
+              },
+            ]}
+          />
+        }
+      />
+      <main>
+        <Solutions/>
+      </main>
+    </>
+  )
+}
+
+export default App