-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio-item.html
124 lines (114 loc) · 4.14 KB
/
portfolio-item.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- this line of code ensures website functions properly on all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevShirene Portfolio Website</title>
<!-- links to normalize, css file to even out differences between browsers -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"
/>
<script
src="https://kit.fontawesome.com/4aeb057dc2.js"
crossorigin="anonymous"
></script>
<!-- Update these later if needed -->
<link
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<div class="logo">
<img src="img/devshirene.png" alt="" />
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<!-- subcomponent of my navigation above and helps with css styling -->
<ul class="nav__list">
<li class="nav__item">
<a href="index.html" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="index.html#services" class="nav__link">My Services</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">About Me</a>
</li>
<li class="nav__item">
<a href="index.html#work" class="nav__link">My Work</a>
</li>
</ul>
</nav>
</header>
<section class="intro">
<h1 class="section__title section__title--intro">
<strong>Flashcard-app</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">Front-end</p>
<img src="img/portfolio-01.png" alt="" class="intro__img" />
</section>
<div class="portfolio-item-individual">
<h3>Thinkful Project description:</h3>
<p>
A local school has decided to put together a flash card application,
Flashcard-o-matic, to help their students study online. Teachers will
use this application to create decks of flash cards for the subjects
that they teach, and students will study the decks. The school needs you
to build the application that the students and teachers will use.
</p>
<h4>Objectives:</h4>
<ul>
<li>Installing packages via NPM</li>
<li>Running tests from the command line</li>
<li>Writing React function components</li>
<li>Creating routes, including nested routes, using React Router</li>
<li>
Using hooks like useState(), useParams(), and useHistory() Debugging
React code through console output and using the VS Code debugger
</li>
</ul>
<!-- LATER add a clickable link to github -->
<h4>*See the project code in GitHub</h4>
</div>
<!-- Footer -->
<footer class="footer">
<a href="mailto:[email protected]" class="footer__link"
>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="https://github.com/shirenekboyd"
><i class="fa-brands fa-github"></i
></a>
</li>
<!-- <li class="social-list__item">
<a class="social-list__link" href="https://instagram.com"
><i class="fa-brands fa-instagram"></i
></a>
</li> -->
<!-- <li class="social-list__item">
<a
class="social-list__link"
href="hhttps://www.facebook.com/shirenekadkhodai"
><i class="fa-brands fa-facebook"></i
></a>
</li> -->
<li class="social-list__item">
<a
class="social-list__link"
href="https://www.linkedin.com/in/shirene-boyd"
><i class="fa-brands fa-linkedin-in"></i
></a>
</li>
</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>