hussyvel
/
bootcamp
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

primeiro commit site

master
hussyvel 3 years ago
commit
bc6d89e11f
16 changed files with 564 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +199
    -0
      css/style.css
  2. BIN
      img/books.png
  3. BIN
      img/cloud.png
  4. BIN
      img/diploma-de-graduacao.png
  5. BIN
      img/diploma.png
  6. BIN
      img/experiencia-de-trabalho.png
  7. BIN
      img/mountain.png
  8. BIN
      img/oceano.png
  9. BIN
      img/profil.jpg
  10. BIN
      img/web-development-code.png
  11. +99
    -0
      index.html
  12. +72
    -0
      moreaboutme.html
  13. +73
    -0
      subsite/css/style.css
  14. +30
    -0
      subsite/index.html
  15. +56
    -0
      subsite/subpasta/pagina2.html
  16. +35
    -0
      subsite/subpasta/pagina3.html

+ 199
- 0
css/style.css View File

@ -0,0 +1,199 @@
body {
color: #40514e;
margin: 0;
text-align: center;
font-family: verdana, sans-serif;
font-size: 20px;
}
h1 {
margin: 50px auto 0 auto;
font-size: 5.625rem;
font-family: Verdana, sans-serif;
color: #66BFBF;
line-height:2;
}
h2 {
color: #66BFBF;
font-family: Verdana, sans-serif;
font-size: 2.5rem;
font-weight: normal;
padding-bottom: 10px;
}
h3 {
font-family: Verdana, sans-serif;
font-size: 2.5rem;
color: #11999E;
}
p {
line-height: 2;
}
hr {
border: dotted #eaf6f6 6px;
border-bottom: none;
width: 4%;
margin-bottom: 100px auto;
}
a {
color: #11999E;
}
.contact-message {
width: 40%;
margin: 50px auto 50px;
}
.top-container {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middle-container {
margin-top: 100px;
margin-bottom: 100px;
}
.bottom-container {
background-color: #66BFBF;
padding: 50px 0 20px;
/* width: 100%;
padding-top: 100px; */
}
.skill-row {
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
line-height: 2;
}
.pro {
text-decoration: underline;
}
.intro {
width: 30%;
margin: auto;
}
a img {
position: relative;
bottom: 45px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 40px;
}
.bottom-cloud{
position: absolute;
left: 250px;
bottom: 300px;;
}
table {
width: 100%;
margin-bottom: .5em;
table-layout: fixed;
text-align: center;
}
.footer-link {
color: #11999E;
}
.experience {
width: 25%;
float: right;
margin-left: 30px;
clear: right;
}
.web-development {
width: 25%;
float: left;
margin-right: 30px;
clear: right;
}
.certificate {
width: 25%;
float: right;
margin-right: 30px;
clear: right;
}
.diplome {
width: 25%;
float: left;
margin-right: 30px;
clear: left;
}
.contact-me {
border-radius: 8;
/* color:#11cdd4; */
margin-bottom: 100px;
}
.btn {
background: #11cdd4;
background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
background-image: -o-linear-gradient(top, #11cdd4, #11999e);
background-image: linear-gradient(to bottom, #11cdd4, #11999e);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #30e3cb;
background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
text-decoration: none;
}
.footer-link {
color: #11999E;
margin: 10px 20px;
text-decoration: none;
}
.footer-link:hover {
color: #eaf6f6;
}
.copyright {
color: #eaf6f6;
font-size: 0.75rem;
padding: 20px 0;
}

BIN
img/books.png View File

Before After
Width: 512  |  Height: 512  |  Size: 28 KiB

BIN
img/cloud.png View File

Before After
Width: 150  |  Height: 48  |  Size: 3.8 KiB

BIN
img/diploma-de-graduacao.png View File

Before After
Width: 512  |  Height: 512  |  Size: 12 KiB

BIN
img/diploma.png View File

Before After
Width: 512  |  Height: 512  |  Size: 20 KiB

BIN
img/experiencia-de-trabalho.png View File

Before After
Width: 512  |  Height: 512  |  Size: 30 KiB

BIN
img/mountain.png View File

Before After
Width: 598  |  Height: 357  |  Size: 64 KiB

BIN
img/oceano.png View File

Before After
Width: 512  |  Height: 512  |  Size: 16 KiB

BIN
img/profil.jpg View File

Before After
Width: 640  |  Height: 640  |  Size: 24 KiB

BIN
img/web-development-code.png View File

Before After
Width: 512  |  Height: 512  |  Size: 13 KiB

+ 99
- 0
index.html View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Hussyvel Ribeiro da Silva</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
</head>
<body>
<header>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Hussyvel</h1>
<h2>a Software Engineer</h2>
<img class="bottom-cloud" src="img/cloud.png" alt="cloud-img">
<img src="img/oceano.png" alt="mountain">
</div>
</header>
<br>
<br>
<br>
<br>
<div class="middle-container">
<div class="profile">
<img src="img/profil.jpg" alt="My profile">
<h2>Hi, welcome!!!</h2>
<p class="intro">I'm a software engineer 💻, develop with Reactjs, Nodejs and Ruby on Rails. I like coffee, sandwiches, video games, singing, football and others... </p>
<a href="moreaboutme.html">Segunda página</a>
<a href="./subsite/index.html">Segundo site - subsite</a>
</div>
<hr>
<main>
<div class="skill-row">
<img class="experience" src="img/experiencia-de-trabalho.png" alt="experience">
<h3>Professional Experience</h3>
<p>Hi, my name is Hussyvel. Welcome to my profile. I have a generalist profile for programming languages, I have a Bachelor's Degree in Information Systems from FACIMP. I currently work with Nodejs, Java, javascript and Oracle plsql developer. My main tools are: Intellij and VSCode. I also develop with Reactjs and Ruby on Rails, I use Git for versioning, and my main operating system is Linux Ubuntu. I take online English courses like Duolingo, Seda College and LingQ. I read IT ebooks and study for various programming platforms like: Udemy, Freecodecamp, hackerrank, Alura and Github.</p>
</div>
</div>
<hr>
</main>
<br>
<br>
<br>
<br>
<section>
<section class="skills">
<h2>My Skills</h2>
<div class="skill-row">
<img class="web-development" src="img/web-development-code.png" alt="web-development">
<h3>Design & Development</h3>
<p class="code-skill-description">I'm a Software Engineer, working with Ruby on Rails, React, Nodejs, Linux, Windows,<a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
</div>
<hr>
<br>
<br>
<br>
<br>
<div class="skill-row">
<img class="certificate" src="img/books.png" alt="books">
<h3>Certificate</h3>
<p class="">I like to take programming courses in technologies: Javascript, Nodejs, Reactjs, Typescript, Ruby On Rails among others. I also like to improve skills with Linux, Git, Github. With Postgresql, Mysql, PLSQL and SQL Server study database.</p>
</div>
<hr>
<br>
<br>
<br>
<br>
<div class="skill-row">
<img class="diplome" src="img/diploma-de-graduacao.png" alt="diplome">
<h3>Diploma</h3>
<p>Bachelor of Information Systems from FACIMP in 2014</p>
</div>
<hr>
</section>
<br>
<br>
<br>
<br>
<footer>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>talk to me? no problems...</h3>
<p class="contact-message">If you want to talk about work, opportunities or even conversations about technology and culture, <br> you can send me an email, or on social media.</p>
<a class="btn" href="mailto:hussyribeiro@hotmail.com">CONTACT ME</a>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/hussyvelribeiro/">Linkedin</a>
<a class="footer-link" href="https://twitter.com/hussyvel">Twitter</a>
<a class="footer-link" href="https://hussyvel.github.io/">Website</a>
<a class="footer-link" href="http://api.whatsapp.com/send?1=pt_BR&phone=5599981522892">Whatsapp</a>
<p class="copyright">© 2022 Hussyvel Ribeiro </p>
</div>
</div>
</footer>
</body>
</html>

+ 72
- 0
moreaboutme.html View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About me </title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico">
</head>
<body>
<header>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Hussyvel</h1>
<h2>a Software Engineer</h2>
<img class="bottom-cloud" src="img/cloud.png" alt="cloud-img">
<img src="img/oceano.png" alt="mountain">
</div>
</header>
<main>
<div class="skill-row">
<img class="experience" src="img/experiencia-de-trabalho.png" alt="experience">
<h3>Professional Experience</h3>
<p>Durante minha experiência profissional recente, passei por algumas empresas que foram importantes para que eu me desenvolvesse ainda mais como profissional,
aqui estão um pouco mais sobre meu trabalho nessas empresas:
</p>
<a href="index.html">Página principal</a>
</div>
</div>
</main>
<section>
<section class="skills">
<h2>Philips</h2>
<div class="skill-row">
<img class="web-development" src="img/web-development-code.png" alt="web-development">
<h3>At Philips</h3>
<p class="code-skill-description"> At Philips, I worked with code maintenance on frontend screens with Javascript. No backend used Java for analytics and business rules. As a database I used Oracle's PLSQL performing queries on the tables.At Philips, I worked with code maintenance on frontend screens with Javascript. No backend used Java for analytics and business rules. As a database I used Oracle's PLSQL performing queries on the tables.
Skills: Java · PL/SQL · Networking · AngularJS · Software Development · Node.js · JavaScript · Oracle Database · Object-Oriented Programming (OOP) · Databases · Front-End Development · GitHub · Git · English · Inglês · TypeScript
<a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
</div>
<section class="skills">
<h2>Mateus supermercados</h2>
<div class="skill-row">
<img class="web-development" src="img/web-development-code.png" alt="web-development">
<h3>At Mateus supermercados</h3>
<p class="code-skill-description">
I work with c ++ language and the QT framework for the development / creation of screens. Use the SQL Server database for queries and procedures such as: creating tables, making inner joins, selects and various changes. I also use the GIT version system: I do git commit, git add, git pull, git push among others. I also work as a business analyst, understanding the idea and the emergence of the problem and trying to solve it with programming and / or support.I work with c ++ language and the QT framework for the development / creation of screens. Use the SQL Server database for queries and procedures such as: creating tables, making inner joins, selects and various changes. I also use the GIT version system: I do git commit, git add, git pull, git push among others. I also work as a business analyst, understanding the idea and the emergence of the problem and trying to solve it with programming and / or support.
Skills: C (Programming Language) · Software Development · Object-Oriented Programming (OOP) · Databases · Microsoft SQL Server · SQL
<a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
</div>
</section>
<footer>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>talk to me? no problems...</h3>
<p class="contact-message">If you want to talk about work, opportunities or even conversations about technology and culture, <br> you can send me an email, or on social media.</p>
<a class="btn" href="mailto:hussyribeiro@hotmail.com">CONTACT ME</a>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/hussyvelribeiro/">Linkedin</a>
<a class="footer-link" href="https://twitter.com/hussyvel">Twitter</a>
<a class="footer-link" href="https://hussyvel.github.io/">Website</a>
<a class="footer-link" href="http://api.whatsapp.com/send?1=pt_BR&phone=5599981522892">Whatsapp</a>
<p class="copyright">© 2022 Hussyvel Ribeiro </p>
</div>
</div>
</footer>
</body>
</html>

+ 73
- 0
subsite/css/style.css View File

@ -0,0 +1,73 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
#menu-h {
background-color:rgb(41, 41, 43);
}
#menu-h ul{
max-width: 850px;
list-style:none;
padding: 0;
}
#menu-h ul li{
display: inline;
}
#menu-h ul li a{
color: #fff;
text-decoration: none;
display: inline-block;
padding: 20px;
transition: .6s;
}
#menu-h ul li a:hover{
background-color:rgb(50, 112, 160);
}
#menu-h ul li:last-child a {
float: right;
background-color:rgb(50, 112, 160);
}
#about {
max-width: 800px;
padding: 60px;
}
#about h2{
line-height: 5;
}
#form {
max-width: 800px;
line-height: 2;
}
#form form{
margin-top: 50px;
}
#form h2{
margin-top: 100px;
}
#intro{
max-width: 800px;
line-height: 3;
margin-top: 50px;
}
#intro h2 {
line-height: 80px;
}

