FEAT AND STYLE: done with the hero section styling

SANKALP1011 · Feb 21, 2024 · 4b57fbd · 4b57fbd
1 parent 675c72e
commit 4b57fbd
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 50 deletions.
diff --git a/src/Components/FollowerAnalysis/FollowerProgress.tsx b/src/Components/FollowerAnalysis/FollowerProgress.tsx
@@ -23,7 +23,7 @@ const FollowerProgress: React.FC<FollowerAnalysis> = ({
         <div className="mb-3">
       {show && ( 
           <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
-            <h2 className="followerAnalysisCardTitle font-mono">Followers</h2>
+            <h2 className="followerAnalysisCardTitle">Followers</h2>
           </RoughNotation>
         )}
         </div>
@@ -36,7 +36,7 @@ const FollowerProgress: React.FC<FollowerAnalysis> = ({
             tooltip="Followers"
             color={"green"}
           >
-            <span className="text-md text-pink-700 font-large font-bold font-mono">{followerCount}</span>
+            <span className="text-md text-pink-700 font-large font-bold">{followerCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta

diff --git a/src/Components/FollowerAnalysis/FollowingProgress.tsx b/src/Components/FollowerAnalysis/FollowingProgress.tsx
@@ -20,7 +20,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
     <div className="mb-3">
       {show && ( 
           <RoughNotation type="underline" show={show} color="red" strokeWidth={5}>
-            <h2 className="followerAnalysisCardTitle font-mono">Followers</h2>
+            <h2 className="followerAnalysisCardTitle">Followers</h2>
           </RoughNotation>
         )}
         </div>
@@ -33,7 +33,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
           tooltip="Following"
           color={"purple"}
 
-        > <span className="text-md text-red-700 font-large  font-extrabold font-mono">{followingCount}</span></ProgressCircle>
+        > <span className="text-md text-red-700 font-large  font-extrabold">{followingCount}</span></ProgressCircle>
         {increaseOrDecrease === "no_change" ? (
           <BadgeDelta deltaType="unchanged" isIncreasePositive={true}
           size="sm" color={"green"}>No Change</BadgeDelta>

diff --git a/src/Components/LanguageAnalysis/TotalLangProgress.tsx b/src/Components/LanguageAnalysis/TotalLangProgress.tsx
@@ -19,7 +19,7 @@ const TotalLangProgress: React.FC<TotalLangAnalysis> = ({
               color="red"
               strokeWidth={5}
             >
-              <h2 className="totalLangrAnalysisCardTitle font-mono mb-5">
+              <h2 className="totalLangrAnalysisCardTitle mb-5">
                 Lines of code pushed
               </h2>
             </RoughNotation>

diff --git a/src/Components/PullReqAnalysis/PullReqProgress.tsx b/src/Components/PullReqAnalysis/PullReqProgress.tsx
@@ -23,7 +23,7 @@ const PullRequestProgress: React.FC<PullRequestAnalysis> = ({
       <Card className="pullRequestCard">
         <RoughNotation type="underline" show={show} color="green" strokeWidth={5}>
           {" "}
-          <Title className="pullRequestTitle font-mono">
+          <Title className="pullRequestTitle">
             Pull Request Analysis
           </Title>
         </RoughNotation>
@@ -34,7 +34,8 @@ const PullRequestProgress: React.FC<PullRequestAnalysis> = ({
           category="value"
           index="name"
           valueFormatter={valueFormatter}
-          colors={["rose", "yellow"]}
+          colors={["pink", "blue"]}
+          variant="pie"
         />
       </Card>
     </div>

diff --git a/src/Components/Repository/NewRepoProgress.tsx b/src/Components/Repository/NewRepoProgress.tsx
@@ -10,23 +10,23 @@ export const NewRepoProgress: React.FC<RepoDataProp> = ({repoData})=>{
 
     return <div>
       <Card className="bg-zinc-900 oldestRepoCard hover:bg-white">
-        <h3 className="text-orange-400 font-extrabold font-mono">
-            <span className="text-pink-600 mr-2 font-extrabold font-mono">Name :</span>
+        <h3 className="text-orange-400 font-extrabold">
+            <span className="text-pink-600 mr-2 font-extrabold">Name :</span>
             {repoData.newestRepo.name}
         </h3>
-        <h3 className="text-red-600 font-extrabold font-mono">
-            <span className="text-green-600 mr-2 font-extrabold font-mono">Language :</span>
+        <h3 className="text-red-600 font-extrabold">
+            <span className="text-green-600 mr-2 font-extrabold">Language :</span>
             {repoData.newestRepo.buildLanguage}
         </h3>
-        <h3 className="text-violet-600 font-extrabold font-mono">
-            <span className="text-orange-600 mr-2 font-extrabold font-mono">Date :</span>
+        <h3 className="text-violet-600 font-extrabold">
+            <span className="text-orange-600 mr-2 font-extrabold">Date :</span>
             {repoData.newestRepo.dateOfCreation}
         </h3>
-        <h3 className="text-purple-600 font-extrabold font-mono">
-            <span className="text-green-600 mr-2 font-extrabold font-mono">Stars :</span>
+        <h3 className="text-purple-600 font-extrabold">
+            <span className="text-green-600 mr-2 font-extrabold">Stars :</span>
             {repoData.newestRepo.repoStarsCount}
         </h3>
-        <h3 className="text-pink-600 font-extrabold font-mono">
+        <h3 className="text-pink-600 font-extrabold">
             <span className="text-blue-600 mr-2 font-extrabold font-mono">Issue Count :</span>
             {repoData.newestRepo.closedIssueCount}
         </h3>

diff --git a/src/Components/Repository/OldRepoProgress.tsx b/src/Components/Repository/OldRepoProgress.tsx
@@ -10,24 +10,24 @@ export const OldRepoProgress: React.FC<RepoDataProp> = ({repoData})=>{
 
     return <div>
       <Card className="bg-zinc-900 oldestRepoCard  hover:bg-white" decorationColor="black">
-        <h3 className="text-orange-400 font-extrabold font-mono">
-            <span className="text-pink-600 mr-2 font-extrabold font-mono">Name :</span>
+        <h3 className="text-orange-400 font-extrabold ">
+            <span className="text-pink-600 mr-2 font-extrabold">Name :</span>
             {repoData.oldestRepo.name}
         </h3>
-        <h3 className="text-red-600 font-extrabold font-mono">
-            <span className="text-green-600 mr-2 font-extrabold font-mono">Language :</span>
+        <h3 className="text-red-600 font-extrabold">
+            <span className="text-green-600 mr-2 font-extrabold">Language :</span>
             {repoData.oldestRepo.buildLanguage}
         </h3>
-        <h3 className="text-violet-600 font-extrabold font-mono">
-            <span className="text-orange-600 mr-2 font-extrabold font-mono">Date :</span>
+        <h3 className="text-violet-600 font-extrabold">
+            <span className="text-orange-600 mr-2 font-extrabold">Date :</span>
             {repoData.oldestRepo.dateOfCreation}
         </h3>
-        <h3 className="text-purple-600 font-extrabold font-mono">
-            <span className="text-green-600 mr-2 font-extrabold font-mono">Stars :</span>
+        <h3 className="text-purple-600 font-extrabold">
+            <span className="text-green-600 mr-2 font-extrabold">Stars :</span>
             {repoData.oldestRepo.repoStarsCount}
         </h3>
-        <h3 className="text-pink-600 font-extrabold font-mono">
-            <span className="text-blue-600 mr-2 font-extrabold font-mono">Issue Count :</span>
+        <h3 className="text-pink-600 font-extrabold">
+            <span className="text-blue-600 mr-2 font-extrabold">Issue Count :</span>
             {repoData.oldestRepo.closedIssueCount}
         </h3>
 

diff --git a/src/Components/Repository/RecentCommitProgeress.tsx b/src/Components/Repository/RecentCommitProgeress.tsx
@@ -12,28 +12,28 @@ const RecentCommitProgress: React.FC<MostRecentCommitInterfaceProp> = ({
 }) => {
   const [show,setShow] = useState(true)
   return (
-    <div className="mt-3 relative group items-start justify-center">
+    <div className="mt-8 relative group items-start justify-center">
       <div className="ml-5 mostRecentGradient absolute inset-0 bg-gradient-to-r from-pink-600 to-red-600 blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
       <Card className="bg-black mostRecentCard ml-7">
         <div className="w-32 text-center mb-1">
         <RoughNotation type="highlight" show={show} color="red" strokeWidth={5}>
-          <h2 className="text-white text-center  font-extrabold font-mono">Recent Commit</h2>
+          <h2 className="text-white text-center  font-extrabold">Recent Commit</h2>
         </RoughNotation>
         </div>
 
-        <h1 className="text-pink-600  font-extrabold font-mono mb-1">
+        <h1 className="text-pink-600  font-extrabold mb-1">
       <span className="text-blue-500 mr-2">Name:</span>   {mostRecentCommit.mostRecentCommit.repoName}
         </h1>
-        <h3 className="text-red-600  font-extrabold font-mono mb-1">
+        <h3 className="text-red-600  font-extrabold  mb-1">
      <span className="text-violet-600 mr-2"> Commit Date:</span>    {mostRecentCommit.mostRecentCommit.commitDate}
         </h3>
-        <p className="text-orange-600 font-extrabold font-mono mb-1">
+        <p className="text-orange-600 font-extrabold mb-1">
        <span className="text-blue-600">AgeInDays:</span>   {mostRecentCommit.mostRecentCommit.ageInDays}
         </p>
-        <p className="text-yellow-600  font-extrabold font-mono mb-1">
+        <p className="text-yellow-600  font-extrabold mb-1">
       <span className="text-pink-400 mr-2">  Author:</span> {mostRecentCommit.mostRecentCommit.commitData.author_Namae}
         </p>
-        <p className="text-blue-600  font-extrabold font-mono">
+        <p className="text-blue-600  font-extrabold">
        <span className="text-green-600 mr-2">Message:</span>   {mostRecentCommit.mostRecentCommit.commitData.author_commit_message}
         </p>
       </Card>

diff --git a/src/Components/Repository/RepoProgress.tsx b/src/Components/Repository/RepoProgress.tsx
@@ -23,7 +23,7 @@ const RepoProgress: React.FC<RepoCountAnalysis> = ({
         <div className="mb-3">
       {show && ( 
           <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
-            <h2 className="followerAnalysisCardTitle font-mono">Repo Count</h2>
+            <h2 className="followerAnalysisCardTitle">Repo Count</h2>
           </RoughNotation>
         )}
         </div>
@@ -36,7 +36,7 @@ const RepoProgress: React.FC<RepoCountAnalysis> = ({
             tooltip="Followers"
             color={"pink"}
           >
-            <span className="text-md text-blue-700 font-large font-extrabold font-mono">{RepoCount}</span>
+            <span className="text-md text-blue-700 font-large font-extrabold">{RepoCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta

diff --git a/src/Components/Repository/TopRepoStatus.tsx b/src/Components/Repository/TopRepoStatus.tsx
@@ -15,13 +15,13 @@ const TopRepoStatus: React.FC<TopRepoStatusProp> = ({ topRepo }) => {
             <Card className="topRepoCard bg-black text-white text-left p-4">
 
                 <RoughNotation type="highlight" show={show} color="blue" strokeWidth={4}>
-                    <h2 className="topRepoCardTitle font-sans font-extrabold ">Top Repo</h2>
+                    <h2 className="topRepoCardTitle font-extrabold ">Top Repo</h2>
                 </RoughNotation>
 
-                <h3 className="text-orange-400 font-sans font-extrabold mb-4 mt-5">{topRepo.Name}</h3>
-                <p className="text-blue-400 font-sans font-extrabold mb-2">Stars Count - {topRepo.StarsCount}</p>
-                <p className="text-green-500 font-sans font-extrabold mb-2">Language -  {topRepo.Language}</p>
-                <p className="text-pink-600 font-sans font-extrabold mb-2">Creation - {new Date(topRepo.DateOfCreation).toLocaleString()}</p>
+                <h3 className="text-orange-400  font-extrabold mb-4 mt-5">{topRepo.Name}</h3>
+                <p className="text-blue-400  font-extrabold mb-2">Stars Count - {topRepo.StarsCount}</p>
+                <p className="text-green-500  font-extrabold mb-2">Language -  {topRepo.Language}</p>
+                <p className="text-pink-600  font-extrabold mb-2">Creation - {new Date(topRepo.DateOfCreation).toLocaleString()}</p>
             </Card>
         </div>
     );

diff --git a/src/Components/Repository/TotalStarProgress.tsx b/src/Components/Repository/TotalStarProgress.tsx
@@ -22,7 +22,7 @@ const TotalStarProgress: React.FC<TotalStar> = ({
         <div className="mb-3">
       {show && ( 
           <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
-            <h2 className="followerAnalysisCardTitle font-mono">Total Stars</h2>
+            <h2 className="followerAnalysisCardTitle">Total Stars</h2>
           </RoughNotation>
         )}
         </div>
@@ -35,7 +35,7 @@ const TotalStarProgress: React.FC<TotalStar> = ({
             tooltip="Followers"
             color={"orange"}
           >
-            <span className="text-md text-blue-700 font-large font-extrabold font-mono">{TotalStarsCount}</span>
+            <span className="text-md text-blue-700 font-large font-extrabold ">{TotalStarsCount}</span>
           </ProgressCircle>
           <BadgeDelta
               deltaType="unchanged"

diff --git a/src/Components/TopicAnalysis/TopicProgress.tsx b/src/Components/TopicAnalysis/TopicProgress.tsx
@@ -23,7 +23,7 @@ export const TopicProgress:React.FC<TopicCountProps>=({topicCounts})=>{
         <div className="topicBackGroundGrad w-full absolute -inset-0.5 bg-gradient-to-r from-yellow-300 to-red-400  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
         <Card className="topicCloudCard">
             <RoughNotation type="underline" show={show} color="pink" strokeWidth={5}>
-                <h2 className="topicCardTitle font-mono mb-2">Topics Worked</h2>
+                <h2 className="topicCardTitle  mb-2">Topics Worked</h2>
             </RoughNotation>
      <ReactWordcloud words={wordCloudData} options={options}/>
         </Card>

diff --git a/src/Styles/Dashboard/followerProgress.css b/src/Styles/Dashboard/followerProgress.css
@@ -41,7 +41,7 @@
   .gradientbackGround{
     margin-left: 10%;
     border-radius: 30px;
-    width: 258px;
+    width: 250px;
   }
 .pullRequestCard{
    background-color: black;

diff --git a/src/Styles/Dashboard/langCount.css b/src/Styles/Dashboard/langCount.css
@@ -34,7 +34,7 @@
 }
 .repoFlexCard{
   width: 110%;
-  margin-top: 36%;
+  margin-top: 8%;
   border-radius: 40px;
 }
 .oldestRepoCard{

diff --git a/src/Styles/Dashboard/main.css b/src/Styles/Dashboard/main.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 .tabCard{
     background-color: black;
     border-radius: 55px;
@@ -7,4 +8,16 @@
 .tabCardBackGradient{
  max-width: 280px;
  border-radius: 30px;
+}
+.heroTitle{
+    font-family: "Shantell Sans", cursive;
+    font-weight: bolder;
+    font-size: 60px;
+    text-align: center;
+}
+h2 , h3 , span ,p{ 
+    font-family: "Shantell Sans", cursive;
+}
+.y{
+font-size: 17px;
 }
diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
@@ -343,8 +343,18 @@ const VersionDashboard: React.FC = () => {
           <div>
             <LanguageCount languageCounts={langCount} />
           </div>
-
-          <div className="repoFlexBox mt-36 ml-10 relative group items-start justify-center">
+<div className="heroTitleDiv mt-10 ml-20">
+<RoughNotation
+                  type="box"
+                  strokeWidth={5}
+                  color="yellow"
+                  show={show}
+                  multiline={true}
+                >
+  <h2 className="heroTitle text-white">Welcomeeeee <span> <p className="text-orange-500 y">Crafted By - Sankalp's Github Profile </p></span></h2>
+  </RoughNotation>
+</div>
+          <div className="repoFlexBox ml-10 relative group items-start justify-center">
             <div className="repoGradinetBack w-full absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
             <Card className="bg-black repoFlexCard ">
               <div className="flex flex-row gap-5 mb-5 repoFlexHeading">
@@ -359,7 +369,7 @@ const VersionDashboard: React.FC = () => {
                     onClick={() => {
                       setNewRepoCard(false), setShowOldestRepoCard(true);
                     }}
-                    className="text-blue-600 font-extrabold font-mono hover:text-pink-600 hover:cursor-pointer"
+                    className="text-blue-600 font-extrabold font-mono hover:text-yellow-300 hover:cursor-pointer"
                   >
                     Oldest Repo
 
@@ -376,7 +386,7 @@ const VersionDashboard: React.FC = () => {
                   onClick={() => {
                     setNewRepoCard(true), setShowOldestRepoCard(false);
                   }}
-                  className="text-pink-600  font-extrabold font-mono hover:text-blue-600 hover:cursor-pointer"
+                  className="text-pink-600  font-extrabold font-mono hover:text-violet-500 hover:cursor-pointer"
                 >
                   Newest Repo
                 </h3>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 :root {
   --foreground-rgb: 0, 0, 0;
@@ -17,7 +18,7 @@
 }
 
 body{
-  background-color: black;
+  background-color: #040D12;
 }