portfolio/index.html at main · kerilsen/portfolio · GitHub

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 name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Reset stylesheet -->
    <link rel="stylesheet" href="./assets/css/reset.css">

    <!-- Google Fonts link to import fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Script&family=Lora&display=swap" rel="stylesheet">

    <!-- My stylesheet -->
    <link rel="stylesheet" href="./assets/css/style.css">

    <title>keri sen</title>
</head>

<body>
    <header>
        <!-- Logo and navigation -->
        <nav>
            <div class="split">
                <div>
                    <h1>keri<br> sen</h1>
                </div>
                <div class="topnav">
                    <a href="#portfolio" class="active">portfolio</a>
                    <a href="#about">about me</a>
                    <a href="home.html">homepage</a>
                    <a href="https://github.com/kerilsen">github</a>
                    <a href="mailto:keri.l.sen@gmail.com">contact me</a>
                </div>
            </div>
        </nav>
    </header>

    <!-- Main grid that holds the body of the page -->
    <div class="grid">

        <!-- Sidebar with my picture and "about me" information -->
        <aside class="sidebar">
            <h2 id="about">about me</h2>
            <p>I'm a junior web developer and an ex-librarian who loves organization and pretty things!</p>
            <img src="./assets/images/IMG_5164small.png" class="responsive" width="477px" height="554px"
                alt="photo of Keri Sen" />
            <p>I have my Master's degree in Library and Information Studies and am currently taking a full stack flex
                coding bootcamp and will complete it in April 2024. I'm highly resourceful and a quick learner and I
                love rainy days and iced coffee. I can't wait to create new things and learn more. Watch this
                space for real content coming soon!</p>
        </aside>

        <!-- First project should be bigger than the rest - classified as "spotlight" with a "portfolio" id for navigation -->
        <article class="spotlight" id="portfolio">
            <h3 class="app-title">Tiny Integrated Library System</h3>
            <p class="caption">Mongo DB</p>
            <a href="#"><img src="./assets/images/redcharlie-0RRKNIlgRZA-unsplash.jpg" class="stretchimage"
                    alt="an aisle of a large library" /></a>
        </article>

        <article class="project">
            <h3 class="app-title">My Web Page</h3>
            <p class="caption">Semantic HTML and CSS</p>
            <a href="https://kerilsen.github.io/home.html"><img
                    src="./assets/images/vadim-paripa-vEK0mCz4Ow0-unsplash.jpg" class="stretchimage"
                    alt="a close up of a wheat field" /></a>
        </article>

        <article class="project">
            <h3 class="app-title">Joke Box</h3>
            <p class="caption">JavaScript and API</p>
            <a href="#"><img src="./assets/images/pedro-forester-da-silva-9be9HgmStOk-unsplash.jpg" class="stretchimage"
                    alt="a juke box" /></a>
        </article>

        <article class="project">
            <h3 class="app-title">Mine Sweeper</h3>
            <p class="caption">CSS and JavaScript</p>
            <a href="#"><img src="./assets/images/andrey-metelev-DEuansgqjns-unsplash.jpg" class="stretchimage"
                    alt="colorful dice that spell out G.A.M.E." /></a>
        </article>

        <article class="project">
            <h3 class="app-title">Kids' Reading Game</h3>
            <p class="caption">REACT and SQL</p>
            <a href="#"><img src="./assets/images/annie-spratt-p1bHqLjKwi4-unsplash.jpg" class="stretchimage"
                    alt="a child with a book on her lap" /></a>
        </article>

        <article class="project">
            <h3 class="app-title">Shop For Me App</h3>
            <p class="caption">MERN</p>
            <a href="#"><img src="./assets/images/bruno-kelzer-LvySG1hvuzI-unsplash.jpg" class="stretchimage"
                    alt="a shopping cart in a parking lot" /></a>
        </article>

        <article class="project">
            <h3 class="app-title">Are You a Robot?</h3>
            <p class="caption">CSS and JavaScript</p>
            <img src="./assets/images/rock-n-roll-monkey-FTfjMijq-Ws-unsplash.jpg" class="stretchimage"
                alt="face of wind-up robot toy" />
        </article>
    </div>

    <!-- Footer with credits -->
    <footer>
        <div class="split">
            <div>
                <p>Coded by hand with ❤️ by Keri Sen © 2023</p>
            </div>
            <div>
                <p>Images courtesy of <a href="https://unsplash.com/">Unsplash</a></p>
            </div>
        </div>
    </footer>
</body>

</html>