Build your own personal web site

Hello, firstly I need to say, it’s my first English blog post so before the start sorry for this.

I decided to make my own personnel web site. I think it should be more professional for me. And these days I haven’t any alive project. My all project came from my employer so sometimes I learn something and I want to implement somewhere and there is no resource for this and I am moving to mobile development which is Ios. Therefore I need to learn some last things which are Material UI and making something my self with out design. Indeed, my first goal of making a personal website and add some technological things in the future. For example, I will add my own online code editor to my website, and the pdf generator quite excited for me. In this series, I am going to write about React, Material Uı, share my experience and source which is I thought is helpful. For these series, you need knowledge about React.

Let me introduce myself a little bit, I am 3 years old front-end developer after university I started my career with react-native, I need to develop a CRM app for the middle company. It was a one-time job and after this, I’ve met React and I started my first real full-time job in Bursa at a small startup, I’ve worked for one year at this company. I developed an Interactive video-player with React, VideoJs, Grapql, and styled-component. That was a great experience for me because of these things pretty new techs. After then, I started to Netaş and moved to Istanbul. Now I am part of a huge team and we’re developing a communication app for a big enterprise business. That was quite interesting for me because our tech stack is Web-Rtc, web socket, angularJs(it’s bloody old ), and Cordova.

Anyways, that information is enough :)

Let’s back the personal web site.

Firstly, I started with Jira. Because I already started a lot of interested and super project but I couldn’t continue and finish. I think I have not planned this a reason why I couldn’t finish my project. My Jira has a just simple Kanban board. But I will use it effectively, and I will learn how can I program myself.

It’s just simple. When I have a new idea I will add it.

My other Todo was got Material Course because I haven’t any experience with Material UI. For the first impression, it is awesome and every javascript developer should know one CSS Framework.
For learning Material Uı, I don’t like long tutorial series and also I hate long documents. My way is simple, just watch the shortest video about the topic and continue with documents, but I find a very helpful series I am going to share both of them.
I've watched this video
https://www.youtube.com/watch?v=DJ1_CKs_LPI&ab_channel=JasonRivera
other
https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr&ab_channel=AnthonySistilli

https://material-ui.com/getting-started/installation/

Let's start
npx create-react-app mypersonelapp

cd mypersonelapp

npm install @material-ui/core

npm install @material-ui/icons

Theming

https://material-ui.com/customization/theming/

It looks like a high-order component, we need to wrap our app which is we would be created the Themening component. I am creating a utils folder and I was adding it inside.

For now, I am just creating a simple theme property.

Don’t forget to “export default theme” now we will add ThemeProvider with this theme property to “index.js”

I wrapped the App component in the index component so every component will be rendered inside ThemeProvider.

Now let’s create the Appbar component.
You can follow this https://material-ui.com/api/app-bar/

I added a new folder as Components and adding AppBar inside it. I just copied on the material document, I will specifical it, I wanna dived 2 section my appbar, the first side will be about routing and the right side will be about my social media account so right side be icons place.

I calling my new component on AppJs.

My appbar

Let’s customize my appbar. For the right side, I just added below codes. Left side need some job. I’ve opened own job on my kanban board.

I thought you, I have to work regular, so everything needs to be on board because after some time I forget

Topbar

import LinkedInIcon from '@material-ui/icons/LinkedIn';
<IconButton aria-label=”show 4 new mails” color=”inherit” href=”link">

<LinkedInIcon />

</IconButton>

I think it’s enough for now. Next episode I am going to make the left side which has a router with my pages and has a little state management on the parent state.