Merge pull request #12 from thisiscleverson/about_page

criação da pagina sobre

app/__init__.py

@@ -21,11 +21,13 @@ def create_register_blueprint(app):
    from .admin import admin
    from .blog import blog
    from .api import api
+   from .about import about
 
    app.register_blueprint(auth)
    app.register_blueprint(admin)
    app.register_blueprint(blog)
    app.register_blueprint(api)
+   app.register_blueprint(about)
 
 
 def create_register_erro_handler(app):

app/about.py

@@ -0,0 +1,7 @@
+from flask import Blueprint, request, redirect, render_template
+
+about = Blueprint('about', __name__ )
+
+@about.route('/sobre', methods=['GET'])
+def about_page():
+   return render_template('about/index.html')

static/css/style.css

@@ -81,6 +81,20 @@ footer{
    text-decoration: none;
 }
 
+.about-link{
+   color: #424242;
+   font-size: 20px;
+   font-weight: 300;
+   line-height: 54px;
+   letter-spacing: -1px;
+   margin-bottom: 0;
+   text-decoration: none; 
+}
+
+.about-link:hover{
+   text-decoration: underline;
+}
+
 .post-link{
    text-decoration: none;
    font-size: 24px;
@@ -224,9 +238,10 @@ footer{
 #expandButton{
    position: absolute;
    top: 10px;
-   right: 10px;
+   right: 20px;
    border: none;
    cursor: pointer;
+   background-color: #ffffff00;
 }
 
 #expandButton:hover{
@@ -444,6 +459,69 @@ footer{
 }
 
 
+.title-container{
+   display: flex;
+   justify-content: center;
+   margin-top: 30px;
+}
+
+.title-about{
+   font-size: 4em;
+   text-align: center;
+   color: #424242;
+}
+
+.perfil-img{
+   width: 300px;
+   height: 300px;
+   border-radius: 150px;
+}
+
+.img-container{
+   display: flex;
+   justify-content: center;
+}
+
+.about-container{
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   max-width: 45em;
+   width: 100%;
+   margin-top: 4rem;
+   margin-left: auto;
+   margin-right: auto;
+}
+
+.about-container > h2{
+   color: #424242; 
+   margin-bottom: 30px;
+   font-size: 1.5rem;
+}
+
+.about-container > p{
+   line-height: 1.5;
+   margin-bottom: 20px;
+}
+
+.about-container  a{
+   background-color: transparent;
+   color: #006bf4;
+   text-decoration: none;
+}
+
+.img-event{
+   width: -webkit-fill-available;
+   border-radius: 5px;
+}
+
+.emoji{
+   height: 1.5em;
+   position: relative;
+   top: 0.3em;
+}
+
+
 @media screen and (max-width: 600px) {
    .admin-container {
       flex-direction: column;

static/css/type.css

@@ -1,43 +1,22 @@
-.title-header {
-   color: lime; 
-   font-family: "Courier";
-   font-size: 20px;
-   margin: 10px 0 0 10px;
-   white-space: nowrap;
-   overflow: hidden;
-   width: 30em;
-   animation: type 4s steps(60, end); 
+.typewriter h1 {
+   overflow: hidden; /* Ensures the content is not revealed until the animation */
+   /* border-right: .15em solid orange;  */
+  /* white-space: nowrap;  */
+   margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+   letter-spacing: .15em; /* Adjust as needed */
+   animation: 
+     typing 1.5s steps(30, end),
+     blink-caret .75s step-end infinite;
 }
-
-.title-header:nth-child(2) {
-   animation: type2 8s steps(60, end);
-}
-
-/* h1 a {
-   color: lime;
-   text-decoration: none;
-   }
- */
 
-span {
-   animation: blink 1s infinite;
-}
-
-@keyframes type { 
-   from { width: 0; } 
-} 
-
-@keyframes type2 {
-   0% { width: 0; }
-   50% { width: 0; }
-   100% { width: 100; } 
-} 
-
-@keyframes blink {
-   to { opacity: .0; }
+ /* The typing effect */
+@keyframes typing {
+   from { width: 0 }
+   to { width: 100% }
 }
-
-::selection {
-   background: black;
-}
-
+
+ /* The typewriter cursor effect */
+@keyframes blink-caret {
+   from, to { border-color: transparent }
+   50% { border-color: orange; }
+}

templates/about/index.html

@@ -0,0 +1,70 @@
+{% extends "layout.html" %}
+
+{% block y %}
+
+   <div class="title-container">
+      <div class="typewriter">
+         <h1 class="title-about">Sobre Cleverson</h1>
+      </div>
+   </div>
+
+  <!-- <div class="img-container">
+      <img src="/static/imgs/Icleverson.jpg" alt="Icleverson" class="perfil-img">
+   </div> -->
+
+   <div class="about-container">
+
+
+      <h2>Olá mundo! <img src="https://cdn3.emoji.gg/emojis/8969-parrotvibe.gif" alt="emoji" class="emoji"></h2>
+
+      <p>
+         <strong>Hello!</strong>, eu sou o <strong>Cleverson</strong>, e atualmente, em 2024, tenho 19 anos. 
+         Sou apaixonado por tecnologia desde que me entendo por gente.
+
+      </p>
+      <p>
+         Gosto de programar em Python (inclusive, este site é feito em Python/Flask!), 
+         mas também sei outras linguagens como JavaScript, 
+         C++ para Arduino, um pouco de PHP e tenho um conhecimento básico de Java.
+         <img src="https://cdn3.emoji.gg/emojis/9386_thumbsupparrot.gif" alt="emoji" class="emoji">
+      </p>
+      <p>
+         Minha paixão por tecnologia vai além do desenvolvimento de software; 
+         também me interesso por eletrônica nos meus momentos livres.
+      </p>
+      <p>
+         Minha jornada no mundo da tecnologia teve início em 2018, quando aos 14 anos ganhei um 
+         <strong><a href="https://www.arduino.cc/en/Guide/Introduction">Arduino</a></strong> do meu pai. 
+         Com o desejo de criar um braço robótico utilizando alguns servomotores, 
+         fios, papelão e cola, senti a necessidade de aprender a programar. 
+         Foi assim que tive meu primeiro contato com uma linguagem de programação, utilizando o Arduino, que é baseado em 
+         <strong><a href="https://pt.wikipedia.org/wiki/C%2B%2B">c++</a></strong> (com pequenas modificações). 
+         E nesse período comecei aprender muito sobre logica de programação com muito tutoriais na internet e tentativa e 
+         erros (sim, aprendi a programar sem esses cursos de coach que promete ganhar milhões com 6 meses de cursos).
+         <img src="https://cdn3.emoji.gg/emojis/9588-gigachad.png" alt="emoji" class="emoji">
+      </p>
+      <p>
+         Em 2023, participei de um evento promovido pelo Sebrae 
+         (<a href="https://www.desafioligajovem.com.br/edicao-2023/">Desafio Liga Jovem</a>) em São Paulo, 
+         onde eu e minha equipe desenvolvemos um dispositivo inovador proporcionando alertas antecipados de 
+         enchentes por meio de mensagens de texto (SMS) usando tecnologia 
+         <a href="https://www.tecmundo.com.br/celular/1653-o-que-e-gsm-.htm">GSM</a>, 
+         além de um website para monitoramento do nível de rios em tempo real. Infelizmente não ganhamos, 
+         mas fomos semifinalista. 
+      </p>
+      <p>
+         <img src="https://imgur.com/h9ZZ83b.jpeg" alt="imagem do evento" class="img-event">
+      </p>
+      <p>
+         No mesmo ano, dei meus primeiros passos como freelancer em programação, 
+         focando no desenvolvimento front-end com HTML, CSS e PHP. 
+         Mesmo breve, essa oportunidade me proporcionou valiosos aprendizados para minha jornada na tecnologia. 
+      </p>
+      <p>
+         Bom, criei esse mine espaço onde posso falar tudo aquilo que venho aprendendo/vendo sobre tecnologia. 
+         Espero que você se sinta bem-vindo(a) e aproveite ao máximo cada postagem.
+         <img src="https://cdn3.emoji.gg/emojis/3933-tocaaqui.gif" alt="emoji" class="emoji">
+      </p>
+   </div>
+{% endblock %}
+

templates/components/header.html

@@ -2,5 +2,6 @@
 <header>
    <div class="wrapper-header">
       <a href="/" class="title-header">this_is_cleverson</a>
+      <a href="/sobre" class="about-link">sobre mim</a>
    </div>
 </header>

templates/layout.html

@@ -5,11 +5,16 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="initial-scale=1, width=device-width">
         <title>this_is_cleverson</title>
+        <link rel="icon" href="{{ url_for('static', filename='icons/linux.ico') }}" type="Linux icon">
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/reset.css') }}">
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/style.css') }}">
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/markdown.css') }}">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+        <meta
+            name="description"
+            content="Um blog sobre tecnologia"
+        />
     </head>
     <body>
         {% include 'components/header.html' %}