Merge pull request #2 from rcaldeiradev/develop

Design updates & More

.github/workflows/pr.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@3
+      - uses: actions/setup-node@v3
         with:
           node-version: '18'
       - run: npm ci
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@3
+      - uses: actions/setup-node@v3
         with:
           node-version: '18'
       - run: npm ci

__tests__/index.test.js

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import '@testing-library/jest-dom'
+import Hero from "../src/app/components/Hero";
 
-describe('Pipeline test', () => {
-  it('Runs tests', () => {
-    expect(true).toBeTruthy();
-  })
+describe('Homepage', () => {
+  it('shows my name and role', () => {
+    render(<Hero />);
 
-  it('Runs tests #2', () => {
-    expect(false).toBeFalsy();
-  })
+    const heading = screen.getByRole('heading', {
+      name: /Rafael Caldeira Software Engineer/i,
+    });
 
-  it('Runs tests #3', () => {
-    expect(1).toBe(1);
+    expect(heading).toBeInTheDocument();
   })
-})
+});
+

package.json

@@ -11,6 +11,7 @@
     "test watch": "jest --watch"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@types/node": "20.3.0",
     "@types/react": "18.2.11",
     "@types/react-dom": "18.2.4",

src/app/components/About.tsx

@@ -1,31 +1,44 @@
 import Image from "next/image";
 import SectionTitle from "@/components/layout/SectionTitle";
-import mePic from "../../../public/me-full.jpg";
+import mePic from "../../../public/me.jpg";
+import ArrowLink from "@/components/ArrowLink";
 
 export default function About() {
-  return <div className="about flex">
-    <div className="image-wrapper relative rounded-3xl overflow-hidden shrink-0" style={{
-      height: '430px',
-      width: '480px',
-    }}>
-      <Image
-        src={mePic}
-        alt="Me"
-        fill={true}
-        className="-z-10"
-        style={{
-          objectFit: 'cover',
-        }}
-      />
-    </div>
+  return (
+    <div className="about flex flex-col sm:flex-row mb-10 lg:mb-20">
+      <div className="max-w-[330px] max-h-[330px] w-full mb-8 shrink-0">
+        <div
+          className={`relative rounded-full overflow-hidden w-full pt-[100%]`}
+        >
+          <Image
+            src={mePic}
+            alt="Me"
+            fill={true}
+            className="sm:-z-10"
+            priority={true}
+            unoptimized={true}
+            placeholder="blur"
+            style={{
+              objectFit: 'cover',
+            }}
+          />
+        </div>
+      </div>
+
+
+      <div className="texts-wrapper sm:ml-12">
+        <SectionTitle titleText="About Me" className="mb-8 sm:mt-12 sm:-ml-28" />
 
-    <div className="texts">
-      <SectionTitle titleText="About Me" className="mt-12 -ml-16" />
+        <div className="paragraphs lg:text-xl font-light">
+          <p>
+            Hi there! I am a Software Engineer with 7+ years experience, crafting top-notch web solutions for notable organizations
+            like MIT and Doctors Without Borders. I excel in PHP, JavaScript, TypeScript, API integration, containers,
+            automated tests, databases, server admin, SEO, CI...
+          </p>
+        </div>
 
-      <p className="ml-12 max-w-2xl text-xl font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a vestibulum tellus. Nam pharetra nisi at
-        sollicitudin auctor. Nunc auctor vel diam vitae dapibus. Nulla facilisi. Donec purus lectus, vulputate a nisi
-        non. Nam pharetra nisi at sollicitudin auctor. Nunc auctor vel diam vitae dapibus. Nulla facilisi.
-      </p>
+        <ArrowLink path={'/about'} text={'Read more'} className="mt-6" />
+      </div>
     </div>
-  </div>
+  )
 }

src/app/components/FeaturedProjects.tsx

@@ -0,0 +1,69 @@
+import SectionTitle from "@/components/layout/SectionTitle";
+import Card from "@/components/Card";
+import ArrowLink from "@/components/ArrowLink";
+
+interface CardItem {
+  title: string,
+  href: string,
+  tags: Array<string>
+}
+
+interface CardsList extends Array<CardItem> {}
+
+const cards: CardsList = [
+  {
+    title: 'Benzel-Busch',
+    href: '/',
+    tags: [
+      'Drupal',
+      'React',
+      'Apache Solr'
+    ],
+  },
+  {
+    title: 'MIT Quest',
+    href: '/',
+    tags: [
+      'Drupal 10',
+    ],
+  },
+  {
+    title: 'DomusVi',
+    href: '/',
+    tags: [
+      'Drupal 7',
+      'Apache Solr'
+    ],
+  }
+]
+
+export default function FeaturedProjects() {
+  if (!cards) {
+    return null;
+  }
+
+  return (
+    <div className="featured-projects mb-6 lg:mb-28">
+      <SectionTitle titleText="Featured Projects" className="mb-8 lg:mb-16" />
+
+      <ul className="cards flex flex-col md:flex-row gap-4 lg:gap-8 mb-6 lg:mb-12">
+        {cards.map((card, key) => {
+          return (
+            <li key={key} className="basis-1/3">
+              <Card
+                title={card.title}
+                href={card.href}
+                tags={card.tags}
+                className="bg-gray-300 h-44 lg:h-64"
+              />
+            </li>
+          )
+        })}
+      </ul>
+
+      <div className="actions flex justify-center">
+        <ArrowLink path={'/'} text={'See all projects'} />
+      </div>
+    </div>
+  )
+}

src/app/components/Hero.tsx

@@ -1,8 +1,10 @@
 export default function Hero() {
-  return <div className="hero my-16">
-    <h1 className="flex flex-col-reverse">
-      <span className="font-bold text-3xl text-gray-500">Rafael Caldeira</span>
-      <span className="font-regular text-7xl mb-5">Software Engineer</span>
-    </h1>
-  </div>
+  return (
+    <div className="hero mb-10 mt-4 lg:my-20">
+      <h1 className="flex flex-col">
+        <span className="font-extrabold text-4xl lg:text-6xl mb-3">Rafael Caldeira</span>
+        <span className="font-semibold text-xl lg:text-3xl text-gray-500">Software Engineer</span>
+      </h1>
+    </div>
+  )
 }

src/app/globals.scss

@@ -3,18 +3,4 @@
 @tailwind utilities;
 @tailwind screens;
 
-.full-html {
-    h2, p {
-        margin-bottom: 2rem;
-    }
-
-    h2 {
-        font-size: 1.3rem;
-        font-weight: 500;
-    }
-
-    p {
-        font-weight: 300;
-        font-size: 1.2rem;
-    }
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

src/app/layout.tsx

@@ -6,7 +6,7 @@ import Content from "@/components/layout/Content";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="pt" className="h-full">
+    <html lang="pt" className="h-full font-inter">
       <GoogleAnalytics gaMeasurementId={process.env.GA_MEASUREMENT_ID ?? ''}/>
 
       <body className="flex flex-col h-full">

src/app/page.tsx

@@ -1,5 +1,6 @@
 import Hero from "@/app/components/Hero";
 import About from "@/app/components/About";
+import FeaturedProjects from "@/app/components/FeaturedProjects";
 
 export const metadata = {
   title: 'Home | Rafael Caldeira',
@@ -11,6 +12,7 @@ export default function Home() {
     <div className="container mx-auto">
       <Hero />
       <About />
+      <FeaturedProjects />
     </div>
   );
 }

src/components/ArrowLink.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
+
+interface ArrowLinkProps {
+  path: string,
+  text: string,
+  className?: string,
+}
+
+export default function ArrowLink(
+  { path, text, className }: ArrowLinkProps
+) {
+  return <Link
+    href={path}
+    className={`lg:text-xl text-blue-700 inline-block ${className}`}
+  >
+    {text}
+    <ArrowLongRightIcon className="h-6 w-6 ml-3 inline-block" />
+  </Link>
+}

src/components/Card.tsx

@@ -0,0 +1,28 @@
+import ArrowLink from "@/components/ArrowLink";
+import Tag from "@/components/Tag";
+
+interface CardProps {
+  title: string,
+  href: string,
+  tags: Array<string>,
+  className?: string,
+}
+
+export default function Card(
+  { title, href, tags, className }: CardProps
+) {
+  return (
+    <div className={`card relative p-4 lg:p-6 rounded-3xl flex flex-col ${className}`}>
+      <div className="tags">
+        {tags && tags.map((label, key) => {
+          return <Tag label={label} key={key} className="text-gray-500 bg-gray-50 mr-2 mb-2 lg:mr-3 lg:mb-3" />
+        })}
+      </div>
+
+      <div className="texts mt-auto">
+        <h2 className="title text-2xl lg:text-4xl font-bold lg:mb-4">{title}</h2>
+        <ArrowLink path={href} text={'View'} />
+      </div>
+    </div>
+  )
+}

src/components/Tag.tsx

@@ -0,0 +1,14 @@
+interface TagProps {
+  label: string,
+  className?: string,
+}
+
+export default function Tag(
+  { label, className }: TagProps
+) {
+  return (
+    <div className={`py-1 px-2 text-sm inline-block rounded-lg ${className}`}>
+      {label}
+    </div>
+  )
+}

src/components/layout/SectionTitle.tsx

@@ -5,7 +5,7 @@ interface SectionTitleProps {
 
 export default function SectionTitle({ titleText, className }: SectionTitleProps) {
   return (
-    <h2 className={`font-bold text-4xl mb-12 bg-emerald-300 inline-block px-3 py-1 ${className}`}>
+    <h2 className={`font-bold text-2xl lg:text-4xl bg-emerald-300 inline-block px-4 py-2 ${className}`}>
       {titleText}
     </h2>
   )

src/components/layout/footer/Footer.tsx

@@ -2,7 +2,7 @@ import SocialLinks from "@/components/layout/footer/SocialLinks";
 
 export default function Footer() {
   return (
-    <div className="footer py-8 px-4 box-border mt-auto">
+    <div className="footer pt-8 pb-24 px-4 box-border mt-auto bg-gray-900">
       <SocialLinks />
     </div>
   )

src/components/layout/footer/SocialLinks.tsx

@@ -4,10 +4,22 @@ export default function SocialLinks() {
   return (
     <ul className="social-links flex justify-center">
       <li>
-        <SocialIcon url="https://github.com/rcaldeiradev" target="_blank" rel="noreferrer" className="mx-2" />
+        <SocialIcon
+          url="https://github.com/rcaldeiradev"
+          target="_blank"
+          rel="noreferrer"
+          bgColor="#FFFFFF"
+          className="mx-3"
+        />
       </li>
       <li>
-        <SocialIcon url="https://www.linkedin.com/in/rafaelcaldeiradasilva" target="_blank" rel="noreferrer" bgColor="#000000" className="mx-2" />
+        <SocialIcon
+          url="https://www.linkedin.com/in/rafaelcaldeiradasilva"
+          target="_blank"
+          rel="noreferrer"
+          bgColor="#FFFFFF"
+          className="mx-3"
+        />
       </li>
     </ul>
   )

src/components/layout/header/Brand.tsx

@@ -2,8 +2,12 @@ import Link from "next/link";
 
 export default function Brand() {
   return (
-    <Link href="/" className='block self-center font-bold text-xl'>
-      Rafael Caldeira
+    <Link
+      href="/"
+      className='inline-block self-center font-bold text-2xl bg-white px-3 py-1'
+    >
+      {/*[ RC ] */}
+      {`[ RC ]`}
     </Link>
   )
 }