+ 30
- 0
subsite/index.html View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu horizontal</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="menu-h">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="./subpasta/pagina2.html">Sobre</a></li>
<li><a href="./subpasta/pagina3.html">Contato</a></li>
<li><a href="./webroot/index.html">Retornar ao primeiro site</a></li>
<li><a href="#">entrar</a></li>
</ul>
</nav>
<section id="intro">
<h2>Introdução</h2>
<p>Esta é uma página desenvolvida para um exercício. Nela criei um
menu que vai para outras duas páginas que estão localizadas em uma
subpasta do qual as chamei pela âncora.
</p>
</section>
</body>
</html>

+ 56
- 0
subsite/subpasta/pagina2.html View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu horizontal</title>
<link rel="stylesheet" href="/subsite/css/style.css">
</head>
<body>
<nav id="menu-h">
<ul>
<li><a href="/subsite/index.html">Home</a></li>
<li><a href="/subsite/subpasta/pagina2.html">Sobre</a></li>
<li><a href="/subsite/subpasta/pagina3.html">Contato</a></li>
<li><a href="#">entrar</a></li>
</ul>
</nav>
<section id="about">
<h2>Aboute me</h2>
<p>Welcome to my profile.
I have a Bachelor's Degree in Information Systems from FACIMP.
I have 3 years experience as a programmer:
</p>
<br>
<p>
Ruby on Rails
https://www.youtube.com/watch?v=V62AU2PT898
https://github.com/hussyvel/to_do_list
https://github.com/hussyvel/ruby
</p>
<br>
<p>
Nodejs
https://github.com/hussyvel/maratona-dev-hussyvel
https://github.com/hussyvel/Javascript
</p>
<br>
<p>
HTML5, CSS3, JavaScript
https://github.com/hussyvel/Javascript
https://github.com/hussyvel/logic;
https://github.com/hussyvel/barbearia;
</p>
<br>
<p>
Version Control: Git;
</p>
<br>
<p>
S.O.: Linux Ubuntu and windows;
</p>
</section>
</body>
</html>

+ 35
- 0
subsite/subpasta/pagina3.html View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu horizontal</title>
<link rel="stylesheet" href="/subsite/css/style.css">
</head>
<body>
<nav id="menu-h">
<ul>
<li><a href="/subsite/index.html">Home</a></li>
<li><a href="/subsite/subpasta/pagina2.html">Sobre</a></li>
<li><a href="/subsite/subpasta/pagina3.html">Contato</a></li>
<li><a href="#">entrar</a></li>
</ul>
</nav>
<address id="form">
<h2>Deseja entrar em contato comigo?</h2>
<div>
<form action="/index.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Hussyvel"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Silva"><br>
<label for="email">Enter your email:</label><br>
<input type="email" id="email" name="hussyribeiro@hotmail.com">
<input type="submit" value="Submit">
</form>
</div>
</address>
</body>
</html>

Write Preview
Loading…
Cancel
Save