diff --git a/github.svg b/github.svg new file mode 100644 index 0000000..fa28ac1 --- /dev/null +++ b/github.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/img/ITBootcamp.jpeg b/img/ITBootcamp.jpeg new file mode 100644 index 0000000..2cf8b09 Binary files /dev/null and b/img/ITBootcamp.jpeg differ diff --git a/img/Sertifikat-patra Dinata1.jpg b/img/Sertifikat-patra Dinata1.jpg new file mode 100644 index 0000000..f2f46f7 Binary files /dev/null and b/img/Sertifikat-patra Dinata1.jpg differ diff --git a/img/bootstrap (2).png b/img/bootstrap (2).png new file mode 100644 index 0000000..643892d Binary files /dev/null and b/img/bootstrap (2).png differ diff --git a/img/corel.png b/img/corel.png new file mode 100644 index 0000000..cba789d Binary files /dev/null and b/img/corel.png differ diff --git a/img/css.png b/img/css.png new file mode 100644 index 0000000..241f9bb Binary files /dev/null and b/img/css.png differ diff --git a/img/eviTriana.jpeg b/img/eviTriana.jpeg new file mode 100644 index 0000000..03e9a66 Binary files /dev/null and b/img/eviTriana.jpeg differ diff --git a/img/figma.png b/img/figma.png new file mode 100644 index 0000000..720f621 Binary files /dev/null and b/img/figma.png differ diff --git a/img/footer img.png b/img/footer img.png new file mode 100644 index 0000000..400a2e3 Binary files /dev/null and b/img/footer img.png differ diff --git a/img/fotoku.jpeg b/img/fotoku.jpeg new file mode 100644 index 0000000..9a178eb Binary files /dev/null and b/img/fotoku.jpeg differ diff --git a/img/fotoku.png b/img/fotoku.png new file mode 100644 index 0000000..e7d34e9 Binary files /dev/null and b/img/fotoku.png differ diff --git a/img/git.png b/img/git.png new file mode 100644 index 0000000..5662631 Binary files /dev/null and b/img/git.png differ diff --git a/img/html.png b/img/html.png new file mode 100644 index 0000000..1ca1723 Binary files /dev/null and b/img/html.png differ diff --git a/img/javascript.png b/img/javascript.png new file mode 100644 index 0000000..ab00473 Binary files /dev/null and b/img/javascript.png differ diff --git a/img/ms office.png b/img/ms office.png new file mode 100644 index 0000000..59b8b4f Binary files /dev/null and b/img/ms office.png differ diff --git a/img/node.js1.png b/img/node.js1.png new file mode 100644 index 0000000..30af3ea Binary files /dev/null and b/img/node.js1.png differ diff --git a/img/pr.png b/img/pr.png new file mode 100644 index 0000000..80c6308 Binary files /dev/null and b/img/pr.png differ diff --git a/img/psd.png b/img/psd.png new file mode 100644 index 0000000..cefaaeb Binary files /dev/null and b/img/psd.png differ diff --git a/img/react.png b/img/react.png new file mode 100644 index 0000000..5d5812e Binary files /dev/null and b/img/react.png differ diff --git a/img/sertifikat PKD.jpeg b/img/sertifikat PKD.jpeg new file mode 100644 index 0000000..da9bb31 Binary files /dev/null and b/img/sertifikat PKD.jpeg differ diff --git a/img/tailwind.png b/img/tailwind.png new file mode 100644 index 0000000..3b1ffda Binary files /dev/null and b/img/tailwind.png differ diff --git a/img/xd.png b/img/xd.png new file mode 100644 index 0000000..044ca17 Binary files /dev/null and b/img/xd.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..95f8a43 --- /dev/null +++ b/index.html @@ -0,0 +1,737 @@ + + + + + + + + + + + + + + + + + + + Web portfolio||Patra Dinata + + + + + + + + +
+
+
+
+

Hallo

+

I Am Patra Dinata

+

+ Graphic Designer || UI UX Designer || Web Developer
+ 2 Years Experienced Front-end in Aisyah Pringsewu University +

+ + +
+
+ +
+
+
+
+ + +
+
+
+
+
+

About

+
+
+
+

Teknologi hanyalah alat, positif dan negative tergantung siapa yang menggunakannya

+

+ Assalamualaikum warahmatullahi wabarakatuh,izin memperkenalkan diri nama saya Patra Dinata Mahasiswa Teknik Informatika Universitas Aisyah Pringsewu semester 6,mampu bekerja secara individu maupun berkolaborasi dengan + tim,bekerja dengan cepat,Up to date terhadap perkembangan teknologi dan informasi,saat ini saya berusia 20 tahun,walaupun usia saya masih terbilang muda,tapi saya sudah memiliki beberapa skill yang dapat diandalkan di era + 4.0 masa ini,seperti Graphic design,UI UX design,Figma,Front end web, adobe photoshop,Blender,Apache neatbeans,serta Autocad dll,cek detailnya di bawah ini👌 +

+
+
+
+
+
+ + + +
+
+
+
+
+

My-Skill

+
+
+
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Graphic
Design

+

1 tahun bekerja sebagai graphic design,membuatku bertumbuh dan memiliki wawasan yang luas di dunia graphic design

