-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
131 lines (115 loc) · 5.67 KB
/
portfolio.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
125
126
127
128
129
130
131
<!--Portfolio website of KAVITHA ACHARYA coded with HTML and CSS-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Portfolio-Kavitha Acharya</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,400i,800" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
</head>
<body>
<header class="hdr">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<desc>Udacity Logo</desc>
<path d="M13.3 0L0 7.7v17.6C0 33.4 6.5 40 14.6 40c2.7 0 5.2-.7 7.4-1.9l10.8-6.2C37.1 29.6 40
25.2 40 20V1.6L37.4.1 26 6.2v19.2c0 .8-.1 1.6-.2 2.4-.2.8-.4 1.5-.7 2.2l-.3.6c-.4
0-2.9-.9-4.2-1.8-.6-.4-1.1-.8-1.6-1.3s-.9-1-1.3-1.6c-.4-.6-.7-1.2-1-1.8-.3-.6-.5-1.3-.6-2-.1-.7-.1-1.4-.1-2.1V1.6L13.3
0zm6.5 36.2c-.7.3-1.7.7-2.5.9-.8.2-1.5.2-2.3.2-.8 0-1.6-.1-2.4-.3-.8-.2-1.5-.4-2.2-.7-.7-.3-1.4-.7-2-1.1C6.6
34.1 5.7 33.1 5 32c-.4-.6-.8-1.3-1.1-2-.3-.7-.5-1.5-.7-2.3-.2-.8-.2-1.6-.2-2.4V9.2l10-6.1V20c0 6.4 4.7
11.8 10.7 13.1-.2.3-.4.6-.7.8-1.1 1.1-2 1.8-3.2 2.3zm17-14c-.1.7-.4 1.4-.6 2-.3.6-.6 1.2-1 1.8-.4.6-1.6
2.1-3.2 3-1.6.9-3.1 1.2-4 1.4.6-1.6 1-3.2 1-5V7.7l8-4.6V20c0 .8 0 1.5-.2 2.2z">
</path>
</svg>
<div class="header-title">
<h1>Kavitha Acharya</h1>
<h5 class="hdr-intro">Front-End Developer</h5>
</div>
</header>
<nav class="menu">
<span class="ham-icon"><i class="fas fa-bars fa-2x"></i></span>
<div class="menu-list">
<a class="menu-item" href="#home">Home</a>
<a class="menu-item" href="#about">About</a>
<a class="menu-item" href="#projects">Projects</a>
<a class="menu-item" href="#contact">Contact</a>
</div>
</nav>
<main>
<!--Home section-->
<section id="home">
<picture>
<source media="(max-width:450px)" srcset="images/coding-400_small.jpg" />
<source media="(max-width:780px)" srcset="images/coding-800_medium.jpg" />
<source media="(min-width:781px)" srcset="images/coding-1000_large.jpg" />
<img class="home-img" src="images/coding-800_medium.jpg" alt="person coding on a hill top">
</picture>
</section>
<!--About Me section-->
<section id="about">
<h4 class="sec-hdr">About Me</h4>
<p class="abt-para">Hi!. I am an aspiring Front End web developer. I am passionate about learning new
technologies and coding.<br>Do check out my project gallery in this portfolio website.</p>
</section>
<!--Projects-->
<section id="projects">
<h4 class="sec-hdr">Project Gallery</h4>
<!--Apps-->
<!-- TODO: add all future projects -->
<article class="project">
<figure class="app num1">
<a href="https://codepen.io/kavithaacharya/full/rrjZbB" target="_blank">
<picture>
<source media="(max-width:450px)" srcset="images/RGBgame_1x.png" />
<source media="(min-width:451px)" srcset="images/RGBgame_2x.png" />
<img class="app-img" src="images/RGBgame_1x.png" alt="RGB color matching app">
</picture>
</a>
<figcaption class="figcap">Color Game</figcaption>
<p class="app-para">
<a class="app-link" href="https://codepen.io/kavithaacharya/full/rrjZbB" target="_blank">
https://codepen.io/kavithaacharya/full/rrjZbB</a>
</p>
</figure>
<figure class="app num2">
<picture>
<source media="(max-width:450px)" srcset="images/sunflower-400_small.jpg" />
<source media="(max-width:780px)" srcset="images/sunflower-800_medium.jpg" />
<source media="(min-width:781px)" srcset="images/sunflower-1000_large.jpg" />
<img class="app-img" src="images/sunflower-800_medium.jpg" alt="sunflower app">
</picture>
<figcaption class="figcap">Sunflower</figcaption>
<p class="app-para">
<a class="app-link" href="#">https://github.com/udacity/Sunflower/</a>
</p>
</figure>
<figure class="app num3">
<picture>
<source media="(max-width:450px)" srcset="images/bokeh-400_small.jpg" />
<source media="(max-width:780px)" srcset="images/bokeh-800_medium.jpg" />
<source media="(min-width:781px)" srcset="images/bokeh-1000_large.jpg" />
<img class="app-img" src="images/bokeh-800_medium.jpg" alt="bokeh app">
</picture>
<figcaption class="figcap">Bokeh</figcaption>
<p class="app-para">
<a class="app-link" href="#">https://github.com/udacity/Bokeh/</a>
</p>
</figure>
</article>
</section>
<hr>
<!--Contact details-->
<footer id="contact">
<section class="icons">
<a class="icon-link" href="https://twitter.com/kavita_acharya" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="icon-link" href="https://www.facebook.com/kavitha.acharya12" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="icon-link" href="mailto:acharyakavita12@gmail" target="_blank"><i class="fas fa-at"></i></a>
<a class="icon-link" href="https://www.linkedin.com/in/kavitha-acharya-60975637/" target="_blank"><i class="fab fa-linkedin"></i></a>
</section>
</footer>
</main>
</body>
</html>