Merge pull request #9 from vncsmyrnk/3-add-contact-section

Adding contact and footer sections
vncsmyrnk · May 14, 2024 · 7a58785 · 7a58785
2 parents dacfaba + 9dd4e19
commit 7a58785
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 19 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -12,6 +12,7 @@
     "framer-motion": "^11.1.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.10.2",
     "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/app/src/App.js b/app/src/App.js
@@ -2,21 +2,33 @@ import './App.css';
 import Project from './Project';
 import DarkModeSwitch from './DarkModeSwitch';
 import { useInView } from 'react-intersection-observer'
+import { FaLinkedin, FaEnvelope, FaPhone, FaGithub, FaReact } from 'react-icons/fa';
 
 function App() {
   const [refProjects, inViewProjects] = useInView({ threshold: 0.5 })
 
-  const codeStringRestaurant = `[...]
+  const projects = [
+    {
+      name: 'Restaurant integration API',
+      description: 'This API aims to centralize information related to restaurant orders in just one place, providing webhooks so that other systems can make decisions based on order activity',
+      language: 'python',
+      codeString: `[...]
 bp = Blueprint('bp_ingrediente', __name__)
 
 @bp.get("")
 def get_ingredientes():
     with session_scope() as session:
         ingredientes = session.query(Ingrediente).all()
         return jsonify([i.serialize() for i in ingredientes])
-[...]`;
-
-  const codeStringWTC = `[...]
+[...]`,
+      linkUrl: 'https://github.com/Sistema-de-integracao-em-restaurante/api',
+      linkDescription: 'See on GitHub',
+    },
+    {
+      name: 'Work Time calculator API',
+      description: 'This is an app built with Spring Boot and Gradle to calculate work time for a given parameter inputs',
+      language: 'java',
+      codeString: `[...]
 @PostMapping(value = "day")
 public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody RequestDay requestDay) {
   Day day =
@@ -25,10 +37,11 @@ public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody Reques
   List<Calculation> calculations = day.calculate();
   return ResponseEntity.ok(calculations);
 }
