Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First pull request #1

Open
wants to merge 16 commits into
base: code-review
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed .github/images/Project1Prepare1.png
Binary file not shown.
Binary file removed .github/images/Project1Prepare2.png
Binary file not shown.
Binary file removed .github/images/Project1Prepare3.png
Binary file not shown.
Binary file removed .github/images/Project1Prepare4.png
Binary file not shown.
Binary file removed .github/images/Project1Prepare5.png
Binary file not shown.
Binary file removed .github/images/Project1Prepare6.png
Binary file not shown.
Empty file removed .nojekyll
Empty file.
120 changes: 15 additions & 105 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,111 +1,21 @@
# CodersCamp 2020 - Projekt HTML & CSS
**CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego**
## Portfolio
**This is the first project during CodersCamp 2020**

Gratulacje!
Skoro czytacie ten tekst, oznacza to, że dowiedliście swoich umiejętności ze znajomości HTML & CSS.
Zostaliście przydzieleni do zespołu, który będzie się uczył programowania i wykonywał prawdziwe aplikacje webowe.
Teraz stajecie przed pierwszym większym wyzwaniem.
Technologie, o których się uczyliście, trzeba zastosować w praktyce.
To pierwszy i ostatni na CodersCamp projekt, który będziecie robić w pojedynkę.
Jednakże już macie cały zespół i mentora, który z pewnością będzie Was wspierał.
Project task was to make your own portfolio site but without using JS and any libraries like Bootstrap - only pure HTML & CSS.
Additionally I used SCSS to make it easier for read and write.

## Projekt HTML & CSS — Wizytówka / Portfolio
**Watch preview: https://szambelan.github.io/Portfolio.CodersCamp.Project_1/**

### Zasady wykonywania projektu (wspólne dla wszystkich grup i mentorów):
**Firma preview: https://www.figma.com/file/JlQ3a0mB4AsO6sj5rIOYgw/Portfolio?node-id=133%3A0**

##### W projekcie każdy z uczestników powinien zaprezentować praktyczną znajomość poniższych zagadnień związanych z HTML & CSS:
- Box-model
- Kaskadowość CSS
- Selektory CSS
- Popularne tagi HTML
- Jak podpinać CSSa do HTMLa
- Zapisywanie kolorów
- Stylowanie tekstu
- Zewnętrzne ikony/fonty (fontawesome, google fonts)
- Flexbox i/lub CSS Grid
- Position (absolute, relative)
- Animacje keyframes
- Formularz (wysłanie formularza może powodować przeładowanie strony, gdyż w kursie nie było jeszcze jego obsługi)
**Main things used in project:**
- Box-modeling
- Cascading and selectors CSS
- Text stylinng
- Icons/fonts (fontawesome, google fonts)
- Flexbox & CSS Grid
- Positioning (absolute, relative)
- Animations - keyframes
- Responsive Web Design

Nie używaj JavaScriptu ani żadnego innego frameworka.
Nie używaj też gotowych bibliotek styli takich jak Bootstrap.
W trakcie przerabiania działu poznałeś wszystkie umiejętności, które pozwolą Ci wykonać Twoją wizytówkę od podstaw :)

##### Sposób oceny projektu (dotyczy tylko projektu pierwszego):
Zapewne interesuje Was, w jaki sposób projekt zostanie „zaliczony” i oceniony.
Ocenianie będzie miało kilka etapów.

