1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<> about.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Cora Marcu's Portfolio</title>

<link rel="stylesheet" href="projects.css">

</head>

<body>

<h1>About Me</h1>

<div> class="about-container>

<img src="./pics/Cora-Profile-Pic.jpg" alt="A selfie of me with short blonde hair and wearing blue-framed glasses.">

<p> Hi! My name is <span class="accent-color">Cora</span>.</p>

<br>

<br>

<p>For a decade I built my career in marketing and project management, but things took an exciting new turn for me in 2020, when I decided to start learning how to code. So here I am, a new developer obsessed with <span class="accent-color">Java</span>,<span class="accent-color">JavaScript</span>, <span class="accent-color">HTML</span> and <span class="accent-color">CSS</span></p>

</div>

<button class="contact-btn">Contact me</button>

</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

JS projects.js

const openProjectButtons = document. querySelectorAll('[data-open-project]')

const closeProjectButtons = document. querySelectorAll('[data-close-project]')

const overlay = document. getElementById('overlay')

const overlay = document. getElementById('overlay')

const project1 = document. getElementById('project1')

const project2 = document. getElementById('project2')

const project3 = document. getElementById('project3')

openProjectsButton.forEach(button => {

button.addEventListener('click', () => {

const modal = document.querySelector(button.dataset.openProject)

openModal(modal)

})

})

closeModalButtons.forEach(button => {

button.addEventListener('click', () => {

const modal = button.closest('.modal')

closeModal(modal)

})

})

function openModal(modal) {

if(modal == null) {

console.log('returned null')

return

}

modal.classList.add('active')

overlay.classList.add('active')

}

function closeModal(modal) {

if(modal == null) return

modal.classList.remove('active')

overlay.classList.add('active')

}

1

2

3

4

5

6

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

# skills.css

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 1rem;

}

.skill {

margin-bottom: .5rem;

width: clamp(15rem, 80vw, 50rem);

}

.skill:last-child {

margin-bottom: 0;

}

#technical-skills {

background-color: var(--bkg-color-pop);

color: var(--modal-accent);

}

#soft-skills {

background-color: var(--bkg-color);

color: var(--modal-txt-color);

}

#other-skills {

background-color: var(--modal-accent);

color: var(--bkg-color);

}

  my-portfolio git:(main) x git status

On branch main

Your branch is up to date with 'origin/main'.

Untracked files:

(use "git add <file>..." to include in what will be committed)


   work-contact.md


   social-media.md


no changes added to commit (use "git add" and/or "git commit -a")

  my-portfolio git:(main) x git add .

  my-portfolio git:(main) x git commit -m "add contact details"

2 files changed, 31 insertions(+), 27 deletions(-)

create mode 100644 work-contact.md

create mode 100644 social-media.md

  my-portfolio git:(main) x git push