From 3c91f6138e3cd020b2997b3deea01773d8819ad0 Mon Sep 17 00:00:00 2001
From: Noah Swerhun <noah@noahsw.xyz>
Date: Thu, 27 Jul 2023 19:36:41 -0500
Subject: [PATCH] home page final finished

---
 app/views/Accomplishments.tsx | 228 +++++++++++++++++++---------------
 components/Footer.tsx         |   4 +-
 public/text_accent_4.png      | Bin 0 -> 609 bytes
 tailwind.config.js            |   1 +
 4 files changed, 128 insertions(+), 105 deletions(-)
 create mode 100644 public/text_accent_4.png

diff --git a/app/views/Accomplishments.tsx b/app/views/Accomplishments.tsx
index e29f38b..3db324b 100644
--- a/app/views/Accomplishments.tsx
+++ b/app/views/Accomplishments.tsx
@@ -1,123 +1,145 @@
 const Accomplishments = () => {
-  const cardClass = "m-3";
+  const cardClass =
+    " overflow-hidden border-style-double border-primary-500 border-2 bg-primary-100 rounded-md drop-shadow-sm flex items-center bg-opacity-75 ";
   return (
     <section className="text-primary-500 overflow-hidden" id="accomplishments">
-      <div className="min-h-screen w-full bg-primary-300 flex items-center">
+      <div className="min-h-screen w-full bg-primary-300 flex items-center relative z-[-2]">
         <div className="w-11/12 lg:w-5/6 mx-auto flex flex-col">
-          <h2 className="font-cormorant text-5xl mb-8 mt-16 md:mt-20 text-left">
+          <h2 className="font-cormorant text-5xl my-16 md:mt-32 text-left">
             Not only a caring physician...
           </h2>
-          <div className="flex flex-col md:flex-row items-center justify-between">
-            <div className="basis-6/12">
-              <div className={cardClass}>
-                <div className="p-3">
-                  <h3 className="font-bold">Professional Experience</h3>
-                  <ul className="list-[square] ml-8">
-                    <li>
-                      <i>President</i> of Feely Center for Optimal Health, his
-                      private osteopathic practice.
-                    </li>
-                    <li>
-                      <i>President </i>of{" "}
-                      <a href="https://www.ommtests.com" className="underline">
-                        OMMtests.com
-                      </a>{" "}
-                      and{" "}
-                      <a href="https://www.tcmtests.com" className="underline">
-                        TCMtests.com
-                      </a>
-                      , test-prep sites for osteopathic doctors and
-                      accupuncturists, respectively.
-                    </li>
-                    <li>
-                      <i>Registered Investment Adviser</i> at Womack Investment
-                      Advisers.
-                    </li>
-                    <li>
-                      <i>National Director of Quality Management</i> at American
-                      WholeHealth.
-                    </li>
-                    <li>
-                      <i>President</i> of Rhema Medical Associates.
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div className={cardClass}>
-                <div className="p-3">
-                  <h3 className="font-bold ">Board Certifications</h3>
-                  <ul className="list-[square] ml-8">
-                    <li>American Board of Medical Acupuncture.</li>
-                    <li>
-                      American Board of Quality Assurance and Utilization Review
-                      Physicians.
-                    </li>
-                    <li>
-                      American Osteopathic Board of Special Proficiency in
-                      Manipulative Medicine.
-                    </li>
-                    <li>American Board of Osteopathic Family Practice.</li>
-                  </ul>
+          <div className="grid md:grid-rows-2 md:grid-cols-6 md:gap-8 gap-y-3 gap-x-1 w-full">
+            <div className={cardClass + "col-span-3"}>
+              <div className="relative">
+                <div className="before:absolute before:-left-64 before:-top-64 before:z-[-1] before:content-textAccent2">
+                  <div className="p-6">
+                    <h3 className="font-bold">Professional Experience</h3>
+                    <ul className="list-[square] ml-8">
+                      <li>
+                        <i>President</i> of Feely Center for Optimal Health, his
+                        private osteopathic practice.
+                      </li>
+                      <li>
+                        <i>President </i>of{" "}
+                        <a
+                          href="https://www.ommtests.com"
+                          className="underline"
+                        >
+                          OMMtests.com
+                        </a>{" "}
+                        and{" "}
+                        <a
+                          href="https://www.tcmtests.com"
+                          className="underline"
+                        >
+                          TCMtests.com
+                        </a>
+                        , test-prep sites for osteopathic doctors and
+                        accupuncturists, respectively.
+                      </li>
+                      <li>
+                        <i>Registered Investment Adviser</i> at Womack
+                        Investment Advisers.
+                      </li>
+                      <li>
+                        <i>National Director of Quality Management</i> at
+                        American WholeHealth.
+                      </li>
+                      <li>
+                        <i>President</i> of Rhema Medical Associates.
+                      </li>
+                    </ul>
+                  </div>
                 </div>
               </div>
             </div>
-            <div className="basis-6/12">
-              <div className={cardClass}>
-                <div className="p-3">
-                  <h3 className="font-bold">Academic Appointments</h3>
-                  <ul className="list-[square] ml-8">
-                    <li>
-                      <i>
-                        Clinical Associate Professor of Osteopathic Manipulative
-                        Medicine.
-                      </i>{" "}
-                      at Chicago College of Osteopathic Medicine/Midwestern
-                      University Medicine.
-                    </li>
-                    <li>
-                      <i>Adjunct Associate Professor</i> at Touro University,
-                      A.T. Still University, and Western University.
-                    </li>
-                    <li>
-                      <i>Consultant</i> to the World Health Organization for
-                      integrative medicine.
-                    </li>
-                  </ul>
+
+            <div className={cardClass + "col-span-3"}>
+              <div className="relative">
+                <div className="before:absolute before:-right-64 before:-top-64 before:z-[-1] before:content-textAccent2">
+                  <div className="p-6">
+                    <h3 className="font-bold ">Board Certifications</h3>
+                    <ul className="list-[square] ml-8">
+                      <li>American Board of Medical Acupuncture.</li>
+                      <li>
+                        American Board of Quality Assurance and Utilization
+                        Review Physicians.
+                      </li>
+                      <li>
+                        American Osteopathic Board of Special Proficiency in
+                        Manipulative Medicine.
+                      </li>
+                      <li>American Board of Osteopathic Family Practice.</li>
+                    </ul>
+                  </div>
                 </div>
               </div>
-              <div className={cardClass}>
-                <div className="p-3">
-                  <h3 className="font-bold">Publications & Lectures</h3>
-                  <ul className="list-[square] ml-8">
-                    <li>
-                      3 books written:
-                      <ul className="list-[square] ml-8">
-                        <li>
-                          <i>
-                            Yamamoto New Scalp Acupuncture (YNSA): Principles
-                            and Practice
-                          </i>
-                          , 1st ed. and 2nd ed.
-                        </li>
-                        <li>
-                          <i>Clinical Cranial Osteopathy: Selected Readings</i>
-                        </li>
-                      </ul>
-                    </li>
-                    <li>4 articles in prestigious medical journals.</li>
-                    <li>Nearly 80 lectures given.</li>
-                  </ul>
+            </div>
+
+            <div className={cardClass + "col-span-3"}>
+              <div className="relative">
+                <div className="before:absolute before:-left-64 before:-bottom-64 before:z-[-1] before:content-textAccent2">
+                  <div className="p-6">
+                    <h3 className="font-bold">Academic Appointments</h3>
+                    <ul className="list-[square] ml-8">
+                      <li>
+                        <i>
+                          Clinical Associate Professor of Osteopathic
+                          Manipulative Medicine.
+                        </i>{" "}
+                        at Chicago College of Osteopathic Medicine/Midwestern
+                        University Medicine.
+                      </li>
+                      <li>
+                        <i>Adjunct Associate Professor</i> at Touro University,
+                        A.T. Still University, and Western University.
+                      </li>
+                      <li>
+                        <i>Consultant</i> to the World Health Organization for
+                        integrative medicine.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className={cardClass + "h-48 justify-center"}>
+              <div className="flex flex-col items-center p-6">
+                <div className="text-2xl font-bold">3</div>
+                <div className="text-center">books written</div>
+              </div>
+            </div>
+            <div className={cardClass + "h-48 justify-center"}>
+              <div className="flex flex-col items-center p-6">
+                <div className="text-2xl font-bold">9</div>
+                <div className="text-center">articles & abstracts</div>
+              </div>
+            </div>
+            <div className={cardClass + "h-48 justify-center"}>
+              <div className="relative">
+                <div className="before:absolute before:-right-128 before:-bottom-64 before:z-[-1] before:content-textAccent2">
+                  <div className="flex flex-col items-center p-6 ">
+                    <div className="text-2xl font-bold">76</div>
+                    <div className="text-center">lectures given</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <h2 className="font-cormorant text-5xl my-8 text-right">
-            ...an{" "}
-            <span className="text-primary-100">accomplished professional.</span>
-          </h2>
+          <div className="relative">
+            <div className="before:absolute lg:before:content-textAccent4 before:z-[-1] before:-right-12 before:top-8 ">
+              <h2 className="font-cormorant text-5xl my-16 text-right">
+                ...an{" "}
+                <span className="text-primary-100">
+                  accomplished professional.
+                </span>
+              </h2>
+            </div>
+          </div>
         </div>
       </div>
-      <div className="bg-primary-100items-center m-3 flex justify-between flex-wrap">
+      <div className="bg-primary-100 items-center my-3 mx-8 flex justify-center md:justify-between flex-wrap">
         <img
           src="/feelycenter.png"
           alt="Feely Center Logo"
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 0472a54..5e7b911 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,8 +1,8 @@
 const Footer = () => {
   return (
     <footer className="w-full  bg-neutral-800 text-neutral-300">
-      <div className="px-6 py-12">
-        <div className="flex justify-evenly gap-10 flex-col ml-8 md:m-0 md:flex-row">
+      <div className="w-11/12 lg:w-5/6 mx-auto py-12">
+        <div className="grid md:grid-cols-5 gap-12 ml-8 md:m-0 md:flex-row">
           <div className="">
             <h3 className="text-xl font-bold">Home</h3>
             <ul className="text-sm">
diff --git a/public/text_accent_4.png b/public/text_accent_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd77b489630eb6012ec1f27f0599fe661884442f
GIT binary patch
literal 609
zcmV-n0-pVeP)<h;3K|Lk000e1NJLTq001}u001=z1^@s66c{ML00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0rp8mK~#7F?U~(e
z!Y~kk&!K9|3nClPP3R<r4LSmwzy_rgzzA&6Y!J#zX(hPcg@*FeG;wlC&XPaL3gj#+
zpB($5Gl0kA@pwF$n5;k?V?VfuXHd$%1M~3Ktn&KZWCg;|tm6-iItHeokj@Swx|A1W
z!mgQ-B%DajcL=Z0A_2hA7<d9nNOH8<A|~w%We2xplRgVwi}VkQbmEz$nHwj6_AqN(
z(uP8UjH{A`1sNA5tppj@Br|tW&V!vUydc0Jqsy9FpC#Y7I00d3r(E{#%or+?mj}mz
zfrZJIJUmQJyc8%i=D)8fy^hfy;gM!BN^TgK_3n*1ZO7O3Fxu!cZrf<Q2M{E84W3CN
zj5eP*y@;z`lST8OvywJ>&`C+#Jm{QcnLOx}q_rU9l4L1C#udrZf{Y82l>`~>l9dG+
z&5|O5j8;i8K}Msbs34<FQe2SHBw33fqeZedK}LgQt%8iLWDv*}b!!)7Y$OfB1O#bB
zkg=LcK^hZeEG35$YqC*6CQp)B9)AgJJdF!71tjTqQg^K^*@_^OCrP!|l|%|@O^|WD
zBv}}$pbx10|MqhRxk#@k@!#{wG%k5QST`3H^x+@zv)vUeP$9@%9TQx~OXW#5f=nHf
vssx!-lD5$(BVNlFPvgXheeifZ9_@SsyXalUqQ#F!00000NkvXXu0mjfX_Nd<

literal 0
HcmV?d00001

diff --git a/tailwind.config.js b/tailwind.config.js
index 18a4c9a..0e27b82 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -56,6 +56,7 @@ module.exports = {
         textAccent2: "url('/text_accent_2.png')",
         quote: "url('/quote.png')",
         textAccent3: "url('/text_accent_3.png')",
+        textAccent4: "url('/text_accent_4.png')",
       },
     },
   },