- Kiedy skończycie pracę nad projektem, odnotujcie ten fakt w specjalnie przygotowanym formularzu — link otrzymacie od swojego mentora.
Powinno to nastąpić najpóźniej o godzinie 23:59 dnia poprzedzającego prezentację projektu (data dostępna w harmonogramie kursu).
- Spotkajcie się w wyznaczonym dniu całym zespołem wraz z mentorem (np. za pomocą Google Meet). W trakcie spotkania zaprezentujcie wykonane przez Was projekty.
Forma prezentacji pozostaje dowolna (musi zmieścić się w 5 minutach + 5 minut na pytania).
Możecie przygotować jakieś slajdy, pokaz waszych talentów, czy nawet zaśpiewać — ale nie jest to konieczne. Na pewno musi zostać pokazana działająca strona internetowa, reszta wg Waszego uznania.
Jeśli robicie wizytówkę o sobie, to być może chcecie też opowiedzieć o swoich zainteresowaniach, żeby inni w zespole poznali Was lepiej :) ?
- Po prezentacji mentor Waszego zespołu oceni projekt wg kryteriów opisanych w specjalnym arkuszu — przykład takiego arkusza możecie zobaczyć [TUTAJ](https://docs.google.com/spreadsheets/d/1mjCi-oDXILKoCReqJlhGYP4NW-HVMCzvdcIy6ntnsog/edit?usp=sharing).
Pamiętajcie też odpowiednio opracować README.md Waszego projektu, tak aby prezentowało kto, co, jak i dlaczego zostało wykonane.
Zawartość, którą macie tutaj aktualnie (to co teraz czytacie) można usunąć — znajdziecie ją zawsze w oryginalnym repozytorium, które forkowaliście.
- Po zrecenzowaniu waszych projektów mentor powinien przekazać każdemu jego ocenę punktową i feedback jako uzasadnienie.


### Opis projektu
Pozyskanie pierwszego klienta nie przychodzi łatwo.
Dla klienta, który chce otrzymać produkt wysokiej jakości, nie jest ważna tylko firma, która spróbuje zrealizować jego wizję.
Równie istotne jest też to, z jakimi konkretnymi osobami przyjdzie komuś współpracować przy wytwarzaniu oprogramowania.
Dobrze, żeby Wasi przyszli klienci i wasz zespół trochę lepiej Was poznali.
Dlatego jako pierwszy projekt do Waszego portfolio proponujemy przygotowanie strony — wizytówki.
Motywem przewodnim powinniście być właśnie Wy sami lub o wasze zrealizowane projekty lub zainteresowania, najważniejsze umiejętności — nie koniecznie programistycznych!
Jesteś fotografem? Możesz przygotować stronę reklamującą swoje usługi.
Jako fryzjer czy mechanik, możesz zrobić podobnie.
Świat web designu stoi przed Tobą otworem.

W tym pierwszym, rozgrzewkowym projekcie pracujecie jeszcze osobno.
Pamiętajcie, że macie zespół i mentora, który jest tutaj, żeby Was wspierać przez cały czas trwania kursu.

Dajcie się lepiej poznać dzięki internetowi i swoim umiejętnością! :)

#### Jak rozpocząć pracę nad projektem
Aby ułatwić prezentację projektu innym osobom, dobrze, gdyby był on dostępny bez problemów pod adresem strony internetowej.
W tym przypadku większość pracy z tym związanej zrobiliśmy już za Ciebie.
Oto co musisz zrobić, żeby zobaczyć efekt i zacząć development:

1. Wykonaj fork tego repozytorium do swojego własnego profilu.
Po kliknięciu przycisku pokazanego poniżej GitHub przeniesie Cię automatycznie na Twoją kopię tego repozytorium.
To tutaj będziesz wykonywać swoją stronę.
![./.github/images/Project1Prepare1.png](./.github/images/Project1Prepare1.png)
1. Przejdź do zakładki Settings w Twoim repozytorium.
![./.github/images/Project1Prepare2.png](./.github/images/Project1Prepare2.png)
1. Znajdź w zakładce setting sekcję GitHub Pages i wybierz branch *main* jako source (na screenie dawna nazwa głównej gałęzi - master).
![./.github/images/Project1Prepare3.png](./.github/images/Project1Prepare3.png)
1. Po wyborze brancha *main*, zatwierdź ustawienia, klikając przycisk `Save`.
Wszystko powinno wyglądać tak jak w czerwonym polu poniżej.
Dzięki temu aktywujesz GitHub Pages dla swojego repozytorium.
![./.github/images/Project1Prepare4.png](./.github/images/Project1Prepare4.png)
1. Znajdź sekcję GitHub Pages w zakładce Setting jeszcze raz.
Teraz powinien znajdować się w tym miejscu link. Po kliknięciu zaprowadzi Cię do Twojej strony.
Ten link możesz przekazać teraz kolegom z zespołu i mentorowi.
Będą mogli dać Ci cenne wskazówki i pomóc z błędami bez pobierania całego repozytorium.
A Twoja strona jest od razu dostępna w internecie dla każdego, kto chciałby ją odwiedzić. I to kompletnie za darmo!
![./.github/images/Project1Prepare5.png](./.github/images/Project1Prepare5.png)
1. Jeśli po kliknięciu w link, pokazała Ci się strona o tej treści, to znaczy, że wszystko jest w porządku.
![./.github/images/Project1Prepare6.png](./.github/images/Project1Prepare6.png)

