mirror of
https://github.com/itme-brain/itme-brain.github.io.git
synced 2026-03-23 20:19:43 -04:00
Simple Website Refactor
This commit is contained in:
Bryan
parent
1d535006fa
commit
e4abea631d
6 changed files with 68 additions and 376 deletions
|
|
@ -1 +1,3 @@
|
|||
# codecologist.dev
|
||||
|
||||
Personal Website, contributions & feedback are welcome.
|
||||
BIN
assets/btctipjar.png
Normal file
BIN
assets/btctipjar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
40
css/styles.css
Normal file
40
css/styles.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
html {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 10px 10px;
|
||||
margin: 20px auto;
|
||||
font-size: 1.0rem;
|
||||
max-width: 800px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tipjar {
|
||||
width: 15em;
|
||||
height: 15em;
|
||||
}
|
||||
69
index.html
69
index.html
|
|
@ -1,60 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bryan Ramos :: Developer</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="keywords" content="bryan, ramos, developer, freelance, fullstack">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
||||
<script src="https://kit.fontawesome.com/f26d369dc4.js" crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<title>Bryan Ramos - Technologist</title>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<section class="navbar">
|
||||
<div class="socialicons">
|
||||
<a href="mailto: bryan@codecologist.dev"><i class="fa-solid fa-square-envelope"></i></a>
|
||||
<a href="https://github.com/codecologist"><i class="fa-brands fa-github"></i></a>
|
||||
<a href="https://twitter.com/Codecologist"><i class="fa-brands fa-square-twitter"></i></a>
|
||||
<a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg"><i class="fa-brands fa-youtube"></i></a>
|
||||
<a href="pgpkey.html"><i class="fa-solid fa-key"></i></a>
|
||||
</section>
|
||||
|
||||
<section class="heading">
|
||||
<h1>Bryan Ramos</h1>
|
||||
</section>
|
||||
<ul>
|
||||
<li><a href="mailto:bryan@codecologist.dev" class="fa-solid fa-envelope"></a></li>
|
||||
<li><a href="https://twitter.com/Codecologist" class="fa-brands fa-twitter"></a></li>
|
||||
<li><a href="https://github.com/codecologist" class="fa-brands fa-github"></a></li>
|
||||
<li><a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg" class="fa-brands fa-youtube"></a></li>
|
||||
<li><a href="pgpkey.html" class="fa-sharp fa-solid fa-key"></a></li>
|
||||
</ul>
|
||||
<h2>I invest my time and energy towards returning
|
||||
self-sovereignty in the digital age.</br></br>
|
||||
|
||||
I believe that peer-to-peer protocols and cryptography are
|
||||
the key to achieve this through the establishment of digital data privacy tools,
|
||||
increased user transparency and the disintermediation of the web.</br></br>
|
||||
|
||||
Visit my GitHub to view my work. Contact me with inquiries using the links above.
|
||||
|
||||
<!-- <h1>Projects</h1>
|
||||
-->
|
||||
|
||||
<h1>Tips for Coffee!</h1>
|
||||
BTC: bc1qa8tqxcahjxe63yvn50v5jzxqxez2mfntynv2dc</br></br>
|
||||
<img class="tipjar" src="assets/btctipjar.png">
|
||||
|
||||
<section class="technologies">
|
||||
<div class="technologiesIconsGrid">
|
||||
<i class="fa-brands fa-html5 fa-3x"></i>
|
||||
<i class="fa-brands fa-css3 fa-3x"></i>
|
||||
<i class="fa-brands fa-js fa-3x"></i>
|
||||
<i class="fa-brands fa-git-alt fa-3x"></i>
|
||||
<!-- <i class="fa-brands fa-digital-ocean fa-3x"></i>
|
||||
<i class="fa-brands fa-aws fa-3x"></i> -->
|
||||
<i class="fa-brands fa-vuejs fa-3x"></i>
|
||||
<i class="fa-brands fa-bitcoin fa-3x"></i>
|
||||
<i class="fa-solid fa-bolt fa-3x"></i>
|
||||
<i class="fa-brands fa-ethereum fa-3x"></i>
|
||||
<i class="fa-brands fa-rust fa-3x"></i>
|
||||
<i class="fa-brands fa-react fa-3x"></i>
|
||||
<i class="fa-brands fa-docker fa-3x"></i>
|
||||
<i class="fa-brands fa-android fa-3x"></i>
|
||||
<i class="fa-brands fa-wordpress fa-3x"></i>
|
||||
<i class="fa-brands fa-linux fa-3x"></i>
|
||||
<i class="fa-brands fa-node-js fa-3x"></i>
|
||||
<i class="fa-brands fa-angular fa-3x"></i>
|
||||
<i class="fa-solid fa-cloud-arrow-up fa-3x"></i>
|
||||
<i class="fa-brands fa-python fa-3x"></i>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bryan Ramos PGP Key</title>
|
||||
<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>Bryan Ramos - PGP Key</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
333
styles.css
333
styles.css
|
|
@ -1,333 +0,0 @@
|
|||
:root {
|
||||
--primaryBackgroundColor: #22303c;
|
||||
--secondaryBackgroundColor: #192734;
|
||||
--tertiaryBackgroundColor: #111c26;
|
||||
--consoleBackgroundColor: #292929;
|
||||
--lightconsoleBackgroundColor: #404040;
|
||||
--primaryTextColor: #ffffff;
|
||||
--secondaryTextColor: #FFD866;
|
||||
--tertiaryTextColor: #A9DC76;
|
||||
--codeColor: #d3d3d3;
|
||||
--elementColor: #bc0457;
|
||||
--variableColor: #d152f7;
|
||||
}
|
||||
|
||||
/* Document Styling */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a, a:visited, a:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
font-family: 'Righteous', cursive;
|
||||
margin: 30px 0 0 0;
|
||||
color: var(--primaryTextColor);
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-family: 'Righteous', cursive;
|
||||
margin-bottom: 10px;
|
||||
color: var(--secondaryTextColor);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
color: var(--primaryTextColor);
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Code-Like Syntax Highlighting Styling */
|
||||
|
||||
.code {
|
||||
color: var(--codeColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.element {
|
||||
color: var(--elementColor);
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.class {
|
||||
color: var(--secondaryTextColor);
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.className {
|
||||
color: var(--tertiaryTextColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plaintext {
|
||||
color: var(--primaryTextColor);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.variableName {
|
||||
color: var(--variableColor);
|
||||
}
|
||||
|
||||
|
||||
/* Navigation Bar Styling */
|
||||
|
||||
.navbar {
|
||||
background-color: var(--consoleBackgroundColor);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-auto-flow: column;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Navigation Bar Icon Styling */
|
||||
|
||||
.fa-square-envelope {
|
||||
display: inline-block;
|
||||
color: #00bb00;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0px 10px 0 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.fa-square-envelope:hover {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
.fa-github {
|
||||
display: inline-block;
|
||||
color: #d3d3d3;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.fa-github:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.fa-square-twitter {
|
||||
display: inline-block;
|
||||
color: #1da1f2;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.fa-square-twitter:hover {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.fa-youtube {
|
||||
display: inline-block;
|
||||
color: #e62117;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.fa-youtube:hover {
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
.fa-key {
|
||||
display: inline-block;
|
||||
color: #e5f503;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.fa-key:hover {
|
||||
color: lightyellow;
|
||||
}
|
||||
|
||||
/* Heading Styling */
|
||||
|
||||
.heading {
|
||||
border-bottom: 2px solid black;
|
||||
width: 100%;
|
||||
background-color: var(--primaryBackgroundColor);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Portfolio Section Styling */
|
||||
|
||||
.portfolio {
|
||||
background-color: var(--secondaryBackgroundColor);
|
||||
border: 0;
|
||||
padding: 20px 0 20px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.projectsGalleryGrid {
|
||||
justify-content: center;
|
||||
color: var(--primaryTextColor);
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(2, 40vw);
|
||||
opacity: 0;
|
||||
animation:
|
||||
fadeIn 5s 3s forwards;
|
||||
}
|
||||
|
||||
.project {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Technologies Section Styling */
|
||||
.technologies {
|
||||
background-color: var(--tertiaryBackgroundColor);
|
||||
border: 0;
|
||||
padding: 20px 0 20px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.technologiesIconsGrid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(4, 10vw);
|
||||
}
|
||||
|
||||
|
||||
/* Brand Colors */
|
||||
.fa-html5 {
|
||||
color: #f06529;
|
||||
}
|
||||
|
||||
.fa-css3 {
|
||||
color: #2965f1;
|
||||
}
|
||||
|
||||
.fa-aws {
|
||||
color: #FF9900;
|
||||
}
|
||||
|
||||
.fa-git-alt {
|
||||
color: #f1502f;
|
||||
}
|
||||
|
||||
.fa-js {
|
||||
color: #F0DB4F;
|
||||
}
|
||||
|
||||
.fa-android {
|
||||
color: #a4c639;
|
||||
}
|
||||
|
||||
.fa-digital-ocean {
|
||||
color: #123cff;
|
||||
}
|
||||
|
||||
.fa-vuejs {
|
||||
color: #42b883;
|
||||
}
|
||||
|
||||
.fa-bitcoin {
|
||||
color: #f2a900;
|
||||
}
|
||||
|
||||
.fa-ethereum {
|
||||
color: #3c3c3d;
|
||||
}
|
||||
|
||||
.fa-rust {
|
||||
color: #b7410e;
|
||||
}
|
||||
|
||||
.fa-linux {
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
.fa-react {
|
||||
color: #61DBFB;
|
||||
}
|
||||
|
||||
.fa-docker {
|
||||
color: #0db7ed;
|
||||
}
|
||||
|
||||
.fa-wordpress {
|
||||
color: #21759b;
|
||||
}
|
||||
|
||||
.fa-node-js {
|
||||
color: #6cc24a;
|
||||
}
|
||||
|
||||
.fa-angular {
|
||||
color: #dd1b16;
|
||||
}
|
||||
|
||||
.fa-bolt {
|
||||
color: #8a2be2;
|
||||
}
|
||||
|
||||
.fa-apple {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.fa-cloud-arrow-up {
|
||||
color: #add8e6;
|
||||
}
|
||||
|
||||
.fa-python {
|
||||
color: #FFE873;
|
||||
}
|
||||
/* Contact Section Styling */
|
||||
|
||||
.contact {
|
||||
background-color: var(--lightconsoleBackgroundColor);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.contactForm {
|
||||
background-color: inherit;
|
||||
width: 60vw;
|
||||
height: 400px;
|
||||
border-radius: 5%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue