Upload

.github/scripts/update-changelog.js

@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+module.exports = (version, prNumber) => {
+  const changelog = fs.readFileSync('CHANGELOG.md', 'utf8');
+  const changelogLines = changelog.split('\n');
+  const lastChangeIndex = changelogLines.findIndex((line) => line.startsWith('## ['));
+
+  const textToAppend = `
+## [${version}] - ${new Date().toISOString().split('T')[0]}
+
+### Dependencies
+
+- chore(deps): update dependencies ([details](https://github.com/KonradSzwarc/devscard/pull/${prNumber}))
+`.trim();
+
+  changelogLines.splice(lastChangeIndex, 0, textToAppend + '\n');
+
+  fs.writeFileSync('CHANGELOG.md', changelogLines.join('\n'));
+};

.github/workflows/create-issue-branch.yml

@@ -0,0 +1,16 @@
+name: Create Issue Branch
+
+on:
+  issues:
+    types: [assigned]
+  pull_request:
+    types: [closed]
+
+jobs:
+  create_issue_branch_job:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create Issue Branch
+        uses: robvanderleek/create-issue-branch@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dependency-update-changelog.yml

@@ -0,0 +1,40 @@
+name: Modify changelog for dependency updates
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  build:
+    if: github.event.label.name == 'dependencies' && github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+      - name: Get project information
+        id: projectinfo
+        uses: gregoranders/nodejs-project-info@v0.0.20
+      - name: Get next possible versions
+        id: semvers
+        uses: WyriHaximus/github-action-next-semvers@v1
+        with:
+          version: ${{ steps.projectinfo.outputs.version }}
+      - name: Update package.json version
+        uses: reedyuk/npm-version@1.2.1
+        with:
+          version: ${{ steps.semvers.outputs.patch }}
+      - name: Update CHANGELOG.md
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const script = require('.github/scripts/update-changelog.js');
+            const version = '${{ steps.semvers.outputs.patch }}';
+            const prNumber = '${{ github.event.pull_request.number }}';
+
+            script(version, prNumber);
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v4

.github/workflows/main-branch.yml

@@ -0,0 +1,136 @@
+name: Main Branch
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  prettier:
+    name: Run Prettier check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Prettier
+        run: npm run prettier:check
+
+  typescript:
+    name: Run TypeScript check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run TypeScript types check
+        run: npm run ts:check
+
+  astro:
+    name: Run Astro check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro check
+        run: npm run astro:check
+
+  deploy:
+    name: Deploy to Netlify
+    needs: [prettier, typescript, astro]
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    outputs:
+      deploy-url: ${{ steps.netlify.outputs.deploy-url }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@v2
+        with:
+          publish-dir: dist
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+  percy:
+    name: Run Percy check
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+        env:
+          PUBLIC_APP_ENV: snapshot
+      - name: Percy check
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npx percy snapshot dist/
+
+  lighthouse:
+    name: Run Lighthouse check
+    if: github.repository == 'KonradSzwarc/devscard'
+    needs: deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Lighthouse check
+        uses: foo-software/lighthouse-check-action@master
+        with:
+          urls: ${{ needs.deploy.outputs.deploy-url }}
+          device: all
+
+  release:
+    name: Create release
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+      - name: Get project information
+        id: projectinfo
+        uses: gregoranders/nodejs-project-info@v0.0.20
+      - name: Get changelog entries
+        id: changelog_reader
+        uses: mindsers/changelog-reader-action@v2
+        with:
+          version: ${{ steps.projectinfo.outputs.version }}
+      - name: Create a new tag and release
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ steps.changelog_reader.outputs.version }}
+          name: Release ${{ steps.changelog_reader.outputs.version }}
+          body: ${{ steps.changelog_reader.outputs.changes }}
+          allowUpdates: true

.github/workflows/pull-request.yml