Od teraz każda zmiana, jaką commitujesz do głównego brancha, będzie się pokazywać pod tym adresem.
Masz już działające środowisko, więc na co czekasz? Do dzieła!

### Porady odnośnie do projektu

#### Interfejs
Możesz posłużyć się projektem interfejsu strony — wizytówki, wykonanym przez organizatorów projektu.
Jest to tylko dla ułatwienia Ci pracy.
Możesz w trakcie implementacji go dowolnie przekształcać / zmieniać czy zrobić coś zupełnie innego.
https://www.figma.com/file/WHtiMfcNHt4tc7mDamNBYa/CodersCamp2020-Wizytowka?node-id=0%3A1
Pamiętaj też, że Twoje rozwiązanie musi być responsywne!
Czyli odpowiednio dostosowywać sposób wyświetlania treści do rozmiaru okna przeglądarki.

Inspiracją może być także [DevChallenge.io - Portfolio](https://devchallenges.io/challenges/5ZnOYsSXM24JWnCsNFlt).
Pamiętaj tylko, że Ty korzystasz tutaj jedynie z HTML i CSS.

Przygotowane projekty interfejsu użytkownika są tutaj po to, żebyś bez problemów postawił swoje pierwsze kroki w praktycznym wykorzystaniu HTML i CSS.
Jednakże zachęcamy do wykonania czegoś, co ukaże Twoje wnętrze :)
Dobrej zabawy!
##### CodersCamp site: https://coderscamp.edu.pl/
Binary file added images/SportFreaks/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/SportFreaks/2.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/SportFreaks/3.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/TripMate/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/TripMate/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/TripMate/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/aboutMeFoto.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/bg-image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/angular.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/css.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/git.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/html.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/javascript.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/mongodb.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/nodejs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icons/typescript.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/media/facebook.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/media/github.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/media/instagram.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/media/linkedin.png
Binary file added images/my-photo.png
Binary file added images/navigation/dot-selected.png
Binary file added images/navigation/dot.png
Binary file added images/project-github.png
223 changes: 215 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,225 @@
<!DOCTYPE html>
<html lang="pl">
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CodersCamp | Projekt 1 - HTML i CSS</title>
<meta name="description" content="CodersCamp to darmowy, otwarty kurs programowania webowego we Wrocławiu. Sprawdź, czego nauczysz się na CodersCamp i spróbuj swoich sił w branży IT!">

<title>Porfolio</title>
<link rel="stylesheet" href="styles/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
</head>

<body>
<div class="container">

<section class="menu">
<a href='#home'>HOME</a>
<a href="#about-me">ABOUT ME</a>
<a href='#skills'>SKILLS</a>
<a href='#projects'>PROJECTS</a>
<a href='#contact'>CONTACT</a>
</section>

<section id="home" class="home">
<div class="content">
<span>Hi there, <br>
I'm Paweł Szambelan</span>
<div class="media">
<a href="https://www.linkedin.com/in/pawe%C5%82-szambelan-a29861200/" title="LinkedIn" target="_blank"><img src="images/media/linkedin.png"></a>
<a href="https://github.com/Szambelan" title="GitHub" target="_blank"><img src="images/media/github.png"></a>
<a href="https://www.facebook.com/profile.php?id=100002768628908" title="Facebook" target="_blank"><img src="images/media/facebook.png"></a>
<a href="https://www.instagram.com/pawel_szambelan/" title="Instagram" target="_blank"><img src="images/media/instagram.png"></a>
</div>
</div>
</section>