-[...]`;
-
-  const descriptionRestaurant = "This API aims to centralize information related to restaurant orders in just one place, providing webhooks so that other systems can make decisions based on order activity";
-  const descriptionWTC = "This is an app built with Spring Boot and Gradle to calculate work time for a given parameter inputs";
+[...]`,
+      linkUrl: 'https://github.com/clocked-app/calculations-api',
+      linkDescription: 'See on GitHub',
+    },
+  ];
 
   return (
     <div className="App relative bg-white dark:bg-gray-900 text-black dark:text-white">
@@ -65,15 +78,15 @@ public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody Reques
             </div>
           </nav>
         </div>
-        <div className="content-section flex flex-col grow justify-center ml-8 pt-[100px] md:pt-0 mr-[15%] ml-[20%]">
+        <div className="content-section flex flex-col grow justify-center ml-8 pt-[100px] md:pt-0 mr-5 md:mr-[15%] ml-5 md:ml-[20%]">
           <div className="title-section text-right animate-[slideLeft_1s_ease-out]">
-            <p className="main-sentence text-2xl md:text-7xl font-bold">Powering the digital world from behind the scenes</p>
-            <p className="description text-gray-800 dark:text-gray-300 text-xl md:text-4xl mt-4">I build scalable, secure, and seamless backend infrastructures</p>
+            <p className="main-sentence text-4xl md:text-7xl font-bold">Powering the digital world from behind the scenes</p>
+            <p className="description text-gray-800 dark:text-gray-300 text-2xl md:text-4xl mt-4">I build scalable, secure, and seamless backend infrastructures</p>
           </div>
         </div>
         <div className="description-section mt-8 grow justify-center pr-5 md:pr-[20%] ml-5 md:ml-[15%] animate-[slideRight_1s_ease-out]">
-          <div className="description-text text-xl text-gray-800 dark:text-gray-400 pt-8 md:pt-0">
-            <p>I am <span className="underline">Vinicius Mayrink</span> and I am a backend developer specialized in crafting robust APIs using an arsenal of tools including <span className="text-blue-700 dark:text-blue-400 font-semibold">Python</span>, <span className="text-blue-700 dark:text-blue-400 font-semibold">Java</span>, and <span className="text-blue-700 dark:text-blue-400 font-semibold">Node.js</span>. With a deep understanding of backend principles and concepts, I am proficient in implementing <i>SOLID</i> principles, <i>RESTful</i> architecture, and <i>clean code</i> practices to engineer <strong>scalable</strong> and <strong>efficient</strong> solutions.</p>
+          <div className="description-text text-base md:text-xl text-gray-800 dark:text-gray-400 pt-8 md:pt-0">
+            <p>I am <span className="underline">Vinicius Mayrink</span> and I am a backend developer specialized in crafting robust APIs using an arsenal of tools including <span className="text-blue-700 dark:text-blue-400 font-semibold">Python</span>, <span className="text-blue-700 dark:text-blue-400 font-semibold">Java</span>, and <span className="text-blue-700 dark:text-blue-400 font-semibold">Node.js</span>. With a deep understanding of backend principles and concepts, I am proficient in implementing SOLID principles, RESTful architecture, and clean code practices to engineer <strong>scalable</strong> and <strong>efficient</strong> solutions.</p>
           </div>
           <a href="#projects">
             <button class="mt-8 bg-blue-500 dark:bg-blue-700 hover:bg-blue-400 dark:hover:bg-blue-600 text-white font-bold py-2 px-4 border-b-4 border-blue-700 dark:border-blue-900 hover:border-blue-500 dark:hover:border-blue-700 rounded transition duration-500 hover:scale-110">
@@ -83,16 +96,46 @@ public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody Reques
         </div>
       </div>
       <div className="projects-page md:h-screen flex flex-col justify-center" id="projects">
-        <div ref={refProjects} className={inViewProjects ? "animate-[upDown_1s_ease-out]" : "invisible"}>
-          <div className="projects-section page-section pr-[5%] pl-[5%]">
-            <p className="text-6xl font-bold mt-[60px] md:mt-0 md:mt-0">Projects</p>
+        <div ref={refProjects} className={inViewProjects ? "animate-none md:animate-[upDown_1s_ease-out]" : "visible md:invisible"}>
+          <div className="projects-section page-section mr-[5%] ml-[5%]">
+            <p className="text-3xl md:text-5xl font-bold mr-[10%] ml-[10%] mt-[70px] md:mt-0">Projects</p>
             <div className="project-samples grid grid-cols-1 md:grid-cols-2 gap-4 mt-[5%] mx-2 mb-2">
-              <Project className="project-sample project-python w-full" name="Restaurant integration API" description={descriptionRestaurant} language="python" codeString={codeStringRestaurant} linkUrl="https://github.com/Sistema-de-integracao-em-restaurante/api" linkDescription="See on GitHub" />
-              <Project className="project-sample project-java w-full" name="Work Time calculator API" description={descriptionWTC} language="java" codeString={codeStringWTC} linkUrl="https://github.com/clocked-app/calculations-api" linkDescription="See on GitHub" />
+              {projects.map((project) => {
+                return <Project className="project-sample project-python w-full" name={project.name} description={project.description} language={project.language} codeString={project.codeString} linkUrl={project.linkUrl} linkDescription={project.linkDescription} />
+              })}
             </div>
           </div>
         </div>
       </div>
+      <div className="contact-page h-screen flex flex-col justify-end" id="contact">
+          <div className="contact-section page-section mr-[5%] ml-[5%] h-2/5 flex flex-col justify-self-center items-center">
+            <p className="text-3xl md:text-5xl font-bold mr-[10%] ml-[10%] mt-[70px] md:mt-0">Contact me on</p>
+            <div className="platforms mt-5 flex">
+              <a href="https://www.linkedin.com/in/vncsmyrnk">
+                <FaLinkedin className="mx-2 md:mx-5" color="#334155" size="4rem" />
+              </a>
+              <a href="mailto:[email protected]">
+                <FaEnvelope className="mx-2 md:mx-5" color="#334155" size="4rem" />
+              </a>
+              <a href="https://github.com/vncsmyrnk">
+                <FaGithub className="mx-2 md:mx-5" color="#334155" size="4rem" />
+              </a>
+              <a href="tel:+5531984805330">
+                <FaPhone className="mx-2 md:mx-5" color="#334155" size="4rem" />
+              </a>
+            </div>
+          </div>
+          <div className="footer-section page-section w-full bg-gray-300 dark:bg-gray-950 mt-[5%] flex flex-col h-1/6 items-center justify-center">
+            <p className="dark:text-gray-700">This website is powered by</p>
+            <div className="footer-tools flex mt-2">
+              <FaReact className="mx-2" color="#334155" size="2rem" />
+              <a href="https://github.com/vncsmyrnk/portfolio">
+                <FaGithub className="mx-2" color="#334155" size="2rem" />
+              </a>
+            </div>
+            <p className="text-gray-500 dark:text-gray-800 mt-3 text-sm">&copy; 2024 Vinicius Mayrink</p>
+          </div>
+      </div>
     </div>
   );
 }

diff --git a/app/src/Project.js b/app/src/Project.js
@@ -9,7 +9,7 @@ function Project(props) {
        <SyntaxHighlighter language={props.language} style={darcula}>
          {props.codeString}
        </SyntaxHighlighter>
-       <a href={props.linkUrl} class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+       <a href={props.linkUrl} class="inline-flex items-center px-3 py-2 mt-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
         {props.linkDescription}
        </a>
      </div>