@@ -0,0 +1,188 @@
+name: Pull Request
+
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, edited, synchronize]
+
+jobs:
+  lint-title:
+    name: Validate PR title
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          requireScope: false
+
+  version:
+    name: Check package.json version
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout PR branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Get project information
+        id: projectinfo-current
+        uses: gregoranders/nodejs-project-info@v0.0.20
+      - name: Checkout main branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.base.sha }}
+      - name: Get project information
+        id: projectinfo-main
+        uses: gregoranders/nodejs-project-info@v0.0.20
+      - name: Get next possible versions
+        id: semvers
+        uses: WyriHaximus/github-action-next-semvers@v1
+        with:
+          version: ${{ steps.projectinfo-main.outputs.version }}
+      - name: Assert correct version bump
+        uses: nick-fields/assert-action@v1
+        with:
+          expected: ${{ steps.projectinfo-current.outputs.version }}
+          actual: 'Possible version bumps: ${{ steps.semvers.outputs.patch }}, ${{ steps.semvers.outputs.minor }}, ${{ steps.semvers.outputs.major }}'
+          comparison: contains
+
+  changelog:
+    name: Check changelog
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - name: Get project information
+        id: projectinfo
+        uses: gregoranders/nodejs-project-info@v0.0.20
+      - name: Enforce changelog update
+        uses: dangoslen/changelog-enforcer@v3
+        with:
+          expectedLatestVersion: ${{ steps.projectinfo.outputs.version }}
+      - name: Get changelog entries
+        id: changelog_reader
+        uses: mindsers/changelog-reader-action@v2
+        with:
+          version: ${{ steps.projectinfo.outputs.version }}
+      - name: Assert correct changelog version
+        uses: nick-fields/assert-action@v1
+        with:
+          expected: ${{ steps.projectinfo.outputs.version }}
+          actual: ${{ steps.changelog_reader.outputs.version }}
+
+  prettier:
+    name: Run Prettier check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Prettier
+        run: npm run prettier:check
+
+  typescript:
+    name: Run TypeScript check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run TypeScript types check
+        run: npm run ts:check
+
+  astro:
+    name: Run Astro check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro check
+        run: npm run astro:check
+
+  percy:
+    name: Run Percy check
+    if: github.repository == 'KonradSzwarc/devscard'
+    needs: [prettier, typescript, astro, lint-title, version, changelog]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+        env:
+          PUBLIC_APP_ENV: snapshot
+      - name: Percy check
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: npx percy snapshot dist/
+
+  preview:
+    name: Create deploy preview
+    needs: [prettier, typescript, astro, lint-title, version, changelog]
+    if: github.repository == 'KonradSzwarc/devscard'
+    runs-on: ubuntu-latest
+    outputs:
+      deploy-url: ${{ steps.netlify.outputs.deploy-url }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Astro build command
+        run: npm run build
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/actions-netlify@v2
+        with:
+          publish-dir: dist
+          production-branch: main
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          alias: deploy-preview-${{ github.event.number }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
+
+  lighthouse:
+    name: Run Lighthouse check
+    if: github.repository == 'KonradSzwarc/devscard'
+    needs: preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Lighthouse check
+        uses: foo-software/lighthouse-check-action@master
+        with:
+          urls: ${{ needs.preview.outputs.deploy-url }}
+          gitAuthor: ${{ github.actor }}
+          gitBranch: ${{ github.ref }}
+          gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
+          device: all
+          prCommentEnabled: true
+          prCommentSaveOld: false

.github/workflows/run-checks.yml

@@ -1,50 +0,0 @@
-name: Run Checks
-
-on:
-  pull_request:
-    branches: [main]
-  push:
-    branches: [main]
-
-jobs:
-  prettier:
-    name: Run Prettier check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Prettier
-        run: npm run prettier:check
-
-  typescript:
-    name: Run TypeScript check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run TypeScript types check
-        run: npm run ts:check
-
-  astro:
-    name: Run Astro check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Astro check
-        run: npm run astro:check

README.md

@@ -31,4 +31,4 @@ To learn how to set up your resume, go to:
 
 To see an example CV, visit the link below:
 
-[devscard-resume.pages.dev](https://devscard-resume.pages.dev)
+[https://devscard.netlify.app](https://devscard.netlify.app/)

docs/SUMMARY.md

@@ -11,5 +11,5 @@
 
 ## External links
 
-- [Example resume](https://devscard-resume.pages.dev)
+- [Example resume](https://devscard.netlify.app)
 - [GitHub repository](https://github.com/KonradSzwarc/devscard)

package.json

@@ -12,8 +12,9 @@
   "scripts": {
     "postinstall": "npm run generate-favicons",
     "dev": "astro dev",
-    "prebuild": "move-file ./src/pages/pdf.astro ./src/pages/_pdf.astro && npm run generate-favicons",
-    "build": "astro build",
+    "prebuild": "npm run generate-favicons",
+    "__prebuild": "move-file ./src/pages/pdf.astro ./src/pages/_pdf.astro && npm run generate-favicons",
+    "build": "npm run generate-favicons && astro build",
     "postbuild": "move-file ./src/pages/_pdf.astro ./src/pages/pdf.astro",
     "preview": "astro preview",
     "generate-pdf": "ts-node scripts/generate-pdf.ts",
@@ -65,5 +66,6 @@
   "bugs": {
     "url": "https://github.com/KonradSzwarc/devscard/issues"
   },
-  "homepage": "https://github.com/KonradSzwarc/devscard#readme"
+  "homepage": "https://github.com/KonradSzwarc/devscard#readme",
+  "packageManager": "pnpm@9.7.0+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"
 }

src/data/config.ts

@@ -5,20 +5,20 @@ import type { ReadonlyDeep } from 'type-fest';
 const config = {
   i18n: {
     locale: enUS,
-    dateFormat: 'MMMM yyyy',
+    dateFormat: 'MMM yyyy',
     translations: {
-      now: 'now',
+      now: 'Present',
     },
   },
   meta: {
-    title: 'Mark Freeman - Senior React Developer',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula.',
+    title: 'Juyoung Lee - Resume',
+    description: 'Resume about Juyoung Lee',
     faviconPath: '/src/assets/my-image.jpeg',
   },
   pdf: {
     footer:
-      'I hereby give consent for my personal data included in my application to be processed for the purposes of the recruitment process.',
+      //'I hereby give consent for my personal data included in my application to be processed for the purposes of the recruitment process.',
+      '',
   },
 } as const satisfies ReadonlyDeep<Config>;
 

src/data/helpers/links.ts

@@ -19,6 +19,10 @@ link({ name: '...', url: '...' }) — returns link object with a custom name.
 */
 
 // GENERAL
+export const tiktok = createLinkFactory({
+  name: 'TikTok',
+  icon: 'fa6-brands:tiktok',
+});
 
 export const facebook = createLinkFactory({
   name: 'Facebook',

src/data/helpers/skills.ts

@@ -18,6 +18,83 @@ skill({ description: '...' }) — returns skill with a description displayed whe
 
 */
 
+export const python = createSkillFactory({
+  name: 'Python',
+  icon: 'simple-icons:python',
+  iconColor: '#3776AB',
+  url: '#',
+});
+
+export const mysql = createSkillFactory({
+  name: 'MySQL',
+  icon: 'simple-icons:mysql',
+  iconColor: '#4479A1',
+  url: '#',
+});
+
+export const coldfusion = createSkillFactory({
+  name: 'ColdFusion',
+  icon: 'simple-icons:c',
+  iconColor: '#77a8f7',
+  url: '#',
+});
+
+export const dreamweaver = createSkillFactory({
+  name: 'Dreamweaver',
+  icon: 'simple-icons:adobedreamweaver',
+  iconColor: '#FF61F6',
+  url: '#',
+});
+
+export const jquery = createSkillFactory({
+  name: 'jQuery',
+  icon: 'simple-icons:jquery',
+  iconColor: '#0769AD',
+  url: '#',
+});
+
+export const bootstrap = createSkillFactory({
+  name: 'Bootstrap',
+  icon: 'simple-icons:bootstrap',
+  iconColor: '#7952B3',
+  url: '#',
+});
+
+export const html = createSkillFactory({
+  name: 'HTML',
+  icon: 'simple-icons:html5',
+  iconColor: '#E34F26',
+  url: '#',
+});
+
+export const css = createSkillFactory({
+  name: 'CSS',
+  icon: 'simple-icons:css3',
+  iconColor: '#1572B6',
+  url: '#',
+});
+
+export const javascript = createSkillFactory({
+  name: 'JavaScript',
+  icon: 'simple-icons:javascript',
+  iconColor: '#dec81b',
+  url: '#',
+});
+
+export const java = createSkillFactory({
+  name: 'Java',
+  icon: 'simple-icons:coffeescript',
+  iconColor: '#2F2625',
+  url: '#',
+});
+
+export const processing = createSkillFactory({
+  name: 'Processing',
+  icon: 'simple-icons:processingfoundation',
+  iconColor: '#006699',
+  url: '#',
+});
+
 export const apolloGraphql = createSkillFactory({
   name: 'Apollo GraphQL',
   icon: 'simple-icons:apollographql',

src/data/sections/education-section.data.ts

@@ -11,13 +11,22 @@ const educationSectionData = {
   },
   diplomas: [
     {
-      title: 'Information Technology',
-      institution: 'Wrocław University of Science and Technology',
-      image: import('@/assets/logos/wroclaw-university-of-technology.jpg'),
-      dates: [new Date('2014.10'), new Date('2016.07')],
-      description: 'Master degree. Specialization in software development.',
-      links: [website({ url: '#' })],
+      title: 'Master of Science (M.S.) in Engineering, Concentration in Aerospace Engineering',
+      institution: 'Virginia Commonwealth University',
+      image: import('@/assets/logos/vcu.png'),
+      dates: [new Date('2024-02'), null],
+      description: '2024-',
+      links: [website({ url: 'https://egr.vcu.edu' })],
     },
+    {
+      title: 'Bachelor of Science (B.S.) in Computer Science 🎓',
+      institution: 'San Francisco State University',
+      image: import('@/assets/logos/sfsu.png'),
+      dates: [new Date('2018-02'), new Date('2020-02')],
+      description: 'Graduated: 2020',
+      links: [website({ url: 'https://cs.sfsu.edu' })],
+    },
+    /*
     {
       title: 'Information Technology',
       institution: 'Wrocław University of Science and Technology',
@@ -25,7 +34,7 @@ const educationSectionData = {
       dates: [new Date('2011.10'), new Date('2014.07')],
       description: "Bachelor's degree. Specialization in application development.",
       links: [website({ url: '#' })],
-    },
+    },*/
   ],
 } as const satisfies ReadonlyDeep<EducationSection>;
 

src/data/sections/experience-section.data.ts

@@ -1,6 +1,6 @@
 import type { ExperienceSection } from '@/types/sections/experience-section.types';
 import type { ReadonlyDeep } from 'type-fest';
-import { facebook, github, instagram, linkedin, twitter, website } from '../helpers/links';
+import { facebook, github, tiktok, instagram, linkedin, twitter, website, youtube } from '../helpers/links';
 import {
   chakraUi,
   eslint,
@@ -13,6 +13,17 @@ import {
   tailwindCss,
   typescript,
   vue,
+  mysql,
+  coldfusion,
+  html,
+  css,
+  javascript,
+  dreamweaver,
+  jquery,
+  bootstrap,
+  java,
+  processing,
+  python,
 } from '../helpers/skills';
 
 const experienceSectionData = {
@@ -23,60 +34,74 @@ const experienceSectionData = {
     visible: true,
   },
   jobs: [
+    //    {
+    //      role: 'Founder',
+    //      company: 'Mimory AI',
+    //      image: import('@/assets/logos/mimory.jpg'),
+    //      dates: [new Date('2025-05-02'), null], //null ], // Use null for 'Present'
+    //      description: ``,
+    //      tagsList: {
+    //        title: '',
+    //        tags: [],
+    //      },
+    //      links: [
+    //        tiktok({ url: 'https://tiktok.com/@mimoryai' }),
+    //        youtube({ url: 'https://youtube.com/@mimoryai' }),
+    //        instagram({ url: 'https://instagram.com/mimoryai' }),
+    //      ],
+    //    },
     {
-      role: 'Senior front-end developer',
-      company: 'Google',
-      image: import('@/assets/logos/google-logo.jpg'),
-      dates: [new Date('2020-02'), null],
+      role: 'Web Programmer/Systems Analyst',
+      company: 'National Training and Data Center',
+      image: import('@/assets/logos/vcu.png'),
+      dates: [new Date('2021-03-02'), null], //null ], // Use null for 'Present'
       description: `
-        - In tristique vulputate augue vel egestas.
-        - Quisque ac imperdiet tortor, at lacinia ex.
-        - Duis vel ex hendrerit, commodo odio sed, aliquam enim.
-        - Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi.
-        - Nunc malesuada leo et est iaculis facilisis.
-        - Fusce eu urna ut magna malesuada fringilla.
+        - Developed and maintained server-side modules for high-volume data systems funded by the Social Security Administration (SSA), implementing reliable data processing logic and improving system scalability across large datasets
+        - Designed scalable backend systems aligned with evolving program requirements, improving long-term maintainability and supporting operational efficiency
+        - Implemented backend security and privacy enhancements in alignment with federal security standards (FISMA), improving data protection and system resilience
+        - Monitored application performance, diagnosing and resolving issues to ensure high system availability and reliable backend operations
       `,
       tagsList: {
-        title: 'Technologies',
-        tags: [react(), nextJs(), typescript(), nx(), firebase()],
+        title: '',
+        tags: [mysql(), coldfusion()],
       },
-      links: [facebook({ url: '#' }), linkedin({ url: '#' })],
+      links: [], //[facebook({ url: '#' }), linkedin({ url: '#' })],
     },
     {
-      role: 'React.js developer',
-      company: 'Facebook',
-      image: import('@/assets/logos/facebook-logo.png'),
-      dates: [new Date('2019-04'), new Date('2020-02')],
+      role: 'Web Accessibility Developer',
+      company: 'San Francisco State University',
+      image: import('@/assets/logos/sfsu.png'),
+      dates: [new Date('2018-08-02'), new Date('2020-05-02')],
       description: `
-        - Aenean eget ultricies felis. Pellentesque dictum massa ut tellus eleifend, sed posuere massa mattis.
-        - Ut posuere massa lacus, eleifend molestie tortor auctor vel.
-        - Sed sed sollicitudin eros, id ultricies mi. Aliquam sodales elit vel ante tempor, non vehicula nibh facilisis.
-        - Cras feugiat ultricies maximus. Aliquam tristique ex odio, ac semper urna accumsan a.
+        - Fixed HTML, CSS, JavaScript on campus and 3rd party websites and learning platform (iLearn), and maintained campus-wide best practices for meeting web accessibility requirements WCAG 2.0 (AA, AAA)
+        - Converted documents accessible using PDF Accessibility Checker, CommonLook, MS Word, and corrected errors in headings, reading order, images, tables, etc.
+        - Created text and HTML-based content specific to the accessibility best practices
+        - Provided expert technical assistance and group training for campus-wide IT personnel (webmasters, newsletter editors)
+        - Documented defects using manual and automated testing tools, and collaborated with development teams to establish technical specifications
+        - Managed accessible computer stations, and proctored exams for students who need accommodation
+        - Tools used: debugging tools in Firefox/Chrome, Drupal, WordPress, JAWS, WAVE, ARIA, Colour Contrast Analyzer, Link Klipper, Compliance Sheriff (automated testing tool), etc.
       `,
       tagsList: {
-        title: 'Technologies',
-        tags: [react(), reactQuery(), chakraUi(), eslint()],
+        title: '',
+        tags: [html(), css(), javascript()],
       },
-      links: [website({ url: '#' }), instagram({ url: '#' })],
+      links: [], //[website({ url: '#' }), instagram({ url: '#' })],
     },
     {
-      role: 'Junior front-end developer',
-      company: 'GitLab',
-      image: import('@/assets/logos/gitlab-logo.png'),
-      dates: [new Date('2016-09'), new Date('2019-04')],
+      role: 'Java Teaching Assistant',
+      company: 'San Francisco Unified School District',
+      image: import('@/assets/logos/sfusd.png'),
+      dates: [new Date('2019-01-02'), new Date('2019-05-02')],
       description: `
-        Nulla volutpat justo ante, rhoncus posuere massa egestas in:
-
-        - Quisque pellentesque, dolor nec sollicitudin iaculis, sem velit consequat ligula, eget tempus ligula leo et est.
-        - Maecenas ut elit sit amet nibh maximus condimentum in nec lorem. Pellentesque tincidunt odio vel leo suscipit, in interdum mi gravida.
-
-        Donec non vulputate augue 🤓
+        - As part of the National Science Foundation-funded program (CS4SF), taught object-oriented Java programming in 9-12th grade classroom, leveraging knowledge acquired from university coursework
+        - Assisted teacher to help 30-40 students debug in-class coding assignments, and engaged students in learning activities
+        - Maintained positive, calm attitude and soft voice, and worked under teacher's direction to establish clean and comfortable classroom 🤗
       `,
       tagsList: {
-        title: 'Technologies',
-        tags: [vue(), tailwindCss(), pnpm()],
+        title: '',
+        tags: [java(), processing()],
       },
-      links: [twitter({ url: '#' }), github({ url: '#' })],
+      links: [], //[twitter({ url: '#' }), github({ url: '#' })],
     },
   ],
 } as const satisfies ReadonlyDeep<ExperienceSection>;

src/data/sections/index.ts

@@ -10,12 +10,12 @@ import testimonialsData from './testimonials-section.data';
 
 export const sections = {
   main: mainData,
-  skills: skillsData,
+  //skills: skillsData,
   experience: experienceData,
   portfolio: portfolioData,
   education: educationData,
-  testimonials: testimonialsData,
-  favorites: favoritesData,
+  //testimonials: testimonialsData,
+  //favorites: favoritesData,
 } as const satisfies ReadonlyDeep<Sections>;
 
 export default sections;

src/data/sections/main-section.data.ts

@@ -1,6 +1,6 @@
 import type { MainSection } from '@/types/sections/main-section.types';
 import type { ReadonlyDeep } from 'type-fest';
-import { facebook, github, linkedin, twitter } from '../helpers/links';
+import { facebook, github, linkedin, twitter, website } from '../helpers/links';
 
 const mainSectionData = {
   config: {
@@ -10,30 +10,35 @@ const mainSectionData = {
     visible: true,
   },
   image: import('@/assets/my-image.jpeg'),
-  fullName: 'Mark Freeman',
-  role: 'Senior React Developer',
+  fullName: 'Jay Lee',
+  role: 'Software Engineer',
   details: [
-    { label: 'Phone', value: '605 475 6961', url: 'tel:605 475 6961' },
-    { label: 'Email', value: 'mark.freeman.dev@gmail.com', url: 'mailto:mark.freeman.dev@gmail.com' },
-    { label: 'From', value: 'Warsaw, Poland' },
-    { label: 'Salary range', value: '18 000 - 25 000 PLN' },
+    //    { label: 'Phone', value: '605 475 6961', url: 'tel:605 475 6961' },
+    { label: 'Location', value: 'San Francisco, CA' },
+    { label: 'Email', value: '✉️', url: 'https://go.juyung.com/email' },
+    //    { label: 'Salary range', value: '18 000 - 25 000 PLN' },
   ],
   pdfDetails: [
-    { label: 'Phone', value: '605 475 6961' },
-    { label: 'Email', value: 'mark.freeman.dev@gmail.com' },
-    { label: 'LinkedIn', value: '/in/mark-freeman', url: 'https://linkedin.com' },
-    { label: 'GitHub', value: '/mark-freeman', url: 'https://github.com' },
-    { label: 'Website', value: 'mark-freeman-personal-website.com', url: '/', fullRow: true },
+    //    { label: 'Phone', value: '605 475 6961' },
+    //   { label: 'Email', value: 'mark.freeman.dev@gmail.com' },
+    { label: 'Website', value: 'juyung.com', url: 'https://juyung.com', fullRow: true },
+    { label: 'GitHub', value: 'git.juyung.com', url: 'https://git.juyung.com' },
+    { label: 'LinkedIn', value: 'job.juyung.com', url: 'https://job.juyung.com' },
   ],
-  description:
-    'Lorem ipsum dolor sit amet, consectetur **adipiscing elit**. In sodales ac dui at *vestibulum*. In condimentum metus id dui tincidunt, in blandit mi [vehicula](/). Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.',
-  tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
-  action: {
-    label: 'Download CV',
-    url: '/cv.pdf',
-    downloadedFileName: 'CV-Mark_Freeman.pdf',
-  },
-  links: [facebook({ url: '#' }), github({ url: '#' }), linkedin({ url: '#' }), twitter({ url: '#' })],
+  description: `I’m a software engineer. Previously, I worked as a web accessibility developer and taught Java programming. I have a Bachelor's in Computer Science and am currently pursuing a Master’s in Aerospace Engineering.`,
+  //    'Lorem ipsum dolor sit amet, consectetur **adipiscing elit**. In sodales ac dui at *vestibulum*. In condimentum metus id dui tincidunt, in blandit mi [vehicula](/). Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.',
+  tags: [], //[{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
+  //  action: {
+  //    label: 'Download Resume',
+  //    url: '/cv.pdf',
+  //    downloadedFileName: 'Resume-Juyoung.pdf',
+  //  },
+  links: [
+    /*facebook({ url: '#' }),*/
+    website({ url: 'https://juyung.com' }),
+    github({ url: 'https://git.juyung.com' }),
+    linkedin({ url: 'https://job.juyung.com' }),
+  ], // twitter({ url: '#' })],
 } as const satisfies ReadonlyDeep<MainSection>;
 
 export default mainSectionData;

src/data/sections/portfolio-section.data.ts

@@ -20,8 +20,8 @@ import {
 
 const portfolioSectionData = {
   config: {
-    title: 'Projects',
-    slug: 'projects',
+    title: 'Certifications',
+    slug: 'certifications',
     icon: 'fa6-solid:rocket',
     visible: true,
     screenshots: {
@@ -31,97 +31,58 @@ const portfolioSectionData = {
   },
   projects: [
     {
-      name: 'Golden Bulls',
-      image: import('@/assets/portfolio/project-1.jpeg'),
-      dates: [new Date('2020-03'), null],
+      name: 'Trusted Tester',
+      image: import('@/assets/portfolio/tt.png'),
+      dates: [new Date('2022-08-02'), null],
+      description: 'U.S. Department of Homeland Security',
       details: [
-        { label: 'Team size', value: '1 person' },
-        { label: 'My role', value: ['Front-end Developer', 'Designer'] },
-        { label: 'Company', value: 'None' },
-        { label: 'Category', value: ['Web app', 'Open source'] },
+        { label: 'Credential ID', value: 'TT-2208-03281' },
+        //  { label: 'Company', value: 'None' },
+        //  { label: 'Category', value: ['Web app', 'Open source'] },
       ],
       pdfDetails: [
-        { label: 'Demo', value: 'https://golden-bulls-d73jd7.netlify.app', url: '#' },
-        { label: 'Repository', value: 'https://github.com/mark-freeman/golden-bulls', url: '#' },
+        //  { label: 'Demo', value: 'https://golden-bulls-d73jd7.netlify.app', url: '#' },
+        //  { label: 'Repository', value: 'https://github.com/mark-freeman/golden-bulls', url: '#' },
       ],
       screenshots: [
-        { src: import('@/assets/portfolio/project-1-screenshot-1.jpg'), alt: 'First screenshot' },
-        { src: import('@/assets/portfolio/project-1-screenshot-2.jpg'), alt: 'Second screenshot' },
-        { src: import('@/assets/portfolio/project-1-screenshot-3.jpg'), alt: 'Third screenshot' },
+        { src: import('@/assets/portfolio/tt-certificate.png'), alt: 'Trusted Tester Certification' },
+        //  { src: import('@/assets/portfolio/project-1-screenshot-2.jpg'), alt: 'Second screenshot' },
+        //  { src: import('@/assets/portfolio/project-1-screenshot-3.jpg'), alt: 'Third screenshot' },
       ],
-      description:
-        'In tristique vulputate augue vel egestas. Quisque ac imperdiet tortor, at lacinia ex. Duis vel ex hendrerit, commodo odio sed, aliquam enim. Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi. Nunc malesuada leo et est iaculis facilisis.',
+      //description: '',
+      //  'In tristique vulputate augue vel egestas. Quisque ac imperdiet tortor, at lacinia ex. Duis vel ex hendrerit, commodo odio sed, aliquam enim. Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi. Nunc malesuada leo et est iaculis facilisis.',
       tagsList: {
-        title: 'Technologies',
-        tags: [nextJs(), sass(), pnpm(), eslint(), prettier()],
+        title: '', //'Technologies',
+        tags: [], //[nextJs(), sass(), pnpm(), eslint(), prettier()],
       },
-      links: [mockups({ url: '#' }), demo({ url: '#' })],
+      links: [], //[mockups({ url: '#' }), demo({ url: '#' })],
     },
     {
-      name: 'TruQuest',
-      image: import('@/assets/portfolio/project-2.jpeg'),
-      dates: [new Date('2019-06'), new Date('2020-02')],
+      name: 'JAWS Certified',
+      image: import('@/assets/portfolio/jaws.png'),
+      dates: [new Date('2022-08-02'), null],
+      description: 'Freedom Scientific',
       details: [
-        { label: 'Team size', value: '7 people' },
-        { label: 'My role', value: ['Front-end Developer', 'Mobile Developer', 'Designer'] },
-        { label: 'Company', value: 'Facebook' },
-        { label: 'Category', value: ['Web app', 'Mobile app'] },
+        //{ label: 'Credential ID', value: 'TT-2208-03281' },
+        //  { label: 'Company', value: 'None' },
+        //  { label: 'Category', value: ['Web app', 'Open source'] },
       ],
       pdfDetails: [
-        { label: 'Demo', value: 'https://tru-quest-ck7ea3.netlify.app', url: '#' },
-        { label: 'Repository', value: 'https://github.com/mark-freeman/tru-quest', url: '#' },
+        //  { label: 'Demo', value: 'https://golden-bulls-d73jd7.netlify.app', url: '#' },
+        //  { label: 'Repository', value: 'https://github.com/mark-freeman/golden-bulls', url: '#' },
       ],
-      description:
-        'Ut ultricies tortor at sodales aliquam. Vivamus metus ante, fringilla nec ligula in, suscipit rhoncus mauris. Praesent hendrerit velit odio, at accumsan urna faucibus convallis. Nunc at massa eget ligula volutpat dictum a sit amet libero. Vestibulum iaculis molestie maximus. In hac habitasse platea dictumst.',
+      screenshots: [
+        { src: import('@/assets/portfolio/jaws-certificate.png'), alt: 'JAWS Cerficiation' },
+        //  { src: import('@/assets/portfolio/project-1-screenshot-2.jpg'), alt: 'Second screenshot' },
+        //  { src: import('@/assets/portfolio/project-1-screenshot-3.jpg'), alt: 'Third screenshot' },
+      ],
+      //description: '',
+      //  'In tristique vulputate augue vel egestas. Quisque ac imperdiet tortor, at lacinia ex. Duis vel ex hendrerit, commodo odio sed, aliquam enim. Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi. Nunc malesuada leo et est iaculis facilisis.',
       tagsList: {
-        title: 'Technologies',
-        tags: [react(), tailwindCss(), nestJs(), postgreSql()],
+        title: '', //'Technologies',
+        tags: [], //[nextJs(), sass(), pnpm(), eslint(), prettier()],
       },
-      links: [mockups({ url: '#' }), demo({ url: '#' })],
-    },
-    {
-      name: 'Software Chasers',
-      image: import('@/assets/portfolio/project-3.jpeg'),
-      dates: [new Date('2018-01'), new Date('2020-12')],
-      details: [
-        { label: 'Team size', value: '3 people' },
-        { label: 'My role', value: ['Front-end Developer', 'Designer'] },
-        { label: 'Company', value: 'None' },
-        { label: 'Category', value: ['Web app', 'Open source'] },
-      ],
-      pdfDetails: [
-        { label: 'Demo', value: 'https://software-chasers-e82l8e.netlify.app', url: '#' },
-        { label: 'Repository', value: 'https://github.com/mark-freeman/software-chasers', url: '#' },
-      ],
-      description:
-        'Quisque id consectetur eros. In hac habitasse platea dictumst. Sed eu pulvinar orci. Mauris consequat, est in dignissim varius, neque nisl commodo mauris, id blandit risus justo eu nulla.',
-      tagsList: {
-        title: 'Technologies',
-        tags: [react(), chakraUi(), typescript(), nx(), pnpm()],
-      },
-      links: [website({ url: '#' }), github({ url: '#' })],
-    },
-    {
-      name: 'Disco Ninjas',
-      image: import('@/assets/portfolio/project-4.jpeg'),
-      dates: [new Date('2016-05'), new Date('2018-07')],
-      details: [
-        { label: 'Team size', value: '11 people' },
-        { label: 'My role', value: 'Front-end Developer' },
-        { label: 'Company', value: 'Google' },
-        { label: 'Category', value: ['Mobile app', 'Open source'] },
-      ],
-      pdfDetails: [
-        { label: 'Demo', value: 'https://disco-ninjas-g321ol.netlify.app', url: '#' },
-        { label: 'Repository', value: 'https://github.com/mark-freeman/disco-ninjas', url: '#' },
-      ],
-      description:
-        'Praesent eu neque tortor. Vestibulum ac magna nisl. Vivamus massa sem, feugiat in pharetra non, convallis egestas purus. Ut consequat ullamcorper sem, in euismod nibh posuere ut. ',
-      tagsList: {
-        title: 'Technologies',
-        tags: [typescript(), jest(), firebase()],
-      },
-      links: [mockups({ url: '#' }), github({ url: '#' })],
+      links: [], //[mockups({ url: '#' }), demo({ url: '#' })],
     },
   ],
 } as const satisfies ReadonlyDeep<PortfolioSection>;

src/data/sections/skills-section.data.ts

@@ -1,80 +0,0 @@
-import type { SkillsSection } from '@/types/sections/skills-section.types';
-import type { ReadonlyDeep } from 'type-fest';
-import {
-  apolloGraphql,
-  astro,
-  chakraUi,
-  cypress,
-  eslint,
-  firebase,
-  mongoDb,
-  nestJs,
-  pnpm,
-  postgreSql,
-  prettier,
-  react,
-  sass,
-  supabase,
-  tailwindCss,
-  typescript,
-} from '../helpers/skills';
-
-const skillsSectionData = {
-  config: {
-    title: 'Skills',
-    slug: 'skills',
-    icon: 'fa6-solid:bars-progress',
-    visible: true,
-  },
-  skillSets: [
-    {
-      title: 'I already know',
-      skills: [
-        react({
-          level: 5,
-          description:
-            'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.',
-        }),
-        typescript({
-          level: 4,
-          description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-        }),
-        sass({
-          level: 4,
-          description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.',
-        }),
-        chakraUi({ level: 5 }),
-        tailwindCss({ level: 3 }),
-        prettier({ level: 5 }),
-        eslint({
-          level: 4,
-          description:
-            'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.',
-        }),
-        nestJs({
-          level: 3,
-          description:
-            'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.',
-        }),
-        postgreSql({ level: 2 }),
-        mongoDb({ level: 1 }),
-        firebase({ level: 1 }),
-        pnpm({ level: 3 }),
-      ],
-    },
-    {
-      title: 'I want to learn',
-      skills: [apolloGraphql(), astro(), supabase(), cypress()],
-    },
-    {
-      title: 'I speak',
-      skills: [
-        { icon: 'circle-flags:pl', name: 'Polish - native' },
-        { icon: 'circle-flags:us', name: 'English - C1' },
-        { icon: 'circle-flags:es-variant', name: 'Spanish - B1' },
-      ],
-    },
-  ],
-} as const satisfies ReadonlyDeep<SkillsSection>;
-
-export default skillsSectionData;

src/data/sections/testimonials-section.data.ts

@@ -1,40 +0,0 @@
-import type { TestimonialsSection } from '@/types/sections/testimonials-section.types';
-import type { ReadonlyDeep } from 'type-fest';
-import { github, linkedin, website } from '../helpers/links';
-
-const testimonialsSectionData = {
-  config: {
-    title: 'Testimonials',
-    slug: 'testimonials',
-    icon: 'fa6-solid:comment',
-    visible: true,
-  },
-  testimonials: [
-    {
-      image: import('@/assets/testimonials/testimonial-1.jpeg'),
-      author: 'Howard Stewart',
-      relation: 'We work together as front-end developers at Google',
-      content:
-        'In nec mattis sem. Morbi purus lorem, euismod ac varius at, aliquet vitae augue. Pellentesque ut facilisis felis. In sed dui blandit, aliquet odio eu, elementum leo. In facilisis dapibus tortor ac volutpat. Cras cursus nec odio maximus elementum.',
-      links: [github({ url: '#' }), linkedin({ url: '#' })],
-    },
-    {
-      image: import('@/assets/testimonials/testimonial-2.jpeg'),
-      author: 'Jean Richards',
-      relation: 'My project manager at GitLab',
-      content:
-        'Praesent nec congue elit. Vestibulum lobortis congue ipsum, a gravida mi tempus ac. Mauris aliquet purus nibh, vel varius turpis tempus non. Nullam eget ultricies orci. Quisque nulla ante, auctor eget varius ac, imperdiet nec magna.',
-      links: [linkedin({ url: '#' })],
-    },
-    {
-      image: import('@/assets/testimonials/testimonial-3.jpeg'),
-      author: 'Jason Fisher',
-      relation: 'My customer for sidewing.com website',
-      content:
-        'Mauris tincidunt at purus vehicula porta. Mauris eget mollis turpis. Sed iaculis rutrum pharetra. Vivamus risus quam, suscipit et semper ut, aliquet ut tellus. Donec quis auctor nunc.',
-      links: [github({ url: '#' }), website({ url: '#' })],
-    },
-  ],
-} as const satisfies ReadonlyDeep<TestimonialsSection>;
-
-export default testimonialsSectionData;

src/pages/index.astro

@@ -18,12 +18,16 @@ const { config, sections } = cv();
   <ThemeToggle />
   <main class="w-full max-w-5xl space-y-4 px-2 py-3 sm:space-y-6 sm:px-8 sm:py-12 lg:space-y-8 lg:py-20">
     <MainSection {...sections.main} />
+    <!--
     <SkillsSection {...sections.skills} />
+    -->
     <ExperienceSection {...sections.experience} />
     <PortfolioSection {...sections.portfolio} />
     <EducationSection {...sections.education} />
+    <!--
     <TestimonialsSection {...sections.testimonials} />
     <FavoritesSection {...sections.favorites} />
+    -->
   </main>
   <Sidebar sections={sections} className="sticky top-8 mt-20" />
   <script src="../web/scripts/initialize-tooltips.ts"></script>

src/pages/pdf.astro

@@ -24,7 +24,7 @@ const shouldRenderSection = (section: keyof typeof sections) => sections[section
   </head>
   <body class="flex flex-col bg-white p-[10mm] print:p-0">
     {shouldRenderSection('main') && <MainSection {...sections.main} />}
-    {shouldRenderSection('skills') && <SkillsSection {...sections.skills} />}
+    <!--    {shouldRenderSection('skills') && <SkillsSection {...sections.skills} />} -->
     {shouldRenderSection('experience') && <ExperienceSection {...sections.experience} />}
     {shouldRenderSection('portfolio') && <PortfolioSection {...sections.portfolio} />}
     {shouldRenderSection('education') && <EducationSection {...sections.education} />}

src/web/components/download-button.astro

@@ -7,7 +7,7 @@ export interface Props extends DownloadButton {}
 const { url, downloadedFileName, label } = Astro.props;
 
 const classes = /* tw */ {
-  main: 'inline-flex items-center px-4 h-10 rounded-md shadow-sm bg-primary-600 select-none cursor-pointer',
+  main: 'inline-flex items-center rounded-md shadow-sm bg-primary-600 select-none cursor-pointer text-base px-4 h-10 sm:text-sm sm:px-2 sm:h-8 lg:text-base lg:px-4 lg:h-10', // px-4 h-10',
   hover: 'hover:bg-primary-700',
   active: 'active:translate-y-px',
   focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',

src/web/components/labelled-value.astro

@@ -16,7 +16,7 @@ const target = isHttpLink ? '_blank' : '_self';
   <Typography variant="label">{label}:</Typography>
   {
     url ? (
-      <Typography as="a" href={url} target={target} class="underline">
+      <Typography as="a" href={url} target={target} class="no-underline">
         {parsedValue}
       </Typography>
     ) : (

src/web/components/tag.astro

@@ -10,11 +10,11 @@ const { name, description, icon, iconColor, url } = Astro.props;
 const className = /* tw */ 'flex h-6 w-fit items-center gap-x-1.5 rounded bg-gray-100 px-2.5 dark:bg-gray-700';
 const customProps = url
   ? ({
-      href: url,
-      as: 'a',
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      class: `${className} hover:bg-gray-200 dark:hover:bg-gray-600`,
+//      href: url,
+      as: 'span', //'a'
+//      target: '_blank',
+//      rel: 'noopener noreferrer',
+      class: `${className} hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer`,
     } as const)
   : {
       class: className,

src/web/components/typography.astro

@@ -20,11 +20,11 @@ const variantToElement = {
 } as const;
 
 export const variantToClassName: Record<TypographyVariant, string> /* tw */ = {
-  'main-title': 'text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100',
+  'main-title': 'text-3xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100',
   'main-subtitle': 'text-base sm:text-lg font-medium text-gray-700 dark:text-gray-100',
-  'section-title': 'text-3xl font-extrabold text-gray-900 dark:text-gray-100',
-  'section-subtitle': 'text-lg font-extrabold text-gray-900 dark:text-gray-100',
-  'item-title': 'text-xl font-extrabold text-gray-900 dark:text-gray-100',
+  'section-title': 'text-2xl font-bold text-gray-900 dark:text-gray-100', //text-3xl,
+  'section-subtitle': 'text-lg font-bold text-gray-900 dark:text-gray-100',
+  'item-title': 'text-lg font-bold text-gray-900 dark:text-gray-100', //text-xl',
   'item-subtitle-primary': 'text-base font-semibold leading-snug text-gray-900 dark:text-gray-100',
   'item-subtitle-secondary': 'text-sm font-medium text-gray-700 dark:text-gray-100',
   'tile-title': 'text-sm font-medium text-gray-700 dark:text-gray-200',

src/web/head/head.astro

@@ -21,4 +21,23 @@ const { meta, sections } = Astro.props;
   <InitialHash sections={sections} />
   <InitialTheme />
   <Fonts />
+
+  <!-- Matomo -->
+  <script>
+    var _paq = window._paq = window._paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(["setCookieDomain", "*.juyoun.gg"]);
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+      var u="//radar.juyoun.gg/";
+      _paq.push(['setTrackerUrl', u+'matomo.php']);
+      _paq.push(['setSiteId', '1']);
+      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+    })();
+  </script>
+  <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="//radar.juyoun.gg/matomo.php?idsite=1&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+  <!-- End Matomo Code -->
+
 </head>

src/web/sections/education/diploma.astro

@@ -18,7 +18,8 @@ const { title, institution, dates, description, links, image } = Astro.props;
       <div class="flex flex-col">
         <Typography variant="item-title">{title}</Typography>
         <Typography variant="item-subtitle-primary" class="mb-0.5">{institution}</Typography>
-        <Timestamp dates={dates} />
+<!--        <Timestamp dates={dates} /> -->
+        <Typography variant="item-subtitle-secondary" class="mb-0.5">{description}</Typography>
 </div>
     </div>
     {
@@ -31,5 +32,5 @@ const { title, institution, dates, description, links, image } = Astro.props;
       )
     }
   </div>
-  <Description content={description} />
+  <!--<Description content={description} /> -->
 </div>

src/web/sections/main/main-section.web.astro

@@ -24,7 +24,7 @@ const { action, config, description, details, fullName, image, links, role, tags
         height={320}
         class="h-24 w-24 max-w-none rounded-lg sm:h-36 sm:w-36 md:h-52 md:w-52"
       />
-      <DownloadButton {...action} />
+      <!--<DownloadButton {...action} />-->
     </div>
     <div class="flex w-full flex-col gap-5">
       <div class="flex w-full flex-col justify-between gap-2 sm:flex-row">

src/web/sections/portfolio/project.astro

@@ -24,16 +24,20 @@ const screenshotsIcon = screenshotsConfig?.icon || 'fa6-solid:image';
 const screenshotsTooltip = screenshotsConfig?.title || 'Screenshots';
 ---
 
-<div class="flex flex-col gap-6">
-  <div class="flex flex-col gap-4">
-    <div class="flex gap-6">
+<div class="flex flex-col">
+  <!-- gap-6">-->
+  <div class="flex flex-col">
+    <!-- gap-4">-->
+    <div class="flex">
+      <!-- gap-6">-->
       <div class="flex w-full flex-col gap-4">
         <div class="flex gap-4">
           <Thumbnail src={image} alt={alt} size="small" />
           <div class="flex w-full justify-between">
             <div>
               <Typography variant="item-title">{name}</Typography>
-              <Timestamp dates={dates} />
+              <!--<Timestamp dates={dates} />-->
+              <Typography variant="item-subtitle-secondary">{description}</Typography>
             </div>
             <div class="flex gap-2">
               {links.map((link) => <LinkButton {...link} />)}
@@ -50,7 +54,7 @@ const screenshotsTooltip = screenshotsConfig?.title || 'Screenshots';
         </div>
       </div>
     </div>
-    <Description content={description} class="col-span-3 col-start-1" />
+    <!--<Description content={description} class="col-span-3 col-start-1" /> -->
   </div>
   <TagsList {...tagsList} />
   <div class="hidden" id={galleryId}>

src/web/sections/skills/levelled-skill.astro

@@ -1,29 +0,0 @@
----
-import type { LevelledSkill } from '@/types/sections/skills-section.types';
-import Icon from '@/web/components/icon.astro';
-import Typography from '@/web/components/typography.astro';
-import SkillLevel from './skill-level.astro';
-
-export interface Props extends LevelledSkill {}
-
-const { url, icon, iconColor, name, level, description } = Astro.props;
-
-const IconWrapper = url ? 'a' : 'div';
----
-
-<div class="flex flex-col gap-2">
-  <div class="flex h-5 items-center justify-between">
-    <IconWrapper class="flex h-5 gap-2" {...url && { href: url, target: '_blank', rel: 'noopener noreferrer' }}>
-      {icon && <Icon name={icon} color={iconColor} size={20} />}
-      <Typography variant="skill">{name}</Typography>
-    </IconWrapper>
-    {
-      description && (
-        <div class="flex h-3.5 w-3.5" data-tooltip={description} data-tooltip-placement="top">
-          <Icon name="fa6-solid:circle-info" color="#D1D5DB" size={14} />
-        </div>
-      )
-    }
-  </div>
-  <SkillLevel skillLevel={level} />
-</div>

src/web/sections/skills/skill-level-tile.astro

@@ -1,24 +0,0 @@
----
-import type { SkillLevel } from '@/types/sections/skills-section.types';
-
-export interface Props {
-  skillLevel: SkillLevel;
-  tileLevel: SkillLevel;
-}
-
-const { skillLevel, tileLevel } = Astro.props;
-
-const isFilled = skillLevel >= tileLevel;
-const classes = /* tw */ {
-  filled: 'bg-gray-500 dark:bg-gray-300',
-  empty: 'bg-gray-200 dark:bg-gray-500',
-};
----
-
-<div
-  class:list={[
-    'w-9 h-2 last:rounded-l-none last:rounded-r-sm first:rounded-l-sm first:rounded-r-none',
-    isFilled ? classes.filled : classes.empty,
-  ]}
->
-</div>

src/web/sections/skills/skill-level.astro

@@ -1,16 +0,0 @@
----
-import type { SkillLevel } from '@/types/sections/skills-section.types';
-import SkillLevelTile from './skill-level-tile.astro';
-
-export interface Props {
-  skillLevel: SkillLevel;
-}
-
-const { skillLevel } = Astro.props;
-
-const levels = [1, 2, 3, 4, 5] as const;
----
-
-<div class="flex gap-1">
-  {levels.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
-</div>

src/web/sections/skills/skill-set.astro

@@ -1,32 +0,0 @@
----
-import type { LevelledSkill as LevelledSkillType, SkillSet } from '@/types/sections/skills-section.types';
-import TagsList from '@/web/components/tags-list.astro';
-import Typography from '@/web/components/typography.astro';
-import LevelledSkill from './levelled-skill.astro';
-
-export interface Props extends SkillSet {}
-
-const { skills, title } = Astro.props;
-
-const isLevelledSkillSection = (skills: Props['skills']): skills is LevelledSkillType[] => {
-  const firstSkill = skills[0];
-  if (!firstSkill) return false;
-
-  return 'level' in firstSkill && firstSkill.level !== undefined;
-};
----
-
-<div class="flex flex-col gap-3">
-  <Typography variant="section-subtitle">{title}</Typography>
-  {
-    isLevelledSkillSection(skills) ? (
-      <div class="flex flex-wrap gap-8">
-        {skills.map((skill) => (
-          <LevelledSkill {...skill} />
-        ))}
-      </div>
-    ) : (
-      <TagsList tags={skills} />
-    )
-  }
-</div>

src/web/sections/skills/skills-section.web.astro

@@ -1,15 +0,0 @@
----
-import type { SkillsSection } from '@/types/sections/skills-section.types';
-import SectionCard from '@/web/components/section-card.astro';
-import SkillSet from './skill-set.astro';
-
-export interface Props extends SkillsSection {}
-
-const { config, skillSets } = Astro.props;
----
-
-<SectionCard {...config}>
-  <div class="flex flex-col gap-10">
-    {skillSets.map((skillSet) => <SkillSet {...skillSet} />)}
-  </div>
-</SectionCard>

src/web/sections/testimonials/testimonial.astro

@@ -1,33 +0,0 @@
----
-import type { Testimonial } from '@/types/sections/testimonials-section.types';
-import LinkButton from '@/web/components/link-button.astro';
-import Typography from '@/web/components/typography.astro';
-import Description from '@/web/components/description.astro';
-import Thumbnail from '@/web/components/thumbnail.astro';
-
-export interface Props extends Testimonial {}
-
-const { author, content, image, links, relation } = Astro.props;
----
-
-<div class="flex w-full flex-col gap-4">
-  <div class="flex justify-between">
-    <div class="flex flex-col gap-4 sm:flex-row">
-      <Thumbnail src={image} alt={author} size="small" />
-      <div>
-        <Typography variant="item-title">{author}</Typography>
-        <Typography variant="item-subtitle-secondary">{relation}</Typography>
-      </div>
-    </div>
-    {
-      links.length > 0 && (
-        <div class="flex gap-3">
-          {links.map((link) => (
-            <LinkButton {...link} />
-          ))}
-        </div>
-      )
-    }
-  </div>
-  <Description content={content} />
-</div>

src/web/sections/testimonials/testimonials-section.web.astro

@@ -1,17 +0,0 @@
----
-import type { TestimonialsSection } from '@/types/sections/testimonials-section.types';
-import DividedList from '@/web/components/divided-list.astro';
-import Divider from '@/web/components/divider.astro';
-import SectionCard from '@/web/components/section-card.astro';
-import Testimonial from './testimonial.astro';
-
-export interface Props extends TestimonialsSection {}
-
-const { testimonials, config } = Astro.props;
----
-
-<SectionCard {...config}>
-  <DividedList>
-    {testimonials.flatMap((testimonial) => [<Testimonial {...testimonial} />, <Divider />])}
-  </DividedList>
-</SectionCard>

tailwind.config.cjs

@@ -10,7 +10,7 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       white: colors.white,
-      primary: colors.indigo,
+      primary: colors.blue,
       gray: colors.gray,
     },
     extend: {