<section id="about-me" class="about-me">
<div class="image">
<img src="images/aboutMeFoto.jpg">
</div>
<div class="line"></div>
<div class="text">
<h1>About me</h1>
<p>I am a young guy with lots of energy who love doing many things
in one time. For sure I cannot stand sitting in one place and do
nothing – always I am trying to find something exciting!
I would like to find a job, which will help me to develop myself in
IT sector.
</p>
<input type="button" class="btn" value="Download my CV" />
</div>
</section>

<section id="skills" class="skills">
<div class="text">Let's get know
my skills...
</div>
<div class="skills-container">

<div class="item">
<div class="item-side item-front">
<span>CSS</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/css.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>HTML</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/html.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>GIT</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/git.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>JAVASCRIPT</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/javascript.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>TYPESCRIPT</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/typescript.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>ANGULAR</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/angular.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>NODE.JS</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/nodejs.png">
</div>
</div>

<div class="item">
<div class="item-side item-front">
<span>MONGODB</span>
</div>
<div class="item-side item-back">
<img class src="images/icons/mongodb.png">
</div>
</div>

</div>
</section>

<section id="projects" class="projects">

<div class="projects-grid">

<p>CodersCamp - projekt 1. Tutaj możesz zacząć swoją zabawę!</p>
<input type="radio" name="project" id="project-1" checked />
<input type="radio" name="project" id="project-2" />

<div class="projects-list">

<div class="project">
<div class="description">
<h1>TripMate</h1>
<p>Web application helping people
to get from one place to another. </p>
<a href="#" title="GitHub" class="project-github"><img src="images/project-github.png"></a>
</div>
<div class="image image-top-right" style="background-image: url('images/TripMate/3.png');">
</div>
<div class="image image-bottom-left" style="background-image: url('images/TripMate/2.png');">
</div>
<div class="image image-bottom-right" style="background-image: url('images/TripMate/1.png');">
</div>
</div>

<div class="project">
<div class="description">
<h1>SportFreaks</h1>
<p>Application helping sport schools with
organising their employees and lessons schedule. </p>
<a href="#" title="GitHub" class="project-github"><img src="images/project-github.png"></a>
</div>
<div class="image image-top-right" style="background-image: url('images/SportFreaks/1.png');">
</div>
<div class="image image-bottom-left" style="background-image: url('images/SportFreaks/2.PNG');">
</div>
<div class="image image-bottom-right"
style="background-image: url('images/SportFreaks/3.PNG');"> </div>
</div>

</div>

<div class="navigation">
<label class="dot" for="project-1"></label>
<label class="dot" for="project-2"></label>
</div>

</div>

<div class="text">...and have a look
at my projects
</div>

</section>

<section id="contact" class="contact">

<h1>Get in touch with me!</h1>
<div class="container">
<div class="info">
<div class="photo">
</div>
<br>
<span class="text">Paweł Szambelan
Wrocław, Poland</span>
<span>+48 784 552 621
p.szambelan1@gmail.com</span>
</div>
<form class="form" method="post" action="">
<input type="text" class="form-input" placeholder="Name" autocomplete="off" required />
<input type="text" class="form-input" placeholder="Your e-mail address" autocomplete="off"
required />
<input type="text" class="form-input" placeholder="Topic" autocomplete="off" required />
<textarea class='form-textarea' rows=12 placeholder='Put your message here....' autocomplete="off"
required></textarea>
</form>
</div>
<input type="submit" class="btn" value="Send" />

</section>

<section class="footer">

<div>
Copyrights © 2020 Paweł Szambelan
</div>

</section>

</div>
</body>
</html>

</html>
9 changes: 9 additions & 0 deletions styles/animations/keyframes.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@keyframes appearing {
0% {
opacity: 0
}

100% {
opacity: 100
}
}
Loading