tyrel/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tyrel Updates

Browse Source
This commit is contained in:
Tyrel Souza 2023-10-09 00:16:00 -04:00
parent 2dac036b21
commit 01dc081eb8
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
5 changed files with 96 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/style.css
View File

@ -2,14 +2,16 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=JetBrains+Mono:wght@300&family=PT+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=JetBrains+Mono:wght@300&family=PT+Mono&display=swap');
body { body {
background-color: #121317; background: url("https://tyrel.dev/blog/theme/images/moroccan-flower-dark.png");
} }
img.rounded-circle{ img.rounded-circle{
border: 3px solid #7e3af2; border: 3px solid #15A9DB;
} }
.card { .card {
margin: auto;
background-color: #1a1c23; background-color: #1a1c23;
max-width: 700px;
} }
h1.title { h1.title {
font-size: 23px; font-size: 23px;
@ -43,7 +45,7 @@ p.bio-body {
} }
span.myBadge{ span.myBadge{
color: #7e3af2; color: #15A9DB;
} }
h1.header { h1.header {
font-size: 18px; font-size: 18px;
@ -51,10 +53,10 @@ h1.header {
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
} }
.progress-bar { .progress-bar {
background-color: #7e3af2; background-color: #15A9DB;
} }
h2.title { h2.title {
background: #7e3af2; background: #15A9DB;
color: #ffffff; color: #ffffff;
display: inline-block; display: inline-block;
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
@ -73,7 +75,7 @@ footer {
left:0; left:0;
width: 100%; width: 100%;
height: 24px; height: 24px;
background-color: #7e3af2; background-color: #15A9DB;
} }
p.footer-title { p.footer-title {
@ -82,4 +84,22 @@ p.footer-title {
color: #fff; color: #fff;
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
} }
a {
color: white;
}
a.btn {
background: #ff7e00;
color: #ffffff;
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: bold;
line-height: 12px;
letter-spacing: 1px;
margin: 0 0 30px;
padding: 10px 15px 8px;
text-transform: uppercase;
}

BIN
img/profile.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 8.2 MiB

BIN
img/profilerectangle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

104
index.html
View File

@ -6,20 +6,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="500x500" href="img/icon.png"> <link rel="icon" type="image/png" sizes="500x500" href="img/icon.png">
<!-- Primary Meta Tags --> <!-- Primary Meta Tags -->
<title>Rezza Priatna - Webpage</title> <title>Tyrel Souza's Website</title>
<meta name="title" content="Rezza Priatna - Webpage"> <meta name="title" content="Tyrel Souza's Website" />
<meta name="description" content="Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages."> <meta name="description" content="Personal website and blog of Tyrel Souza - A Software Engineer, Notary Public, Pilot, and Ham Radio Operator." />
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website"> <meta property="og:type" content="website" />
<meta property="og:url" content="https://metatags.io/"> <meta property="og:url" content="https://tyrel.dev/" />
<meta property="og:title" content="Rezza Priatna - Webpage"> <meta property="og:title" content="Tyrel Souza's Website" />
<meta property="og:description" content="Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages."> <meta property="og:description" content="Personal website and blog of Tyrel Souza - A Software Engineer, Notary Public, Pilot, and Ham Radio Operator." />
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png"> <meta property="og:image" content="https://tyrel.dev/imgs/profilerectangle.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://tyrel.dev/" />
<meta property="twitter:title" content="Tyrel Souza's Website" />
<meta property="twitter:description" content="Personal website and blog of Tyrel Souza - A Software Engineer, Notary Public, Pilot, and Ham Radio Operator." />
<meta property="twitter:image" content="https://tyrel.dev/imgs/profilerectangle.jpg" />
<!-- Meta Tags Generated with https://metatags.io -->
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<script defer src="visitor.js"></script>
</head> </head>
<body class="d-flex flex-column min-vh-100"> <body class="d-flex flex-column min-vh-100">
<div class="container mt-4"> <div class="container mt-4">
@ -30,60 +38,86 @@
<img class="rounded-circle" alt="100x100" src="img/profile.jpg" <img class="rounded-circle" alt="100x100" src="img/profile.jpg"
data-holder-rendered="true" width="150" height="150"> data-holder-rendered="true" width="150" height="150">
<h1 class="title mt-2"> <h1 class="title mt-1">
<span class="myBadge"> <span class="myBadge">
<i class="bi bi-patch-check-fill"></i> <i class="bi bi-patch-check-fill"></i>
</span>Rezza Priatna</h1> </span>Tyrel Souza</h1>
<p class="title2">Backend Developer</p> <p class="title2">Software Engineer</p>
</div> </div>
<div class="card-bio"> <div class="card-bio">
<div class="card-body"> <div class="card-body">
<p class="bio-body"> <p class="bio-body">
Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages. Hello, My name is Tyrel Souza.
I have been programming since 2010 professionally, and personally a decade prior.
I am also a Private Pilot, a Notary Public, and a Ham Radio Operator.
</p>
<p class="bio-body">
I specialize in Python and JavaScript.
</p> </p>
</div> </div>
</div> </div>
<div class="text-center icon"> <div class="text-center icon">
<i class="bi bi-facebook ml-4"></i> <a href="https://github.com/tyrelsouza"><i class="bi bi-github ml-4"></i></a>
<i class="bi bi-instagram ml-4"></i> <a href="https://linkedin.com/in/tyrel-souza"><i class="bi bi-linkedin ml-4"></i></a>
<i class="bi bi-whatsapp ml-4"></i> <a href=" mailto:email@tyrel.dev?subject=I%20found%20your%20website&body=Hi%20Tyrel%2C%0D%0AI%20found%20your%20website%20and%20wanted%20to%20send%20you%20an%20email%20about... "><i class="bi bi-envelope ml-4"></i></a>
</div>
<div class="text-center mt-1">
<a href="https://tyrel.dev/blog/" class="btn">Read My Blog</a>
<a href="https://tyrel.dev/links/" class="btn">Find Me Online</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Skils --> <!-- Skils -->
<div class="card mt-2"> <div class="card mt-1">
<div class="card-body"> <div class="card-body">
<h2 class="title"> My Skils</h1> <h2 class="title">My Skills</h2>
<p class="bio-body mt-2">PHP</p> <p class="bio-body mt-1">Python</p>
<div class="progress" style="height: 4px;"> <div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<p class="bio-body mt-4">PHP</p> <p class="bio-body mt-4">Django</p>
<div class="progress" style="height: 4px;"> <div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<p class="bio-body mt-4">MySQL</p> <p class="bio-body mt-4">JavaScript</p>
<div class="progress" style="height: 4px;"> <div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<p class="bio-body mt-4">Nodejs</p> <p class="bio-body mt-4">Go</p>
<div class="progress" style="height: 4px;"> <div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 58%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<p class="bio-body mt-4">Bootsrap</p> <p class="bio-body mt-4">Ruby on Rails</p>
<div class="progress mb-5" style="height: 4px;"> <div class="progress mb-5" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- Project --> <!-- Project -->
<div class="card mt-1">
<div class="card-body">
<h2 class="title">Current Projects</h1>
<p class="bio-body mt-1"><a href="https://gitea.tyrel.dev/tyrel/benchtopdevices">Benchtop Devices - PDF Sheet Generator</a></p>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 66%;" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="bio-body mt-4"><a href="https://gitea.tyrel.dev/tyrel/rustylinks">RustyLinks - Linktree Clone</a></p>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="bio-body mt-4"><a href="https://gitea.tyrel.dev/tyrel/frank_tank">Waterheater Servo Remote</a></p>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div> </div>
<footer class="mt-auto]"> <footer class="mt-auto]">
<div class="text-center"> <div class="text-center">
<p class="footer-title">Total Visitor :</p> <p class="footer-title">Tyrel Souza - Chapel Hill, North Carolina</p>
</div> </div>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

7
visitor.js
View File

@ -1,7 +0,0 @@
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.countapi.xyz/hit/rezzaapr.my.id/visits");
xhr.responseType = "json";
xhr.onload = function() {
document.querySelector('.footer-title').innerHTML = 'Total Visitor : ' + this.response.value;
}
xhr.send();