Remodelando página

EdnilsonRobert · Jun 26, 2024 · 5339bb1 · 5339bb1
1 parent a6ced77
commit 5339bb1
Show file tree

Hide file tree

Showing 35 changed files with 812 additions and 412 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
-TEMP
 node_modules
+TEMP
+_notes.md
 
 *.log
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,19 +1,20 @@
 {
-  "liveSassCompile.settings.formats": [
-    {
-      "format": "compressed",
-      "extensionName": ".min.css",
-      "savePath": "/resources/css",
-      "savePathReplacementPairs": null
-    }
-  ],
-  "liveSassCompile.settings.excludeList": [
-    "/**/node_modules/**", "/.vscode/**"
-  ],
-  // "liveSassCompile.settings.includeItems": [],
-  // "liveSassCompile.settings.partialsList": [],
-  "liveSassCompile.settings.generateMap": true,
-  "liveSassCompile.settings.autoprefix": false,
-  "liveSassCompile.settings.forceBaseDirectory": "/src/scss",
-  "liveSassCompile.settings.useNewCompiler": false
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features",
+    "editor.tabSize": 4,
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 80
+  },
+  "css.format.newlineBetweenRules": false,
+  "css.format.newlineBetweenSelectors": false,
+  "css.lint.zeroUnits": "warning",
+
+  "[scss]": {
+    "editor.defaultFormatter": "vscode.css-language-features",
+    "editor.tabSize": 2,
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 120
+  },
+  "scss.format.newlineBetweenRules": false,
+  "scss.format.newlineBetweenSelectors": false
 }
diff --git a/README.md b/README.md
@@ -1,19 +1,25 @@
-# Página pessoal de Ednilson Robert
+![Ednilson Robert](resources/images/edrpio-github-profile.png)
 
-## Desenvolvedor Web Front-end
+# Página pessoal de Ednilson Robert
 
-Desenvolvedor Web front-end desde 2008.
+## Desenvolvimento Web & Design
 
-Interesse por desenvolvimento Web, engenharia de software, desenvolvimento ágil, computação evolutiva e novas tecnologias._
+> **Criação e otimização de páginas web e design gráfico**
 
-Site pessoal: [https://ednilsonrobert.dev](https://ednilsonrobert.dev)
+Sou Ednilson, freelancer, trabalho com desenvolvimento web desde 2008 e neste período passei por algumas agências de publicidade e setor financeiro.
 
+Mantenho interesse constante em desenvolvimento web, engenharia de software, computação evolutiva, metodologia ágil e novas tecnologias._
 
+> [!TIP]
+> Disponível para:
+> - Desenvolvimento e manutenção de sites
+> - Freelance para agências de marketing
+> - Contratação temporária para empresas
 
 ---
-Desenvolvido por [Ednilson Robert](https://ednilsonrobert.github.io/).
 
-Sugestões? Envie email para <frontend@ednilsonrobert.dev>.
+Desenvolvido por [Ednilson Robert](https://ednilsonrobert.github.io/).
 
 ---
+
 Licença: MIT
diff --git a/favicon.svg b/favicon.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="pt-br" itemscope itemtype="http://schema.org/Person">
+<html lang="pt-br">
+
 <head>
     <meta charset="UTF-8">
-    <title>Ednilson Robert | Desenvolvedor Web Front-end</title>
+    <title>Ednilson Robert | Desenvolvedor Web & Design</title>
 
     <!-- Robots -->
-    <meta name="description" content="Ednilson Robert, desenvolvedor Web front-end apaixonado por Desenvolvimento Web e Web Standards">
-    <meta name="keywords" content="desenvolvimento, web, front-end, perfil">
+    <meta name="description" content="Especialista em desenvolvimento e otimização de páginas Web">
+    <meta name="keywords" content="desenvolvimento, otimização, freelance">
     <meta name="robots" content="index, follow">
     <meta name="revisit-after" content="15 days">
     <meta name="google" content="notranslate">
@@ -20,63 +21,76 @@
     <meta name="mobileoptimized" content="320">
     <meta name="format-detection" content="telephone=no">
     <meta name="mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#22303d">
+    <meta name="theme-color" content="#00465e">
 
     <!-- Favicon -->
     <link rel="icon" href="./favicon.svg">
 
     <!-- Folhas de estilo -->
-    <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
-    <link href="./resources/css/styles.min.css" rel="stylesheet" media="screen">
+    <link href="./resources/css/styles.css" rel="stylesheet" media="screen">
 
     <!-- Manifesto -->
     <link rel="manifest" href="./manifest.webmanifest">
 </head>
 
 <body class="body">
-    <main class="card">
-        <figure class="brand card-header">
-            <svg viewBox="0 0 256 256" class="brand-image">
-                <g>
-                    <path d=" M 155.826 122.435 L 244.87 122.435 C 251.013 122.435 256 127.422 256 133.565 L 256 222.609 C 256 228.752 251.013 233.739 244.87 233.739 L 155.826 233.739 C 149.683 233.739 144.696 228.752 144.696 222.609 L 144.696 133.565 C 144.696 127.422 149.683 122.435 155.826 122.435 Z " fill="rgb(81,179,92)"/>
-                    <path d=" M 33.391 144.696 L 122.435 144.696 C 128.578 144.696 133.565 149.683 133.565 155.826 L 133.565 244.87 C 133.565 251.013 128.578 256 122.435 256 L 33.391 256 C 27.248 256 22.261 251.013 22.261 244.87 L 22.261 155.826 C 22.261 149.683 27.248 144.696 33.391 144.696 Z " fill="rgb(46,131,195)"/>
-                    <path d=" M 133.565 0 L 222.609 0 C 228.752 0 233.739 4.987 233.739 11.13 L 233.739 100.174 C 233.739 106.317 228.752 111.304 222.609 111.304 L 133.565 111.304 C 127.422 111.304 122.435 106.317 122.435 100.174 L 122.435 11.13 C 122.435 4.987 127.422 0 133.565 0 Z " fill="rgb(255,205,54)"/>
-                    <path d=" M 11.13 22.261 L 100.174 22.261 C 106.317 22.261 111.304 27.248 111.304 33.391 L 111.304 122.435 C 111.304 128.578 106.317 133.565 100.174 133.565 L 11.13 133.565 C 4.987 133.565 0 128.578 0 122.435 L 0 33.391 C 0 27.248 4.987 22.261 11.13 22.261 Z " fill="rgb(220,20,60)"/>
-                </g>
-            </svg>
-        </figure>
+    <main class="container">
+        <header class="hero">
+            <figure class="picture">
+                <img class="avatar" src="./resources/images/ed-alien.webp" alt="Avatar de Ednilson Robert">
+            </figure>
+            <figure class="brand">
+                <img class="brand-logo" src="./resources/images/edrpio-logo.svg" alt="Logomarca de Ednilson Robert">
+                <h1 class="brand-title">Desenvolvimento Web & Design</h1>
+            </figure>
+        </header>
 
-        <article class="card-content">
-            <h1 class="card-title text-display text-display-3 text-center" itemprop="name">Ednilson Robert</h1>
-            <h2 class="card-subtitle text-display text-display-4 text-center" itemprop="jobTitle">Desenvolvedor Web <br> Front-end</h2>
-            <p class="text has-icon" itemprop="description">
-                <i class="text-icon icon ion-md-heart"></i>
-                <span>Interesse por desenvolvimento Web, engenharia de software, desenvolvimento ágil, computação evolutiva e novas tecnologias.<code>_</code></span>
-            </p>
-            <p class="text has-icon" itemprop="address">
-                <i class="text-icon icon ion-md-pin"></i>
-                <span>Barueri, Brasil</span>
-            </p>
-        </article>
+        <article class="container-content">
+            <section class="grid-cards">
+                <div class="card has-glass-effect has-shadow-outside">
+                    <ion-icon class="card-icon" name="flask-outline"></ion-icon>
+                    <p class="card-text">Desenvolvimento e manutenção de sites</p>
+                </div>
+                <div class="card has-glass-effect has-shadow-outside">
+                    <ion-icon class="card-icon" name="bulb-outline"></ion-icon>
+                    <p class="card-text">Freelance para agências de marketing</p>
+                </div>
 
-        <section class="card-section">
-            <p class="text-center">
-                <span>Visite</span>
-                <a class="link text-display headline-4" href="https://ednilsonrobert.dev">https://ednilsonrobert.dev</a>
-            </p>
-        </section>
+                <div class="card has-glass-effect has-shadow-outside">
+                    <ion-icon class="card-icon" name="calendar-outline"></ion-icon>
+                    <p class="card-text">Contratação temporária para empresas</p>
+                </div>
+            </section>
 
-        <footer class="card-footer">
-            <a class="button has-icon" title="Ver perfil no GitHub" href="https://github.com/EdnilsonRobert" target="_blank" rel="external noopener" itemprop="url">
-                <i class="button-icon icon ion-logo-github"></i>
+            <section class="content has-glass-effect has-shadow-outside">
+                <p class="plain-text">
+                    <ion-icon class="text-icon" name="person-outline"></ion-icon>
+                    <span>Sou Ednilson, freelancer, trabalho com desenvolvimento web desde 2008 e neste período passei
+                        por algumas agências de publicidade e setor financeiro.</span>
+                </p>
+                <p class="plain-text">
+                    <ion-icon class="text-icon" name="heart-outline"></ion-icon>
+                    <span>Mantenho interesse constante em desenvolvimento web, engenharia de software, computação
+                        evolutiva, metodologia ágil e novas tecnologias.<code class="cursor">_</code></span>
+                </p>
+            </section>
+        </article>
+
+        <footer class="grid-buttons">
+            <a class="button has-glass-effect" title="Ver perfil no GitHub" href="https://github.com/EdnilsonRobert/"
+                target="_blank" rel="external noopener">
+                <ion-icon class="button-icon" name="logo-github"></ion-icon>
                 <span class="button-label">GitHub</span>
             </a>
-            <a class="button has-icon" title="Enviar email" href="mailto:[email protected]" itemprop="email">
-                <i class="button-icon icon ion-md-mail"></i>
-                <span class="button-label">Email</span>
+            <a class="button has-glass-effect" title="Ver perfil no LinkedIn"
+                href="https://linkedin.com/in/EdnilsonRobert/" target="_blank" rel="external noopener">
+                <ion-icon class="button-icon" name="logo-linkedin"></ion-icon>
+                <span class="button-label">LinkedIn</span>
             </a>
         </footer>
     </main>
 </body>
 
+<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -1,21 +1,27 @@
 {
-  "short_name": "Ednilson Robert",
   "name": "Ednilson Robert",
-  "description": "Página pessoal de Ednilson Robert",
+  "short_name": "Ednilson",
+  "description": "Card pessoal de Ednilson Robert",
+  "start_url": "./",
+  "scope": "./",
+  "id": "./",
+  "display": "standalone",
+  "display_override": ["minimal-ui"],
+  "orientation": "portrait",
+  "theme_color": "#00465e",
+  "background_color": "#d7dbdf",
   "icons": [
     {
-      "src":"./resources/images/logo.svg",
-      "sizes": "256x256",
-      "type": "image/svg+xml"
-    },
-    {
-      "src":"./resources/images/logo.svg",
+      "src": "./resources/images/edrpio-icon.svg",
       "sizes": "512x512",
       "type": "image/svg+xml"
     }
   ],
-  "start_url": "./",
-  "background_color": "#22303d",
-  "theme_color": "#22303d",
-  "display": "standalone"
+
+  "protocol_handlers": [
+    {
+      "protocol": "web+profile",
+      "url": "./?type=%s"
+    }
+  ]
 }