feat: main page, projects, posts

This commit is contained in:
Ahmet Kaan Gümüş 2025-02-14 04:54:08 +03:00
parent 365eb43ba6
commit 25dc6e69c6
11 changed files with 764 additions and 0 deletions

12
.gitignore vendored Normal file
View file

@ -0,0 +1,12 @@
# Generated by Cargo
# will have compiled files and executables
/target/
/dist/
/static/
/.dioxus/
.vscode/
# These are backup files generated by rustfmt
**/*.rs.bk
Cargo.lock

27
Cargo.toml Normal file
View file

@ -0,0 +1,27 @@
[package]
name = "personality"
version = "0.1.0"
authors = ["Ahmet Kaan GÜMÜŞ <96421894+Tahinli@users.noreply.github.com>"]
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
dioxus = { version = "0.6.1", features = ["web", "router"] }
# Debug
tracing = "0.1.41"
dioxus-logger = "0.6.1"
[profile]
[profile.wasm-dev]
inherits = "dev"
opt-level = 1
[profile.server-dev]
inherits = "dev"
[profile.android-dev]
inherits = "dev"

43
Dioxus.toml Normal file
View file

@ -0,0 +1,43 @@
[application]
# App (Project) Name
name = "Tahinli"
# Dioxus App Default Platform
# desktop, web
default_platform = "web"
# `build` & `serve` dist path
out_dir = "dist"
# resource (assets) file folder
asset_dir = "assets"
[web.app]
# HTML title tag content
title = "Tahinli"
[web.watcher]
# when watcher trigger, regenerate the `index.html`
reload_html = true
# which files or dirs will be watcher monitoring
watch_path = ["src", "assets"]
# include `assets` in web platform
[web.resource]
# CSS style file
style = []
# Javascript code file
script = []
[web.resource.dev]
# Javascript code file
# serve: [dev-server] only
script = []

BIN
assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

20
assets/header.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

198
assets/main.css Normal file
View file

@ -0,0 +1,198 @@
* {
box-sizing: border-box;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.project{
margin: 1%;
h1 {
color: azure;
}
h3 {
margin-top: 1%;
color: aliceblue;
}
h5 {
margin-bottom: 1%;
color: antiquewhite;
}
div {
margin-top: 1%;
display:block;
@media screen {
width: 50%;
}
@media screen and (max-width:820px){
width: 100%;
}
}
}
#github_link_in_project_page {
text-decoration: none;
color: coral;
}
.projects_list {
font-size: large;
color: white;
margin: 1%;
}
.projects_list h1 {
margin-top: 1%;
margin-bottom: 1%;
}
.project_link {
text-decoration: underline;
font-size: x-large;
color: azure;
margin: 1%;
}
.project{
margin: 1%;
h1 {
color: azure;
}
h3 {
margin-top: 1%;
color: aliceblue;
}
h5 {
margin-bottom: 1%;
color: antiquewhite;
}
div {
margin-top: 1%;
display:block;
@media screen {
width: 50%;
}
@media screen and (max-width:820px){
width: 100%;
}
}
}
#github_link_in_post_page {
text-decoration: none;
color: coral;
}
.posts_list {
font-size: large;
color: white;
margin: 1%;
}
.posts_list h1 {
margin-top: 1%;
margin-bottom: 1%;
}
.post_link {
text-decoration: underline;
font-size: x-large;
color: azure;
margin: 1%;
}
body {
background-color: rgba(0, 0, 0, 0.85);
color: silver;
}
.main_nav_btn {
text-decoration:overline silver;
color: burlywood;
text-shadow: 1px 1px orange;
padding: 5%;
@media screen {
font-size: xx-large;
}
@media screen and (max-width:820px){
font-size: x-large;
}
}
.main_nav_btn:hover {
background-color: rgba(255, 240, 240, 0.2);
}
.main_nav {
display:inline-flex;
padding-top: 1%;
padding-bottom: 1%;
background-blend-mode: multiply;
}
.main {
margin: 1%;
}
#main_about {
display:block;
white-space: pre-line;
@media screen {
width: 50%;
}
@media screen and (max-width:820px){
width: 100%;
}
}
header {
background-size: cover;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
margin-bottom: 1% black;
background-color: rgba(0, 0, 0, 0.6);
}
#name {
color: white;
}
#title {
color:aqua;
margin-top: 1%;
margin-bottom: 1%;
}
#github {
margin: 5%;
color: brown;
font-size: large;
font-weight: bold;
}
#linkedin {
margin: 5%;
color:cornflowerblue;
font-size: large;
font-weight: bold;
}
#social_links {
display: inline-block;
margin: 1%;
}
.footer_div {
margin-top: 5%;
}
footer {
color: burlywood;
bottom: 0;
width: 100%;
position: fixed;
background-color: rgb(0, 0, 0, 0.9);
}

45
src/home.rs Normal file
View file

@ -0,0 +1,45 @@
use dioxus::prelude::*;
use crate::{Footer, Header, Route};
#[component]
pub fn Home() -> Element {
rsx! {
Header {}
div { id: "content",
Outlet::<Route> {}
}
div {
class: "main",
h1 {
id: "name",
"Ahmet Kaan Gümüş"}
h4 {
id: "title",
"System && Back End Developer"}
div {
id: "social_links",
Link {id:"github",to: "https://github.com/tahinli", "GitHub"}
Link {id:"linkedin",to: "https://linkedin.com/in/ahmetkaangumus", "LinkedIn"}
}
div {
id: "main_about",
"
Hi, I'm Ahmet Kaan. I'm Turk. I was born in 2001.
I graduated from the computer science major at Erciyes University.
I'm keen on understanding computers as deeply as possible.
I love open source philosophy and KISS principle.
My passion is to create software that's able to live as long as possible. Developers should write versatile, bug free programs. Using software is impossible to ignore. World's leading with software and will be. We as developers must think as many possibility as possible to create robust and secure programs.
I wish I will be able to create free and open source software that is widely used by people without even let them thinking about their privacy and robustness of my program.
"
}
}
Footer {}
}
}

53
src/lib.rs Normal file
View file

@ -0,0 +1,53 @@
use dioxus::prelude::*;
use home::Home;
use posts::{Post, Posts};
use projects::{Project, Projects};
pub mod home;
pub mod posts;
pub mod projects;
#[derive(Clone, Routable, Debug, PartialEq)]
pub enum Route {
#[route("/")]
Home {},
#[route("/projects")]
Projects {},
#[route("/projects/:id")]
Project { id: i32 },
#[route("/posts")]
Posts {},
#[route("/posts/:id")]
Post { id: i32 },
}
#[component]
pub fn Header() -> Element {
rsx! {
header {
nav {
class: "main_nav",
Link {to: Route::Home{}, class:"main_nav_btn", "Home"}
Link {to: Route::Projects{}, class:"main_nav_btn", "Projects"}
Link {to: Route::Posts {}, class:"main_nav_btn", "Posts"}
}
}
div { id: "content",
Outlet::<Route> {}
}
}
}
#[component]
pub fn Footer() -> Element {
rsx! {
div {class:"footer_div",
footer{
h4 {
"Developed by Tahinli with Rust + WASM without Front End Skills"
}
}
}
}
}

19
src/main.rs Normal file
View file

@ -0,0 +1,19 @@
use dioxus::prelude::*;
use personality::Route;
use tracing::Level;
fn main() {
// Init logger
dioxus_logger::init(Level::INFO).expect("failed to init logger");
launch(app);
}
fn app() -> Element {
rsx! {
link {
rel: "stylesheet",
style { {include_str!("../assets/main.css")} },
}
Router::<Route> {}
}
}

34
src/posts.rs Normal file
View file

@ -0,0 +1,34 @@
use dioxus::prelude::*;
use crate::{Footer, Header};
#[component]
pub fn Posts() -> Element {
rsx! {
Header {}
div {
class: "posts_list",
h1 {"Posts"}
}
Footer {}
}
}
#[component]
pub fn Post(id: i32) -> Element {
let x = match id {
1 => {
rsx! {}
}
_ => {
rsx! {
h1 {"You're not supposed to be here"}
}
}
};
rsx! {
Header {}
{x}
Footer {}
}
}

313
src/projects.rs Normal file
View file

@ -0,0 +1,313 @@
use dioxus::prelude::*;
use crate::{Footer, Header, Route};
#[component]
pub fn Projects() -> Element {
rsx! {
Header {}
div {
class: "projects_list",
h1 {"Projects"}
div { class: "project_link", Link {to: Route::Project { id: 1 }, class: "project_link", "Radioxide"} }
div { class: "project_link", Link {to: Route::Project { id: 2 }, class: "project_link", "TCP File Transfer"} }
div { class: "project_link", Link {to: Route::Project { id: 3 }, class: "project_link", "Memory Filler Killer"} }
div { class: "project_link", Link {to: Route::Project { id: 4 }, class: "project_link", "Package Manager"} }
div { class: "project_link", Link {to: Route::Project { id: 5 }, class: "project_link", "Personality"} }
div { class: "project_link", Link {to: Route::Project { id: 6 }, class: "project_link", "UDP Hole Puncher"} }
div { class: "project_link", Link {to: Route::Project { id: 7 }, class: "project_link", "Blockchain"} }
div { class: "project_link", Link {to: Route::Project { id: 8 }, class: "project_link", "Optimization Algorithms"} }
div { class: "project_link", Link {to: Route::Project { id: 9 }, class: "project_link", "Forum"} }
}
Footer {}
}
}
#[component]
pub fn Project(id: i32) -> Element {
let x = match id {
1 => {
rsx! {
div {
class:"project",
h1 {"Radioxide"}
h5 {"Online radio written in Rust."}
Link {id: "github_link_in_project_page", to: "https://github.com/tahinli/radioxide", "GitHub"}
div {
"
In this project any streamer can do their radio stream.
Streamer is able to stream audio input and also sound files.
Multiple clients are able to listen streamer.
Relay server connects streamer to worldwide listeners.
Strategy is simple. Since normal users don't have a chance to share their IP publicly,
relay server collects data from streamer app. Front end part's able to connect with relay server and
this allows people listen everywhere where the internet reaches.
"
}
h3 {"Why I did this ?"}
div {
"I wanted to learn how to stream sound data."
}
h3 {"What I learned ?"}
div {
"WebSocket, TLS, Stream Optimization, Sound Mix, How Sound Works, ELM Architecture"
}
}
}
}
2 => {
rsx! {
div {
class:"project",
h1 {"TCP File Transfer"}
h5 {"New file transfer protocol based on TCP, written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust-tcp-file-transfer", "GitHub"}
div {
"
In this project I wanted to create a program for transferring files with network.
I implemented this to use personally, especially in local networks.
Basic client server structure both client and server can receive or send data.
"
}
h3 {"Why I did this ?"}
div {
"
I wanted a portable easy way to transfer files between different operating systems.
I personally experienced many problem while I was working for Erciyes University
because of cross platform support and lack of portability of other programs.
That's why I wanted to solve it.
"
}
h3 {"What I learned ?"}
div {
"
Interacting with network in Rust.
"
}
h3 {"Note"}
div {
"
Additionally it's my first project in Rust. That's why after even learning much better ways to implement this program,
I don't change the code. I keep this program as a memento and a milestone for my improvement.
"
}
}
}
}
3 => {
rsx! {
div {
class:"project",
h1 {"Memory Filler Killer"}
h5 {"Memory fullness and filler checker written in Rust "}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust-memory-filler-killer", "GitHub"}
div {
"
In this project a program checks for available memory.
If available memory gets lower then given value, program tries to find memory filler.
When memory filler found by the program, it will be killed to keep operating system alive.
"
}
h3 {"Why I did this ?"}
div {
"
Linux normally has this kind of feature.
If it lacks of memory to keep OS alive then program that uses most of the memory be killed by kernel.
Problem is it's not working well. I don't know why but
I got in a situation like a program consumes all of my memory by some kind of leak but kernel couldn't do anything and my system crashed.
I wanted to solve this problem, now I use my program as a service for my own system to prevent myself from being in same situation.
"
}
h3 {"What I learned ?"}
div {
"Interacting with operating system and processes for reading data and sending signals."
}
}
}
}
4 => {
rsx! {
div {
class:"project",
h1 {"Package Manager"}
h5 {"Package manager written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust-package-manager", "GitHub"}
div {
"
In this project user can upload own packages to server then able to update and delete.
Other users can download and install uploaded packages to their systems.
They are able to update and delete packages.
Also client side supports updating all packages that is already installed on the system.
"
}
h3 {"Why I did this ?"}
div {
"
I wanted to learn how can I build package manager since I use them everyday.
"
}
h3 {"What I learned ?"}
div {
"Seems like I didn't learn new things but made stronger what I knew."
}
}
}
}
5 => {
rsx! {
div {
class:"project",
h1 {"Personality"}
h5 {"Personal website written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/personality", "GitHub"}
div {
"
In this project I wanted to build portfolio website for myself and currently you're viewing what is built.
There are couple pages and sections. It's a static page based on WASM.
"
}
h3 {"Why I did this ?"}
div {
"
I wanted to learn HTML and CSS a bit also having website as a document of yourself sounds nice.
"
}
h3 {"What I learned ?"}
div {
"
Little bit HTML and CSS. I wish I could create better views but doing this kind of things always hard for me.
"
}
}
}
}
6 => {
rsx! {
div {
class:"project",
h1 {"UDP Hole Puncher"}
h5 {"UDP hole puncher written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust-udp-hole-puncher", "GitHub"}
div {
"
In this project I wanted to bypass NAT (Network Address Translation) limitations. Because of lack of IPv4 addresses and security reasons we have public and private addresses.
In this situation, we can't easily create peer to peer connection unfortunately. Thanks to UDP hole punching strategy, we may bypass NAT restrictions.
I can't say it works every time because NAT strategies are getting complex by different layers and even creating a hole for your router not enough for peer connection.
"
}
h3 {"Why I did this ?"}
div {
"
I wanted to create peer to peer connection without sending actual data to some relay server. UDP hole punching still rely on at least a connectible address (let's say a relay) but just for creating a hole not for sending all data.
"
}
h3 {"What I learned ?"}
div {
"
I learnt more details and different type of NATs. Working with UDP is also another plus.
"
}
}
}
}
7 => {
rsx! {
div {
class:"project",
h1 {"Blockchain"}
h5 {"Blockchain written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust-blockchain", "GitHub"}
div {
"
In this project I wanted to implement a blockchain structure from scratch. Basically project starts with defining block, blockchain, genesis block so on. After that I created network strategy to transfer these blocks to miners. When miners mine blocks, server tries to collect data from them and decides what next blocks will be by consensus mechanism.
"
}
h3 {"Why I did this ?"}
div {
"
Basically I wanted to learn how things work in blockchain side.
"
}
h3 {"What I learned ?"}
div {
"
I realised pitfalls of the blockchain technology more clearly by the first hand.
"
}
}
}
}
8 => {
rsx! {
div {
class:"project",
h1 {"Optimization Algorithms"}
h5 {"Optimization Algorithms written in Rust"}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/optimization_algorithms", "GitHub"}
div {
"
In this project I implemented couple of optimization algorithms in Rust. In general they are very useful in many places included: hyper parameter optimization, food search, reducing cost for production and more. I have to mention Artificial Bee Colony algorithm created by Prof. Dr. Derviş Karaboğa, performs great performance and robustness especially in artificial intelligence area.
"
}
h3 {"Why I did this ?"}
div {
"
Firstly it was optional assessment for university course but then it became a passion to learn. Especially when I had a chance to publish my work on official university page, I really put a lot of effort to create Rust version as correct as possible. You can find it here:
"
Link {to: "https://abc.erciyes.edu.tr", "Erciyes University"}
}
h3 {"What I learned ?"}
div {
"
How things works on optimization area. Specifically why we need them instead of calculating perfect mathematical equation for every possible problem to achieve correct results. This optimization techniques lead an expanded view for my life also.
"
}
}
}
}
9 => {
rsx! {
div {
class:"project",
h1 {"Forum"}
h5 {"Forum back end written in Rust."}
Link {id: "github_link_in_project_page", to: "https://github.com/Tahinli/rust_forum", "GitHub"}
div {
"
In this project I wanted to implement forum back end. It has authentication and authorization with JWT. It has fully asynchronous architecture with Postgres.
"
}
h3 {"Why I did this ?"}
div {
"It was going to be used for university club but we decided to go on with battle tested one."
}
h3 {"What I learned ?"}
div {
"Writing middleware and implementing JWT"
}
}
}
}
_ => {
rsx! {
h1 {"You're not supposed to be here"}
}
}
};
rsx! {
Header {}
{x}
Footer {}
}
}