+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Graphic
Design

+

1 tahun bekerja sebagai graphic design,membuatku bertumbuh dan memiliki wawasan yang luas di dunia graphic design

+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Graphic
Design

+

1 tahun bekerja sebagai graphic design,membuatku bertumbuh dan memiliki wawasan yang luas di dunia graphic design

+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+

Sertifikat

+
+
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + +

Selengkapnya Di instagram

+ +
+
+
+
+
+ + + +
+
+
+
+

Gallery Portofolio

+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + + + + + + + + + diff --git a/instagram.svg b/instagram.svg new file mode 100644 index 0000000..f573b51 --- /dev/null +++ b/instagram.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..63acbfc --- /dev/null +++ b/script.js @@ -0,0 +1,14 @@ +const nav = document.getElementById("nav"); + +// ketika scrool dijalankan +window.addEventListener("scroll", function () { + scrollposition = window.scrollY; + // pengkondisian! if else if + if (scrollposition >= 60) { + nav.classList.add("nav-dark"); + + // ketika di scrool ke atas balik lagi transparan + } else if (scrollposition <= 60) { + nav.classList.remove("nav-dark"); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..903de1f --- /dev/null +++ b/style.css @@ -0,0 +1,220 @@ +:root { + --mainColor: #252734; + --secondaryColor: #333646; + --acsentColor: #ff9100; +} + +body { + background-color: var(--mainColor); + min-height: 900px; + font-family: "ubuntu", sans-serif; +} + +section h1 { + color: #ffff; + font-size: 2.5rem; +} + +/* navbar */ +.nav-link.active { + color: var(--acsentColor) !important; + font-weight: 700; +} + +.nav-dark { + background-color: var(--secondaryColor) !important; + z-index: 10; + transition: 0.9s; +} +/* end navbar */ + +/* hero */ +.color-acsent { + color: var(--acsentColor); +} + +#hero { + color: #ffff; + min-height: 100vh; + padding-top: 75px; +} + +#hero h1 { + font-size: 3rem; +} + +#hero h2 { + font-weight: 300; +} + +#hero p { + font-size: 1.1rem; + font-weight: 300; +} + +/* cta */ +.btn-custom1 { + background-color: var(--acsentColor); + text-align: center; + color: #ffff; + min-width: 150px; + height: 45px; + font-weight: 700; + font-size: 1.2rem; +} + +.btn-custom1:hover { + box-shadow: 0 0 5px rgba(255, 166, 0, 0.8); +} + +.cv { + color: #ffff; + cursor: pointer; + font-size: 1.2rem; +} + +.social-icons svg { + margin-right: 0.7em; + margin-bottom: 10px; +} + +/* about */ +hr { + width: 35%; + height: 5px; + color: var(--acsentColor); + margin: 0 auto; + opacity: 100%; +} + +#about { + min-height: 300px; + width: 100%; + background-color: var(--secondaryColor); + color: #ffff; + padding-top: 80px; + padding-bottom: 80px; + margin-bottom: 80px; +} +/* end about */ + +/* skil */ +#skill { + min-height: 600px; + width: 100%; + color: #ffff; +} + +#skill img { + width: 11%; + margin: 10px; +} + +#skill .card { + background-color: #414558; + height: 340px; +} + +#skill .card:hover { + background-color: var(--acsentColor); +} + +.skill-konten { + margin-top: 120px; +} +/* end skil */ + +/* serifikat start */ +#sertifikat { + margin-top: -170; + padding-top: 270px; + padding-bottom: 80px; + background-color: var(--secondaryColor); +} + +#sertifikat p, +a { + color: #ffff !important; + text-decoration: none; +} + +#sertifikat img { + width: 49%; + padding: 10px; +} +/* Yang abis ditambahkan */ +#sertifikat img:hover { + background-color: white; +} +/* serifikat end */ + +/* galery */ +#portolio .container { + padding: 80px 10px; +} +/* end */ + +/*-- Media Queries and Responsive breakpoints */ + +@media screen and (max-width: 1200px) { + #hero p { + font-size: 0.9rem; + } + #hero h1 { + font-size: 2.3rem; + } +} +@media screen and (max-width: 768px) { + #hero img { + width: 60%; + } + .social-icons { + left: 50%; + transform: translate(-50%); + } + + #hero .row { + padding-bottom: 85px; + } + + .btn-custom1 { + width: 80%; + } + + #about p { + text-align: justify !important; + } + #skill .card h3 { + font-size: 1.3rem; + } + + #skill .card { + padding-left: 30px !important; + padding-right: 30px !important; + margin-top: 20px; + } +} +@media screen and (max-width: 576px) { + hr { + width: 75%; + } + + h1 { + font-size: 2rem !important; + } + + footer img { + width: 75px; + } + + footer p { + font-size: 0.8rem; + } +} +@media screen and (max-width: 350px) { + #portofolio .col-md-12 { + flex-direction: column; + + } +} +/*--Media Queries and Responsive breakpoints selesai!-- */ diff --git a/web-design.svg b/web-design.svg new file mode 100644 index 0000000..71d0b3e --- /dev/null +++ b/web-design.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/youtube.svg b/youtube.svg new file mode 100644 index 0000000..e69de29