-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
426 additions
and
253 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,24 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/src/assets/logo.png" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
|
||
| <title>Home</title> | ||
|
|
||
| <meta name="robots" content="all"> | ||
| <meta name="theme-color" content="#eb6b34"> | ||
| <meta name="description" content="Website by Integr"> | ||
| <meta name="og:title" content="Integr"> | ||
| <meta name="og:description" content="About me"> | ||
| <meta name="og:image" content="icon.png"> | ||
|
|
||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> | ||
| <link href="index.css" rel="stylesheet" type="text/css"> | ||
|
|
||
| <link rel="icon" type="image/png" href="src/assets/icon_round.png"> | ||
|
|
||
| <script src="https://kit.fontawesome.com/0a7e2ccef9.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
|
|
||
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,87 @@ | ||
| #root { | ||
| .area_center { | ||
| margin-right: 20%; | ||
| margin-left: 20%; | ||
| margin-top: 5%; | ||
| margin-bottom: 5%; | ||
| } | ||
|
|
||
| html { | ||
| height: 100%; | ||
| width: 100%; | ||
| background-image: url(./assets/background.png); | ||
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-size: cover; | ||
| } | ||
|
|
||
| .title_center { | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| font-size: 50px; | ||
| text-align: center; | ||
| font-weight: bolder; | ||
| } | ||
|
|
||
| body { | ||
| margin: 5%; | ||
| background: none; | ||
| color: rgb(109, 90, 90); | ||
| font-weight: 600; | ||
| text-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px; | ||
| } | ||
|
|
||
| .icon { | ||
| width: 50px; | ||
| height: 50px; | ||
| display: block; | ||
| padding: 2px; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .icon_wrapper_pc { | ||
| display: flex; | ||
| } | ||
|
|
||
| .icon_wrapper_phone { | ||
| display: none; | ||
| } | ||
|
|
||
| @media only screen and (max-width: 1000px) { | ||
| .text_center { | ||
| margin: 5%; | ||
| text-align: start; | ||
| } | ||
|
|
||
| .area_center { | ||
| margin-right: 5%; | ||
| margin-left: 5%; | ||
| margin-top: 2%; | ||
| margin-bottom: 2%; | ||
| } | ||
|
|
||
| .title_center { | ||
| margin-right: 5%; | ||
| margin-left: 5%; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| font-size: 50px; | ||
| text-align: center; | ||
| font-weight: bolder; | ||
| } | ||
|
|
||
| .icon_wrapper_phone { | ||
| display: flex; | ||
| } | ||
|
|
||
| .icon_wrapper_pc { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .img { | ||
| margin: auto; | ||
| border-radius: 100%; | ||
| height: 210px; | ||
| width: 210px; | ||
| display: block; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,80 @@ | ||
| import './App.css' | ||
| import cSharpImg from './assets/csharp.png' | ||
| import cssImg from './assets/css.png' | ||
| import htmlImg from './assets/html.png' | ||
| import javaImg from './assets/java.png' | ||
| import jsImg from './assets/js.png' | ||
| import kotlinImg from './assets/kotlin.png' | ||
| import linkImg from './assets/link.png' | ||
| import logoImg from './assets/logo.png' | ||
| import bookImg from './assets/newBook.png' | ||
| import pythonImg from './assets/python.png' | ||
| import reactImg from './assets/react.png' | ||
| import tsImg from './assets/ts.png' | ||
| import backImg from './assets/Rectangle 2.png' | ||
| import csharp from './assets/csharp.png' | ||
| import css from './assets/css.png' | ||
| import html from './assets/html.png' | ||
| import java from './assets/java.png' | ||
| import javascript from './assets/javascript.png' | ||
| import kotlin from './assets/kotlin.png' | ||
| import python from './assets/python.png' | ||
| import react from './assets/react.png' | ||
| import typescript from './assets/typescript.png' | ||
| import icon from './assets/icon.png' | ||
| import Card from './components/CardComponent' | ||
| import MainBox from './components/MainBox' | ||
| import Box from './components/Box' | ||
| import LinkButton from './components/LinkButton' | ||
|
|
||
| function App() { | ||
| return ( | ||
| <> | ||
| <img style={{ width: "100%", height: "100%", left: 0, top: 0, position: 'absolute', backgroundRepeat: "no-repeat", objectFit: "cover" }} src={backImg} /> | ||
|
|
||
| <div style={{ alignItems: 'center', display: 'flex', marginLeft: "auto", marginRight: "auto", marginTop: "50" }}> | ||
| <div style={{ width: "467px", height: "339", backdropFilter: 'blur(2.5px)', alignItems: 'center', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', display: 'flex', marginLeft: "auto", background: 'rgba(177.44, 177.44, 177.44, 0.75)', borderRadius: 46, marginTop: "5%", marginRight: "20px" }}> | ||
| <img style={{ width: 233, height: 233, marginLeft: "30px", marginRight: "10px", marginTop: "10px", marginBottom: "10px", borderRadius: "120px", boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' }} src={logoImg} /> | ||
|
|
||
| <div style={{ width: 334, height: 233, marginTop: "120px", padding: "10px" }}> | ||
| <div style={{ color: '#6D5A5A', fontSize: 40, fontFamily: 'Arial', fontWeight: '700', wordWrap: 'break-word', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)' }}>Erik</div> | ||
| <div style={{ color: '#6D5A5A', fontSize: 20, fontFamily: 'Arial', marginLeft: "3px", fontWeight: '300', wordWrap: 'break-word', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)' }}>Integr</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div style={{ width: "567px", padding: "8px", height: "339", backdropFilter: 'blur(2.5px)', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', marginLeft: "30px", marginRight: "30px", background: 'rgba(177.44, 177.44, 177.44, 0.75)', borderRadius: 46, marginTop: "5%" }}> | ||
|
|
||
| <div style={{ color: '#6D5A5A', fontWeight: '600', width: 567, height: 339, padding: "10px", lineHeight: "10px", textAlign: "left", fontFamily: "Arial", fontSize: "30px"}}> | ||
| <p style={{ marginLeft: "20px" }}>Trying to improve at React</p> | ||
| <p style={{ marginLeft: "20px" }}>Kotlin is now my favorite language!</p> | ||
| <p style={{ marginLeft: "20px" }}>. . .</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div style={{ width: "213px", height: "375", backdropFilter: 'blur(2.5px)', alignItems: 'center', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', display: 'flex', marginRight: "auto", marginLeft: "20px", background: 'rgba(177.44, 177.44, 177.44, 0.75)', borderRadius: 46, marginTop: "5%" }}> | ||
| <div style={{ width: 213, height: 375, position: 'relative' }}> | ||
| <div style={{ width: 111, height: 28, left: 51, top: 276, position: 'absolute' }}> | ||
| <img style={{ width: 28.09, height: 28, left: 0, top: 0, position: 'absolute' }} src={linkImg} /> | ||
|
|
||
| <a style={{ left: 35, top: 2, position: 'absolute', color: '#6D5A5A', fontSize: 20, fontFamily: 'Arial', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)', fontWeight: '700', textDecoration: 'underline', wordWrap: 'break-word' }} href="https://discordapp.com/users/688059979105697844">Discord</a> | ||
| </div> | ||
|
|
||
| <div style={{ width: 102, height: 28, left: 51, top: 231, position: 'absolute' }}> | ||
| <img style={{ width: 28.09, height: 28, left: 0, top: 0, position: 'absolute' }} src={linkImg} /> | ||
|
|
||
| <a style={{ left: 35, top: 2, position: 'absolute', color: '#6D5A5A', fontSize: 20, fontFamily: 'Arial', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)', fontWeight: '700', textDecoration: 'underline', wordWrap: 'break-word' }} href="https://github.com/Integr-0">Github</a> | ||
| </div> | ||
|
|
||
| <div style={{ width: 126, height: 48, left: 51, top: 33, position: 'absolute' }}> | ||
| <img style={{ width: 28.90, height: 33.03, left: 0, top: 8, position: 'absolute' }} src={bookImg} /> | ||
|
|
||
| <div style={{ left: 35, top: 0, position: 'absolute', color: '#6D5A5A', fontSize: 20, fontFamily: 'Arial', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)', fontWeight: '600', wordWrap: 'break-word' }}>HTBLA<br />Leonding</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div style={{ alignItems: 'center', display: 'flex', marginLeft: "auto", marginRight: "auto", marginTop: "50"}}> | ||
| <div style={{ width: "701px", height: "107", backdropFilter: 'blur(2.5px)', alignItems: 'center', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', display: 'flex', marginRight: "20px", marginLeft: "auto", background: 'rgba(177.44, 177.44, 177.44, 0.75)', borderRadius: 46, marginTop: "5%" }}> | ||
| return ( | ||
| <> | ||
| <div className="area_center"> | ||
| <MainBox icon={icon}/> | ||
|
|
||
| <Box content={ | ||
| <div> | ||
| <div className="card-body"> | ||
| <h5 className="card-title">Languages</h5> | ||
|
|
||
| <p className="icon_wrapper_pc"> | ||
| <img alt="kotlin" src={kotlin} className="icon" /> | ||
| <img alt="css" src={css} className="icon" /> | ||
| <img alt="csharp" src={csharp} className="icon" /> | ||
| <img alt="html" src={html} className="icon" /> | ||
| <img alt="java" src={java} className="icon" /> | ||
| <img alt="python" src={python} className="icon" /> | ||
| <img alt="react" src={react} className="icon" /> | ||
| <img alt="typescript" src={typescript} className="icon" /> | ||
| <img alt="javascript" src={javascript} className="icon" /> | ||
| </p> | ||
|
|
||
| <p className="icon_wrapper_phone"> | ||
| <img alt="kotlin" src={kotlin} className="icon" /> | ||
| <img alt="css" src={css} className="icon" /> | ||
| <img alt="csharp" src={csharp} className="icon" /> | ||
| <img alt="html" src={html} className="icon" /> | ||
| <img alt="java" src={java} className="icon" /> | ||
| </p> | ||
|
|
||
| <p className="icon_wrapper_phone"> | ||
| <img alt="python" src={python} className="icon" /> | ||
| <img alt="react" src={react} className="icon" /> | ||
| <img alt="typescript" src={typescript} className="icon" /> | ||
| <img alt="javascript" src={javascript} className="icon" /> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="card-body"> | ||
| <h5 className="card-title">Links</h5> | ||
| <LinkButton link="https://github.com/Integr-0"/> | ||
| <LinkButton link="https://discordapp.com/users/688059979105697844"/> | ||
| </div> | ||
| </div> | ||
| } /> | ||
|
|
||
| <Box content={ | ||
| <div className="card-body"> | ||
| <p className="title_center">My work</p> | ||
|
|
||
| <Card title="ContentAutomation" bio="Automatically generates clips of a length of around 30 seconds. Perfect for platforms like TikTok and YouTube-shorts." link="https://github.com/Integr-0/ContentAutomation"/> | ||
| <Card title="Trajectory" bio="Trajectory is a fast event system Kotlin." link="https://github.com/Integr-0/Trajectory"/> | ||
| <Card title="JsonCompiler" bio="Executes Json like normal code..." link="https://github.com/Integr-0/JsonCompiler"/> | ||
| </div> | ||
| }/> | ||
|
|
||
| <div style={{ width: 701, height: 107 }}> | ||
| <img style={{ width: 50, height: 50, left: 47, top: 29, position: 'absolute' }} src={kotlinImg} /> | ||
| <img style={{ width: 50, height: 50, left: 117, top: 29, position: 'absolute' }} src={javaImg} /> | ||
| <img style={{ width: 50, height: 50, left: 187, top: 29, position: 'absolute' }} src={cSharpImg} /> | ||
| <img style={{ width: 50, height: 50, left: 468, top: 29, position: 'absolute' }} src={pythonImg} /> | ||
| <img style={{ width: 50, height: 50, left: 257, top: 29, position: 'absolute' }} src={cssImg} /> | ||
| <img style={{ width: 50, height: 50, left: 398, top: 29, position: 'absolute' }} src={htmlImg} /> | ||
| <img style={{ width: 50, height: 50, left: 328, top: 29, position: 'absolute' }} src={reactImg} /> | ||
| <img style={{ width: 50, height: 50, left: 538, top: 29, position: 'absolute' }} src={tsImg} /> | ||
| <img style={{ width: 50, height: 50, left: 608, top: 29, position: 'absolute' }} src={jsImg} /> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <div style={{ width: "28 7px", height: "107", backdropFilter: 'blur(2.5px)', alignItems: 'center', boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', display: 'flex', marginLeft: "20px", marginRight: "auto", background: 'rgba(177.44, 177.44, 177.44, 0.75)', borderRadius: 46, marginTop: "5%" }}> | ||
|
|
||
| <div style={{ width: 287, height: 107 }}> | ||
| <div style={{ left: 35, top: 25, position: 'absolute', color: '#6D5A5A', fontSize: 20, fontFamily: 'Arial', textShadow: '1px 2px 2px rgba(0, 0, 0, 0.25)', fontWeight: '800', wordWrap: 'break-word' }}>Ask me about Kotlin and Java :)</div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </> | ||
|
|
||
|
|
||
| ) | ||
| </div> | ||
| <br/> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default App |
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| interface Prop { | ||
| content: JSX.Element; | ||
| } | ||
|
|
||
| export default function Box(props: Prop) { | ||
| return ( | ||
| <div className="card" style={{ margin: 'auto', marginTop: '40px', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', borderRadius: '40px', width: 'fit-content' }}> | ||
| {props.content} | ||
| </div> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| interface Prop { | ||
| title: string; | ||
| bio: string; | ||
| link: string; | ||
| } | ||
|
|
||
| export default function card(prop: Prop) { | ||
| return ( | ||
| <div className="card" style={{ margin: 'auto', marginTop: '40px', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', borderRadius: '40px' }}> | ||
| <div className="card-body"> | ||
| <h5 className="card-title">{prop.title}</h5> | ||
| <p className="card-text">{prop.bio}</p> | ||
| <a href={prop.link} className="btn btn-secondary" style={{ borderRadius: '40px' }}>Go there <i className="fa-solid fa-arrow-up-right-from-square" /></a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| interface Prop { | ||
| link: string; | ||
| } | ||
|
|
||
| export default function LinkButton(props: Prop) { | ||
| return ( | ||
| <a href={props.link} className="btn btn-secondary" style={{ borderRadius: '40px', marginRight: '10px',}}>Github <i className="fa-solid fa-arrow-up-right-from-square" /></a> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| interface Prop { | ||
| icon: string; | ||
| } | ||
|
|
||
| export default function MainBox(prop: Prop) { | ||
| return ( | ||
| <div className="card" style={{ margin: 'auto', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', width: 'fit-content', borderRadius: '40px' }}> | ||
| <img alt="Logo" src={prop.icon} className="img" style={{ marginLeft: '30px', marginRight: '30px', marginTop: '30px' }} /> | ||
| <p className="title_center">Integr</p> | ||
| </div> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters