From 59d90cbe17a8f2fb39f4ec7b97288906da424593 Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Mon, 28 Nov 2022 20:47:43 +0100 Subject: [PATCH] Restore playground directory (#102) --- src/pages/_playground/button.astro | 7 + src/pages/_playground/favorites.astro | 51 ++++++ src/pages/_playground/icon-button.astro | 10 ++ src/pages/_playground/icon.astro | 9 + src/pages/_playground/image.astro | 7 + src/pages/_playground/labelled-value.astro | 7 + src/pages/_playground/main-section.astro | 37 ++++ .../projects-timeline.astro | 0 src/pages/_playground/section-card.astro | 7 + src/pages/_playground/sidebar-item.astro | 7 + src/pages/_playground/sidebar.astro | 12 ++ src/pages/_playground/skill.astro | 14 ++ src/pages/_playground/skills-section.astro | 160 ++++++++++++++++++ src/pages/_playground/tag.astro | 11 ++ src/pages/_playground/testimonial.astro | 20 +++ .../_playground/testimonials-section.astro | 45 +++++ src/pages/_playground/typography.astro | 48 ++++++ .../work-timeline.astro | 0 18 files changed, 452 insertions(+) create mode 100644 src/pages/_playground/button.astro create mode 100644 src/pages/_playground/favorites.astro create mode 100644 src/pages/_playground/icon-button.astro create mode 100644 src/pages/_playground/icon.astro create mode 100644 src/pages/_playground/image.astro create mode 100644 src/pages/_playground/labelled-value.astro create mode 100644 src/pages/_playground/main-section.astro rename src/pages/{playground => _playground}/projects-timeline.astro (100%) create mode 100644 src/pages/_playground/section-card.astro create mode 100644 src/pages/_playground/sidebar-item.astro create mode 100644 src/pages/_playground/sidebar.astro create mode 100644 src/pages/_playground/skill.astro create mode 100644 src/pages/_playground/skills-section.astro create mode 100644 src/pages/_playground/tag.astro create mode 100644 src/pages/_playground/testimonial.astro create mode 100644 src/pages/_playground/testimonials-section.astro create mode 100644 src/pages/_playground/typography.astro rename src/pages/{playground => _playground}/work-timeline.astro (100%) diff --git a/src/pages/_playground/button.astro b/src/pages/_playground/button.astro new file mode 100644 index 0000000..9941cfd --- /dev/null +++ b/src/pages/_playground/button.astro @@ -0,0 +1,7 @@ +--- +import Button from '@/atoms/button.astro'; +--- + +
+ +
diff --git a/src/pages/_playground/favorites.astro b/src/pages/_playground/favorites.astro new file mode 100644 index 0000000..faa065d --- /dev/null +++ b/src/pages/_playground/favorites.astro @@ -0,0 +1,51 @@ +--- +import BookTile from '@/atoms/book-tile.astro'; +import MediaTile from '@/atoms/media-tile.astro'; +import PersonTile from '@/atoms/person-tile.astro'; +import Typography from '@/atoms/typography.astro'; +import VideoTile from '@/atoms/video-tile.astro'; +import type { Book, Media, Person, Video } from '@/types/favorites-section'; + +const book: Book = { + cover: import('@/assets/favorites/books/book-1.jpeg'), + title: 'The Pragmatic Programmer: From Journeyman to Master', + author: 'Andy Hunt, Dave Thomas', + url: 'https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer', +}; + +const person: Person = { + image: import('@/assets/favorites/people/person-1.jpg'), + name: 'Kent C. Dodds', + url: 'https://kentcdodds.com/', +}; + +const video: Video = { + thumbnail: import('@/assets/favorites/videos/video-1.jpeg'), + title: 'Building Resilient Frontend Architecture - Monica Lent - GOTO 2019', + url: 'https://youtu.be/TqfbAXCCVwE', +}; + +const media: Media = { + image: import('@/assets/favorites/media/media-1.jpeg'), + title: 'Fireship.io', + type: 'YouTube channel', + url: 'https://www.youtube.com/c/Fireship', +}; +--- + +Favourite Book +
+ +
+Favourite Person +
+ +
+Favourite Video +
+ +
+Favourite Media +
+ +
diff --git a/src/pages/_playground/icon-button.astro b/src/pages/_playground/icon-button.astro new file mode 100644 index 0000000..7352760 --- /dev/null +++ b/src/pages/_playground/icon-button.astro @@ -0,0 +1,10 @@ +--- +import IconButton from '@/atoms/icon-button.astro'; +--- + +
+ + + + +
diff --git a/src/pages/_playground/icon.astro b/src/pages/_playground/icon.astro new file mode 100644 index 0000000..dc18b29 --- /dev/null +++ b/src/pages/_playground/icon.astro @@ -0,0 +1,9 @@ +--- +import Icon from '@/atoms/icon'; +--- + +
+ + + +
diff --git a/src/pages/_playground/image.astro b/src/pages/_playground/image.astro new file mode 100644 index 0000000..893d99a --- /dev/null +++ b/src/pages/_playground/image.astro @@ -0,0 +1,7 @@ +--- +import { Image } from '@astrojs/image/components'; +--- + +
+ My image +
diff --git a/src/pages/_playground/labelled-value.astro b/src/pages/_playground/labelled-value.astro new file mode 100644 index 0000000..63bfa65 --- /dev/null +++ b/src/pages/_playground/labelled-value.astro @@ -0,0 +1,7 @@ +--- +import LabelledValue from '@/atoms/labelled-value.astro'; +--- + +
+ +
diff --git a/src/pages/_playground/main-section.astro b/src/pages/_playground/main-section.astro new file mode 100644 index 0000000..96ae368 --- /dev/null +++ b/src/pages/_playground/main-section.astro @@ -0,0 +1,37 @@ +--- +import MainSection from '@/sections/main-section.astro'; +import type { MainSection as MainSectionData } from '@/types/main-section'; + +const mainSectionData: MainSectionData = { + image: import('@/assets/my-image.jpeg'), + fullName: 'Mark Freeman', + role: 'Senior React Developer', + details: [ + { label: 'Phone', value: '+48 604 343 212' }, + { label: 'Email', value: 'veeeery.long.email.address@gmail.com' }, + { label: 'From', value: 'Warsaw, Poland' }, + { label: 'Salary range', value: '18 000 - 25 000 PLN' }, + ], + 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: '#', + }, + socials: [ + { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' }, + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }, + { name: 'Twitter', icon: 'fa6-brands:twitter', url: '#' }, + ], +}; +--- + + +
+
+ +
+
+ diff --git a/src/pages/playground/projects-timeline.astro b/src/pages/_playground/projects-timeline.astro similarity index 100% rename from src/pages/playground/projects-timeline.astro rename to src/pages/_playground/projects-timeline.astro diff --git a/src/pages/_playground/section-card.astro b/src/pages/_playground/section-card.astro new file mode 100644 index 0000000..8d30b5d --- /dev/null +++ b/src/pages/_playground/section-card.astro @@ -0,0 +1,7 @@ +--- +import SectionCard from '@/atoms/section-card.astro'; +--- + +
+ SectionCard text +
diff --git a/src/pages/_playground/sidebar-item.astro b/src/pages/_playground/sidebar-item.astro new file mode 100644 index 0000000..46a5670 --- /dev/null +++ b/src/pages/_playground/sidebar-item.astro @@ -0,0 +1,7 @@ +--- +import SidebarItem from '@/atoms/sidebar-item'; +--- + +
+ +
diff --git a/src/pages/_playground/sidebar.astro b/src/pages/_playground/sidebar.astro new file mode 100644 index 0000000..cfe7c4a --- /dev/null +++ b/src/pages/_playground/sidebar.astro @@ -0,0 +1,12 @@ +--- +import SidebarItem from '@/atoms/sidebar-item'; +import Sidebar from '@/organisms/sidebar.astro'; +--- + +
+ + + + + +
diff --git a/src/pages/_playground/skill.astro b/src/pages/_playground/skill.astro new file mode 100644 index 0000000..1f8e325 --- /dev/null +++ b/src/pages/_playground/skill.astro @@ -0,0 +1,14 @@ +--- +import Skill from '@/organisms/skill.astro'; +import type { LevelledSkill } from '@/types/skills-section'; + +const levelledSkill: LevelledSkill = { + icon: 'simple-icons:react', + iconColor: '#61DAFB', + name: 'React.js', + level: 3, + url: 'https://reactjs.org/', +}; +--- + + diff --git a/src/pages/_playground/skills-section.astro b/src/pages/_playground/skills-section.astro new file mode 100644 index 0000000..b23fe90 --- /dev/null +++ b/src/pages/_playground/skills-section.astro @@ -0,0 +1,160 @@ +--- +import SkillsSection from '@/sections/skills-section.astro'; +import type { SkillsSection as SkillsSectionData } from '@/types/skills-section'; + +const skills: SkillsSectionData = { + config: { + title: 'Skills', + icon: 'fa6-solid:bars-progress', + }, + skillSets: [ + { + title: 'I already know', + skills: [ + { + icon: 'simple-icons:react', + iconColor: '#61DAFB', + name: 'React.js', + level: 5, + url: 'https://reactjs.org/', + description: + 'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.', + }, + { + icon: 'simple-icons:typescript', + iconColor: '#3178C6', + name: 'TypeScript', + level: 4, + url: 'https://www.typescriptlang.org/', + description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.', + }, + { + icon: 'simple-icons:sass', + iconColor: '#CC6699', + name: 'SASS', + level: 4, + url: 'https://sass-lang.com/', + description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.', + }, + { + icon: 'simple-icons:chakraui', + iconColor: '#319795', + name: 'Chakra UI', + level: 5, + url: 'https://chakra-ui.com/', + }, + { + icon: 'simple-icons:tailwindcss', + iconColor: '#06B6D4', + name: 'Tailwind CSS', + level: 2, + url: 'https://tailwindcss.com/', + }, + { + icon: 'simple-icons:prettier', + iconColor: '#F7B93E', + name: 'Prettier', + level: 5, + url: 'https://prettier.io/', + }, + { + icon: 'simple-icons:eslint', + iconColor: '#4B32C3', + name: 'ESLint', + level: 4, + url: 'https://eslint.org/', + description: + 'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.', + }, + { + icon: 'simple-icons:nestjs', + iconColor: '#E0234E', + name: 'NestJS', + level: 2, + url: 'https://nestjs.com/', + description: + 'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.', + }, + { + icon: 'simple-icons:postgresql', + iconColor: '#4169E1', + name: 'PostgreSQL', + level: 2, + url: 'https://www.postgresql.org/', + }, + { + icon: 'simple-icons:mongodb', + iconColor: '#47A248', + name: 'MongoDB', + level: 1, + url: 'https://www.mongodb.com/', + }, + { + icon: 'simple-icons:firebase', + iconColor: '#FFCA28', + name: 'Firebase', + level: 1, + url: 'https://firebase.google.com/', + }, + { + icon: 'simple-icons:pnpm', + iconColor: '#F69220', + name: 'pnpm', + level: 3, + url: 'https://pnpm.io/', + }, + ], + }, + { + title: 'I want to learn', + skills: [ + { + icon: 'simple-icons:apollographql', + iconColor: '#311C87', + name: 'Apollo GraphQL', + }, + { + icon: 'simple-icons:astro', + iconColor: '#FF5D01', + name: 'Astro', + }, + { + icon: 'simple-icons:supabase', + iconColor: '#3ECF8E', + name: 'Supabase', + }, + { + icon: 'simple-icons:cypress', + iconColor: '#17202C', + name: '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', + }, + ], + }, + ], +}; +--- + + +
+
+ +
+
+ diff --git a/src/pages/_playground/tag.astro b/src/pages/_playground/tag.astro new file mode 100644 index 0000000..b393b70 --- /dev/null +++ b/src/pages/_playground/tag.astro @@ -0,0 +1,11 @@ +--- +import Tag from '@/atoms/tag.astro'; +--- + +
+ Tag text +
+ +
+ Tag text +
diff --git a/src/pages/_playground/testimonial.astro b/src/pages/_playground/testimonial.astro new file mode 100644 index 0000000..46dbe12 --- /dev/null +++ b/src/pages/_playground/testimonial.astro @@ -0,0 +1,20 @@ +--- +import Testimonial from '@/organisms/testimonial.astro'; +import type { Testimonial as TestimonialData } from '@/types/testimonials-section'; + +const testimonial: TestimonialData = { + author: 'Howard Stewart', + relation: 'We work together as front-end developers at Google', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl.', + image: import('@/assets/testimonials/testimonial-1.jpeg'), + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }, + ], +}; +--- + +
+ +
diff --git a/src/pages/_playground/testimonials-section.astro b/src/pages/_playground/testimonials-section.astro new file mode 100644 index 0000000..47cef67 --- /dev/null +++ b/src/pages/_playground/testimonials-section.astro @@ -0,0 +1,45 @@ +--- +import TestimonialsSection from '@/sections/testimonials-section.astro'; +import type { Testimonial } from '@/types/testimonials-section'; + +const testimonials: Testimonial[] = [ + { + 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.', + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', 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.', + socials: [{ name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', 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.', + socials: [ + { name: 'GitHub', icon: 'fa6-brands:github', url: '#' }, + { name: 'Website', icon: 'fa6-solid:globe', url: '#' }, + ], + }, +]; +--- + + +
+
+ +
+
+ diff --git a/src/pages/_playground/typography.astro b/src/pages/_playground/typography.astro new file mode 100644 index 0000000..e45e9ba --- /dev/null +++ b/src/pages/_playground/typography.astro @@ -0,0 +1,48 @@ +--- +import Typography from '@/atoms/typography.astro'; + +const text = 'A quick brown fox jumps over the lazy dog'; +--- + +
+
+

paragraph (default)

+ {text} +
+
+

main-title

+ {text} +
+
+

main-subtitle

+ {text} +
+
+

section-title

+ {text} +
+
+

section-subtitle

+ {text} +
+
+

item-title

+ {text} +
+
+

item-title-suffix

+ {text} +
+
+

item-subtitle

+ {text} +
+
+

tile-title

+ {text} +
+
+

tile-subtitle

+ {text} +
+
diff --git a/src/pages/playground/work-timeline.astro b/src/pages/_playground/work-timeline.astro similarity index 100% rename from src/pages/playground/work-timeline.astro rename to src/pages/_playground/work-timeline.astro