Merge pull request #7 from vncsmyrnk/basic-data

Basic data
vncsmyrnk · May 13, 2024 · 29e3292 · 29e3292
2 parents bc9e53f + cdaa27f
commit 29e3292
Show file tree

Hide file tree

Showing 18 changed files with 1,908 additions and 2,097 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -24,6 +24,7 @@ jobs:
         run: npm run build
 
       - name: Archive production artifacts
+        if: github.ref == 'refs/heads/main'
         uses: actions/upload-artifact@v4
         with:
           name: app

diff --git a/README.md b/README.md
@@ -3,7 +3,9 @@
 
 # My portfolio
 
-All my skills and accomplishments showcased in one place
+All my skills and accomplishments showcased in one place.
+
+[Check it out!](https://vncsmyrnk.github.io/portfolio/)
 
 ## Run locally
 

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -4,12 +4,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fontsource/rubik": "^5.0.20",
+    "@fontsource/ubuntu": "^5.0.13",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^11.1.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.10.2",
     "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -35,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
   }
 }
diff --git a/app/public/android-chrome-192x192.png b/app/public/android-chrome-192x192.png
diff --git a/app/public/android-chrome-512x512.png b/app/public/android-chrome-512x512.png
diff --git a/app/public/apple-touch-icon.png b/app/public/apple-touch-icon.png
diff --git a/app/public/favicon-16x16.png b/app/public/favicon-16x16.png
diff --git a/app/public/favicon-32x32.png b/app/public/favicon-32x32.png
diff --git a/app/public/favicon.ico b/app/public/favicon.ico
diff --git a/app/public/favicon_io.zip b/app/public/favicon_io.zip
diff --git a/app/public/index.html b/app/public/index.html
@@ -6,10 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="descriptions"
+      content="Portolio web site"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Vinicius Mayrink</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/app/src/App.css b/app/src/App.css
@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+html {
+  scroll-behavior: smooth;
 }
diff --git a/app/src/App.js b/app/src/App.js
@@ -1,23 +1,91 @@
-import logo from './logo.svg';
 import './App.css';
+import Project from './Project';
+import { useInView } from 'react-intersection-observer'
 
 function App() {
+  const [refProjects, inViewProjects] = useInView({ threshold: 0.5 })
+
+  const codeStringRestaurant = `[...]
+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 = `[...]
+@PostMapping(value = "day")
+public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody RequestDay requestDay) {
+  Day day =
+      DayBuilder.of(
+          requestDay.getDate(), requestDay.getRegisteredRecords(), requestDay.getShiftRecords());
+  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";
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="App relative">
+      <div className="main-page h-screen flex flex-col" id="home">
+        <div className="header-section bg-white z-10 fixed top-0 right-0 left-0 pb-2 pr-[15%] pl-[15%]">
+          <nav>
+            <div class="flex flex-wrap items-center justify-between mx-auto pt-4">
+              <span class="self-center text-4xl font-semibold whitespace-nowrap">~</span>
+              <div class="hidden w-full md:block md:w-auto" id="navbar-default">
+                <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0">
+                  <li>
+                    <a href="#home" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
+                  </li>
+                  <li>
+                    <a href="#projects" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Projects</a>
+                  </li>
+                  <li>
+                    <a href="#ai-projects" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">AI Projects</a>
+                  </li>
+                  <li>
+                    <a href="#about-me" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About me</a>
+                  </li>
+                  <li>
+                    <a href="#contact" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
+                  </li>
+                </ul>
+              </div>
+            </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="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 text-xl 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 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 Python, Java, and Node.js. With a deep understanding of backend principles and concepts, I am proficient in implementing SOLID principles, RESTful architecture, and clean code practices to engineer scalable and efficient solutions.</p>
+          </div>
+          <a href="#projects">
+            <button class="mt-8 bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
+              Check it out
+            </button>
+          </a>
+        </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 className="project-samples grid grid-cols-1 md:grid-cols-2 gap-4 mt-[5%] mx-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" />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/app/src/Project.js b/app/src/Project.js
@@ -0,0 +1,19 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+function Project(props) {
+  return (
+     <div class="p-6 bg-white border border-gray-200 rounded-lg shadow">
+       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">{props.name}</h5>
+       <p className="text-gray-700">{props.description}</p>
+       <SyntaxHighlighter language={props.language} style={prism}>
+         {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">
+        {props.linkDescription}
+       </a>
+     </div>
+  );
+}
+
+export default Project;
diff --git a/app/src/index.css b/app/src/index.css
@@ -1,7 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, 'Ubuntu Sans Mono', 'Segoe UI', 'Roboto', 'Oxygen',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/app/src/index.js b/app/src/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import '@fontsource/rubik';
+import '@fontsource/ubuntu';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        slideLeft: {
+          '0%': { transform: 'translateX(8%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        slideRight: {
+          '0%': { transform: 'translateX(-8%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        upDown: {
+          '0%': { transform: 'translateY(8%)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      }
+    },
+  },
+  plugins: [],
+}