-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·110 lines (100 loc) · 5.54 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web projects</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" href="favicon.ico">
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- This project is about manipulating the DOM -->
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<!-- Main -->
<main>
<header class="main__hero">
<h1>Front End Web Developement</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<!-- Section 1 -->
<section id="section1" data-nav="Blog" class="your-active-class">
<div class="landing__container">
<h2> Personal Blog Website</h2>
<p>Designed and developed a personal art blog website with three page navigations containing my personal art images, responsive layouts, and styling. Some of the considerations for this projects are appropriately
structuring files, as well as use proper CSS and HTML formatting & style.</p>
<p><em>Core skills:</em> Understand different use cases for CSS Grid and Flexbox, and structure the layout of a web page using grid columns and rows.</p>
<a class="project-link" href="https://deepa-art-blog.netlify.app/"target="_blank">Live site here!</a>
</div>
</section>
<!-- Section 2 -->
<section id="section2" data-nav="Landing Page">
<div class="landing__container">
<h2>Landing page</h2>
<p>This multi-section landing page is built with a dynamically updating navigational menu based on the amount of content that is added to the page.</p>
<p><em>Core skills:</em> Uses JavaScript to control a webpage using DOM to dictate page content and interactions.
This project focuses on manipulating the DOM, Browser Events and managing website performance by controlling content creation efficiently.
</p>
<a class="project-link" href="https://deepa-frontendprojects.netlify.app"target="_blank">Viewing app currently!</a>
</div>
</section>
<!-- Section 3 -->
<section id="section3" data-nav="Weather">
<div class="landing__container">
<h2>Weather Journal App</h2>
<p>Created an asynchronous web app that uses Web API and user data to dynamically
update the UI of the application.</p>
<p><em>Core skills:</em> Set up Node and Express environment to develop this application locally first to see how to handle HTTP Requests & Routes.
Updated and modified the elements dynamically using asynchronous function to retrieved data.</p>
<a class="project-link" href="https://deepa-basic-weather-app.herokuapp.com/"target="_blank">Live site here!</a>
</div>
</section>
<!-- Section 4 -->
<section id="section4" data-nav="NLP">
<div class="landing__container">
<h2>Evaluate A News Article with Natural Language Processing</h2>
<p>Built a web tool that allows users to run Natural Language Processing (NLP) on
articles or blogs found on other websites.</p>
<p><em>Core skills:</em> Used webpack as a build tool for defining the entry point, loaders, plugins and mode to create a dependency graph for this application.
Node and express is used for the webserver and routing. The app has dev and prod environments, each with their own set of tools and commands.
</p> <a class="project-link" href="https://deepa-nlp-app.herokuapp.com/"target="_blank">Live site here!</a>
</div>
</section>
<!-- Section 5 -->
<section id="section5" data-nav="Capstone">
<div class="landing__container">
<h2>travPlan App</h2>
<p>Developed a travel planner application called `travPlan`. This application adds, saving and deleting travel plans.
<p><em>Core skills:</em> This application focuses on all things learned during this course.
travPlan app gets input of the location and date from the user, and displays weather and an image of the location
using information obtained from external APIs. This project is completely build from scratch on vanilla javascript, working with objects and DOM elements to
retrieve data from 3 different APIs (geonames, weatherbit and pixabay).</p>
<a class="project-link" href="https://deepa-travplan.herokuapp.com/"target="_blank">Live site here!</a>
<br>
<a href="fend.pdf" title="Certificate" class="btn" target="_blank"> See Certificate </a>
</div>
</section>
</main>
<footer class="page__footer">
<p><a href="https://github.com/sdkdeepa/">Deepa Subramanian </a></p>
</footer>
<script src="js/app.js"></script>
</body>
</html>