updated: 3.24.08; copyright 2008 Nik Philipsen
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3:
4: <!-- :: :: :::: :: :: :: ::: :::: :::: :: :: :::: :: :::: :::: :::: ::::: :: :: -->
5: <!-- ::: :: :: :::: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::: :: -->
6: <!-- :::::: :: :::: :: ::::: ::: :::: ::::: :: :: :: :::: ::: :::: :::::: -->
7: <!-- :: ::: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::: -->
8: <!-- :: :: :::: :: :: ::::: :: :: :::: :: :: :: :::: ::::: :::: :: :::: ::::: :: :: -->
9: <!-- SITE (c) 2008 NIKLAS PHILIPSEN -->
10:
11: <head>
12: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
13: <title>nik philipsen | kigoe.com</title>
14:
15: <style type="text/css">
16:
17: /* :: :: :::: | Following CSS Code (c) Niklas Philipsen */
18: /* ::: :: :: :: | nik.philipsen[at]kigoe[dot]com */
19: /* :::::: :::: |-------------------------------------------- */
20: /* :: ::: :: | Kigoe.com: Nik Philipsen Profile Page */
21: /* :: :: :: | Index.php In-Page CSS Style Sheet */
22:
23: /* ------------------------------- */
24: /* UNIVERSAL STYLE SHEETS */
25: /* ------------------------------- */
26:
27: @import "global/GlobalAlertsCSS.css";
28:
29: /* ------------------------------- */
30: /* GEN. STRUCTURE */
31: /* ------------------------------- */
32:
33: body {
34: margin: 0px;
35: padding: 0px;
36: }
37:
38: .body { /* body div; NOT the same as body! */
39: padding-right: 10px;
40: padding-left: 10px;
41: padding-top: 5px;
42: margin: 0px;
43: }
44:
45: .head {
46: height: 95px;
47: background-color: #333333;
48: background-image: url(images/top_bg.png);
49: background-repeat: repeat-x;
50: }
51:
52: .title {
53: float: left;
54: }
55:
56: .toppanel {
57: float: right;
58: }
59:
60: .stickerbottom {
61: float: right;
62: height: 40px;
63: margin: 0px;
64: padding: 0px;
65: }
66:
67: .info {
68: margin-left: 10px;
69: width: 600px;
70: float: left;
71: }
72:
73: .links {
74: margin-left: 15px;
75: padding-left: 15px;
76: padding-right: 15px;
77: padding-top: 5px;
78: width: 400px;
79: float: left;
80: border-left: 3px solid #0033FF;
81: border-top: 1px solid #ccc;
82: border-bottom: 1px solid #ccc;
83: border-right: 1px solid #ccc;
84: background-color: #FAFAFA;
85: }
86:
87: img {
88: border: 0px;
89: }
90:
91:
92: /* .col {
93: float: left;
94: margin-right: 20px;
95: } */
96:
97: /* .topcol {
98: float: left;
99: width: 140px;
100: } */
101:
102: .breakfloats {
103: clear: both;
104: }
105:
106: /* ------------------------------- */
107: /* TYPOGRAPHY */
108: /* ------------------------------- */
109:
110: p {
111: color: #666666;
112: font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
113: font-size: .8em;
114: text-align: justify;
115: font-weight: normal;
116: margin: 0px;
117: padding-top: 5px;
118: }
119:
120: a {
121: color: #333;
122: text-decoration: underline;
123: }
124:
125: a:hover {
126: color: #000;
127: text-decoration: underline;
128: }
129:
130:
131: h2 {
132: color: #0037AA;
133: font-family: Arial, Helvetica, sans-serif;
134: font-size: 1.5em;
135: text-align: left;
136: font-weight: normal;
137: margin: 0px;
138: padding-top: 5px;
139: }
140:
141: h2 a {
142: color: #0037AA;
143: border-bottom: 1px solid #CCCCCC;
144: text-decoration: none;
145: }
146:
147: h2 a:hover {
148: color: #000099;
149: border-bottom: 1px solid #000099;
150: text-decoration: none;
151: background-color: #D0DFFB;
152: }
153:
154: h3 {
155: color: #999999;
156: font-family: Arial, Helvetica, sans-serif;
157: font-size: 1.5em;
158: text-align: left;
159: font-weight: normal;
160: margin: 0px;
161: padding-top: 5px;
162: padding-bottom: 1px;
163: }
164:
165: h5 {
166: font-family: Arial, Helvetica, sans-serif;
167: font-size: .8em;
168: text-align: left;
169: font-weight: normal;
170: margin: 0px;
171: border-top: 1px solid #CCCCCC;
172: background-color: #F7F7F7;
173: color: #bbb;
174: padding-left: 5px;
175: padding-bottom: 5px;
176: padding-top: 3px;
177: }
178:
179: h5 a {
180: color: #7B7B7B;
181: text-decoration: none;
182: }
183:
184: h5 a:hover {
185: color: #000000;
186: text-decoration: none;
187: border-top: 1px solid #000;
188: padding-top: 3px;
189: }
190:
191: .title h1 {
192: text-align: left;
193: color: #fff;
194: font-family: Arial, Helvetica, sans-serif;
195: font-size: 2em;
196: margin: 0px;
197: padding: 0px;
198: }
199:
200: .toppanel h1 {
201: text-align: right;
202: color: #CCCCCC;
203: font-family: Arial, Helvetica, sans-serif;
204: font-size: .8em;
205: margin: 0px;
206: padding-top: 0px;
207: padding-right: 0px;
208: }
209:
210: .toppanel a {
211: color: #fff;
212: text-decoration: none;
213: }
214:
215: .toppanel a:hover {
216: color: #fff;
217: text-decoration: underline;
218: }
219:
220: .stickerbottom h1 {
221: text-align: right;
222: color: #CCCCCC;
223: font-family: Arial, Helvetica, sans-serif;
224: font-size: .8em;
225: margin: 0px;
226: padding-top: 0px;
227: padding-right: 0px;
228: }
229:
230: .links h3 {
231: color: #AD3600;
232: font-family: Arial, Helvetica, sans-serif;
233: font-size: 1em;
234: text-align: left;
235: font-weight: normal;
236: margin: 0px;
237: padding-top: 5px;
238: }
239:
240:
241: .links h3 a {
242: color: #AD3600;
243: border-bottom: 1px solid #CCCCCC;
244: text-decoration: none;
245: }
246:
247: .links h3 a:hover {
248: color: #AD3600;
249: border-bottom: 1px solid #AD3600;
250: text-decoration: none;
251: background-color: #FFD56E;
252: }
253:
254: .entry a {
255: color: #333;
256: text-decoration: underline;
257: }
258:
259: .entry a:hover {
260: color: #000;
261: text-decoration: underline;
262: }
263:
264: .bottomh2 h2 {
265: color: #ccc;
266: font-family: Arial, Helvetica, sans-serif;
267: font-size: 1.5em;
268: text-align: right;
269: font-weight: normal;
270: margin: 0px;
271: padding-top: 5px;
272: padding-right: 30px;
273: padding-bottom: 10px;
274: }
275:
276: .bottomh2 h2 a {
277: color: #ccc;
278: text-decoration: none;
279: }
280:
281: .bottomh2 h2 a:hover {
282: color: #000099;
283: text-decoration: none;
284: background-color: #D0DFFB;
285: }
286:
287: .toph2 h2 {
288: color: #ccc;
289: font-family: Arial, Helvetica, sans-serif;
290: font-size: 1.5em;
291: text-align: left;
292: font-weight: normal;
293: margin: 0px;
294: padding-top: 5px;
295: padding-bottom: 10px;
296: }
297:
298: /* ------------------------------- */
299: /* FORMS */
300: /* ------------------------------- */
301:
302:
303: input.submit {
304: background-color: #eeeeee;
305: font-family: "Lucida Grande", arial;
306: font-weight: normal;
307: font-size: 12px;
308: color: #333333;
309: border: 1px solid #666666;
310: }
311:
312: input.submit:active {
313: background-color: #999999;
314: color: #000000;
315: border: 1px solid #666666;
316: }
317:
318: textarea.message {
319: background-color: #eeeeee;
320: font-family: "Lucida Grande", arial;
321: font-size: 12px;
322: border: 1px solid #666666;
323: width: 590px;
324: padding: 5px;
325: }
326:
327: textarea.message:focus {
328: background-color: #FFEBAE
329: }
330:
331: input.inpu {
332: background-color: #eeeeee;
333: font-family: "Lucida Grande", arial;
334: font-size: 12px;
335: border: 1px solid #666666;
336: padding-left: 5px;
337: padding-right: 2px;
338: }
339:
340: input.inpu:focus, .iefocus {
341: background-color: #FFEBAE;
342: font-family: "Lucida Grande", arial;
343: font-size: 12px;
344: border: 1px solid #666666;
345: padding-left: 5px;
346: padding-right: 2px;
347: }
348:
349: /* ------------------------------- */
350: /* FORM ALERTS */
351: /* ------------------------------- */
352:
353:
354: .OrangeAlert {
355: background-color: #FAE285;
356: border-bottom: 1px solid #FF9900;
357: border-right: 1px solid #FF9900;
358: border-left: 1px solid #FF9900;
359: margin: 0px;
360: padding-top: 1px;
361: padding-bottom: 10px;
362: }
363:
364: .OrangeAlert p {
365: font-family: Arial, Helvetica, sans-serif;
366: font-size: .8em;
367: color: #000000;
368: padding-bottom: 1px;
369: padding-right: 20px;
370: padding-left: 30px;
371: text-align: left;
372: line-height: .8em;
373: }
374:
375: .OrangeAlert h1 {
376: font-family: Arial, Helvetica, sans-serif;
377: font-size: .8em;
378: color: #000000;
379: margin: 0px;
380: margin-bottom: 5px;
381: padding-bottom: 5px;
382: padding-top: 5px;
383: padding-right: 20px;
384: padding-left: 30px;
385: text-align: left;
386: border-bottom: 1px solid #FF9900;
387: background-color: #FF9900;
388: background-image: url(iconAlert.png);
389: background-repeat: no-repeat;
390: background-position: center left;
391: }
392:
393: .OrangeAlert a {
394: color: #000000;
395: }
396:
397: .GreenAlert { /* actually blue ;) */
398: background-color: #C5D4FF;
399: border-bottom: 1px solid #709DF5;
400: border-right: 1px solid #709DF5;
401: border-left: 1px solid #709DF5;
402: margin: 0px;
403: padding-top: 1px;
404: padding-bottom: 10px;
405: }
406:
407: .GreenAlert p { /* actually blue ;) */
408: font-family: Arial, Helvetica, sans-serif;
409: font-size: .8em;
410: color: #000000;
411: padding-bottom: 1px;
412: padding-right: 20px;
413: padding-left: 30px;
414: text-align: left;
415: line-height: .8em;
416: }
417:
418: .GreenAlert h1 { /* actually blue ;) */
419: font-family: Arial, Helvetica, sans-serif;
420: font-size: .8em;
421: color: #000000;
422: margin: 0px;
423: margin-bottom: 5px;
424: padding-bottom: 5px;
425: padding-top: 5px;
426: padding-right: 20px;
427: padding-left: 30px;
428: text-align: left;
429: border-bottom: 1px solid #709DF5;
430: background-color: #709DF5;
431: background-image: url(iconEmail.png);
432: background-repeat: no-repeat;
433: background-position: center left;
434: }
435:
436: .GreenAlert a { /* actually blue ;) */
437: color: #000000;
438: }
439:
440:
441:
442: /* Choose not a life of imitation */
443: /* Distant cousin to the reservation */
444:
445:
446:
447: </style>
448:
449: <!-- GLOBAL SCRIPTS -->
450:
451: <script type="text/javascript" src="contact/mootools.js"></script> <!-- mootools AJAX; necissary for contact form -->
452:
453: <script type="text/javascript" src="global/alert/GlobalAlertScript.js"></script> <!-- global alerts -->
454:
455: <!-- SPECIALIZED SCRIPTS -->
456:
457: <script type="text/javascript">
458: // ***************************************************************
459: // (c) KiGOE web design
460: // function: show/hide layers
461: // ***************************************************************
462: function ShowNewLayer(theshown, thehidden)
463: {
464: // alert(theshown);
465: if(document.getElementById(theshown).style.display == 'inline'){
466: if (theshown == 'sdfg'){
467: // alert('passed.');
468: } else {
469: document.getElementById(theshown).style.display = 'none';
470: }
471: } else {
472: document.getElementById(theshown).style.display = 'inline';
473: }
474:
475: if(thehidden){
476: document.getElementById(thehidden).style.display = 'none';
477: }
478:
479: }
480: </script>
481:
482: <script type="text/javascript">
483: // ***************************************************************
484: // base code from roscripts.com; modified by KiGOE web design
485: // function: ajax contact form
486: // ***************************************************************
487: window.addEvent('domready', function(){
488: $('contactForm').addEvent('submit', function(e) {
489:
490: new Event(e).stop();
491: var log = $('log_res').empty().addClass('ajax-loading');
492: this.send({
493: update: log,
494: onComplete: function() {
495: log.removeClass('ajax-loading');
496: }
497: });
498: });
499: });
500:
501: </script>
502:
503:
504: </head>
505:
506: <body>
507:
508: <div class="head">
509: <div class="title">
510: <h1><a name="top"></a><img src="images/title.png" alt="nik philipsen" /></h1>
511: </div><!-- title -->
512: <div class="toppanel">
513: <h1><img src="images/sticker_top.png" alt="new!" /></h1>
514: </div><!-- toppanel -->
515: <div class="breakfloats"></div><!-- breakfloats -->
516: <div class="stickerbottom">
517: <h1><img src="images/sticker_bot.png" alt="" /></h1>
518: </div><!-- stickerbottom -->
519: </div><!-- head -->
520:
521: <div class="info">
522: <h2>about me</h2>
523:
524: <p>I live in Richmond, Virginia, and currently attend Maggie Walker Governor's School. I also do some freelance design work, including web
525: design, print design, photo retouching, and programming; my skill sets include knowledge of HTML, XHTML, PHP, CSS, and JavaScript, as well
526: as experience with Dreamweaver, Frontpage, Fireworks, Apache, and MySQL. If you have a project and are interested in my work, feel free to
527: contact me using the form below, or on my cell – 804.363.8255.</p>
528:
529: <p><strong>WHAT'S KIGOE?</strong> KiGOE is my design firm, as it were. In addition to those projects on the left – which I did independent
530: of KiGOE – I also created many sites under the KiGOE name. KiGOE's taking a bit of a (well-deserved) rest right now, so I can't point you
531: to it's site; hopefully, I'll have screenshots of some KiGOE projects up soon.</p>
532: <p> </p>
533:
534: <h2>contact</h2>
535:
536: <div id="log">
537: <div id="log_res">
538: <!-- spanner -->
539: </div>
540: </div>
541:
542: <form id="contactForm" action="contact/send.php" method="get">
543:
544: <p>name: </p>
545: <input name="name" type="text" id="name" size="30" class="inpu" />
546: <p>email address: </p>
547: <input name="email" type="text" id="email" size="30" class="inpu" />
548: <p>message: </p>
549: <textarea name="message" cols="50" rows="10" class="message"></textarea>
550: <p>contact you by: <u><input type="radio" name="contact" value="email" />email</u> or <u><input type="radio" name="contact" value="other" />
551: other</u>: <input type="text" name="other_contact" class="inpu" />
552: <input name="Submit" type="submit"
553: value="Submit" class="submit" /></p>
554:
555: </form>
556:
557: <p> </p>
558:
559: </div><!-- info -->
560:
561: <div class="links">
562: <h2>Portfolio</h2>
563: <h3><a href="http://www.fandistrict.org/Fanflea/index.htm">Fan Flea</a></h3><p>A site run by the fan district association to enable members
564: of the fan to sell/buy/trade with their neighbors. Utilizes XHTML, CSS, and PHP. Created with Fireworks and Notepad.</p>
565: <h3><a href="http://150.174.33.57/facultypage/dphilipsen/">Dr. Dirk Philipsen</a></h3><p>The purpose for this site, kept in mind during
566: the design process, is to easily and accessibly provide information about Dr. Philipsen's classes and schedule while, at the same time,
567: being easy to maintain and
568: update. Utilizes XHTML and CSS. Created with Fireworks and Notepad.</p>
569: <h3><a href="port_screenshots/np.html">NP Home</a></h3><p>A personal page created to share photos from vacations and trips, as well as
570: for programming fun. Utilizes PHP, HTML, CSS, and Javascript. Created with Fireworks and Smultron.</p>
571: <h3><a href="port_screenshots/kigoehome.html">KiGOE Homepage</a></h3><p>KiGOE's last homepage, with an image layout for Helloworld, a
572: personalizable homepage. Images created with Fireworks.</p>
573: <h3><a href="port_screenshots/error.html">KiGOE 404 Error Page</a></h3><p>Fitting into the homepage's theme, this page was created to be
574: friendly and more helpful than those cryptic "404 Error" pages.</p>
575: <h3><a href="port_screenshots/chat.html">Chat</a></h3><p>Just for fun, I created a web-based chat system, shown here in action, using
576: PHP and Javascript.</p>
577: <h3><a href="port_screenshots/phnews.html">PH News</a></h3><p>The website for a monthly newsletter with political commentary. Utilizes
578: PHP, CSS, and HTML. Created with Dreamweaver and Fireworks.</p>
579: <h3><a href="port_screenshots/hill.html">Albert Hill Middle School</a></h3><p>A site providing information about Albert Hill Middle
580: School, a public middle school in Richmond. Utilizes XHTML and CSS. Layout created to be easy for Hill faculty and staff to manage.
581: Created with Fireworks and Dreamweaver.</p>
582:
583: <p> </p>
584:
585: </div><!-- links -->
586:
587: <div class="breakfloats"></div><!-- breakfloats -->
588:
589: <div><!-- div1 -->
590:
591: <p> </p>
592: <p> </p>
593: <p> </p>
594: <p> </p>
595:
596: </div><!-- div1 -->
597:
598:
599: <h5>Copyright 2006. Design by <a href="http://www.kigoe.com">Nik Philipsen</a>. This page should be <a href="http://validator.w3.org/check?uri=referer">
600: W3 HTML Standards Complient</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">W3 CSS Standards Complient</a>.</h5>
601:
602:
603:
604: <!-- Step from the road to the sea to the sky -->
605: <!-- And I do believe what we rely on -->
606:
607:
608:
609: </body>
610: </html>