-
Notifications
You must be signed in to change notification settings - Fork 0
/
site.html
122 lines (98 loc) · 5.85 KB
/
site.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="design_style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Asap+Condensed&family=Concert+One&family=Gloria+Hallelujah&family=Permanent+Marker&display=swap" rel="stylesheet"/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<title>Derek Personal Portfolio</title>
</head>
<nav id="navbar">
<ul class="nav-list">
<li>
<a class="nav_text" href="index.html#projects">PROJECTS</a>
</li>
<li>
<a class="nav_text" href="#contact">CONTACT</a>
</li>
<li>
<a class="nav_text" href="resume.html">RESUME</a>
</li>
</ul>
</nav>
<main>
<section id="projects">
<div class="grid">
<h3> Proximity </h3>
<p> So, with proximity. I try to keep my pages looking similar by keeping the nav bar the same on
each page and keeping only a selection of colors. By keeping the background color red on each
page, this would help the confusing for the user wondering if they are still on the same website.
Another part was how I had the layout of each page follow a certain structure, like the head
going to the header and after the header is my nav bar and main to, lastly, the footer. By
keeping the proximity of each page looking closely related I have a high change of the user not
getting confused and leaving my website.</p>
<div id="units">
<!-- <img class="design_principles" src="img/design_principles.PNG"> -->
</iframe>
</div>
<h3> Alignment</h3>
<p>The alignment on my webpage was decent. I keep make a nice red boarder wrapped around my
content with a little padding on each side of the content. When shrinking down the webpage to
mobile, my alignment adjusts to the width with my content not going out of alignment. There
are a couple of areas I would like to fix like when the website is in mobile view the map moves
to its own column above the text instead of just smashing the text. Another part I need to work
on in alignment on my webpage is my paragraphs should be indented in form my headers, or
the other way around. I don’t like how most of all the text lines up and makes it look a little
boring.</p>
<h3>Repetition</h3>
<p>I feel like repetition is somewhat close to proximity in I make each page look similar and
repeated the same nav bar for each page of my website. Each page also repeated the same
type of structure on each page but repeating content that is important, an example being the
logo name and slogan. And my bottom footer is repeated in every page. Maybe adding social
media links with icons and repeating them on each page could be something I could do to
improve the site.</p>
<h3>Contrast</h3>
<p>Contrast is something that needs to be improved on my website. A lot of the pages looks very
similar and have the same font and colors, although this is a good thing to consider when
building a sight, it is also important to add contrast to each page. I need to make special
sections and change around the website is light out. My shop and home webpage has an image
in the same location and doesn’t have a lot of contrast from each other. Maybe make the shop
page have boxes with different shopping items would be an improvement that would give it
more contrast.</p>
<h3>Typography</h3>
<p>The websites typograph could use a little work but isn’t too bad. I have about 4-6 different font
sizes and might not need that many different ones. Sometimes changing too often can be a bad
thing. Another problem is my header font type is almost too hard to read. I need to make it a
little similar and maybe a san-serif type font would work better for visibility and keeping the
fonts similar to each other. Overall, my typography of my website looks good, but I might need
to make those changes to have it feel more like a business.</p>
</div>
</section>
</div>
</main>
<footer>
<footer>
<section id="contact">
<div>
<h2>Let's work together...</h2>
<p id="contact_info">some ways to contact me</p>
</div>
<div class="contact-links">
<a href="https://github.com/fanko89" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
<a href="https://www.linkedin.com/in/derek-ney/" target="_blank" class="btn contact-details"><i class="fab fa-linkedin-in"></i> Linked In</a>
<a href="https://www.facebook.com/derek.ney.1" target="_blank" class="btn contact-details"><i class="fab fa-facebook"></i> Facebook</a>
<a href="[email protected]" target="_blank" class="btn contact-details"><i class="fas fa-at"></i> Email</a>
<a href="tel:8013751482" class="btn contact-details"><i class="fas fa-phone"></i> Phone</a>
</div>
</section>
</footer>
</html>