Include some texts in personal page

src/components/widgets/Features3.astro

@@ -60,7 +60,7 @@ const {
       container: 'mt-12',
       panel: 'max-w-full sm:max-w-md',
       title: 'text-lg font-semibold',
-      icon: 'flex-shrink-0 mt-1 text-primary w-6 h-6',
+      icon: 'flex-shrink-0 mt-0.5 text-primary w-6 h-6',
       ...((classes?.items as {}) ?? {}),
     }}
   />

src/pages/homes/personal.astro

@@ -3,10 +3,10 @@ import Layout from '~/layouts/PageLayout.astro';
 
 import Header from '~/components/widgets/Header.astro';
 import Hero from '~/components/widgets/Hero.astro';
-import Features from '~/components/widgets/Features.astro';
 import Steps2 from '~/components/widgets/Steps2.astro';
 import Content from '~/components/widgets/Content.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
+import Features3 from '~/components/widgets/Features3.astro';
 
 const metadata = {
   title: 'Personal Homepage Demo',
@@ -42,13 +42,13 @@ const metadata = {
 
   <!-- Hero2 Widget ******************* -->
 
-  <Hero
+  <Hero id="hero" title="Sarah Johnson" callToAction={{ text: 'Hire me', href: '', icon: 'tabler:download' }}>
-    id="hero"
+    <Fragment slot="subtitle">
-    title="Some name"
+      I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree
-    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu."
+      from New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into
-    callToAction={{ text: 'Hire me', href: '', icon: 'tabler:download' }}
+      captivating realities.
-    callToAction2={{ text: 'Learn more', href: '#about' }}
+    </Fragment>
-  />
+  </Hero>
 
   <!-- Content Widget **************** -->
 
@@ -56,30 +56,36 @@ const metadata = {
     id="about"
     items={[
       {
-        title: 'Per ei quaeque sensibus',
+        title: 'Dribbble',
-        description:
+        icon: 'tabler:brand-dribbble',
-          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
       },
       {
-        title: 'Cu imperdiet posidonium sed',
+        title: 'Behance',
-        description:
+        icon: 'tabler:brand-behance',
-          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
       },
       {
-        title: 'Nulla omittam sadipscing mel ne',
+        title: 'Pinterest',
-        description:
+        icon: 'tabler:brand-pinterest',
-          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
       },
     ]}
     image={{
-      src: 'https://images.unsplash.com/photo-1531973486364-5fa64260d75b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1658&q=80',
+      src: 'https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
       alt: 'Colorful Image',
     }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">About me</h3>
-       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+      <p>
-      euismod tacimates.
+        Welcome to my creative journey. My work is a testament to my commitment to bringing ideas to life, where each
+        pixel becomes a brushstroke in the canvas of imagination.
+      </p>
+      <br />
+      <p>
+        I find inspiration in the world around me, whether through the pages of a captivating novel, the intricate
+        details of typography, or the vibrant hues of nature during my outdoor escapades.
+      </p>
+      <br />
+      <p>If you're curious to dive deeper into my work, you can follow me:</p>
     </Fragment>
 
     <Fragment slot="bg">
@@ -87,47 +93,58 @@ const metadata = {
     </Fragment>
   </Content>
 
-  <!-- Features Widget *************** -->
+  <!-- Features3 Widget ************** -->
 
-  <Features
+  <Features3
     id="resume"
-    tagline="Features"
+    title="Skills"
-    title="Main features of our templates"
+    subtitle="Discover the proficiencies that allow me to bring imagination to life through design."
-    subtitle="Possess several key characteristics to effectively cater to the needs of startups and entrepreneurs."
     columns={3}
     items={[
       {
-        title: 'Modern and Professional Design',
+        title: 'Graphic design',
-        description:
+        description: 'Proficient in crafting visually appealing designs that convey messages effectively.',
-          'Have a contemporary design that reflects current design trends and gives a professional impression.',
+        icon: 'tabler:point-filled',
-        icon: 'tabler:artboard',
       },
       {
-        title: 'Responsive and Mobile-Friendly',
+        title: 'Branding and identity',
-        description: 'Adapt seamlessly to different screen sizes and devices to ensure a consistent experience.',
+        description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.',
-        icon: 'tabler:picture-in-picture',
+        icon: 'tabler:point-filled',
       },
       {
-        title: 'Customizability',
+        title: 'User-centered design',
-        description:
+        description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.',
-          'Easily customizable, allowing users to adapt the design, colors, typography, and content to match their brand identity.',
+        icon: 'tabler:point-filled',
-        icon: 'tabler:adjustments-horizontal',
       },
       {
-        title: 'Fast Loading Times',
+        title: 'Adobe Creative Suite',
-        description: 'Optimized for speed to ensure a smooth user experience and favorable search engine rankings.',
+        description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.',
-        icon: 'tabler:rocket',
+        icon: 'tabler:point-filled',
       },
       {
-        title: 'Search Engine Optimization (SEO)',
+        title: 'Typography',
-        description:
+        description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.',
-          'Incorporate SEO best practices in template structure and code to improve visibility in search engine results.',
+        icon: 'tabler:point-filled',
-        icon: 'tabler:arrows-right-left',
       },
       {
-        title: 'Compatibility',
+        title: 'Color theory',
-        description: 'The templates work seamlessly across various content management systems and website builders.',
+        description: 'Proficient in using color to evoke emotions and enhance visual harmony.',
-        icon: 'tabler:plug-connected',
+        icon: 'tabler:point-filled',
+      },
+      {
+        title: 'Print and digital design',
+        description: 'Knowledgeable in designing for both print materials and digital platforms.',
+        icon: 'tabler:point-filled',
+      },
+      {
+        title: 'Attention to detail',
+        description: 'Diligent in maintaining precision and quality in all design work.',
+        icon: 'tabler:point-filled',
+      },
+      {
+        title: 'Adaptability',
+        description: 'Quick to adapt to new design trends, technologies, and client preferences.',
+        icon: 'tabler:point-filled',
       },
     ]}
   />
@@ -136,33 +153,30 @@ const metadata = {
 
   <Content
     id="porfolio"
+    title="Elevating visual narratives"
+    subtitle="Embark on a design journey that surpasses pixels, entering a realm of imagination. Explore my portfolio, where passion and creativity converge to shape enthralling visual narratives."
     isReversed
     items={[
       {
-        title: 'Per ei quaeque sensibus',
+        title: 'Description:',
         description:
-          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
+          'Developed a comprehensive brand identity for a tech startup, Tech Innovators, specializing in disruptive innovations. The goal was to convey a modern yet approachable image that resonated with both corporate clients and tech enthusiasts.',
       },
       {
-        title: 'Cu imperdiet posidonium sed',
+        title: 'Role:',
         description:
-          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
+          'Led the entire branding process from concept to execution. Created a dynamic logo that symbolized innovation, selected a vibrant color palette, and I designed corporate stationery, website graphics, and social media assets.',
-      },
-      {
-        title: 'Nulla omittam sadipscing mel ne',
-        description:
-          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
       },
     ]}
     image={{
-      src: 'https://images.unsplash.com/photo-1620558138198-cfb9b4f3c294?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1671&q=80',
+      src: 'https://images.unsplash.com/photo-1658248165252-71e116af1b34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80',
-      alt: 'Colorful Image',
+      alt: 'Tech Design Image',
     }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
-       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+        Project 1: <br /><span class="text-2xl">Brand identity for tech innovators</span>
-      euismod tacimates.
+      </h3>
     </Fragment>
 
     <Fragment slot="bg">
@@ -173,35 +187,59 @@ const metadata = {
   <!-- Content Widget **************** -->
 
   <Content
-    id="blog"
     isReversed
     isAfterContent={true}
     items={[
       {
-        title: 'Per ei quaeque sensibus',
+        title: 'Description:',
         description:
-          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
+          'Designed a captivating event poster for an art and music festival, "ArtWave Fusion," aiming to showcase the synergy between visual art and music genres.',
       },
       {
-        title: 'Cu imperdiet posidonium sed',
+        title: 'Role:',
-        description:
+        description: `Translated the festival's creative theme into a visually striking poster. Used bold typography, vibrant colors, and abstract elements to depict the fusion of art and music. Ensured the design captured the festival's vibrant atmosphere.`,
-          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
-      },
-      {
-        title: 'Nulla omittam sadipscing mel ne',
-        description:
-          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
       },
     ]}
     image={{
-      src: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      src: 'https://images.unsplash.com/photo-1619983081563-430f63602796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
-      alt: 'Colorful Image',
+      alt: 'Art and Music Poster Image',
     }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
-       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+        Project 2: <br /><span class="text-2xl">Event poster for art & music festival</span>
-      euismod tacimates.
+      </h3>
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content>
+
+  <!-- Content Widget **************** -->
+
+  <Content
+    isReversed
+    isAfterContent={true}
+    items={[
+      {
+        title: 'Description:',
+        description: `Redesigned the e-commerce website for an eco-conscious fashion brand, GreenVogue. The objective was to align the brand's online presence with its sustainable ethos and improve user experience.`,
+      },
+      {
+        title: 'Role:',
+        description: `Conducted a thorough analysis of the brand's values and customer base to inform the design direction. Created a visually appealing interface with intuitive navigation, highlighting sustainable materials, and integrating a user-friendly shopping experience.`,
+      },
+    ]}
+    image={{
+      src: 'https://plus.unsplash.com/premium_photo-1683288295841-782fa47e4770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+      alt: 'Fashion e-commerce Image',
+    }}
+  >
+    <Fragment slot="content">
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">
+        Project 3: <br /><span class="text-2xl">E-commerce website redesign for fashion brand</span>
+      </h3>
     </Fragment>
 
     <Fragment slot="bg">