diff --git a/public/generator-1.png b/public/generator-1.png
new file mode 100644
index 0000000..d175782
Binary files /dev/null and b/public/generator-1.png differ
diff --git a/public/hello-world.gif b/public/hello-world.gif
new file mode 100644
index 0000000..4724fa3
Binary files /dev/null and b/public/hello-world.gif differ
diff --git a/public/pojazdownik-1.png b/public/pojazdownik-1.png
new file mode 100644
index 0000000..d2c1280
Binary files /dev/null and b/public/pojazdownik-1.png differ
diff --git a/public/stacjownik-1.png b/public/stacjownik-1.png
new file mode 100644
index 0000000..889604a
Binary files /dev/null and b/public/stacjownik-1.png differ
diff --git a/public/stacjownik-manager-1.png b/public/stacjownik-manager-1.png
new file mode 100644
index 0000000..07e0eb4
Binary files /dev/null and b/public/stacjownik-manager-1.png differ
diff --git a/src/common/deviceSizes.ts b/src/common/deviceSizes.ts
new file mode 100644
index 0000000..26372cb
--- /dev/null
+++ b/src/common/deviceSizes.ts
@@ -0,0 +1,4 @@
+export const deviceSize = {
+  md: '850px',
+  sm: '500px',
+};
diff --git a/src/components/TechScroller.tsx b/src/components/TechScroller.tsx
new file mode 100644
index 0000000..9ed743e
--- /dev/null
+++ b/src/components/TechScroller.tsx
@@ -0,0 +1,32 @@
+import { FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact } from 'react-icons/fa';
+import { SiNestjs, SiNuxtdotjs, SiPrisma, SiTypescript, SiPostgresql } from 'react-icons/si';
+import { styled } from 'styled-components';
+
+// Styled
+const StyledTechScroller = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  font-size: 2.5em;
+
+  width: 100%;
+
+  svg {
+    vertical-align: middle;
+  }
+`;
+
+// Component
+const techs = [FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact, SiNestjs, SiNuxtdotjs, SiPrisma, SiTypescript, SiPostgresql];
+
+function TechScroller() {
+  return (
+    <StyledTechScroller>
+      {techs.map((TechIcon) => (
+        <TechIcon />
+      ))}
+    </StyledTechScroller>
+  );
+}
+
+export default TechScroller;
diff --git a/src/sections/AboutSection.tsx b/src/sections/AboutSection.tsx
new file mode 100644
index 0000000..ae3c97c
--- /dev/null
+++ b/src/sections/AboutSection.tsx
@@ -0,0 +1,40 @@
+import { StyledAbout } from '../components/styles/About.styled';
+import { StyledCursor } from '../components/styles/Cursor.styled';
+import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
+
+function AboutSection() {
+  return (
+    <StyledAbout id="about">
+      <div className="about-grid">
+        <div className="about-gif">
+          <img src="hello-world.gif" alt="" />
+        </div>
+
+        <div className="about-content">
+          <StyledSectionHeader>
+            ABOUT{' '}
+            <span className="text--accent" style={{ position: 'relative' }}>
+              ME
+              <StyledCursor />
+            </span>
+          </StyledSectionHeader>
+
+          <h2>A coder with a pinch of explorer</h2>
+
+          <p>
+            I am a self-taught programmer who excels in working with web technologies. I spend most of my free time creating and expanding
+            applications for the Polish train simulator,{' '}
+            <a href="https://td2.info.pl/" target="_blank">
+              Train Driver 2
+            </a>
+            , where I actively participate as a developer. In my projects, I value simplicity and functionality. I aim for my tools to be
+            user-friendly and accessible to everyone. I often stick to solutions I am used to work with, but I'm not afraid to change them in order to
+            make my projects better and more efficient. I enjoy exploring and testing new technologies and I have no trouble adapting to them.
+          </p>
+        </div>
+      </div>
+    </StyledAbout>
+  );
+}
+
+export default AboutSection;
diff --git a/src/sections/LandingSection.tsx b/src/sections/LandingSection.tsx
new file mode 100644
index 0000000..54720ef
--- /dev/null
+++ b/src/sections/LandingSection.tsx
@@ -0,0 +1,50 @@
+import { FaEnvelope, FaGithub } from 'react-icons/fa';
+import TechScroller from '../components/TechScroller';
+import Logo from '../components/Logo';
+import {
+  StyledBrandName,
+  StyledLinkIcon,
+  StyledLanding,
+  StyledLandingWrapper,
+  StyledLinkIcons,
+  StyledLandingRight,
+} from '../components/styles/Landing.styled';
+
+export default function LandingSection() {
+  return (
+    <StyledLanding id="landing">
+      <StyledLandingWrapper>
+        <div className="landing_main">
+          <Logo />
+          <StyledLandingRight>
+            <b className="greeting">Hello, I'm</b>
+
+            <StyledBrandName>
+              <span className="text--accent">SPYTHERE</span>://
+            </StyledBrandName>
+
+            <div className="description">an amatour and self-taught front-end and back-end developer from Poland!</div>
+
+            <StyledLinkIcons>
+              <StyledLinkIcon href="https://github.com/Spythere" target="_blank">
+                <FaGithub />
+              </StyledLinkIcon>
+              <StyledLinkIcon href="mailto:spythere@proton.me">
+                <FaEnvelope />
+              </StyledLinkIcon>
+              <StyledLinkIcon></StyledLinkIcon>
+              <StyledLinkIcon></StyledLinkIcon>
+            </StyledLinkIcons>
+          </StyledLandingRight>
+        </div>
+
+        <div className="landing_tech">
+          <h3>Tech I Use</h3>
+          <hr />
+
+          <TechScroller />
+        </div>
+      </StyledLandingWrapper>
+    </StyledLanding>
+  );
+}
diff --git a/src/sections/ProjectsSection.tsx b/src/sections/ProjectsSection.tsx
new file mode 100644
index 0000000..43d16ba
--- /dev/null
+++ b/src/sections/ProjectsSection.tsx
@@ -0,0 +1,147 @@
+import { FaExternalLinkAlt, FaGithub } from 'react-icons/fa';
+import { StyledCursor } from '../components/styles/Cursor.styled';
+import { StyledProjects } from '../components/styles/Projects.styled';
+import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
+
+const badges = {
+  HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
+  CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
+  JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
+  SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
+  TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
+  Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
+  Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
+  Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
+  Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
+  React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
+  Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
+  NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+  Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
+  Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
+  AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
+  Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
+  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
+  Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
+  Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
+  CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
+  Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+};
+
+const projects = {
+  frontend: [
+    {
+      thumbnailSrc: 'stacjownik-1.png',
+      iconSrc: null,
+      title: 'Stacjownik',
+      subtitle: '',
+      desc: "A tool made for the Polish railway simulator: Train Driver 2.\
+      It collects all the available data sent over API from the game, processes it and shows it on the page in a convenient form.\
+      User can browse online players, as well as search for their history and past activities. The app\
+      uses dedicated Stacjownik API which is collecting and serving game data on the backend. It's available in two languages: Polish and English.",
+      technologies: [badges.Vue, badges.TS, badges.SASS],
+      repoLink: 'https://github.com/Spythere/stacjownik',
+      siteLink: 'https://stacjownik-td2.web.app/',
+    },
+    {
+      thumbnailSrc: 'pojazdownik-1.png',
+      iconSrc: null,
+      title: 'Pojazdownik',
+      subtitle: '',
+      desc: "Another tool made for the Train Driver 2 community, which allows players to easily create their own railway rolling stock configurations.\
+      Its main features consist of uploading & downloading created rolling stock, drawing a real train number (according to Polish railways regulations)\
+      and generating a freight train composition with specified cargo. It's available in two languages: Polish and English.",
+      technologies: [badges.Vue, badges.TS, badges.SASS],
+      repoLink: 'https://github.com/Spythere/pojazdownik',
+      siteLink: 'https://pojazdownik-td2.web.app/',
+    },
+    {
+      thumbnailSrc: 'generator-1.png',
+      iconSrc: null,
+      title: 'GeneraTOR',
+      subtitle: '',
+      desc: 'The last of the "Holy Trinity" of applications created for the TD2 simulator. It\'s a graphical interface of so-called "written orders"\
+      (which are used in railway traffic to conduct trains in case of emergency). The app is fully interactive and beginner-friendly.\
+      It\'s available in native (Polish) language only due to the nature of the written  orders which are exclusively used in Polish railway system.',
+      technologies: [badges.Vue, badges.TS, badges.SASS],
+      repoLink: 'https://github.com/Spythere/genera-tor',
+      siteLink: 'https://generator-td2.web.app/',
+    },
+    {
+      thumbnailSrc: 'stacjownik-manager-1.png',
+      iconSrc: null,
+      title: 'Stacjownik Manager',
+      subtitle: '',
+      desc: "An additional tool made for people who work with Stacjownik and update it with the freshest data coming from the simulator which isn't automatically scraped, mainly new sceneries (maps available for the community).\
+      It's connected with dedicated API where all the changes are processed and updated. The manager is protected with a simple authentication system\
+      that prevents unauthorized people from accessing and using the site. Available entirely in Polish for practical reasons.",
+      technologies: [badges.Vue, badges.TS, badges.SASS],
+      repoLink: 'https://github.com/Spythere/station-manager-2.0',
+      siteLink: 'https://station-manager.web.app/',
+    },
+  ],
+  backend: [
+    {
+      title: 'Stacjownik API',
+      iconSrc: null,
+      subtitle: '',
+      desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\
+      it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ',
+    },
+  ],
+};
+
+function ProjectsSection() {
+  return (
+    <StyledProjects id="projects">
+      <StyledSectionHeader>
+        MY{' '}
+        <span className="text--accent" style={{ position: 'relative' }}>
+          PROJECTS
+          <StyledCursor />
+        </span>
+      </StyledSectionHeader>
+
+      <h3 className="sub-header">MY FRONT-END PROJECTS</h3>
+
+      <div className="projects-grid">
+        {projects.frontend.map((p) => (
+          <div className="project-card">
+            <div className="project-thumbnail">
+              <img src={p.thumbnailSrc} alt="" />
+            </div>
+
+            <div className="project-content">
+              <h2 className="project-title">{p.title}</h2>
+              <h3 className="project-subtitle">{p.subtitle}</h3>
+
+              <div className="project-badges">
+                {p.technologies.map((tech) => (
+                  <img src={tech} alt="technology badge"></img>
+                ))}
+              </div>
+
+              <hr />
+
+              <p className="project-desc">{p.desc}</p>
+
+              <div className="project-actions">
+                <a href={p.repoLink} target="_blank">
+                  <FaGithub />
+                  SOURCE
+                </a>
+                <a href={p.siteLink} target="_blank">
+                  <FaExternalLinkAlt />
+                  LIVE APP
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <h3 className="sub-header">MY BACK-END PROJECTS</h3>
+    </StyledProjects>
+  );
+}
+
+export default ProjectsSection;