Merge pull request #5 from rdias66/right-content

Right content
rdias66 · Oct 8, 2024 · e5dc0b2 · e5dc0b2
2 parents 53f9180 + 5c0d6cc
commit e5dc0b2
Show file tree

Hide file tree

Showing 15 changed files with 461 additions and 130 deletions.
diff --git a/src/components/general/Socials.astro b/src/components/general/Socials.astro
@@ -16,6 +16,11 @@ const socials: Social[] = [
     url: 'https://www.linkedin.com/in/rodrigo-dias-45009a242',
     icon: 'linkedin',
   },
+  {
+    name: 'Instagram',
+    url: 'https://www.instagram.com/diasrodr/',
+    icon: 'instagram',
+  },
 ]
 ---
 

diff --git a/src/components/home/Blog.astro b/src/components/home/Blog.astro
@@ -2,4 +2,77 @@
 
 ---
 
-<div id="blog">this will be blog section</div>
+<div id="blog">
+  <div class="center">
+    <code class="title"
+      >Visite meu <a href="">
+        <code class="shiny-text">Blog aqui ↗</code></a
+      ></code
+    >
+    <code class="subtle">quando ele estiver pronto :)</code>
+  </div>
+</div>
+
+<style>
+  .center {
+    text-align: center;
+  }
+  a {
+    text-decoration: none;
+  }
+  .subtle {
+    color: var(--text-secondary);
+  }
+
+  .shiny-text {
+    display: inline-block;
+    background: linear-gradient(
+      90deg,
+      #f72585,
+      #7209b7,
+      #0ca364,
+      #4361ee,
+      #4cc9f0,
+      #e7ca21
+    );
+    background-size: 300%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: shiny 4s linear infinite;
+  }
+
+  .shiny-text:hover {
+    animation: colorChange 5s linear infinite;
+  }
+
+  @keyframes shiny {
+    0% {
+      background-position: 0%;
+    }
+    100% {
+      background-position: 100%;
+    }
+  }
+
+  @keyframes colorChange {
+    0% {
+      color: #f72585;
+    }
+    20% {
+      color: #7209b7;
+    }
+    40% {
+      color: #0ca364;
+    }
+    60% {
+      color: #4361ee;
+    }
+    80% {
+      color: #4cc9f0;
+    }
+    100% {
+      color: #e7ca21;
+    }
+  }
+</style>
diff --git a/src/components/home/Experiences.astro b/src/components/home/Experiences.astro
@@ -0,0 +1,90 @@
+---
+import experiences from '../../content/experiences.js'
+import ExperienceCard from '../ui/ExperienceCard.astro'
+---
+
+<div class="margin-top5">
+  <section id="experiences" class="experiences-section">
+    <code class="sub-title">Experiências</code>
+    {
+      experiences.map((experience) => (
+        <ExperienceCard
+          year={experience.year}
+          title={experience.title}
+          desc={experience.desc}
+          techStack={experience.techStack}
+        />
+      ))
+    }
+  </section>
+</div>
+
+<style>
+  .margin-top5 {
+    margin-top: 5rem;
+  }
+  code {
+    text-align: center;
+  }
+  .experiences-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+  }
+
+  .image-section {
+    margin-bottom: 1rem;
+  }
+
+  .image-section img {
+    width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+  }
+
+  .content-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .project-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #f8fafc; /* Light title */
+  }
+
+  .project-description {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #d1d5db; /* Subtle text color */
+  }
+
+  .tech-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .tech-stack > * {
+    background-color: #0f172a;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  .links {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .links a {
+    color: #38bdf8; /* Link color */
+    text-decoration: none;
+  }
+
+  .links a:hover {
+    text-decoration: underline;
+  }
+</style>
diff --git a/src/components/home/Projects.astro b/src/components/home/Projects.astro
@@ -4,8 +4,8 @@ import ProjectCard from '../ui/ProjectCard.astro'
 ---
 
 <div class="margin-top5">
-  <code class="sub-title">Projetos</code>
   <section id="projects" class="projects-section">
+    <code class="sub-title">Projetos</code>
     {
       projects.map((project) => (
         <ProjectCard
@@ -25,6 +25,9 @@ import ProjectCard from '../ui/ProjectCard.astro'
   .margin-top5 {
     margin-top: 5rem;
   }
+  code {
+    text-align: center;
+  }
   .projects-section {
     display: flex;
     flex-direction: column;

diff --git a/src/components/ui/Brief.astro b/src/components/ui/Brief.astro
@@ -20,20 +20,15 @@ const description =
     align-items: start;
   }
 
-  h1 {
-    color: white;
-    font-size: 56px;
-  }
-  h2 {
-    color: whitesmoke;
-    font-size: 18px;
-  }
-
   .description {
     margin-top: 10%;
     color: lightcoral;
-
     text-align: start;
-    max-width: 60%;
+    max-width: 80%;
+  }
+  @media (min-width: 769px) {
+    .description {
+      max-width: 60%;
+    }
   }
 </style>
diff --git a/src/components/ui/ExperienceCard.astro b/src/components/ui/ExperienceCard.astro
@@ -0,0 +1,106 @@
+---
+import TechBadge from './TechBadge.astro'
+
+const { year, title, desc, techStack } = Astro.props
+---
+
+<div class="experience-card">
+  <div class="content-section">
+    <div class="year">
+      <code>{year}</code>
+    </div>
+    <code class="sub-title">{title}</code>
+    <code class="description-color">{desc}</code>
+    <div class="tech-stack">
+      {techStack.map((tech) => <TechBadge techName={tech} />)}
+    </div>
+  </div>
+</div>
+
+<style>
+  .experience-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 90%;
+    margin: 1rem auto;
+    padding: 1.5rem;
+    background-color: #1d1c1c;
+    border-radius: 0.4rem;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+    color: #f8fafc;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .experience-card::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      130deg,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.05) 40%,
+      transparent 60%,
+      transparent 100%
+    );
+    transform: translateX(-100%) rotate(45deg);
+    transition: opacity 0.4s ease;
+    opacity: 0;
+  }
+
+  .experience-card:hover::before {
+    opacity: 1;
+    animation: subtle-shine 1s ease-out forwards;
+  }
+
+  @keyframes subtle-shine {
+    0% {
+      transform: translateX(-100%) rotate(45deg);
+    }
+    100% {
+      transform: translateX(100%) rotate(45deg);
+    }
+  }
+
+  .description-color {
+    margin-top: 5%;
+    color: var(--primary-color);
+
+    text-align: start;
+  }
+
+  .project-card:hover {
+    transform: translateY(-0.5rem);
+    box-shadow:
+      -0.5px -1px 5px rgba(63, 63, 63, 0.3),
+      /* Top-left soft gray shadow */ 3px 6px var(--primary-color); /* Bottom-right shadow with your primary color */
+  }
+
+  .content-section {
+    flex: 2;
+    padding-left: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .tech-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .tech {
+    background-color: #0f172a;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+</style>
diff --git a/src/components/ui/Navigation.astro b/src/components/ui/Navigation.astro
@@ -6,6 +6,9 @@
   <a href="#intro" class="nav-link" onclick="setActive(this)"
     ><code>Intro</code></a
   >
+  <a href="#experiences" class="nav-link" onclick="setActive(this)"
+    ><code>Experiências</code></a
+  >
   <a href="#projects" class="nav-link" onclick="setActive(this)"
     ><code>Projetos</code></a
   >