mirror of
https://github.com/dyzulk/portfolio---react.git
synced 2026-01-26 13:31:56 +07:00
Add files via upload
This commit is contained in:
Muhammad Herdy Iskandar
GitHub
63
README.md
Normal file
63
README.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# Personal-Portfolio
|
||||
> This is personal portfolio website.
|
||||
|
||||
|
||||
|
||||
## Built With
|
||||
|
||||
- React
|
||||
- CSS
|
||||
- VS code
|
||||
|
||||
## Live Demo
|
||||
|
||||
- [Live Demo](https://meri-mg-portfolio.netlify.app/)
|
||||
|
||||
|
||||
# Getting Started
|
||||
## Prerequisites:
|
||||
|
||||
|
||||
- Create an account on github
|
||||
|
||||
- Install gitbash or use git on the command line.
|
||||
|
||||
- Use an IDE of your preference such as VScode.
|
||||
|
||||
## Steps to follow:
|
||||
|
||||
- Choose a folder in your local machine where you want this repository to be copied
|
||||
|
||||
- Clone this [repository](https://github.com/Meri-MG/portfolio---react) to your local machine
|
||||
- ```
|
||||
git clone git@github.com:Meri-MG/portfolio---react.git
|
||||
```
|
||||
|
||||
- Navigate to `cd portfolio---react` directory.
|
||||
|
||||
- To install all the app dependencies on the command line run
|
||||
- ```
|
||||
npm install
|
||||
```
|
||||
- To run app in the development mode run
|
||||
- ```
|
||||
npm start
|
||||
```
|
||||
|
||||
|
||||
## Author
|
||||
|
||||
:woman: **Meri Gogichashvili**
|
||||
|
||||
- [GitHub](https://github.com/Meri-MG)
|
||||
- [LinkedIn](https://www.linkedin.com/in/meri-gogichashvili/)
|
||||
|
||||
## 🤝 Contributing
|
||||
- Contributions, issues, and feature requests are welcome!
|
||||
- Feel free to check the [issues page](https://github.com/Meri-MG/portfolio---react/issues).
|
||||
|
||||
# Show your support
|
||||
Give a ⭐ if you like this project!
|
||||
|
||||
# Acknowledgments
|
||||
Thanks to [EGATOR](https://www.youtube.com/watch?v=G-Cr00UYokU&list=WL&index=55&t=1845s) tutorial!
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
28419
package-lock.json
generated
Normal file
28419
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "portfolio---react",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^3.6.2",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^8.2.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
44
public/index.html
Normal file
44
public/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700;900&display=swap" rel="stylesheet" />
|
||||
<title>Muhammad Herdy Iskandar</title>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// Tanggal lahir Anda
|
||||
var tanggalLahir = new Date('2003-04-20');
|
||||
|
||||
// Tanggal sekarang
|
||||
var tanggalSekarang = new Date();
|
||||
|
||||
// Menghitung selisih tahun
|
||||
var selisihTahun = tanggalSekarang.getFullYear() - tanggalLahir.getFullYear();
|
||||
|
||||
// Periksa apakah ulang tahun sudah lewat atau belum
|
||||
if (tanggalSekarang.getMonth() < tanggalLahir.getMonth() || (tanggalSekarang.getMonth() === tanggalLahir.getMonth() && tanggalSekarang.getDate() < tanggalLahir.getDate())) {
|
||||
selisihTahun--;
|
||||
}
|
||||
|
||||
// Menampilkan umur
|
||||
document.getElementById("umur").innerHTML = "Umur Anda adalah " + selisihTahun + " tahun.";
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
27
src/App.jsx
Normal file
27
src/App.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import Contact from './components/contact/Contact';
|
||||
import Experience from './components/experience/Experience';
|
||||
import Footer from './components/footer/Footer';
|
||||
import Header from './components/header/Header';
|
||||
import Intro from './components/intro/Intro';
|
||||
import Portfolio from './components/portfolio/Portfolio';
|
||||
import Testimonials from './components/testimonials/Testimonials';
|
||||
import Topbar from './components/topbar/Topbar';
|
||||
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Topbar />
|
||||
<Intro />
|
||||
<Experience />
|
||||
<Portfolio />
|
||||
<Testimonials />
|
||||
<Contact />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
BIN
src/assets/alc.png
Normal file
BIN
src/assets/alc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
src/assets/bg-texture.png
Normal file
BIN
src/assets/bg-texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/bookstore.png
Normal file
BIN
src/assets/bookstore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/cv_meri_gogichashvili.pdf
Normal file
BIN
src/assets/cv_meri_gogichashvili.pdf
Normal file
Binary file not shown.
BIN
src/assets/endaybot.png
Normal file
BIN
src/assets/endaybot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
BIN
src/assets/fake.png
Normal file
BIN
src/assets/fake.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
src/assets/fantastic.png
Normal file
BIN
src/assets/fantastic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
src/assets/linkedin.png
Normal file
BIN
src/assets/linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/math.png
Normal file
BIN
src/assets/math.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/me.jpg
Normal file
BIN
src/assets/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
BIN
src/assets/me2.png
Normal file
BIN
src/assets/me2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/assets/news.png
Normal file
BIN
src/assets/news.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 KiB |
BIN
src/assets/port.png
Normal file
BIN
src/assets/port.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
src/assets/shelter.png
Normal file
BIN
src/assets/shelter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
src/assets/shortify.png
Normal file
BIN
src/assets/shortify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
src/assets/todo.png
Normal file
BIN
src/assets/todo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
72
src/components/contact/Contact.jsx
Normal file
72
src/components/contact/Contact.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import emailjs from "@emailjs/browser";
|
||||
import { MdOutlineEmail } from "react-icons/md";
|
||||
import "./contact.css";
|
||||
|
||||
const Contact = () => {
|
||||
const [message, setMessage] = useState(false);
|
||||
const formRef = useRef();
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setMessage(true);
|
||||
emailjs
|
||||
.sendForm(
|
||||
"service_1vo171f",
|
||||
"template_j4f8ube",
|
||||
formRef.current,
|
||||
"opJ3qUDGzyJUxDt5j"
|
||||
)
|
||||
.then(
|
||||
(result) => {
|
||||
console.log(result.text);
|
||||
},
|
||||
(error) => {
|
||||
console.log(error.text);
|
||||
}
|
||||
);
|
||||
|
||||
e.target.reset();
|
||||
};
|
||||
return (
|
||||
<section id="contact">
|
||||
<h5>Get In Touch</h5>
|
||||
<h2>Contact Me</h2>
|
||||
<div className="container contact__container">
|
||||
<div className="contact__options">
|
||||
<article className="contact__option">
|
||||
<MdOutlineEmail className="contact__option-icon" />
|
||||
<h4>Email</h4>
|
||||
<h5>dyzulkdeveloper@gmail.com</h5>
|
||||
<a href="mailto:dyzulkdeveloper@gmail.com">Send a message</a>
|
||||
</article>
|
||||
</div>
|
||||
<form ref={formRef} onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your Full Name"
|
||||
name="user_name"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your Email"
|
||||
name="user_email"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Your message"
|
||||
rows="7"
|
||||
name="message"
|
||||
required
|
||||
></textarea>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Send Message
|
||||
</button>
|
||||
{message && <span>Thanks, I'll reply ASAP :)</span>}
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
80
src/components/contact/contact.css
Normal file
80
src/components/contact/contact.css
Normal file
@@ -0,0 +1,80 @@
|
||||
.container.contact__container {
|
||||
width: 58%;
|
||||
display: grid;
|
||||
grid-template-columns: 30% 58%;
|
||||
gap: 12%;
|
||||
}
|
||||
|
||||
.contact__options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.contact__option {
|
||||
background: var(--color-bg-variant);
|
||||
padding: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.contact__option:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary-variant);
|
||||
}
|
||||
|
||||
.contact__option-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact__option a {
|
||||
margin-top: 0.7rem;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.contact__option h5 {
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.contact__option h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
form span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-primary-variant);
|
||||
resize: none;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.container.contact__container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.container.contact__container {
|
||||
width: var(--container-width-sm);
|
||||
}
|
||||
}
|
||||
78
src/components/experience/Experience.jsx
Normal file
78
src/components/experience/Experience.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import React from "react";
|
||||
import { BsFillPatchCheckFill } from "react-icons/bs";
|
||||
import "./experience.css";
|
||||
|
||||
const Experience = () => {
|
||||
return (
|
||||
<section id="experience">
|
||||
<h5>The Skills I Have</h5>
|
||||
<h2>Skills</h2>
|
||||
<div className="container experience__container">
|
||||
<div className="experience__frontend">
|
||||
<h3>Front-end Development</h3>
|
||||
<div className="experience__content">
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>HTML</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>CSS</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>JavaScript</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>React</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>NextJs</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>SCSS</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>Tailwind</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div className="experience__backend">
|
||||
<h3>Back-end Development</h3>
|
||||
<div className="experience__content">
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>MySQL</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>PHP</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>PostgreSQL</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>Python</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>Laravel</h4>
|
||||
</article>
|
||||
<article className="experience__details">
|
||||
<BsFillPatchCheckFill className="experience__details-icon" />
|
||||
<h4>Git/GitHub</h4>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Experience;
|
||||
68
src/components/experience/experience.css
Normal file
68
src/components/experience/experience.css
Normal file
@@ -0,0 +1,68 @@
|
||||
.experience__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.experience__container > div {
|
||||
background: var(--color-bg-variant);
|
||||
padding: 2.4rem 5rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid transparent;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.experience__container > div:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary-variant);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.experience__container > div h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.experience__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
.experience__details {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.experience__details-icon {
|
||||
margin-top: 6px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.experience__container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.experience__container > div {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.experience__content p {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.experience__container {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.experience__container > div {
|
||||
width: 100%;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
37
src/components/footer/Footer.jsx
Normal file
37
src/components/footer/Footer.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { BsLinkedin } from 'react-icons/bs';
|
||||
import { FaGithub } from 'react-icons/fa';
|
||||
import { FaAngellist } from 'react-icons/fa'
|
||||
import './footer.css';
|
||||
|
||||
const Footer = () => {
|
||||
|
||||
let getYear = () => {
|
||||
let currentYear = new Date().getFullYear();
|
||||
return currentYear;
|
||||
};
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<a href="#home" className="footer__logo">Dyzulk Developer</a>
|
||||
<ul className="permalinks">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#experience">Skills</a></li>
|
||||
<li><a href="#portfolio">Portfolio</a></li>
|
||||
<li><a href="#testimonials">Testimonials</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<div className="footer__socials">
|
||||
<a href="https://www.linkedin.com/in/meri-gogichashvili/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
|
||||
<a href="https://github.com/Meri-MG" target="_blank" rel="noreferrer" ><FaGithub /></a>
|
||||
<a href="https://angel.co/u/meri-gogichashvili" target="_blank" rel="noreferrer" ><FaAngellist /></a>
|
||||
</div>
|
||||
<div className="footer__copyright">
|
||||
<small>© Dyzulk Developer 2024 - {getYear()}. All rights reserved.</small>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
64
src/components/footer/footer.css
Normal file
64
src/components/footer/footer.css
Normal file
@@ -0,0 +1,64 @@
|
||||
footer {
|
||||
background: var(--color-primary);
|
||||
padding: 3rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.footer__logo {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.permalinks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.footer__socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.footer__socials a {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-white);
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.7rem;
|
||||
display: flex;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.footer__socials a:hover {
|
||||
background: transparent;
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
margin-bottom: 4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.permalinks {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.footer__socials {
|
||||
margin-bottom: 2.6rem;
|
||||
}
|
||||
}
|
||||
17
src/components/header/CTA.jsx
Normal file
17
src/components/header/CTA.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import CV from "https://cdn.dyzulk.com/cv/CV_MUHAMMAD%20HERDY%20ISKANDAR.pdf";
|
||||
|
||||
const CTA = () => {
|
||||
return (
|
||||
<div className="cta">
|
||||
<a href={CV} download className="btn">
|
||||
Download CV
|
||||
</a>
|
||||
<a href="#contact" className="btn btn-primary">
|
||||
Let's talk
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CTA;
|
||||
23
src/components/header/Header.jsx
Normal file
23
src/components/header/Header.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
import CTA from "./CTA";
|
||||
import HeaderSocials from "./HeaderSocials";
|
||||
import "./header.css";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header id="home">
|
||||
<div className="container header__container">
|
||||
<h5>Hello I'm</h5>
|
||||
<h1>Muhammad Herdy Iskandar</h1>
|
||||
<h5 className="text-light">Full-stack Developer</h5>
|
||||
<CTA />
|
||||
<a href="#contact" className="scroll__down">
|
||||
Scroll Down
|
||||
</a>
|
||||
<HeaderSocials />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
16
src/components/header/HeaderSocials.jsx
Normal file
16
src/components/header/HeaderSocials.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import { BsLinkedin } from 'react-icons/bs';
|
||||
import { FaGithub, FaInstagram } from 'react-icons/fa';
|
||||
import { FaAngellist } from 'react-icons/fa'
|
||||
|
||||
const HeaderSocials = () => {
|
||||
return (
|
||||
<div className="header__socials">
|
||||
<a href="https://www.linkedin.com/in/dyzulk/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
|
||||
<a href="https://github.com/dyzulk" target="_blank" rel="noreferrer" ><FaGithub /></a>
|
||||
<a href="https://instagram.com/dyzulk" target="_blank" rel="noreferrer" ><FaInstagram /></a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeaderSocials
|
||||
62
src/components/header/header.css
Normal file
62
src/components/header/header.css
Normal file
@@ -0,0 +1,62 @@
|
||||
header {
|
||||
height: 100%;
|
||||
padding-top: 7rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header__container {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.header__socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
position: absolute;
|
||||
left: 5rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.header__socials::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 2rem;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.scroll__down {
|
||||
position: absolute;
|
||||
right: 5rem;
|
||||
bottom: 5rem;
|
||||
transform: rotate(90deg);
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
header {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
|
||||
.header__socials,
|
||||
.scroll__down {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
47
src/components/intro/Intro.jsx
Normal file
47
src/components/intro/Intro.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
import { FaAward } from "react-icons/fa";
|
||||
import { VscFolderLibrary } from "react-icons/vsc";
|
||||
import ME from "../../assets/me.jpg";
|
||||
import "./intro.css";
|
||||
|
||||
const Intro = () => {
|
||||
return (
|
||||
<section id="about">
|
||||
<h5>Get to know</h5>
|
||||
<h2>About Me</h2>
|
||||
<div className="container about__container">
|
||||
<div className="about__me">
|
||||
<div className="about__me-image">
|
||||
<img src={ME} alt="me" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="about__content">
|
||||
<div className="about__cards">
|
||||
<article className="about__card">
|
||||
<FaAward className="about__icon" />
|
||||
<h5>Experience</h5>
|
||||
<small>2+ year</small>
|
||||
</article>
|
||||
<article className="about__card">
|
||||
<VscFolderLibrary className="about__icon" />
|
||||
<h5>Projects</h5>
|
||||
<small>3+ Completed Projects</small>
|
||||
</article>
|
||||
</div>
|
||||
<p>
|
||||
A <span id="umur"></span> year old Indonesian student living in
|
||||
Cirebon, Indonesian. You might have seen me on Facebook or
|
||||
Instagram. Now here you are. Yes, I write, too. Because there are so
|
||||
many things I cannot say out loud, yet I always find a way to put it
|
||||
into words.
|
||||
</p>
|
||||
<a href="#contact" className="btn btn-primary">
|
||||
Let's Talk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Intro;
|
||||
102
src/components/intro/intro.css
Normal file
102
src/components/intro/intro.css
Normal file
@@ -0,0 +1,102 @@
|
||||
.about__container {
|
||||
display: grid;
|
||||
grid-template-columns: 35% 50%;
|
||||
gap: 15%;
|
||||
}
|
||||
|
||||
.about__me {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 2rem;
|
||||
background: linear-gradient(45deg, transparent, var(--color-primary), transparent);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.about__me-image {
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
transform: rotate(10deg);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.about__me-image:hover {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.about__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.about__card {
|
||||
background: var(--color-bg-variant);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.about__card:hover {
|
||||
background: transparent;
|
||||
border-color: var(--color-primary-variant);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.about__icon {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about__card h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.about__card small {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.about__content p {
|
||||
margin: 2rem 0 2.6rem;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.about__container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.about__me {
|
||||
width: 50%;
|
||||
margin: 2rem auto 4rem;
|
||||
}
|
||||
|
||||
.about__content p {
|
||||
margin: 1rem 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.about__me {
|
||||
width: 65%;
|
||||
margin: 0rem auto 3rem;
|
||||
}
|
||||
|
||||
.about__cards {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.about__content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about__content p {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
116
src/components/portfolio/Portfolio.jsx
Normal file
116
src/components/portfolio/Portfolio.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import IMG1 from "../../assets/fantastic.png";
|
||||
import IMG2 from "../../assets/endaybot.png";
|
||||
import IMG3 from "../../assets/shortify.png";
|
||||
// import IMG4 from "../../assets/fake.png";
|
||||
// import IMG5 from "../../assets/news.png";
|
||||
// import IMG6 from "../../assets/math.png";
|
||||
|
||||
import "./portfolio.css";
|
||||
|
||||
const Portfolio = () => {
|
||||
const soloProjects = [
|
||||
{
|
||||
id: 1,
|
||||
title: "FantasticPay",
|
||||
img: IMG1,
|
||||
description:
|
||||
"FantasticPay is the final project of the end-of-semester exam from PLN Institute of Technology in the Web Programming course. The project aims to implement an efficient and reliable online payment solution.",
|
||||
technologies: "Codeigniter | Tailwind CSS",
|
||||
link: "https://fantastic.dyzulk.com/",
|
||||
github: "https://github.com/dyzulk/fantastic",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "EndayWithAI",
|
||||
img: IMG4,
|
||||
description:
|
||||
"An artificial intelligence bot based on the Google AI API integrated with the Telegram bot @EndayWithOpenAIBot.",
|
||||
technologies: "Python | Google API",
|
||||
link: "https://https://t.me/EndayWithOpenAIBot/",
|
||||
github: "https://github.com/dyzulk/EndayWithOpenAIBot/",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Shortify",
|
||||
img: IMG2,
|
||||
description:
|
||||
"Shortify Connections Platform is more than a free URL shortener, with robust link management software solution.",
|
||||
technologies: "Laravel | React",
|
||||
link: "https://to.dyzulk.com/",
|
||||
github: "https://github.com/dyzulk/shortify",
|
||||
},
|
||||
// {
|
||||
// id: 4,
|
||||
// title: "Shelter",
|
||||
// img: IMG3,
|
||||
// description:
|
||||
// "Fully responsive interactive website built based on Figma design",
|
||||
// technologies: "JavaScript | CSS",
|
||||
// link: "https://meri-mg.github.io/shelter/pages/main/index.html",
|
||||
// github: "https://github.com/Meri-MG/shelter",
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// title: "World News",
|
||||
// img: IMG5,
|
||||
// description:
|
||||
// "Fully responsive interactive website built based on Adobe XD design",
|
||||
// technologies: "JavaScript | CSS",
|
||||
// link: "https://meri-mg.github.io/Unilab-world-news/",
|
||||
// github: "https://github.com/Meri-MG/Unilab-world-news",
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// title: "Math Resource",
|
||||
// img: IMG6,
|
||||
// description:
|
||||
// "Real-world group project which is still in progress and will provide educational platform for future young developers",
|
||||
// technologies: "JavaScript | Scss | Python",
|
||||
// link: "https://lukinoo.github.io/math-resource/",
|
||||
// github: "https://github.com/lukinoo/math-resource",
|
||||
// },
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="portfolio">
|
||||
<h5>My Recent Work</h5>
|
||||
<h2>Portfolio</h2>
|
||||
|
||||
<div className="container portfolio__container">
|
||||
{soloProjects.map((pro) => (
|
||||
<article className="portfolio__item" key={pro.id}>
|
||||
<div className="portfolio__item-image">
|
||||
<img src={pro.img} alt={pro.title} />
|
||||
</div>
|
||||
<div className="portfolio__item-content">
|
||||
<h3>{pro.title}</h3>
|
||||
<p>{pro.description}</p>
|
||||
<p>{pro.technologies}</p>
|
||||
</div>
|
||||
<div className="portfolio__item-cta">
|
||||
<a
|
||||
href={pro.github}
|
||||
target="_blank"
|
||||
className="btn"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
href={pro.link}
|
||||
target="_blank"
|
||||
className="btn btn-primary"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Visit Website
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
57
src/components/portfolio/portfolio.css
Normal file
57
src/components/portfolio/portfolio.css
Normal file
@@ -0,0 +1,57 @@
|
||||
.portfolio__container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.portfolio__item {
|
||||
background: var(--color-bg-variant);
|
||||
padding: 1.3rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid transparent;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.portfolio__item:hover {
|
||||
border-color: var(--color-primary-variant);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.portfolio__item-image {
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.portfolio__item h3 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.portfolio__item p {
|
||||
margin: 0 0 1.2rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.portfolio__item-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.portfolio__item-content {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.portfolio__container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.portfolio__container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
86
src/components/testimonials/Testimonials.jsx
Normal file
86
src/components/testimonials/Testimonials.jsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React from "react";
|
||||
import { BsLinkedin } from "react-icons/bs";
|
||||
import { Pagination } from "swiper";
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
|
||||
// Import Swiper styles
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";
|
||||
import "./testimonials.css";
|
||||
|
||||
const Testimonials = () => {
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
link: "https://www.linkedin.com/in/uzairali19/",
|
||||
name: "Uzair Ali",
|
||||
role: "Full-Stack Web Developer. JavaScript | Rails | React | Redux. Improving open-source projects, one commit at a time.",
|
||||
test: "As a developer and a problem solver, I think Herdy is a great collaborative partner to have. I met Herdy in some basic javascript & react projects and since then she has drastically progressed in her understanding of the development process. She always has a professional environment and has good audio and video quality which makes it easier to communicate with her.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "https://www.linkedin.com/in/yishak-wesego/",
|
||||
name: "Yishak Wesego",
|
||||
role: "Full-stack developer | Technical Support Engineer at Microverse",
|
||||
test: "It was a pleasure collaborating with Herdy on different projects. One of the things that I think is special about her is that she never settles, even after completing the projects she finds other resources and strengthens her knowledge. Collaborating with her is easy and comfortable, it's like working with someone you've known for a long period of time.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
link: "https://www.linkedin.com/in/akuu-khan/",
|
||||
name: "akbar (Aku) Khan",
|
||||
role: "Full Stack Developer| Ruby on Rails | PostgreSQL | JavaScript | React | Redux | Html&Css | Python.",
|
||||
test: "I worked with Herdy in the same team and her communication skills are very strong. Her programming skill is one of the bests, given the time frame in the field. She is a good team player. She will probably fit in most of the companies not only because she's a good team worker, but also because she has very good skills and I know she has much more potential to be shown.",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
link: "https://www.linkedin.com/in/isaicespedes/",
|
||||
name: "Isai Céspedes",
|
||||
role: "Full-Stack Web Developer. JavaScript | Rails | React | Redux.",
|
||||
test: "I mentored Herdy some months ago, and I can say that she is one of those people that you love to work with. She was always interested in what I was trying to teach her, paying attention and always asking questions if something was not clear. When it comes to professional skills, she is really committed to work, always doing her best and going beyond the requirements of the project she's building.",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
link: "https://www.linkedin.com/in/hamzaalitarar/",
|
||||
name: "Hamza Tarar",
|
||||
role: "Software Developer",
|
||||
test: "Throughout all our collaborations, Herdy has always conducted herself politely and kindly. She comes across as someone that's always willing to help and puts the team ahead of herself. But beneath this, I see a strength and determination to distinguish herself. She's not only someone I highly recommend but is also someone I greatly respect.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
link: "https://www.linkedin.com/in/rex9/",
|
||||
name: "Htet (Rex) Naing",
|
||||
role: "Full Stack Developer | Mindful Mentor | Cheerful Team Player",
|
||||
test: "Herdy is really cheerful and supportive person. I know her when she reviewed my resume. Her feedback was so crystal clear and super effective for me. After that, even though she has no responsibility of reviewing my resume again. She helped me patiently when I ask her again and again. Herdy is gifted in reviewing the work and giving advice to others. I feel really lucky to have her as the reviewer of my resume.",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section id="testmonials">
|
||||
<h5>Feedback from my peers</h5>
|
||||
<h2>Testimonials</h2>
|
||||
<Swiper
|
||||
className="container testimonials__container"
|
||||
modules={[Pagination]}
|
||||
spaceBetween={40}
|
||||
slidesPerView={1}
|
||||
pagination={{ clickable: true }}
|
||||
>
|
||||
{testimonials.map((test) => (
|
||||
<SwiperSlide className="testimonial" key={test.id}>
|
||||
<div className="client__avatar">
|
||||
<a href={test.link}>
|
||||
<BsLinkedin />
|
||||
</a>
|
||||
</div>
|
||||
<h5 className="client__name">{test.name}</h5>
|
||||
<small className="client__review">{test.test}</small>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
56
src/components/testimonials/testimonials.css
Normal file
56
src/components/testimonials/testimonials.css
Normal file
@@ -0,0 +1,56 @@
|
||||
.container.testimonials__container {
|
||||
width: 40%;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.client__avatar {
|
||||
width: 4rem;
|
||||
aspect-ratio: 1/1;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.client__avatar a {
|
||||
font-size: 40px;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: var(--color-bg-variant);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border-radius: 2rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.client__review {
|
||||
color: var(--color-light);
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 0.8rem auto 0;
|
||||
}
|
||||
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.container.testimonials__container {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.container.testimonials__container {
|
||||
width: var(--container-width-sm);
|
||||
}
|
||||
|
||||
.client__review {
|
||||
width: var(--container-width-sm);
|
||||
}
|
||||
}
|
||||
24
src/components/topbar/Topbar.jsx
Normal file
24
src/components/topbar/Topbar.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AiOutlineHome } from 'react-icons/ai';
|
||||
import { AiOutlineUser } from 'react-icons/ai';
|
||||
import { BiBook } from 'react-icons/bi';
|
||||
import { RiServiceLine } from 'react-icons/ri';
|
||||
import { BiMessageSquareDetail } from 'react-icons/bi';
|
||||
|
||||
|
||||
import './topbar.css';
|
||||
|
||||
const Topbar = () => {
|
||||
const [activeNav, setActiveNav] = useState('#home');
|
||||
return (
|
||||
<nav>
|
||||
<a href="#home" onClick={()=> setActiveNav('#home')} className={activeNav === '#home' ? 'active' : ''}><AiOutlineHome /></a>
|
||||
<a href="#about" onClick={()=> setActiveNav('#about')} className={activeNav === '#about' ? 'active' : ''}><AiOutlineUser /></a>
|
||||
<a href="#experience" onClick={()=> setActiveNav('#experience')} className={activeNav === '#experience' ? 'active' : ''}><BiBook /></a>
|
||||
<a href="#portfolio" onClick={()=> setActiveNav('#portfolio')} className={activeNav === '#portfolio' ? 'active' : ''}><RiServiceLine /></a>
|
||||
<a href="#contact" onClick={()=> setActiveNav('#contact')} className={activeNav === '#contact' ? 'active' : ''}><BiMessageSquareDetail /></a>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Topbar;
|
||||
33
src/components/topbar/topbar.css
Normal file
33
src/components/topbar/topbar.css
Normal file
@@ -0,0 +1,33 @@
|
||||
nav {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
width: max-content;
|
||||
display: block;
|
||||
padding: 0.7rem 1.7rem;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2rem;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
border-radius: 3rem;
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
nav a {
|
||||
background: transparent;
|
||||
padding: 0.9rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
color: var(--color-light);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-white);
|
||||
}
|
||||
136
src/index.css
Normal file
136
src/index.css
Normal file
@@ -0,0 +1,136 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:wght@100;300;700;900&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #1f1f38;
|
||||
--color-bg-variant: #2c2c6c;
|
||||
--color-primary: #4db5ff;
|
||||
--color-primary-variant: rgba(77, 181, 255, 0.4);
|
||||
--color-white: #fff;
|
||||
--color-light: rgba(255, 255, 255, 0.6);
|
||||
|
||||
--transition: all 400ms ease;
|
||||
|
||||
--container-width-lg: 75%;
|
||||
--container-width-md: 86%;
|
||||
--container-width-sm: 90%;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-white);
|
||||
line-height: 1.7;
|
||||
background-image: url(../src/assets/bg-texture.png);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: var(--container-width-lg);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
section > h2,
|
||||
section > h5 {
|
||||
color: var(--color-light);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section > h2 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: var(--color-primary)
|
||||
}
|
||||
|
||||
a {
|
||||
transition: var(--transition);
|
||||
color: var(--color-primary)
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: max-content;
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
padding: 0.75rem 1.2rem;
|
||||
border-radius: 0.4rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--color-primary);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px){
|
||||
.container {
|
||||
width: var(--container-width-md);
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px){
|
||||
.container {
|
||||
width: var(--container-width-sm);
|
||||
}
|
||||
|
||||
section > h2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
11
src/index.js
Normal file
11
src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user