diff --git a/app/__init__.py b/app/__init__.py index ea923f0..b02ce8e 100644 --- a/app/__init__.py +++ b/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): diff --git a/app/about.py b/app/about.py new file mode 100644 index 0000000..69af585 --- /dev/null +++ b/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') \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index bec402b..84788fc 100644 --- a/static/css/style.css +++ b/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; diff --git a/static/css/type.css b/static/css/type.css index faf1bbb..b919365 100644 --- a/static/css/type.css +++ b/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; -} - \ No newline at end of file + + /* The typewriter cursor effect */ +@keyframes blink-caret { + from, to { border-color: transparent } + 50% { border-color: orange; } +} \ No newline at end of file diff --git a/static/icons/linux.ico b/static/icons/linux.ico new file mode 100644 index 0000000..8412b5a Binary files /dev/null and b/static/icons/linux.ico differ diff --git a/static/imgs/Icleverson.jpg b/static/imgs/Icleverson.jpg new file mode 100644 index 0000000..d1c1450 Binary files /dev/null and b/static/imgs/Icleverson.jpg differ diff --git a/static/imgs/cleveson.jpg b/static/imgs/cleveson.jpg new file mode 100644 index 0000000..432b414 Binary files /dev/null and b/static/imgs/cleveson.jpg differ diff --git a/templates/about/index.html b/templates/about/index.html new file mode 100644 index 0000000..6999dfe --- /dev/null +++ b/templates/about/index.html @@ -0,0 +1,70 @@ +{% extends "layout.html" %} + +{% block y %} + +
+
+

Sobre Cleverson

+
+
+ + + +
+ + +

Olá mundo! emoji

+ +

+ Hello!, eu sou o Cleverson, e atualmente, em 2024, tenho 19 anos. + Sou apaixonado por tecnologia desde que me entendo por gente. + +

+

+ 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. + emoji +

+

+ Minha paixão por tecnologia vai além do desenvolvimento de software; + também me interesso por eletrônica nos meus momentos livres. +

+

+ Minha jornada no mundo da tecnologia teve início em 2018, quando aos 14 anos ganhei um + Arduino 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 + c++ (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). + emoji +

+

+ Em 2023, participei de um evento promovido pelo Sebrae + (Desafio Liga Jovem) 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 + GSM, + além de um website para monitoramento do nível de rios em tempo real. Infelizmente não ganhamos, + mas fomos semifinalista. +

+

+ imagem do evento +

+

+ 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. +

+

+ 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. + emoji +

+
+{% endblock %} + diff --git a/templates/components/header.html b/templates/components/header.html index fd89da0..f114ff1 100644 --- a/templates/components/header.html +++ b/templates/components/header.html @@ -2,5 +2,6 @@
this_is_cleverson + sobre mim
diff --git a/templates/layout.html b/templates/layout.html index bdca387..d362015 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -5,11 +5,16 @@ this_is_cleverson + + {% include 'components/header.html' %}